Search completed in 1.28 seconds.
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
the html <in
put> element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of in
put data and control widgets are available, depending on the device and user agent.
... the <in
put> element is one of the most powerful and complex in all of html due to the sheer number of combinations of in
put types and attributes.
... <in
put> types how an <in
put> works varies considerably depending on the value of its type attribute, hence the different types are covered in their own separate reference pages.
...And 183 more matches
Inputs and input sources - Web APIs
to that end, webxr provides support for a variety of kinds of in
put devices.
... in this guide, we'll look at how to use webxr's in
put device management features to determine what in
put sources are available and how to then monitor those sources for in
puts in order to handle user interactivity with your virtual or augmented environment.
... in
puts in webxr fundamentally, in
puts in webxr fall into two basic categories: targeting and actions.
...And 99 more matches
<output>: The Output element - HTML: Hypertext Markup Language
the html out
put element (<out
put>) is a container element into which a site or app can inject the results of a calculation or the outcome of a user action.
... implicit aria role status permitted aria roles any dom interface htmlout
putelement attributes this element includes the global attributes.
... for a space-separated list of other elements’ ids, indicating that those elements contributed in
put values to (or otherwise affected) the calculation.
...And 8 more matches
InputEvent.inputType - Web APIs
the in
puttype read-only property of the in
putevent interface returns the type of change made to editible content.
... syntax var astring = in
putevent.in
puttype; value a domstring containing the type of in
put that was made.
...for a complete list of the available in
put types, see the attributes section of the in
put events level 1 spec.
...And 5 more matches
XRInputSourceEvent.inputSource - Web APIs
the xrin
putsourceevent interface's read-only in
putsource property specifies the xrin
putsource which generated the in
put event.
... this information lets you handle the event appropriately given the particulars of the user in
put device being manipulated.
... syntax let in
putsource = xrin
putsourceevent.in
putsource; value an xrin
putsource object identifying the source of the user in
put event.
...And 4 more matches
XRInputSourceEventInit.inputSource - Web APIs
the xrin
putsourceeventinit dictionary's in
putsource property is used when calling the xrin
putsourceevent() constructor to specify the xrin
putsource from which the newly-created event is being sent.
... of course, as a general rule, you won't need to create xrin
putsourceeventinit objects yourself.
... syntax let xrin
putsourceeventinit.in
putsource = xrin
putsource; let xrin
putsourceeventinit = { in
putsource: xrin
putsource }; let xrin
putsourceevent = new xrin
putsourceevent(type, { in
putsource: xrin
putsource }); value an xrin
putsource object indicating the source of the newly-created xrin
putsourceevent to be created.
...And 2 more matches
nsITextInputProcessor
dom/interfaces/base/nsitextin
putprocessor.idlscriptable this interface is a text in
put events synthesizer and manages its composition and modifier state 1.0 66 introduced gecko 38 inherits from: nsisupports last changed in gecko 38.0 (firefox 38.0 / thunderbird 38.0 / seamonkey 2.35) the motivation of this interface is to provide better api than nsidomwindowutils to dispatch key events and create, modify, and commit composition in higher level.
... you can create an instance of this interface with the following code: var tip = components.classes["@mozilla.org/text-in
put-processor;1"].
... createinstance(components.interfaces.nsitextin
putprocessor); next, you need to get the rights to create composition or dispatch keyboard events with beginin
puttransaction() or beginin
puttransactionfortests(): if (!tip.beginin
puttransaction(window, callback)) { return; } if beginin
puttransaction() or beginin
puttransactionfortests() returns false, it means that another instance of nsitextin
putprocessor has composition on the window or is dispatching an event.
...And 49 more matches
<input type="email"> - HTML: Hypertext Markup Language
<in
put> elements of type email are used to let the user enter and edit an e-mail address, or, if the multiple attribute is specified, a list of e-mail addresses.
... the in
put value is automatically validated to ensure that it's either empty or a properly-formatted e-mail address (or list of addresses) before the form can be submitted.
... on browsers that don't support in
puts of type email, a email in
put falls back to being a standard text in
put.
...And 48 more matches
<input type="number"> - HTML: Hypertext Markup Language
<in
put> elements of type number are used to let the user enter a number.
... on browsers that don't support in
puts of type number, a number in
put falls back to type text.
... events change and in
put supported common attributes autocomplete, list, placeholder, readonly idl attributes list, value, valueasnumber methods select(), stepup(), stepdown() value any floating-point number, or empty.
...And 48 more matches
<input type="url"> - HTML: Hypertext Markup Language
<in
put> elements of type url are used to let the user enter and edit a url.
... the in
put value is automatically validated to ensure that it's either empty or a properly-formatted url before the form can be submitted.
... on browsers that don't support in
puts of type url, a url in
put falls back to being a standard text in
put.
...And 48 more matches
<input type="time"> - HTML: Hypertext Markup Language
<in
put> elements of type time create in
put fields designed to let the user easily enter a time (hours and minutes, and optionally seconds).
...support is good in modern browsers, with safari being the sole major browser not yet implementing it; in safari, and any other browsers that don't support <time>, it degrades gracefully to <in
put type="text">.
...it also uses a 12- or 24-hour format for in
putting times, based on system locale.
...And 46 more matches
<input type="tel"> - HTML: Hypertext Markup Language
<in
put> elements of type tel are used to let the user enter and edit a telephone number.
... unlike <in
put type="email"> and <in
put type="url"> , the in
put value is not automatically validated to a particular format before the form can be submitted, because formats for telephone numbers vary so much around the world.
... despite the fact that in
puts of type tel are functionally identical to standard text in
puts, they do serve useful purposes; the most quickly apparent of these is that mobile browsers — especially on mobile phones — may opt to present a custom keypad optimized for entering phone numbers.
...And 45 more matches
<input type="search"> - HTML: Hypertext Markup Language
<in
put> elements of type search are text fields designed for the user to enter search queries into.
... these are functionally identical to text in
puts, but may be styled differently by the user agent.
... events change and in
put supported common attributes autocomplete, list, maxlength, minlength, pattern, placeholder, required, size.
...And 43 more matches
<input type="datetime-local"> - HTML: Hypertext Markup Language
<in
put> elements of type datetime-local create in
put controls that let the user easily enter both a date and a time, including the year, month, and day as well as the time in hours and minutes.
...in other browsers, these degrade gracefully to simple <in
put type="text"> controls.
... because of the limited browser support for datetime-local, and the variations in how the in
puts work, it may currently still be best to use a framework or library to present these, or to use a custom in
put of your own.
...And 42 more matches
<input type="text"> - HTML: Hypertext Markup Language
<in
put> elements of type text create basic single-line text fields.
... events change and in
put supported common attributes autocomplete, list, maxlength, minlength, pattern, placeholder, readonly, required and size idl attributes list, value methods select(), setrangetext() and setselectionrange().
... let thetext = mytextin
put.value; if no validation constraints are in place for the in
put (see validation for more details), the value may be an empty string ("").
...And 40 more matches
<input type="month"> - HTML: Hypertext Markup Language
<in
put> elements of type month create in
put fields that let the user enter a month and year allowing a month and year to be easily entered.
...in browsers that don't support month in
puts, the control degrades gracefully to a simple <in
put type="text">, although there may be automatic validation of the entered text to ensure it's formatted as expected.
... events change and in
put supported common attributes autocomplete, list, readonly, and step.
...And 39 more matches
<input type="date"> - HTML: Hypertext Markup Language
<in
put> elements of type="date" create in
put fields that let the user enter a date, either with a textbox that validates the in
put or a special date picker interface.
...the time and datetime-local in
put types support time and date+time in
put.
... the in
put ui generally varies from browser to browser; see browser compatibility for further details.
...And 38 more matches
The HTML5 input types - Learn web development
previous overview: forms next in the previous article we looked at the <in
put> element, covering the original values of the type attribute available since the early days of html.
... now we'll look at the functionality of newer form controls in detail, including some new in
put types, which were added in html5 to allow collection of specific types of data.
... prerequisites: basic com
puter literacy, and a basic understanding of html.
...And 36 more matches
<input type="week"> - HTML: Hypertext Markup Language
<in
put> elements of type week create in
put fields allowing easy entry of a year plus the iso 8601 week number during that year (i.e., week 1 to 52 or 53).
...in non-supporting browsers, the control degrades gracefully to function identically to <in
put type="text">.
... value a domstring representing a week and year, or empty events change and in
put supported common attributes autocomplete, list, readonly, and step idl attributes value, valueasdate, valueasnumber, and list.
...And 31 more matches
HTMLInputElement - Web APIs
the htmlin
putelement interface provides special properties and methods for manipulating the options, layout, and presentation of <in
put> elements.
...o,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlin
putelement" target="_top"><rect x="331" y="65" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="411" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlin
putelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties properti...
... properties that apply to any type of in
put element that is not hidden name string: returns / sets the element's name attribute, containing a name that identifies the element when submitting the form.
...And 30 more matches
<input type="file"> - HTML: Hypertext Markup Language
<in
put> elements with type="file" let the user choose one or more files from their device storage.
... events change and in
put supported common attributes required additional attributes accept, capture, files, multiple idl attributes files and value dom interface htmlin
putelement properties properties that apply only to elements of type file methods select() value a file in
put's value attribute contains a domstring that repr...
...the other files can be identified using the in
put's htmlin
putelement.files property.
...And 27 more matches
<input type="password"> - HTML: Hypertext Markup Language
<in
put> elements of type password provide a way for the user to securely enter a password.
... value a domstring representing a password, or empty events change and in
put supported common attributes autocomplete, in
putmode, maxlength, minlength, pattern, placeholder, readonly, required, and size idl attributes selectionstart, selectionend, selectiondirection, and value methods select(), setrangetext(), and setselectionrange() value the value attribute contains a domstring whose value is the current contents of the text e...
... additional attributes in addition to the attributes that operate on all <in
put> elements regardless of their type, password field in
puts support the following attributes: attribute description maxlength the maximum length the value may be, in utf-16 characters minlength the minimum length in characters that will be considered valid pattern a regular expression the value must match in order to be valid placeholder...
...And 26 more matches
<input type="range"> - HTML: Hypertext Markup Language
<in
put> elements of type range let the user specify a numeric value which must be no less than a given value, and no more than another given value.
...this is typically represented using a slider or dial control rather than a text entry box like the number in
put type.
... if the user's browser doesn't support type range, it will fall back and treat it as a text in
put.
...And 25 more matches
nsIOutputStream
xpcom/io/nsiout
putstream.idlscriptable an interface describing a writable stream of data.
... inherits from: nsisupports last changed in gecko 1.0 an out
put stream may be "blocking" or "non-blocking" (see the isnonblocking() method).
... a blocking out
put stream may suspend the calling thread in order to satisfy a call to close(), flush(), write(), writefrom(), or writesegments().
...And 23 more matches
<input type="hidden"> - HTML: Hypertext Markup Language
<in
put> elements of type hidden let web developers include data that cannot be seen or modified by users when a form is submitted.
...hidden in
puts are completely invisible in the rendered page, and there is no way to make it visible in the page's content.
... <in
put id="prodid" name="prodid" type="hidden" value="xm234jq"> value a domstring representing the value of the hidden data you want to pass back to the server.
...And 23 more matches
<input type="image"> - HTML: Hypertext Markup Language
<in
put> elements of type image are used to create graphical submit buttons, i.e.
... value <in
put type="image"> elements do not accept value attributes.
... additional attributes in addition to the attributes shared by all <in
put> elements, image button in
puts support the following attributes: attribute description alt alternate string to display when the image can't be shown formaction the url to which to submit the data formenctype the encoding method to use when submitting the form data formmethod the http method to use when submitting the form formnovalidate a boolean which, if present, indicates that the form shouldn't be validated before submission formtarget a string indicating a browsing context from where to load the results of submitting the form height the heigh...
...And 22 more matches
Enc Dec MAC Output Public Key as CSR
nss sample code 5: encryption/decryption and mac and out
put public as a csr.
... generates encryption/mac keys and out
puts public key as certificate signing request /* this source code form is subject to the terms of the mozilla public * license, v.
... "-p "); fprintf(stderr, "%-20s specify db password file [optional]\n\n", "-f "); fprintf(stderr, "%-20s specify noise file name [optional]\n\n", "-z "); fprintf(stderr, "%-21s specify subject\n\n", "-s "); fprintf(stderr, "%-21s specify certficate request file name\n\n", "-r "); fprintf(stderr, "%-21s specify an in
put file name\n\n", "-i "); fprintf(stderr, "%-21s specify an out
put file name\n\n", "-o "); fprintf(stderr, "%-7s for encrypt, it takes as an in
put file and produces\n", "note :"); fprintf(stderr, "%-7s .enc and .header as intermediate out
put files.\n\n", ""); fprintf(stderr, "%-7s for decrypt, it takes .enc and .header\n", ...
...And 21 more matches
<input type="color"> - HTML: Hypertext Markup Language
<in
put> elements of type color provide a user interface element that lets a user specify a color, either by using a visual color picker interface or by entering the color into a text field in #rrggbb hexadecimal format.
... the element's presentation may vary substantially from one browser and/or platform to another—it might be a simple textual in
put that automatically validates to ensure that the color information is entered in the proper format, or a platform-standard color picker, or some kind of custom color picker window.
... value a 7-character domstring specifying a <color> in lower-case hexadecimal notation events change and in
put supported common attributes autocomplete and list idl attributes list and value methods select() value the value of an <in
put> element of type color is always a domstring which contains a 7-character string specifying an rgb color in hexadecimal format.
...And 21 more matches
<input type="submit"> - HTML: Hypertext Markup Language
<in
put> elements of type submit are rendered as buttons.
... <in
put type="submit" value="send request"> value a domstring used as the button's label events click supported common attributes type and value idl attributes value methods none value an <in
put type="submit"> element's value attribute contains a domstring which is displayed as the button's label.
... <in
put type="submit" value="send request"> if you don't specify a value, the button will have a default label, chosen by the user agent.
...And 20 more matches
<input type="checkbox"> - HTML: Hypertext Markup Language
<in
put> elements of type checkbox are rendered by default as boxes that are checked (ticked) when activated, like you might see in an official government paper form.
... events change and in
put supported common attributes checked idl attributes checked, indeterminate and value methods select() value a domstring representing the value of the checkbox.
...take the following example: <form> <div> <in
put type="checkbox" id="subscribenews" name="subscribe" value="newsletter"> <label for="subscribenews">subscribe to newsletter?</label> </div> <div> <button type="submit">subscribe</button> </div> </form> in this example, we've got a name of subscribe, and a value of newsletter.
...And 17 more matches
HTMLOutputElement - Web APIs
the htmlout
putelement interface provides properties and methods (beyond those inherited from htmlelement) for manipulating the layout and presentation of <out
put> elements.
...,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlelement</text></a><polyline points="491,25 501,20 501,30 491,25" stroke="#d4dde4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#d4dde4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#d4dde4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#d4dde4"/><a xlink:href="/docs/web/api/htmlout
putelement" target="_top"><rect x="321" y="65" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlout
putelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this inte...
... htmlout
putelement.defaultvalue a domstring representing the default value of the element, initially the empty string.
...And 16 more matches
Window.getComputedStyle() - Web APIs
the window.getcom
putedstyle() method returns an object containing the values of all css properties of an element, after applying active stylesheets and resolving any basic com
putation those values may contain.
... syntax var style = window.getcom
putedstyle(element [, pseudoelt]); element the element for which to get the com
puted style.
... examples in this example we style a <p> element, then retrieve those styles using getcom
putedstyle(), and print them into the text content of the <p>.
...And 15 more matches
nsIScriptableInputStream
xpcom/io/nsiscriptablein
putstream.idlscriptable this interface provides scriptable access to a nsiin
putstream instance.
... inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview unsigned long available(); void close(); void init(in nsiin
putstream ain
putstream); string read(in unsigned long acount); acstring readbytes(in unsigned long acount); methods available() return the number of bytes currently available in the stream.
...init() wrap the given nsiin
putstream with this nsiscriptablein
putstream.
...And 13 more matches
<input type="button"> - HTML: Hypertext Markup Language
<in
put> elements of type button are rendered as simple push buttons, which can be programmed to control custom functionality anywhere on a webpage as required when assigned an event handler function (typically for the click event).
... note: while <in
put> elements of type button are still perfectly valid html, the newer <button> element is now the favored way to create buttons.
... value a domstring used as the button's label events click supported common attributes type, and value idl attributes value methods none value an <in
put type="button"> elements' value attribute contains a domstring that is used as the button's label.
...And 13 more matches
<input type="radio"> - HTML: Hypertext Markup Language
<in
put> elements of type radio are generally used in radio groups—collections of radio buttons describing a set of related options.
... events change and in
put supported common attributes checked and value idl attributes checked and value methods select() value the value attribute is a domstring containing the radio button's value.
... the resulting html looks like this: <form> <p>please select your preferred contact method:</p> <div> <in
put type="radio" id="contactchoice1" name="contact" value="email"> <label for="contactchoice1">email</label> <in
put type="radio" id="contactchoice2" name="contact" value="phone"> <label for="contactchoice2">phone</label> <in
put type="radio" id="contactchoice3" name="contact" value="mail"> <label for="contactchoice3">mail</label> </div> <div> <button type="...
...And 13 more matches
nsIInputStream
xpcom/io/nsiin
putstream.idlscriptable this interface represents a readable stream of data.
... inherits from: nsisupports last changed in gecko 17.0 (firefox 17.0 / thunderbird 17.0 / seamonkey 2.14) an in
put stream may be "blocking" or "non-blocking" (see the isnonblocking() method).
... a blocking in
put stream may suspend the calling thread in order to satisfy a call to close(), available(), read(), or readsegments().
...And 12 more matches
XRInputSource.targetRaySpace - Web APIs
the read-only xrin
putsource property targetrayspace returns an xrspace (typically an xrreferencespace) representing the position and orientation of the target ray in the virtual space.
...these values, interpreted in the context of the in
put source's targetraymode, can be used both to fully interpret the device as an in
put source.
... <<<--- needs diagram showing targetrayspace relative to gripspace and world space --->>> to obtain an xrspace representing the in
put controller's position and orientation in virtual space, use the gripspace property.
...And 12 more matches
<kbd>: The Keyboard Input element - HTML: Hypertext Markup Language
the html keyboard in
put element (<kbd>) represents a span of inline text denoting textual user in
put from a keyboard, voice in
put, or any other text entry device.
... <kbd> may be nested in various combinations with the <samp> (sample out
put) element to represent various forms of in
put or out
put based on visual cues.
... usage notes other elements can be used in tandem with <kbd> to represent more specific scenarios: nesting a <kbd> element within another <kbd> element represents an actual key or other unit of in
put as a portion of a larger in
put.
...And 12 more matches
nsIAsyncInputStream
xpcom/io/nsiasyncin
putstream.idlscriptable please add a summary to this article.
... inherits from: nsiin
putstream last changed in gecko 1.7 if an in
put stream is non-blocking, it may return ns_base_stream_would_block when read.
...if the stream implements nsiasyncin
putstream, then the caller can use this interface to request an asynchronous notification when the stream becomes readable or closed (via the asyncwait() method).
...And 10 more matches
nsIAsyncOutputStream
xpcom/io/nsiasyncout
putstream.idlscriptable please add a summary to this article.
... inherits from: nsiout
putstream last changed in gecko 1.7 if an out
put stream is non-blocking, it may return ns_base_stream_would_block when written to.
...if the stream implements nsiasyncout
putstream, then the caller can use this interface to request an asynchronous notification when the stream becomes writable or closed (via the asyncwait() method).
...And 10 more matches
XRInputSource.targetRayMode - Web APIs
the read-only xrin
putsource property targetraymode indicates the method by which the target ray for the in
put source should be generated and how it should be presented to the user.
... syntax let raymode = xrin
putsource.targetraymode; value a domstring taken from the xrtargetraymode enumerated type, indicating which method to use when generating and presenting the target ray to the user.
... the possible values are: gaze the user is using a gaze-tracking system (or gaze in
put) which detects the direction in which the user is looking.
...And 10 more matches
XRInputSourceEvent - Web APIs
the webxr device api's xrin
putsourceevent interface describes an event which has occurred on a webxr user in
put device such as a hand controller, gaze tracking system, or motion tracking system.
... more specifically, they represent a change in the state of an xrin
putsource.
... to learn more about handling in
puts in a webxr project, see the article in
puts and in
put sources.
...And 10 more matches
XRInputSource - Web APIs
the webxr device api's xrin
putsource interface describes a single source of control in
put which is part of the user's webxr-compatible virtual or augmented reality system.
... properties gamepad read only a gamepad object describing the state of the buttons and axes on the xr in
put source, if it is a gamepad or comparable device.
... note: while xrin
putsource uses the gamepad interface from the gamepad api, this in
put device is strictly associated with the webxr hardware and is not a general-purpose gaming device.
...And 9 more matches
inputmode - HTML: Hypertext Markup Language
the in
putmode global attribute is an enumerated attribute that hints at the type of data that might be entered by the user while editing the element or its contents.
...for when the page implements its own keyboard in
put control.
... text (default value) standard in
put keyboard for the user's current locale.
...And 9 more matches
Using Vue computed properties - Learn web development
previous overview: client-side javascript frameworks next in this article we'll add a counter that displays the number of completed todo items, using a feature of vue called com
puted properties.
... objective: to learn how to use vue com
puted properties.
... using com
puted properties the aim here is to add a summary count of our to-do list.
...And 8 more matches
HTMLInputElement.stepDown() - Web APIs
the htmlin
putelement.stepdown([n]) method decrements the value of a numeric type of <in
put> element by the value of the step attribute or up to n multiples of the step attribute if a number is passed as the parameter.
... valid on all numeric, date, and time in
put types that support the step attribute, includingdate, month, week, time, datetime-local, number, and range.
... given <in
put id="mytime" type="time" max="17:00" step="900" value="17:00">, invoking mytime.step(3) will change the value to 16:15, decrementing the time by 3 * 900, or 45 minutes.
...And 8 more matches
InputEvent - Web APIs
the in
putevent interface represents an event notifying of editable content change.
...="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/in
putevent" target="_top"><rect x="231" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">in
putevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor in
putevent() cr...
...eates an in
putevent object.
...And 8 more matches
XRInputSourceArray - Web APIs
the interface xrin
putsourcearray represents a live list of webxr in
put sources, and is used as the return value of the xrsession property in
putsources.
... each entry is an xrin
putsource representing one in
put device connected to the webxr system.
... in addition to being able to access the in
put sources in the list using standard array notation (that is, with index numbers insize square brackets), methods are available to allow the use of iterators and the foreach() method is also available.
...And 8 more matches
XRInputSourceEvent() - Web APIs
the xrin
putsourceevent() constructor creates and returns a new xrin
putsourceevent object describing an event (state change) which has occurred on a webxr user in
put device represented by an xrin
putsource.
... syntax newin
putsourceevent = new xrin
putsourceevent(type, eventinitdict); parameters type a domstring indicating which of the in
put source events the new object will represent.
... eventinitdict an object based on the xrin
putsourceeventinit dictionary which contains the values to assign to the new event's properties.
...And 8 more matches
User input and controls - Developer guides
modern web user in
put goes beyond simple mouse and keyboard: think of touchscreens for example.
... this article provides recommendations for managing user in
put and implementing controls in open web apps, along with faqs, real-world examples, and links to further information for anyone needing more detailed information on the underlying technologies.
... user in
put and controls workflow the following diagram illustrates the typical workflow for implementing user in
put mechanisms: first of all, you need to decide which in
put mechanisms you want to cover in your application out of mouse, keyboard, finger touch and so on.
...And 8 more matches
<input type="reset"> - HTML: Hypertext Markup Language
<in
put> elements of type "reset" are rendered as buttons, with a default click event handler that resets all of the in
puts in the form to their initial values.
... value a domstring used as the button's label events click supported common attributes type and value idl attributes value methods none value an <in
put type="reset"> element's value attribute contains a domstring that is used as the button's label.
... <in
put type="reset" value="reset the form"> if you don't specify a value, you get an button with the default label (typically "reset," but this will vary depending on the user agent): <in
put type="reset"> using reset buttons <in
put type="reset"> buttons are used to reset forms.
...And 8 more matches
<xsl:output> - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the <xsl:out
put> element controls the characteristics of the out
put document.
... syntax <xsl:out
put method="xml" | "html" | "text" version=string encoding=string omit-xml-declaration="yes" | "no" standalone="yes" | "no" doctype-public=string doctype-system=string cdata-section-elements=list-of-names indent="yes" | "no" media-type=string /> required attributes none.
... optional attributes method specifies out
put format.
...And 8 more matches
XForms Input Element - Archive of obsolete content
attributes ui common appearance - the value of this attribute gives a hint to the xforms processor as to which type of widget(s) to use to represent this control accesskey - used to specify the keyboard shortcut for focusing this control single-node binding special in
putmode - not supported for this control incremental - supported.
... mozilla extensions labelposition - only for boolean types: show the label before or after the checkbox (see below) type restrictions the in
put element can be bound to a node containing simple content of any data type except xsd:base64binary, xsd:hexbinray or any data type derived from these.
... representations the xforms in
put element can be represented by the following widgets for the spcified data types (or types derived from these data types): text field - the default widget when no type is specified or the data is of type xsd:string (xhtml/xul) checkbox - used for xsd:boolean instance data.
...And 7 more matches
IDBObjectStore.put() - Web APIs
the
put() method of the idbobjectstore interface updates a given record in a database, or inserts a new record if the given item does not already exist.
... the
put method is an update or insert method.
... bear in mind that if you have a idbcursor to the record you want to update, updating it with idbcursor.update() is preferable to using idbobjectstore.
put().
...And 7 more matches
XRInputSource.handedness - Web APIs
the read-only xrin
putsource property handedness indicates which of the user's hands the webxr in
put source is associated with, or if it's not associated with a hand at all.
... syntax let hand = xrin
putsource.handedness; value a domstring indicating whether the in
put controller is held in one of the user's hands, and if it is, which hand.
... the value, which comes from the xrhandedness enumerated type, is one of the following: none the in
put controller is not associated with one of the user's hands.
...And 7 more matches
XRInputSourcesChangeEvent - Web APIs
the webxr device api interface xrin
putsourceschangeevent is used to represent the in
putsourceschange event sent to an xrsession when the set of available webxr in
put controllers changes.
... constructor xrin
putsourceschangeevent() creates and returns a new xrin
putsourceschangeevent object configured as indicated by the given xrin
putsourceschangeeventinit object.
... the specified type must be in
putsourceschange, which is the only event that uses this interface.
...And 7 more matches
Computed value - CSS: Cascading Style Sheets
the com
puted value of a css property is the value that is transferred from parent to child during inheritance.
... doing the com
putation needed to reach the value described in the "com
puted value" line in the property's definition table.
... the com
putation needed to reach a property's com
puted value typically involves converting relative values (such as those in em units or percentages) to absolute values.
...And 7 more matches
nsIBinaryOutputStream
xpcom/io/nsibinaryout
putstream.idlscriptable this interface allows writing of primitive data types (integers, floating-point values, booleans, and so on.) to a stream in a binary, untagged, fixed-endianness format.
...out
put is written in big-endian order (high-order byte first), as this is traditional network order.
... inherits from: nsiout
putstream last changed in gecko 1.7 method overview void setout
putstream(in nsiout
putstream aout
putstream); void write8(in pruint8 abyte); void write16(in pruint16 a16); void write32(in pruint32 a32); void write64(in pruint64 a64); void writeboolean(in prbool aboolean); void writebytearray([array, size_is(alength)] in pruint8 abytes, in pruint32 alength); void writebytes(alength)] in string astring, in pruint32 alength); void writedouble(in double adouble); void writefloat(in float afloat); void writestringz(in string astring); void writeutf8z(in wstring astring); void writewstringz(in wstring astring); methods setout
putstream() sets the stream to which out
put is directed.
...And 6 more matches
HTMLInputElement.setSelectionRange() - Web APIs
the htmlin
putelement.setselectionrange() method sets the start and end positions of the current text selection in an <in
put> or <textarea> element.
... this method updates the htmlin
putelement.selectionstart, selectionend, and selectiondirection properties in one call.
... note that accordingly to the whatwg forms spec selectionstart, selectionend properties and setselectionrange method apply only to in
puts of types text, search, url, tel and password.
...And 6 more matches
HTMLInputElement.stepUp() - Web APIs
the htmlin
putelement.stepup() method increments the value of a numeric type of <in
put> element by the value of the step attribute, or the default step value if the step attribute is not explicitly set.
... in
put type default step value example step declaration date 1 (day) 7 day (one week) increments: <in
put type="date" min="2019-12-25" step="7"> month 1 (month) 12 month (one year) increments: <in
put type="month" min="2019-12" step="12"> week 1 (week) two week increments: <in
put type="week" min="2019-w23" step="2"> time 60 (seconds) 900 second (15 minute) increments: <in
put type="time" min="09:00" step="900"> datetime-local 1 (day) same day of the week: <in
put type="datetime-local" min="019-12-25t19:30" step="7"> ...
... number 1 0.1 increments <in
put type="number" min="0" step="0.1" max="10"> range 1 increments by 2: <in
put type="range" min="0" step="2" max="10"> the method, when invoked, changes the form control's value by the value given in the step attribute, multiplied by the parameter, within the constraints set on the form control.
...And 6 more matches
AudioContext.getOutputTimestamp() - Web APIs
the getout
puttimestamp() property of the audiocontext interface returns a new audiotimestamp object containing two audio timestamp values relating to the current audio context.
... the two values are as follows: audiotimestamp.contexttime: the time of the sample frame currently being rendered by the audio out
put device (i.e., out
put audio stream position), in the same units and origin as the context's audiocontext.currenttime.
... audiotimestamp.performancetime: an estimation of the moment when the sample frame corresponding to the stored contexttime value was rendered by the audio out
put device, in the same units and origin as performance.now().
...And 5 more matches
Cache.put() - Web APIs
the
put() method of the cache interface allows key/value pairs to be added to the current cache object.
... fetch(url).then(function(response) { if (!response.ok) { throw new typeerror('bad response status'); } return cache.
put(url, response); }) note:
put() will overwrite any key/value pair previously stored in the cache that matches the request.
... note: cache.add/cache.addall do not cache responses with response.status values that are not in the 200 range, whereas cache.
put lets you store any request/response pair.
...And 5 more matches
InputDeviceCapabilities - Web APIs
the in
putdevicecapabilities interface of the in
put device capabilities api provides information about the physical device or a group of related devices responsible for generating in
put events.
... events caused by the same physical in
put device get the same instance of this object, but the converse isn't true.
... for example, two mice with the same capabilities in a system may appear as a single in
putdevicecapabilities instance.
...And 5 more matches
XRInputSourceArray.values() - Web APIs
the xrin
putsourcearray method values() returns a javascript iterator that can walk over the list of xrin
putsource objects contained in the array, from first to last.
... syntax xrin
putsourcearray.values(); parameters none.
... return value a javascript iterator that can be used to walk through the list of xrin
putsource objects in the array, starting with the first entry (at index 0) and proceeding straight through the list.
...And 5 more matches
XRInputSourcesChangeEvent() - Web APIs
the xrin
putsourceschangeevent() constructor creates and returns a new xrin
putsourceschangeevent object, representing an update to the list of available webxr in
put devices.
... syntax newin
putsourceschangeevent = new xrin
putsourceschangeevent(type, eventinitdict); parameters type a domstring indicating the type of event which has occurred.
... this string must always be in
putsourceschange.
...And 5 more matches
-moz-user-input - CSS: Cascading Style Sheets
in mozilla applications, -moz-user-in
put determines if an element will accept user in
put.
... /* keyword values */ -moz-user-in
put: none; -moz-user-in
put: enabled; -moz-user-in
put: disabled; /* global values */ -moz-user-in
put: inherit; -moz-user-in
put: initial; -moz-user-in
put: unset; for elements that normally take user in
put, such as a <textarea>, the initial value of -moz-user-in
put is enabled.
... note: -moz-user-in
put was one of the proposals leading to the proposed css 3 user-in
put property, which has not yet reached candidate recommendation (call for implementations).
...And 5 more matches
Input Controls - Archive of obsolete content
looking for a guide to using in
put controls and forms on the web?
... text entry fields html has an in
put element which can be used for text entry controls.
...textboxes accept many of the same attributes as html in
put controls.
...And 4 more matches
XForms Output Element - Archive of obsolete content
attributes ui common appearance - the value of this attribute gives a hint to the xforms processor as to which type of widget(s) to use to represent this control accesskey - used to specify the keyboard shortcut for focusing this control single-node binding special value - xpath expression whose evaluation result is used as the out
put's value.
... type restrictions the out
put element can be bound to a node containing simple content of any data type.
... representations the xforms out
put element can be represented by the following widgets for the specified data types (or types derived from these data types): text - default representation for instance data of most types, especially static text (xhtml/xul).
...And 4 more matches
JS_PutEscapedString
syntax size_t js_
putescapedstring(jscontext *cx, char *buffer, size_t size, jsstring *str, char quote); size_t js_
putescapedflatstring(char *buffer, size_t size, jsflatstring *str, char quote); name type description cx jscontext * a context.
... description js_
putescapedstring and js_
putescapedstring write str into buffer escaping any non-printable or non-ascii character using \escapes for js string literals.
...returns the length of the written out
put, not including the nul.
...And 4 more matches
JS_SetRegExpInput
set the pending regexp in
put.
... syntax bool js_setregexpin
put(jscontext *cx, js::handleobject obj, js::handlestring in
put, bool multiline); name type description cx jscontext * the context.
... in
put js::handlestring a pointer to the in
put string.
...And 4 more matches
The JavaScript input interpreter - Firefox Developer Tools
the expression you type is echoed under the in
put prompt, followed by the result.
... if your in
put does not appear to be complete when you press enter, then the console treats this as shift+enter , enabling you to finish your in
put.
... for example, if you type: function foo() { and then enter, the console does not immediately execute the in
put, but behaves as if you had pressed shift+enter , so you can finish entering the function definition.
...And 4 more matches
CanvasRenderingContext2D.putImageData() - Web APIs
the canvasrenderingcontext2d.
putimagedata() method of the canvas 2d api paints data from the given imagedata object onto the canvas.
... you can find more information about
putimagedata() and general manipulation of canvas contents in the article pixel manipulation with canvas.
... syntax void ctx.
putimagedata(imagedata, dx, dy); void ctx.
putimagedata(imagedata, dx, dy, dirtyx, dirtyy, dirtywidth, dirtyheight); parameters imagedata an imagedata object containing the array of pixel values.
...And 4 more matches
HTMLElement: input event - Web APIs
the in
put event fires when the value of an <in
put>, <select>, or <textarea> element has been changed.
... bubbles yes cancelable no interface in
putevent event handler property globaleventhandlers.onin
put the event also applies to elements with contenteditable enabled, and to any element when designmode is turned on.
... for <in
put> elements with type=checkbox or type=radio, the in
put event should fire whenever a user toggles the control, per the html5 specification.
...And 4 more matches
XRInputSourceArray.entries() - Web APIs
the xrin
putsourcearray interface's entries() method returns a javascript iterator which can then be used to iterate over the key/value pairs in the in
put source array.
... each item in the array is an xrin
putsource object.
... syntax let in
putsourceiterator = xrin
putsourcearray.entries(); for (let entry of xrin
putsourcearray.entries()) { /* ...
...And 4 more matches
XRInputSourceArray.forEach() - Web APIs
the xrin
putsourcearray method foreach() executes the specified callback once for each in
put source in the array, starting at index 0 and progressing until the end of the list.
... syntax xrin
putsourcearray.foreach(callback, thisarg); parameters callback a function to execute once for each entry in the array xrin
putsourcearray.
... the callback accepts up to three parameters: currentvalue a xrin
putsource object which is the value of the item from within the xrin
putsourcearray which is currently being processed.
...And 4 more matches
XRInputSourceArray.keys() - Web APIs
the keys() method in the xrin
putsourcearray interface returns a javascript iterator which can then be used to iterate over the keys used to reference each item in the array of in
put sources.
... syntax xrin
putsourcearray.keys(); parameters none.
... return value a javascript iterator that can be used to walk through the keys for each entry in the list of in
put sources.
...And 4 more matches
XRSession.inputSources - Web APIs
the read-only in
putsources property of the xrsession interface returns an xrin
putsourcearray object which lists all controllers and in
put devices which are expressly associated with the xr device and are currently available.
... these controllers may include handheld controllers, xr-equipped gloves, optically tracked hands, and gaze-based in
put methods.
... keyboards, gamepads, and mice are not considered webxr in
put sources.
...And 4 more matches
<samp>: The Sample Output element - HTML: Hypertext Markup Language
the html sample element (<samp>) is used to enclose inline text which represents sample (or quoted) out
put from a com
puter program.
... the css to override the default font face would look like this: samp { font-family: "courier"; } if you need an element which will serve as a container for out
put generated by your website or app's javascript code, you should instead use the <out
put> element.
... examples basic example in this simple example, a paragraph includes an example of the out
put of a program.
...And 4 more matches
nsIConverterOutputStream
xpcom/io/nsiconverterout
putstream.idlscriptable this interface allows writing strings to a stream, doing automatic character encoding conversion.
... 1.0 66 introduced gecko 1.8 inherits from: nsiunicharout
putstream last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) implemented by: @mozilla.org/intl/converter-out
put-stream;1.
... to create an instance, use: var converterout
putstream = components.classes["@mozilla.org/intl/converter-out
put-stream;1"] .createinstance(components.interfaces.nsiconverterout
putstream); method overview void init(in nsiout
putstream aoutstream, in string acharset, in unsigned long abuffersize, in prunichar areplacementcharacter); methods init() initialize this stream.
...And 3 more matches
nsIMIMEInputStream
netwerk/base/public/nsimimein
putstream.idlscriptable the mime stream separates headers and a datastream.
... inherits from: nsiin
putstream last changed in gecko 1.3 implemented by: @mozilla.org/network/mime-in
put-stream;1.
... to create an instance, use: var mimein
putstream = components.classes["@mozilla.org/network/mime-in
put-stream;1"] .createinstance(components.interfaces.nsimimein
putstream); method overview void addheader(in string name, in string value); void setdata(in nsiin
putstream stream); attributes attribute type description addcontentlength boolean when true a "content-length" header is automatically added to the stream.
...And 3 more matches
nsITextInputProcessorCallback
dom/interfaces/base/nsitextin
putprocessor.idlscriptable a callback interface for nsitextin
putprocessor user 1.0 66 introduced gecko 38 inherits from: nsisupports last changed in gecko 38.0 (firefox 38.0 / thunderbird 38.0 / seamonkey 2.35) nsitextin
putprocessorcallback is defined for receiving requests and notifications to ime from gecko.
..._hasfocus = false; break; case "notify-detached": this._hasfocus = false; this._hasrightstocompose = false; break; } return true; } catch (e) { return false; } }, setcomposition: function simpleime_setcomposition(atext, aclauses, acaret) { if (!this._tip) { this._tip = components.classes["@mozilla.org/text-in
put-processor;1"].
... createinstance(components.interfaces.nsitextin
putprocessor); } if (!this._tip.beginin
puttransaction(window, this._callback)) { return false; } ...
...And 3 more matches
Element.computedStyleMap() - Web APIs
the com
putedstylemap() method of the element interface returns a stylepropertymapreadonly interface which provides a read-only representation of a css declaration block that is an alternative to cssstyledeclaration.
... syntax var stylepropertymapreadonly = element.com
putedstylemap() parameters none.
... <p> <a href="https://example.com">link</a> </p> <dl id="regurgitation"></dl> we add a little bit of css a { --colour: red; color: var(--colour); } we add javascript to grab our link and return back a definition list of all the css property values using com
putedstylemap().
...And 3 more matches
GlobalEventHandlers.oninput - Web APIs
the onin
put property of the globaleventhandlers mixin is an eventhandler that processes in
put events on the <in
put>, <select>, and <textarea> elements.
... note: unlike onin
put, the onchange event handler is not necessarily called for each alteration to an element's value.
... syntax target.onin
put = functionref; value functionref is a function name or a function expression.
...And 3 more matches
validityState.badInput - Web APIs
the read-only badin
put property of a validitystate object indicates if the user has provided in
put that the browser is unable to convert.
... for example, if you have a number in
put element whose content is a string.
... note: while this is unsupported in internet explorer, any non-numeric value will be dismissed from the field if it is a number in
put.
...And 3 more matches
XRInputSource.gripSpace - Web APIs
the read-only xrin
putsource property gripspace returns an xrspace whose native origin tracks the pose used to render virtual objects so they appear to be held in (or part of) the user's hand.
... syntax var xrspace = xrin
putsource.gripspace; value an xrspace object representing the position and orientation of the in
put device in virtual space, suitable for rendering an image of the device into the scene.
... gripspace is null if the in
put source is inherently untrackable.
...And 3 more matches
XRInputSource.profiles - Web APIs
the read-only xrin
putsource property profiles returns an array of strings, each describing a configuration profile for the in
put source.
... syntax let profilelist = xrin
putsource.profiles; value an array of domstring objects, each describing one configuration profile for the in
put device represented by the xrin
putsource object.
... each in
put profile specifies the preferred visual representation and behavior of the in
put source.
...And 3 more matches
XRSession.oninputsourceschange - Web APIs
the onin
putsourcechange attribute of the xrsession object is the event handler for the in
putsourcechange event, which is dispatched when session's list of active xr in
put sources has changed.
... the list itself is accessible via xrsession.in
putsources.
... note: the xrin
putsource objects in xrsession.in
putsources array are "live", so values within them are updated in-place.
...And 3 more matches
nsIBinaryInputStream
xpcom/io/nsibinaryin
putstream.idlscriptable this interface allows consumption of primitive data types from a "binary stream" containing untagged, big-endian binary data, that is as produced by an implementation of nsibinaryout
putstream.
... inherits from: nsiin
putstream last changed in gecko 1.7 method overview pruint8 read8(); pruint16 read16(); pruint32 read32(); pruint64 read64(); unsigned long readarraybuffer(in pruint32 alength, in jsval aarraybuffer); prbool readboolean(); void readbytearray(in pruint32 alength, [array, size_is(alength), retval] out pruint8 abytes); void readbytes(in pruint32 alength, [size_is(alength), retval] out string astring); acstring readcstring(); double readdouble(); float readfloat(); ...
... astring readstring(); void setin
putstream(in nsiin
putstream ain
putstream); methods read8() reads from the stream.
...And 2 more matches
nsIConverterInputStream
xpcom/io/nsiconverterin
putstream.idlscriptable a unichar in
put stream that wraps an in
put stream.
... 1.0 66 introduced gecko 1.8 inherits from: nsiunicharin
putstream last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) implemented by: @mozilla.org/intl/converter-in
put-stream;1.
... to create an instance, use: var converterin
putstream = components.classes["@mozilla.org/intl/converter-in
put-stream;1"] .createinstance(components.interfaces.nsiconverterin
putstream); method overview void init(in nsiin
putstream astream, in string acharset, in long abuffersize, in prunichar areplacementchar); constants constant value description default_replacement_character 0xfffd default replacement character value.
...And 2 more matches
nsITextInputProcessorNotification
dom/interfaces/base/nsitextin
putprocessorcallback.idlscriptable this interface of a request or notification to ime 1.0 66 introduced gecko 38 inherits from: nsisupports last changed in gecko 38.0 (firefox 38.0 / thunderbird 38.0 / seamonkey 2.35) this interface tells details of a request or notification to ime.
...so, nsitextin
putprocessorcallback won't be changed for keeping backward compatibility.
... when this is requested, the callback should commit composition synchronously, i.e., nsitextin
putprocessor.commitcomposition() should be called.
...And 2 more matches
AnimationEffect.getComputedTiming() - Web APIs
the getcom
putedtiming() method of the animationeffect interface returns the calculated timing properties for this animation effect.
... these values are comparable to the com
puted styles of an element returned using window.getcom
putedstyle(elem).
... syntax var currenttimevalues = animation.getcom
putedtiming(); parameters none.
...And 2 more matches
HTMLInputElement: search event - Web APIs
the search event is fired when a search is initiated usinng an <in
put> element of type="search".
... bubbles yes cancelable no interface event event handler property onsearch there are several ways a search can be initiated, such as by pressing enter while the <in
put> is focused, or, if the incremental attribute is present, after a ua-defined timeout elapses since the most recent keystroke (with new keystrokes resetting the timeout so the firing of the event is debounced).
... current ua implementations of <in
put type="search"> have an additional control to clear the field.
...And 2 more matches
HTMLInputElement.webkitEntries - Web APIs
the read-only webkitentries property of the htmlin
putelement interface contains an array of file system entries (as objects based on filesystementry) representing files and/or directories selected by the user using an <in
put> element of type file, but only if that selection was made using drag-and-drop: selecting a file in the dialog will leave the property empty (bug 1326031).
...this means the <in
put> element was configured to let the user choose directories.
... syntax var entries = htmlin
putelement.webkitentries; value an array of objects based on filesystementry, each representing one file which is selected in the <in
put> element.
...And 2 more matches
InputDeviceCapabilities API - Web APIs
the in
putdevicecapabilities api provides details about the underlying sources of in
put events.
... in
put device capabilities concepts and usage because dom events abstract device in
put, they provide no way to learn what device or type of device fired an event.
... the in
putdevicecapabilities api addresses this problem by abstracting the capabilities of in
put devices.
...And 2 more matches
InputEvent() - Web APIs
the in
putevent() constructor creates a new in
putevent.
... syntax event = new in
putevent(typearg, in
puteventinit); values typearg is a domstring representing the name of the event.
... in
puteventinitoptional is a in
puteventinit dictionary, having the following fields: in
puttype: (optional) a string specifying the type of change for editible content such as, for example, inserting, deleting, or formatting text.
...And 2 more matches
Window.getDefaultComputedStyle() - Web APIs
the getdefaultcom
putedstyle() method gives the default com
puted values of all the css properties of an element, ignoring author styling.
... syntax var style = window.getdefaultcom
putedstyle(element [, pseudoelt]); parameters element the element for which to get the com
puted style.
...the object is of the same type as the object returned by window.getcom
putedstyle(), but only takes into account user-agent and user rules.
...And 2 more matches
XRInputSourceArray.length - Web APIs
the read-only length property returns an integer value indicating the number of items in the in
put source list represented by the xrin
putsourcearray object.
... syntax let in
putsourcecount = xrin
putsourcearray.length; value an integer value indicating the number of xrin
putsource objects representing webxr in
put sources are includled in the array.
... examples in this example, a game that requires at least one in
put source uses length to check this before proceeding to allow the user to play the game.
...And 2 more matches
RegExp.input ($_) - JavaScript
the non-standard in
put property is a static property of regular expressions that contains the string against which a regular expression is matched.
... description the in
put property is static, it is not a property of an individual regular expression object.
... instead, you always use it as regexp.in
put or regexp.$_.
...And 2 more matches
nsScriptableInputStream
« xpcom api reference summary a component implementing nsiscriptablein
putstream.
... class id 7225c040-a9bf-11d3-a197-0050041caf44 contractid @mozilla.org/scriptablein
putstream;1 supported interfaces nsiscriptablein
putstream, nsiin
putstream remarks this component should be accessed via the xpcom component manager.
... example code const nsiscriptablein
putstream = components.interfaces.nsiscriptablein
putstream; function consumestream(in
putstream) { var factory = components.classes["@mozilla.org/scriptablein
putstream;1"]; var sis = factory.createinstance(nsiscriptablein
putstream); sis.init(in
putstream); try { while (true) { var chunk = sis.read(512); if (chunk.length == 0) break; // ok, chunk now contains a portion of the stream's data.
... } } catch (e) { dump("error: failed reading from stream:\n" + e + "\n"); } } see also nsiscriptablein
putstream ...
nsIInputStreamCallback
xpcom/io/nsiasyncin
putstream.idlscriptable this is a companion interface for nsiasyncin
putstream.asyncwait().
... inherits from: nsisupports last changed in gecko 1.7 method overview void onin
putstreamready(in nsiasyncin
putstream astream); methods onin
putstreamready() called to indicate that the stream is either readable or closed.
... void onin
putstreamready( in nsiasyncin
putstream astream ); parameters astream the stream whose nsiasyncin
putstream.asyncwait() method was called.
... see also nsiasyncin
putstream.asyncwait() ...
Rich output - Firefox Developer Tools
in particular, it: provides extra information for certain types enables detailed examination of the object's properties provides richer information for dom elements, and enables you to select them in the inspector type-specific rich out
put the web console provides rich out
put for many object types, including the following: object array date promise regexp window document element event examining object properties when an object is logged to the console it has a right-pointing triangle next to it, indicating that it can be expanded.
... export out
put to the clipboard once you have out
put in the console window, you can save it to the clipboard by right-clicking on the out
put and selecting export visible messages to clipboard: this will copy all of the out
put to the clipboard.
...the out
put will look something like this: console.log(todolist) array(4) [ {…}, {…}, {…}, {…} ] debugger eval code:1:9 undefined if you expand objects, such as arrays, you get slightly different content.
...", datecreated: 1552404493169 } 2: object { status: "to do", description: "create feedback form", datecreated: 1552404512630 } 3: object { status: "to do", description: "normalize table", datecreated: 1552404533790 } length: 4 <prototype>: array [] debugger eval code:1:9 undefined highlighting and inspecting dom nodes if you hover the mouse over any dom element in the console out
put, it's highlighted on the page: in the screenshot above you'll also see a blue "target" icon next to the node in the console out
put: click it to switch to the inspector with that node selected.
AudioContext.outputLatency - Web APIs
the out
putlatency read-only property of the audiocontext interface provides an estimation of the out
put latency of the current audio context.
... this is the time, in seconds, between the browser passing an audio buffer out of an audio graph over to the host system's audio subsystem to play, and the time at which the first sample in the buffer is actually processed by the audio out
put device.
... syntax var out
putlatency = audioctx.out
putlatency; value a double representing the out
put latency in seconds.
... example const audioctx = new audiocontext(); console.log(audioctx.out
putlatency); specifications specification status comment web audio apithe definition of 'out
putlatency' in that specification.
AudioNode.numberOfInputs - Web APIs
the numberofin
puts property of the audionode interface returns the number of in
puts feeding the node.
... source nodes are defined as nodes having a numberofin
puts property with a value of 0.
... syntax var numin
puts = audionode.numberofin
puts; value an integer ≥ 0.
... example const audioctx = new audiocontext(); const oscillator = audioctx.createoscillator(); const gainnode = audioctx.creategain(); oscillator.connect(gainnode).connect(audioctx.destination); console.log(oscillator.numberofin
puts); // 0 console.log(gainnode.numberofin
puts); // 1 console.log(audioctx.destination.numberofin
puts); // 1 specifications specification status comment web audio apithe definition of 'numberofin
puts' in that specification.
HTMLInputElement.select() - Web APIs
the htmlin
putelement.select() method selects all the text in a <textarea> element or in an <in
put> element that includes a text field.
... syntax element.select(); example click the button in this example to select all the text in the <in
put> element.
... html <in
put type="text" id="text-box" size="20" value="hello world!"> <button onclick="selecttext()">select text</button> javascript function selecttext() { const in
put = document.getelementbyid('text-box'); in
put.focus(); in
put.select(); } result notes calling element.select() will not necessarily focus the in
put, so it is often used with htmlelement.focus().
... in browsers where it is not supported, it is possible to replace it with a call to htmlin
putelement.setselectionrange() with parameters 0 and the in
put's value length: <in
put onclick="this.select();" value="sample text" /> <!-- equivalent to --> <in
put onclick="this.setselectionrange(0, this.value.length);" value="sample text" /> specifications specification status comment html living standardthe definition of 'select' in that specification.
HTMLInputElement.setRangeText() - Web APIs
the htmlin
putelement.setrangetext() method replaces a range of text in an <in
put> or <textarea> element with a new string.
... html <in
put type="text" id="text-box" size="30" value="this text has not been updated."> <button onclick="selecttext()">update text</button> javascript function selecttext() { const in
put = document.getelementbyid('text-box'); in
put.focus(); in
put.setrangetext('already', 14, 17, 'select'); } result specifications specification status comment html living standardthe d...
...efinition of 'htmlin
putelement.setselectionrange()' in that specification.
... living standard no change html5the definition of 'htmlin
putelement.setselectionrange()' in that specification.
HTMLInputElement.webkitdirectory - Web APIs
the htmlin
putelement.webkitdirectory is a property that reflects the webkitdirectory html attribute and indicates that the <in
put> element should let the user select directories instead of files.
... syntax htmlin
putelement.webkitdirectory = boolvalue value a boolean; true if the <in
put> element should allow picking only directories or false if only files should be selectable.
... html content <in
put type="file" id="filepicker" name="filelist" webkitdirectory multiple /> <ul id="listing"></ul> javascript content document.getelementbyid("filepicker").addeventlistener("change", function(event) { let out
put = document.getelementbyid("listing"); let files = event.target.files; for (let i=0; i<files.length; i++) { let item = document.createelement("li"); item.innerhtml = files[i].
...webkitrelativepath; out
put.appendchild(item); }; }, false); result specifications specification status comment file and directory entries apithe definition of 'webkitdirectory' in that specification.
InputDeviceCapabilities - Web APIs
the in
putdevicecapabilities() constructor creates a new in
putdevicecapabilities object provides information about the physical device responsible for generating a touch event.
... syntax var in
putdevicecapabilities = new in
putdevicecapabilities([in
putdevicecapabilitiesinit]) returns an instance of the in
putdevicecapabilities interface.
... parameters in
putdevicecapabilitiesinit optional a dictionary object containing a set of device capabilities.
... specifications specification status comment in
putdevicecapabilities draft initial definition.
InputEvent.data - Web APIs
the data read-only property of the in
putevent interface returns a domstring with the inserted characters.
... syntax var astring = in
putevent.data; value a domstring.
... examples in the following simple example we've set up an event listener on the in
put event so that when any change is made to the contents of the <in
put> element (either by typing or pasting), the text that was added is retrieved via the in
putevent.data property and reported in the paragraph below the in
put.
... <p>some text to copy and paste.</p> <in
put type="text"> <p class="result"></p> var editable = document.queryselector('in
put') var result = document.queryselector('.result'); editable.addeventlistener('in
put', (e) => { result.textcontent = "in
putted text: " + e.data; }); specifications specification status comment in
put events level 2the definition of 'data' in that specification.
InputEvent.dataTransfer - Web APIs
the datatransfer read-only property of the in
putevent interface returns a datatransfer object containing information about richtext or plaintext data being added to or removed from editible content.
... syntax var datatransfer = in
putevent.datatransfer value a datatransfer object.
... examples in the following simple example we've set up an event listener on the in
put event so that when any content is pasted into the contenteditable <p> element, its html source is retrieved via the in
putevent.datatransfer.getdata() method and reported in the paragraph below the in
put.
...-style: italic; color: red">exciting: italic red text!</span></p> <p>boring normal text ;-(</p> <hr> <p contenteditable="true">go on, try pasting some content into this editable paragraph and see what happens!</p> <p class="result"></p> var editable = document.queryselector('p[contenteditable]'); var result = document.queryselector('.result') var datatransferobj; editable.addeventlistener('in
put', (e) => { result.textcontent = e.datatransfer.getdata('text/html'); }); specifications specification status comment in
put events level 2the definition of 'datatransfer' in that specification.
XRInputSourceEvent.frame - Web APIs
the read-only xrin
putsourceevent property frame specifies an xrframe object representing the event frame during which a webxr user in
put occurred.
... syntax let in
putframe = xrin
putsourceevent.frame; value an xrframe indicating the event frame at which the user in
put event described by the object took place.
... examples this code shows a handler for the selectstart event which gets the target ray's pose from the frame, mapping the pose representing the ray (event.in
putsource.targetrayspace) to the overall reference space myrefspace.
... xrsession.onselectstart = event => { let targetraypose = event.frame.getpose(event.in
putsource.targetrayspace, myrefspace); if (targetraypose) { checkandhandlehit(targetraypose.transform); } }; specifications specification status comment webxr device apithe definition of 'xrin
putsourceevent.frame' in that specification.
XRInputSourceEventInit.frame - Web APIs
the xrin
putsourceeventinit dictionary's property frame specifies an xrframe providing information about the timestamp at which the new in
put source event took place, as well as access to the xrframe method getpose() which can be used to map the coordinates of any xrreferencespace to the space in which the event took place.
... of course, as a general rule, you won't need to create xrin
putsourceeventinit objects yourself.
... syntax xrin
putsourceeventinit.frame = xrframe; let xrin
putsourceeventinit = { frame: xrframe }; let xrin
putsourceevent = new xrin
putsourceevent(type, { frame: xrframe }); value an xrframe indicating the time at which the event took place, and providing a getpose() method which can be used to map reference spaces to the world reference space.
... let event = new xrin
putsourceevent("select", { frame: eventframe, in
putsource: source }; if (event) { xrsession.dispatchevent(event); } specifications specification status comment webxr device apithe definition of 'xrin
putsourceeventinit.frame' in that specification.
XRInputSourceEventInit - Web APIs
the xrin
putsourceeventinit dictionary is used when calling the xrin
putsourceevent() constructor to provide configuration options for the newly-created xrin
putsourceevent object to take on.
... properties the xrin
putsourceeventinit dictionary inherits properties from the eventinit dictionary.
... in
putsource an xrin
putsource object representing the in
put device from which the event is being sent.
... specifications specification status comment webxr device apithe definition of 'xrin
putsourceeventinit' in that specification.
XRInputSourcesChangeEvent.added - Web APIs
the read-only xrin
putsourceschangeevent property added is a list of zero or more in
put sources, each identified using an xrin
putsource object, which have been newly made available for use.
... syntax let addedin
puts = xrin
putsourceschangeevent.added; value an array of zero or more xrin
putsource objects, each representing one in
put device added to the xr system.
... examples the example below creates a handler for the in
putsourceschange event that processes the lists of added and removed from the webxr system.
... xrsession.onin
putsourcescchange = event => { for (let in
put of event.added) { if (in
put.targetraymode == "tracked-pointer") { addedpointerdevice(in
put); } } for (let in
put of event.removed) { if (in
put.targetraymode == "tracked-pointer") { removedpointerdevice(in
put); } } }; specifications specification status comment webxr device apithe definition of 'xrin
putsourceschangeevent.added' in that specification.
XRInputSourcesChangeEvent.removed - Web APIs
the read-only xrin
putsourceschangeevent property removed is an array of zero or more xrin
putsource objects representing the in
put sources which have been removed from the xrsession.
... syntax removedin
puts = xrin
putsourceschangeevent.removed; value an array of zero or more xrin
putsource objects, each representing one in
put device removed from the xr system.
... examples the example below creates a handler for the in
putsourceschange event that processes the lists of added and removed from the webxr system.
... xrsession.onin
putsourcescchange = event => { for (let in
put of event.added) { if (in
put.targetraymode == "tracked-pointer") { addedpointerdevice(in
put); } } for (let in
put of event.removed) { if (in
put.targetraymode == "tracked-pointer") { removedpointerdevice(in
put); } } }; specifications specification status comment webxr device apithe definition of 'xrin
putsourceschangeevent.removed' in that specification.
XRInputSourcesChangeEventInit - Web APIs
the xrin
putsourceschangeeventinit dictionary is used to provide options to the xrin
putsourceschangeevent() constructor in order to set the initial state of the new xrin
putsourceschangeevent object.
... properties added read only an array of zero or more xrin
putsource objects, each representing one in
put device which is newly available to use.
... removed read only an array of zero or more xrin
putsource objects representing the in
put devices which are no longer available.
... examples <tbd> specifications specification status comment webxr device apithe definition of 'xrin
putsourceschangeeventinit' in that specification.
XRSession: inputsourceschange event - Web APIs
the in
putsourceschange event is sent to an xrsession when the set of available webxr in
put devices changes.
... the received event, of type xrin
putsourceschangeevent, contains a list of any newly added and/or removed in
put devices.
... bubbles yes cancelable no interface xrin
putsourceschangeevent event handler property onin
putsourceschange the event object contains lists of the newly-added and/or removed in
put devices in its added and removed properties.
... examples specifications specification status comment webxr device apithe definition of 'in
putsourceschange event' in that specification.
PUT - HTTP
the http
put request method creates a new resource or replaces a representation of the target resource with the request payload.
... the difference between
put and post is that
put is idempotent: calling it once or several times successively has the same effect (that is no side effect), whereas successive identical post requests may have additional effects, akin to placing an order several times.
... request has body yes successful response has body no safe no idempotent yes cacheable no allowed in html forms no syntax
put /new.html http/1.1 example request
put /new.html http/1.1 host: example.com content-type: text/html content-length: 16 <p>new file</p> responses if the target resource does not have a current representation and the
put request successfully creates one, then the origin server must inform the user agent by sending a 201 (created) response.
... http/1.1 204 no content content-location: /existing.html specifications specification title rfc 7231, section 4.3.4:
put hypertext transfer protocol (http/1.1): semantics and content ...
NPUTF8 - Archive of obsolete content
« gecko plugin api reference « scripting plugins summary n
putf8 is a byte representing an 8-bit unit of a utf-8 character.
... this is not the same thing as an entire utf-8 character, which may be comprised of multiple n
putf8 bytes.
... syntax typedef char n
putf8; description the n
putf8 type is used in constructing utf-8 strings for use by the plugin scripting api extension.
nsIFileInputStream
netwerk/base/nsifilestreams.idlscriptable an in
put stream that allows you to read from a file.
... inherits from: nsiin
putstream last changed in gecko 1.7 method overview void init(in nsifile file, in long ioflags, in long perm, in long behaviorflags); constants constant value description delete_on_close 1<<1 if this is set, the file will be deleted by the time the stream is closed.
... see also nsifileout
putstream ...
nsIFileOutputStream
netwerk/base/public/nsifilestreams.idlscriptable this interface is an out
put stream that lets you stream to a file.
... inherits from: nsiout
putstream last changed in gecko 1.7 method overview void init(in nsifile file, in long ioflags, in long perm, in long behaviorflags); constants behavior flag constants constant value description defer_open 1<<0 see the same constant in nsifilein
putstream.
... see also nsifilein
putstream ...
nsIOutputStreamCallback
xpcom/io/nsiasyncout
putstream.idlscriptable this is a companion interface for nsiasyncout
putstream.asyncwait.
... inherits from: nsisupports last changed in gecko 1.7 method overview void onout
putstreamready(in nsiasyncout
putstream astream); methods onout
putstreamready() called to indicate that the stream is either writable or closed.
... void onout
putstreamready( in nsiasyncout
putstream astream ); parameters astream the stream whose nsiasyncout
putstream.asyncwait() method was called.
AudioNode.numberOfOutputs - Web APIs
the numberofout
puts property of the audionode interface returns the number of out
puts coming out of the node.
... syntax var numout
puts = audionode.numberofout
puts; value an integer ≥ 0.
... example const audioctx = new audiocontext(); const oscillator = audioctx.createoscillator(); const gainnode = audioctx.creategain(); oscillator.connect(gainnode).connect(audioctx.destination); console.log(oscillator.numberofout
puts); // 1 console.log(gainnode.numberofout
puts); // 1 console.log(audioctx.destination.numberofout
puts); // 0 specifications specification status comment web audio apithe definition of 'numberofout
puts' in that specification.
HTMLElement: beforeinput event - Web APIs
the dom beforein
put event fires when the value of an <in
put>, <select>, or <textarea> element is about to be modified.
... bubbles yes cancelable yes interface in
putevent event handler property none sync / async sync composed yes default action update the dom element examples this example logs current value of the element immediately before replacing that value with the new one applied to the <in
put> element.
... html <in
put placeholder="enter some text" name="name"/> <p id="values"></p> javascript const in
put = document.queryselector('in
put'); const log = document.getelementbyid('values'); in
put.addeventlistener('beforein
put', updatevalue); function updatevalue(e) { log.textcontent = e.target.value; } result specifications specification status ui eventsthe definition of 'beforein
put event' in that specification.
HTMLInputElement.labels - Web APIs
the htmlin
putelement.labels read-only property returns a nodelist of the <label> elements associated with the <in
put> element.
... syntax var labelelements = in
put.labels; return value a nodelist containing the <label> elements associated with the <in
put> element.
... example html <label id="label1" for="test">label 1</label> <in
put id="test"/> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const in
put = document.getelementbyid("test"); for(var i = 0; i < in
put.labels.length; i++) { console.log(in
put.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification.
HTMLInputElement.mozGetFileNameArray() - Web APIs
the htmlin
putelement.mozgetfilenamearray() method returns an array of the names of the files that were selected by the user on an html in
put element.
... syntax in
putelement.mozgetfilenamearray(alength, afilenames); parameters alength if specified, will receive the number of file names in the returned array.
... example var numfiles = 0; var filearray = {}; in
putelement.mozgetfilenamearray(numfiles, filearray); ...
HTMLInputElement.mozSetFileNameArray() - Web APIs
the htmlin
putelement.mozsetfilenamearray() method sets the names of the files that selected on an html in
put element.
... syntax in
putelement.mozsetfilenamearray(afilenames, alength); parameters afilenames is the array of file names to apply to the element.
... example var filearray = {"/foo/bar.txt", "/foo/foosball.txt"}; in
putelement.mozsetfilenamearray(filearray, filearray.length); ...
HTMLInputElement.multiple - Web APIs
the htmlin
putelement.multiple property indicates if an in
put can have more than one value.
... firefox currently only supports multiple for <in
put type="file">.
... example // filein
put is a <in
put type=file multiple> let filein
put = document.getelementbyid('myfilein
put'); if (filein
put.multiple == true) { for (let i = 0; i < filein
put.files.length; i++) { // loop filein
put.files } // only one file available } else { let file = filein
put.files.item(0); } ...
HTMLOutputElement.labels - Web APIs
the htmlout
putelement.labels read-only property returns a nodelist of the <label> elements associated with the <out
put> element.
... syntax var labelelements = out
put.labels; return value a nodelist containing the <label> elements associated with the <out
put> element.
... example html <label id="label1" for="test">label 1</label> <out
put id="test">out
put</out
put> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const out
put = document.getelementbyid("test"); for(var i = 0; i < out
put.labels.length; i++) { console.log(out
put.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment html living standardthe definition of 'labels' in that specification.
InputEvent.getTargetRanges() - Web APIs
the gettargetranges() property of the in
putevent interface returns an array of static ranges that will be affected by a change to the dom if the in
put event is not canceled.
... syntax var staticranges[] = in
putevent.gettargetranges() parameters none.
... specifications specification status comment in
put events level 2the definition of 'gettargetranges()' in that specification.
MouseEvent.mozInputSource - Web APIs
the mouseevent.mozin
putsource read-only property on mouseevent provides information indicating the type of device that generated the event.
... syntax var source = instanceofmouseevent.mozin
putsource; return value the following values are possible.
... constant name value desription moz_source_unknown 0 the in
put device is unknown.
XRInputSourcesChangeEvent.session - Web APIs
the xrin
putsourceschangeevent property session specifies the xrsession to which the in
put source list change event applies.
... syntax let in
putssession = xrin
putsourceschangeevent.session; value an xrsession indicating the webxr session to which the in
put source list change applies.
... specifications specification status comment webxr device apithe definition of 'xrin
putsourceschangeevent.session' in that specification.
XRInputSourcesChangeEventInit.added - Web APIs
the xrin
putsourceschangeeventinit property added specifies a list of in
put sources, each identified using an xrin
putsource object, which the represented in
putsourceschange event is to indicate are newly available for use.
... syntax let in
putsourceseventinit = { session: xrsession, added: [newdevice1, ..., newdevicen], removed: [removeddevice1, ..., newdevicen], }; myin
putsourceschangeevent = new xrin
putsourceschangeeventinit("in
putsourceschange", in
putsourceseventinit); myin
putsourceschangeevent = new xrin
putsourceschangeeventinit("in
putsourceschange", { session: xrsession, added: addeddevicelist, removed: removeddevicelist }); value an array of zero or more xrin
putsource objects, each representing one in
put device added to the xr system.
... specifications specification status comment webxr device apithe definition of 'xrin
putsourceschangeeventinit.added' in that specification.
XRInputSourcesChangeEventInit.removed - Web APIs
the xrin
putsourceschangeeventinit property removed is an array of zero or more xrin
putsource objects, each representing one in
put source which has been removed from the xrsession.
... syntax let in
putsourceseventinit = { session: xrsession, added: [newdevice1, ..., newdevicen], removed: [removeddevice1, ..., newdevicen], }; myin
putsourceschangeevent = new xrin
putsourceschangeeventinit("in
putsourceschange", in
putsourceseventinit); myin
putsourceschangeevent = new xrin
putsourceschangeeventinit("in
putsourceschange", { session: xrsession, added: addeddevicelist, removed: removeddevicelist }); value an array of zero or more xrin
putsource objects, each representing one in
put device removed from the xr system.
... specifications specification status comment webxr device apithe definition of 'xrin
putsourceschangeeventinit.removed' in that specification.
XRInputSourcesChangeEventInit.session - Web APIs
the xrin
putsourceschangeeventinit property session specifies the xrsession to which the in
put source list change event applies.
... syntax let in
putsourceseventinit = { session: xrsession, added: [newdevice1, ..., newdevicen], removed: [removeddevice1, ..., newdevicen], }; myin
putsourceschangeevent = new xrin
putsourceschangeeventinit("in
putsourceschange", in
putsourceseventinit); myin
putsourceschangeevent = new xrin
putsourceschangeeventinit("in
putsourceschange", { session: xrsession, added: addeddevicelist, removed: removeddevicelist }); value an xrsession indicating the webxr session to which the in
put source list change applies.
... specifications specification status comment webxr device apithe definition of 'xrin
putsourceschangeeventinit.session' in that specification.
<input type="datetime"> - HTML: Hypertext Markup Language
the html <in
put type="datetime"> was a control for entering a date and time (hour, minute, second, and fraction of a second) as well as a timezone.
... instead, browsers are implementing (and developers are encouraged to use) <in
put type="datetime-local">.
... the format of the date and time value used by this in
put type is described in format of a valid global date and time string in date and time formats used in html.
oninput - Archive of obsolete content
« xul reference home onin
put type: script code this event is sent when a user enters text in a textbox.
...--> <script language="javascript"> function setlabel(txtbox){ document.getelementbyid('lbl').value = txtbox.value; } </script> <label id="lbl"/> <textbox onin
put="setlabel(this);"/> this is similar to the onkeypress event used in html documents.
inputField - Archive of obsolete content
« xul reference in
putfield type: textbox element in mozilla, the xul textbox is implemented as a wrapper around an html in
put element.
... this read only property holds a reference to this inner in
put element.
Input method editor - MDN Web Docs Glossary: Definitions of Web-related terms
an in
put method editor (ime) is a program that provides a specialized user interface for text in
put.
... in
put method editors are used in many situations: to enter chinese, japanese, or korean text using a latin keyboard to enter latin text using a numeric keypad to enter text on a touch screen using handwriting recognition ...
HTMLInputElement: invalid event - Web APIs
in this example, when an invalid event fires because of an invalid value in the in
put, the invalid value is logged.
... html <form action="#"> <ul> <li><label>enter an integer between 1 and 10: <in
put type="number" min="1" max="10" required></label></li> <li><in
put type="submit" value="submit"></li> </ul> </form><p id="log"></p> javascript const in
put = document.queryselector('in
put') const log = document.getelementbyid('log') in
put.addeventlistener('invalid', logvalue) function logvalue(e) { log.textcontent += e.target.value } result specifications specification status comment html living standardthe definition of 'invalid event' in that specification.
InputEvent.isComposing - Web APIs
the in
putevent.iscomposing read-only property returns a boolean value indicating if the event is fired after compositionstart and before compositionend.
... syntax var bool = event.iscomposing; example var in
putevent = new in
putevent('syntheticin
put', false); console.log(in
putevent.iscomposing); // return false specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'in
putevent.iscomposing' in that specification.
MIDIInput - Web APIs
use the midiin
put interface of the web midi api to access and pass messages to a midi in
put port.
... event handlers midiin
put.onmidimessage when the current port receives a midimessage it triggers a call to this event handler.
ProgressEvent.lengthComputable - Web APIs
the progressevent.lengthcom
putable read-only property is a boolean flag indicating if the resource concerned by the progressevent has a length that can be calculated.
... syntax flag = progressevent.lengthcom
putable specifications specification status comment xmlhttprequestthe definition of 'progressevent.lengthcom
putable' in that specification.
msPutPropertyEnabled - Web APIs
the ms
putpropertyenabled method sets whether a given property in the style object is enabled or disabled.
... syntax var retval = style.ms
putpropertyenabled(propertyname, true); parameters name[in]: name of the property.
nsIAutoCompleteInput
toolkit/components/autocomplete/public/nsiautocompletein
put.idlscriptable this interface monitors the in
put in a text field and displays an autocomplete panel at the appropriate time.
MIDIInputMap - Web APIs
the midiin
putmap read-only interface of the web midi api provides a map-like interface to the currently available midi in
put ports.
MIDIOutputMap - Web APIs
the midiout
putmap read-only interface of the web midi api provides a map-like interface to the currently available midi out
put ports.
Index - Web APIs
it is an audionode that passes the audio stream unchanged from the in
put to the out
put, but allows you to take the generated data, process it, and create audio visualizations.
... 83 animationeffect.getcom
putedtiming() api, animation, experimental, method, reference, getcom
putedtiming, waapi, web animations api the getcom
putedtiming() method of the animationeffect interface returns the calculated timing properties for this animation effect.
...once
put into an audiobuffer, the audio can then be played by being passed into an audiobuffersourcenode.
...And 225 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
8 ascii glossary, infrastructure ascii (american standard code for information interchange) is one of the most popular coding method used by com
puters for converting letters, numbers, punctuation and control codes into digital form.
... 10 abstraction abstraction, coding, codingscripting, glossary, programming language abstraction in com
puter programming is a way to reduce complexity and allow efficient design and implementation in complex software systems.
... 21 argument codingscripting, glossary, javascript an argument is a value (primitive or object) passed as in
put to a function.
...And 76 more matches
Index
many (if not most) of the operations performed by nss involve the use of x.509 certificates (often abbreviated as “cert”, unfortunately making it easy to confuse with the term “com
puter emergency response team“).
...create a context handle while providing all the parameters required for the operation, then call an “update” function multiple times to pass subsets of the in
put to nss.
... 170 enc dec mac out
put public key as csr generates encryption/mac keys and out
puts public key as certificate signing request 171 enc dec mac using key wrap certreq pkcs10 csr generates encryption/mac keys and out
puts public key as pkcs11 certificate signing request 172 encdecmac using token object - sample 3 encdecmac, html, ncc, ncc article, web, web development no...
...And 61 more matches
Index - Archive of obsolete content
396 prerequisites add-ons, extensions in order to complete this tutorial you need to have and know how to use the following programs on your com
puter: 397 specifying the appearance add-ons, extensions now that we have defined a panel in which to display an icon, we use css to specify which icon to display.
... 626 remote debugging when a bug is reproducible by a community member, but not on a developer's com
puter, a last-resort strategy is to debug it on the community member's com
puter.
...this information is used by block layout to correctly com
pute where other floated elements should be placed, and how much space is available to normal in-flow elements that flow around the floated bits.
...And 57 more matches
Client-side form validation - Learn web development
prerequisites: com
puter literacy, a reasonable understanding of html, css, and javascript.
...even if your form is validating correctly and preventing malformed in
put on the client-side, a malicious user can still alter the network request.
... minlength and maxlength: specifies the minimum and maximum length of textual data (strings) min and max: specifies the minimum and maximum values of numerical in
put types type: specifies whether the data needs to be a number, an email address, or some other specific preset type.
...And 49 more matches
UI pseudo-classes - Learn web development
prerequisites: basic com
puter literacy, and a basic understanding of html and css, including general knowledge of pseudo-classes and pseudo-elements.
...an <in
put type="checkbox"> with the checked attribute set, or an <option> element with the selected attribute set).
... styling in
puts based on whether they are required or not one of the most basic concepts with regards to client-side form validation is whether a form in
put is required (it has to be filled in before the form can be submitted) or optional.
...And 48 more matches
HTML documentation index - HTML: Hypertext Markup Language
6 date and time formats used in html date, element, format, html, iso 8601, in
put, reference, string, time, week, datetime, datetime-local, del, ins, month, month-year, week-year certain html elements use date and/or time values.
... 9 autocapitalize autocapitalize, global attributes, html, reference the autocapitalize global attribute is an enumerated attribute that controls whether and how text in
put is automatically capitalized as it is entered/edited by the user.
... 11 contenteditable editing, global attributes, html, reference, text editing, contenteditable, text entry, text in
put the contenteditable global attribute is an enumerated attribute indicating if the element should be editable by the user.
...And 47 more matches
XPCOM Stream Guide
if we think of the water as data, then the spout represents an in
put stream: a controller for data coming out of something.
... at the same time, there may be some way to
put water into the tank - say, a main water line.
... that water line represents an out
put stream: a controller for data going into something.
...And 46 more matches
StringView - Archive of obsolete content
|*| http://www.gnu.org/licenses/lgpl-3.0.html |*| \*/ function stringview (vin
put, sencoding /* optional (default: utf-8) */, noffset /* optional */, nlength /* optional */) { var ftaview, awhole, araw, f
putoutptcode, fgetoutptchrsize, ninptlen, nstartidx = isfinite(noffset) ?
... noffset : 0, ntranscrtype = 15; if (sencoding) { this.encoding = sencoding.tostring(); } encswitch: switch (this.encoding) { case "utf-8": f
putoutptcode = stringview.
pututf8charcode; fgetoutptchrsize = stringview.getutf8charlength; ftaview = uint8array; break encswitch; case "utf-16": f
putoutptcode = stringview.
pututf16charcode; fgetoutptchrsize = stringview.getutf16charlength; ftaview = uint16array; break encswitch; case "utf-32": ftaview = uint32array; ntranscrtype &= 14; break encswitch; default: /* case "ascii", or case "binarystring" or unknown cases */ ftaview = uint8array; ntranscrtype &= 14; } typeswitch: switch (typeof vin
put) { case "string": /* the in
put argumen...
...*/ ntranscrtype &= 7; break typeswitch; case "object": classswitch: switch (vin
put.constructor) { case stringview: /* the in
put argument is a stringview: a new buffer will be created.
...And 45 more matches
IME handling guide
introduction ime is an abbreviation of in
put method editor.
... ime is a helper application of a user's text in
put.
...preedit string), suggests a list of what the user attempts to in
put, commits composition string as a selected item off the list and commits composition string without any conversion.
...And 45 more matches
Index
106 packaging weblock xpcom in this final part of the tutorial, we'll
put all of the pieces of the web locking component - the library itself, the type library, the header file, and the user interface resources - into a package that can be installed on other systems.
... 157 nsscriptablein
putstream components, components:frozen, xpcom, xpcom api reference a component implementing nsiscriptablein
putstream.
... 188 imgiencoder interfaces, interfaces:scriptable, needshelp, xpcom, xpcom interface reference possible values for in
put format (note that not all image formats support saving alpha channels): 189 imgiloader interfaces, interfaces:scriptable, needscontent, xpcom api reference, xpcom interface reference implemented by @mozilla.org/image/loader;1 as a service: 190 imgirequest interfaces, interfaces:scriptable, needscontent cancels this request as in nsirequest.cancel(); furth...
...And 39 more matches
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
n label="horizontal1"/> <button label="horizontal2"/> </hbox> <label value="vertical layout"/> <vbox> <button label="vertical1"/> <button label="vertical2"/> </vbox> <label value="mixed"/> <hbox> <button label="mixed1"/> <vbox> <button label="mixed2"/> <button label="mixed3"/> </vbox> <button label="mixed4"/> </hbox> listing 3: horizontal and vertical boxes figure 1: out
put of listing 3 there is also a grid element, which can be used for layouts similar to those achieved using the html table element, a stack element for layering other elements, and so on.
...figure 2 shows how setting align="center" pack="start" on two elements will result in completely different out
put with the only difference being the value for orient.
... <box flex="1" align="end" pack="end"> <button label="happy"/> <button label="sad"/> </box> listing 2: how align and pack respond to orient figure 2: out
put from listing 2 flex elements ordinarily have fixed height and width.
...And 37 more matches
Basic native form controls - Learn web development
prerequisites: basic com
puter literacy, and a basic understanding of html.
... you've already met some form elements, including <form>, <fieldset>, <legend>, <textarea>, <label>, <button>, and <in
put>.
... this article covers: the common in
put types button, checkbox, file, hidden, image, password, radio, reset, submit, and text.
...And 37 more matches
Basic concepts behind Web Audio API - Web APIs
audio nodes are linked via their in
puts and out
puts, forming a chain that starts with one or more sources, goes through one or more nodes, then ends up at a destination.
... choose the final destination for the audio, such as the user's com
puter speakers.
...the number after the period indicates the number of those channels which are reserved for low-frequency effect (lfe) out
puts; these are often referred to as subwoofers.
...And 36 more matches
Border-image generator - CSS: Cascading Style Sheets
b9fff72dab.png" data-stateid="border5"/> <img class="image" src="https://udn.realityripple.com/samples/fb/c0b285d3da.svg" data-stateid="border6"/> </div> </div> <div id="load-actions" class="group section"> <div id="toggle-gallery" data-action="hide"> </div> <div id="load-image" class="button"> upload image </div> <in
put id="remote-url" type="text" placeholder="load an image from url"/> <div id="load-remote" class="button"> </div> </div> <div id="general-controls" class="group section"> <div class="name"> control box </div> <div class="separator"></div> <div class="property"> <div class="name">scale</div> <div class="...
...ui-in
put-slider" data-topic="scale" data-unit="%" data-max="300" data-sensivity="10"> </div> </div> <div class="separator"></div> <div class="property"> <div class="name">draggable</div> <div class="ui-checkbox" data-topic='drag-subject'></div> </div> <div class="property right"> <div class="name">section height</div> <div class="ui-in
put-slider" data-topic="preview-area-height" data-min="400" data-max="1000"> </div> </div> </div> <div id="preview_section" class="group section"> <div id="subject"> <div class="guideline" data-axis="y" data-topic...
... <div class="ui-dropdown border-repeat" data-topic="image-repeat-y" data-selected="2"> <div data-value="1">repeat</div> <div data-value="1">stretch</div> <div data-value="1">round</div> </div> </div> <div class="property"> <div class="ui-in
put-slider" data-topic="font-size" data-info="em size" data-unit="px" data-value="12" data-sensivity="3"> </div> </div> <div class="property"> <div class="ui-in
put-slider" data-topic="preview-width" data-info="width" data-unit=" px" data-min="10" data-max="10000" data-sensivity="3...
...And 36 more matches
Box-shadow generator - CSS: Cascading Style Sheets
iv 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="in
put" data-topic="hue" data-title='h:' data-action="hsv"></div> <div class="in
put" data-topic="saturation" data-title='s:' data-action="hsv"></div> <div class="in
put" data-topic="value" data-title='v:' data-action="hsv"></div> </div> <div class="alpha"> <div id="alpha" data-topic="alpha"> ...
... <div id="alpha_selector"> </div> </div> </div> <div class="info"> <div class="in
put" data-topic="r" data-title='r:' data-action="rgb"></div> <div class="in
put" data-topic="g" data-title='g:' data-action="rgb"></div> <div class="in
put" data-topic="b" data-title='b:' data-action="rgb"></div> </div> <div class="preview block"> <div id="out
put_color"> </div> </div> <div class="block info"> <div class="in
put" data-topic="a" data-title='alpha:' data-action="alpha"></div> <div class="in
put" ...
...tion x </div> <div class="ui-slider-btn-set" data-topic="posx" data-type="sub"></div> <div class="ui-slider" data-topic="posx" data-min="-500" data-max="500" data-step="1"> </div> <div class="ui-slider-btn-set" data-topic="posx" data-type="add"></div> <div class="ui-slider-in
put" data-topic="posx" data-unit="px"></div> </div> <div class="slidergroup"> <div class="ui-slider-name"> position y </div> <div class="ui-slider-btn-set" data-topic="posy" data-type="sub"></div> <div class="ui-slider" data-topic="posy" data-min="-500" data-max=...
...And 36 more matches
Key Values - Web APIs
toggles the capital character lock on and off for subsequent in
put.
...allows issuing special command in
puts.
...removes the currently selected in
put.
...And 34 more matches
HTML attribute reference - HTML: Hypertext Markup Language
attribute list attribute name elements description accept <form>, <in
put> list of types the server accepts, typically a file type.
... alt <applet>, <area>, <img>, <in
put> alternative text in case an image can't be displayed.
... autocapitalize global attribute sets whether in
put is automatically capitalized when entered by user autocomplete <form>, <in
put>, <select>, <textarea> indicates whether controls in this form can by default have their values automatically completed by the browser.
...And 34 more matches
Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
newtodo: displays the <in
put> field and add button for adding a new todo.
...
put the following content into your moreactions.svelte file: <script> import { createeventdispatcher } from 'svelte' const dispatch = createeventdispatcher() let completed = true const checkall = () => { dispatch('checkall', completed) completed = !completed } const removecompleted = () => dispatch('removecompleted') </script> <div class="btn-group"> <button type="button...
... if you click on the in
put at the top of our app, you'll see a thick, dashed outline around that in
put.
...And 32 more matches
Linear-gradient Generator - CSS: Cascading Style Sheets
linear-gradient generator html content <div id="container"> <div id="gradient-container" data-alpha="true"> </div> <div id="controls"> <div class="section"> <div class="title"> active point </div> <div class="property"> <div class="ui-in
put-slider" data-topic="point-position" data-info="position" data-unit="px" data-min="-1000" data-value="0" data-max="1000" data-sensivity="5"></div> <div id="delete-point" class="button"> delete point </div> </div> <div class="ui-color-picker" data-topic="picker"></div> </div> <div class="section"> <div class="title"> active axis </div> ...
... <div class="name"> alpha background </div> <div id="canvas-bg"></div> <div id="add-axis" class="button"> add line </div> </div> <div id="order"> <div id="gradient-axes"></div> <div id="gradient-order"></div> </div> </div> </div> <div id="out
put"> <div class="css-property"> <span class="property">background:</span> <span class="value"></span> </div> </div> </div> css content /* * color picker tool */ .ui-color-picker { width: 420px; margin: 0; border: 1px solid #ddd; background-color: #fff; display: table; -moz-user-select: none; -webkit-user-select: none; ...
... background: -o-linear-gradient(left, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%); } .ui-color-picker .alpha { border: 1px solid #ccc; background: url("images/alpha_mask.png"); } .ui-color-picker .slider-picker { width: 2px; height: 100%; margin: 0 0 0 -2px; border: 1px solid #777; background-color: #fff; position: relative; top: -1px; } /* in
put hsv and rgb */ .ui-color-picker .info { width: 200px; margin: 5px; float: left; } .ui-color-picker .info * { float: left; } .ui-color-picker .in
put { width: 64px; margin: 5px 2px; float: left; } .ui-color-picker .in
put .name { height: 20px; width: 30px; text-align: center; font-size: 14px; line-height: 18px; float: left; } .ui-color-picker .in
put in
put { width: 30px; height: 1...
...And 32 more matches
Advanced form styling - Learn web development
prerequisites: basic com
puter literacy, and a basic understanding of html and css.
... to recap what we said in the previous article, we have: the bad: some elements are more difficult to style, requiring more complex css or some more specific tricks: checkboxes and radio buttons <in
put type="search"> the ugly: some elements can't be styled thoroughly using css.
... <in
put type="color"> date-related controls such as <in
put type="datetime-local"> <in
put type="range"> <in
put 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.
...And 30 more matches
Background audio processing using AudioWorklet - Web APIs
this was far less than ideal, especially for something that can be as com
putationally expensive as audio processing.
... it's worth noting that because audio processing can often involve substantial com
putation, your processor may benefit greatly from being built using webassembly, which brings near-native or fully native performance to web apps.
... create module that defines a audio worklet processor class, based on audioworkletprocessor which takes audio from one or more incoming sources, performs its operation on the data, and out
puts the resulting audio data.
...And 30 more matches
AudioNode.channelInterpretation - Web APIs
when the number of channels doesn't match between an in
put and an out
put, up- or down-mixing happens according the following rules.
... this can be somewhat controlled by setting the audionode.channelinterpretation property to speakers or discrete: interpretation in
put channels out
put channels mixing rules speakers 1 (mono) 2 (stereo) up-mix from mono to stereo.
... the m in
put channel is used for both out
put channels (l and r).
...And 28 more matches
NetUtil.jsm
method overview nsiasyncstreamcopier asynccopy(nsiin
putstream asource, nsiout
putstream asink, [optional] acallback) void asyncfetch(asource, acallback) nsichannel newchannel(awhattoload, [optional] aorigincharset, [optional] nsiuri abaseuri) nsiuri newuri(atarget, [optional] aorigincharset, [optional] nsiuri abaseuri) string readin
putstreamtostring(ain
putstream, acount, aoptions) attributes attribut...
... methods asynccopy() the asynccopy() method performs a simple asynchronous copy of data from a source in
put stream to a destination out
put stream.
... nsiasyncstreamcopier asynccopy( asource, asink, acallback ); parameters asource the in
put stream from which to read the source data.
...And 27 more matches
Border-radius generator - CSS: Cascading Style Sheets
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="radius-ui-sliders"> <div id="tlr" class="ui-in
put-slider" data-topic="top-left" data-unit=" px" data-sensivity="2"></div> <div id="tlw" class="ui-in
put-slider" data-topic="top-left-w" data-unit=" px" data-sensivity="2"></div> <div id="tlh" class="ui-in
put-slider" data-topic="top-left-h" data-unit=" px" data-sensivity="2"></div> ...
... <div id="trr" class="ui-in
put-slider" data-topic="top-right" data-unit=" px" data-sensivity="2"></div> <div id="trw" class="ui-in
put-slider" data-topic="top-right-w" data-unit=" px" data-sensivity="2"></div> <div id="trh" class="ui-in
put-slider" data-topic="top-right-h" data-unit=" px" data-sensivity="2"></div> <div id="brr" class="ui-in
put-slider" data-topic="bottom-right" data-unit=" px" data-sensivity="2"></div> <div id="brw" class="ui-in
put-slider" data-topic="bottom-right-w" data-unit=" px" data-sensivity="2"></div> <div id="brh" class="ui-in
put...
...-slider" data-topic="bottom-right-h" data-unit=" px" data-sensivity="2"></div> <div id="blr" class="ui-in
put-slider" data-topic="bottom-left" data-unit=" px" data-sensivity="2"></div> <div id="blw" class="ui-in
put-slider" data-topic="bottom-left-w" data-unit=" px" data-sensivity="2"></div> <div id="blh" class="ui-in
put-slider" data-topic="bottom-left-h" data-unit=" px" data-sensivity="2"></div> </div> </div> </div> </div> <div id="controls" class="group section"> <div class="group section"> <div id="dimensions"> <div class="ui-in
put-slider" data-topic="wi...
...And 26 more matches
Looping code - Learn web development
prerequisites: basic com
puter literacy, a basic understanding of html and css, javascript first steps.
... const cats = ['bill', 'jeff', 'pete', 'biggles', 'jasmin']; let info = 'my cats are called '; const para = document.queryselector('p'); for (let i = 0; i < cats.length; i++) { info += cats[i] + ', '; } para.textcontent = info; this gives us the following out
put: hidden code 2 <!doctype html> <html> <head> <meta charset="utf-8"> <title>basic for loop example</title> <style> </style> </head> <body> <p></p> <script> const cats = ['bill', 'jeff', 'pete', 'biggles', 'jasmin']; let info = 'my cats are called '; const para = document.queryselector('p'); for (let i = 0; i < cats.length; i++) { info += ca...
... note: we have made the condition i < cats.length, not i <= cats.length, because com
puters count from 0, not 1 — we are starting i at 0, and going up to i = 4 (the index of the last array item).
...And 24 more matches
SVG documentation index - SVG: Scalable Vector Graphics
it defaults to the baseline with the same name as the com
puted value of the alignment-baseline property.
...after applying the kernelmatrix of the <feconvolvematrix> element to the in
put image to yield a number and applied the divisor attribute, the bias attribute is added to each component.
... 60 divisor filters, svg, svg attribute the divisor attribute specifies the value by which the resulting number of applying the kernelmatrix of a <feconvolvematrix> element to the in
put image color value is divided to yield the destination color value.
...And 24 more matches
console - Web APIs
console.debug() out
puts a message to the console with the log level debug.
... console.error() out
puts an error message.
... console.group() creates a new inline group, indenting all following out
put by another level.
...And 23 more matches
How to structure a web form - Learn web development
prerequisites: basic com
puter literacy, and a basic understanding of html.
... here is a little example: <form> <fieldset> <legend>fruit juice size</legend> <p> <in
put type="radio" name="size" id="size_1" value="small"> <label for="size_1">small</label> </p> <p> <in
put type="radio" name="size" id="size_2" value="medium"> <label for="size_2">medium</label> </p> <p> <in
put type="radio" name="size" id="size_3" value="large"> <label for="size_3">large</label> </p> </fieldset> </form> note: you can find this exam...
...ideally, long forms should be spread across multiple pages, but if a form is getting long and must be on a single page,
putting the different related sections inside different fieldsets improves usability.
...And 22 more matches
Getting started with HTML - Learn web development
prerequisites: basic com
puter literacy, basic software installed, and basic knowledge of working with files.
... active learning: creating your first html element edit the line below in the in
put area by wrapping it with the tags <em> and </em>.
... to open the element,
put the opening tag <em> at the start of the line.
...And 22 more matches
File I/O - Archive of obsolete content
this article describes local file in
put/out
put in chrome javascript.
... creating temporary files to create a temporary file, use nsifile.createunique(): components.utils.import("resource://gre/modules/fileutils.jsm"); var file = fileutils.getfile("tmpd", ["suggestedname.tmp"]); file.createunique(components.interfaces.nsifile.normal_file_type, fileutils.perms_file); // do whatever you need to the created file alert(file.path); user in
put via nsifilepicker the file picker component, nsifilepicker, can be used to open standard open / save dialogs.
...so therefore for the first parameter, file, you can pass an nsifile object or a string (such as a jar path) see: netutil.asyncfetch: components.utils.import("resource://gre/modules/netutil.jsm"); netutil.asyncfetch(file, function(in
putstream, status) { if (!components.issuccesscode(status)) { // handle error!
...And 21 more matches
React interactivity: Events and state - Learn web development
instead, we can write a function in <app /> that will expect some data from our form as an in
put, then pass that function to <form /> as a prop.
...update it as follows: function handlesubmit(e) { e.preventdefault(); props.addtask("say hello!"); } clicking on the "add" button in your browser will prove that the addtask() callback function works, but it'd be nice if we could get the alert to show us what we're typing in our in
put field!
...now that we're dealing with user in
put and data updates, however, we need something more.
...And 21 more matches
Enc Dec MAC Using Key Wrap CertReq PKCS10 CSR
nss sample code 6: encryption/decryption and mac and out
put public as a pkcs 11 csr.
... generates encryption/mac keys and out
puts public key as pkcs11 certificate signing request /* this source code form is subject to the terms of the mozilla public * license, v.
... ", "-b <headerfilename> -i <ipfilename> | ", "-b <headerfilename> -i <ipfilename> | ", "-b <headerfilename> -e <encryptfilename> -o <opfilename> \n"); fprintf(stderr, "commands:\n\n"); fprintf(stderr, "%s %s\n --for generating cert request (for ca also)\n\n", progname, "-g -s <subject> -r <csr>"); fprintf(stderr, "%s %s\n --to in
put and store cert (for ca also)\n\n", progname, "-a -n <nickname> -t <trust> -c <cert> [ -r <csr> -u <issuernickname> [-x <\"\">] -m <serialnumber> ]"); fprintf(stderr, "%s %s\n --to
put cert in header\n\n", progname, "-h -n <nickname> -b <headerfilename> [-v <\"\">]"); fprintf(stderr, "%s %s\n --to find public key from cert in header and encrypt\n\n", ...
...And 21 more matches
Color picker tool - CSS: Cascading Style Sheets
a-mode="hsl"></div> <div id="picker-samples" sample-id="master"></div> <div id="controls"> <div id="delete"> <div id="trash-can"></div> </div> <div id="void-sample" class="icon"></div> </div> </div> <div id="canvas" data-tutorial="drop"> <div id="zindex" class="ui-in
put-slider" data-topic="z-index" data-info="z-index" data-max="20" data-sensivity="10"></div> </div> </div> css /* * color picker tool */ .ui-color-picker { width: 420px; margin: 0; border: 1px solid #ddd; background-color: #fff; display: table; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-color-picker...
....alpha { border: 1px solid #ccc; background: url("https://mdn.mozillademos.org/files/5705/alpha.png"); } .ui-color-picker .alpha-mask { width: 100%; height: 100%; background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png"); } .ui-color-picker .slider-picker { width: 2px; height: 100%; border: 1px solid #777; background-color: #fff; position: relative; top: -1px; } /* in
put hsv and rgb */ .ui-color-picker .info { width: 200px; margin: 5px; float: left; } .ui-color-picker .info * { float: left; } .ui-color-picker .in
put { width: 64px; margin: 5px 2px; float: left; } .ui-color-picker .in
put .name { height: 20px; width: 30px; text-align: center; font-size: 14px; line-height: 18px; float: left; } .ui-color-picker .in
put in
put { width: 30px; height: 1...
...8px; margin: 0; padding: 0; border: 1px solid #ddd; text-align: center; float: right; -moz-user-select: text; -webkit-user-select: text; -ms-user-select: text; } .ui-color-picker .in
put[data-topic="lightness"] { display: none; } .ui-color-picker[data-mode='hsl'] .in
put[data-topic="value"] { display: none; } .ui-color-picker[data-mode='hsl'] .in
put[data-topic="lightness"] { display: block; } .ui-color-picker .in
put[data-topic="alpha"] { margin-top: 10px; width: 93px; } .ui-color-picker .in
put[data-topic="alpha"] > .name { width: 60px; } .ui-color-picker .in
put[data-topic="alpha"] > in
put { float: right; } .ui-color-picker .in
put[data-topic="hexa"] { width: auto; float: right; margin: 6px 8px 0 0; } .ui-color-picker .in
put[data-topic="hexa"] > .name { display: none; ...
...And 21 more matches
Adding a new todo form: Vue events, methods, and models - Learn web development
what we really need next is the ability to allow our users to enter their own todo items into the app, and for that we'll need a text <in
put>, an event to fire when the data is submitted, a method to fire upon submission to add the data and rerender the list, and a model to control the data.
...we need a <form> with a <label>, an <in
put>, and a <button>.
... update your template as follows: <template> <form> <label for="new-todo-in
put"> what needs to be done?
...And 20 more matches
Encrypt Decrypt_MAC_Using Token
" "); fprintf(stderr, "%-20s specify db directory path\n\n", "-d "); fprintf(stderr, "%-20s specify db password [optional]\n\n", "-p "); fprintf(stderr, "%-20s specify db password file [optional]\n\n", "-f "); fprintf(stderr, "%-20s specify noise file name [optional]\n\n", "-z "); fprintf(stderr, "%-21s specify an in
put file name\n\n", "-i "); fprintf(stderr, "%-21s specify an out
put file name\n\n", "-o "); fprintf(stderr, "%-7s for encrypt, it takes as an in
put file and produces\n", "note :"); fprintf(stderr, "%-7s .enc and .header as intermediate out
put files.\n\n", ""); fprintf(stderr, "%-7s for decrypt, it takes .enc and .header\n", ...
... ""); fprintf(stderr, "%-7s as in
put files and produces as a final out
put file.\n\n", ""); exit(-1); } /* * gather a cka_id.
...*/ key = pk11_tokenkeygen(slot, mechanism, null, keysize, keyid, pr_true, pwdata); if (!key) { pr_fprintf(pr_stderr, "symmetric key generation failed \n"); } return key; } /* * macinit */ secstatus macinit(pk11context *ctx) { secstatus rv = pk11_digestbegin(ctx); if (rv != secsuccess) { pr_fprintf(pr_stderr, "com
pute mac failed : pk11_digestbegin()\n"); } return rv; } /* * macupdate */ secstatus macupdate(pk11context *ctx, unsigned char *msg, unsigned int msglen) { secstatus rv = pk11_digestop(ctx, msg, msglen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "com
pute mac failed : digestop()\n"); } return rv; } /* * finalize macing.
...And 20 more matches
Multiple-column layout - Learn web development
nulla luctus aliquam dolor, eu lacinia lorem placerat vul
putate.
...ut id ornare felis, eget fermentum sapien.</p> <p>nam vul
putate diam nec tempor bibendum.
...nulla luctus aliquam dolor, eu lacinia lorem placerat vul
putate.
...And 19 more matches
sample2
me> | ", "-b <headerfilename> -i <ipfilename> -e <encryptfilename> | ", "-b <headerfilename> -i <ipfilename> | ", "-b <headerfilename> -i <ipfilename> | ", "-b <headerfilename> -e <encryptfilename> -o <opfilename> \n"); fprintf(stderr, "commands:\n\n"); fprintf(stderr, "%s %s\n --for generating cert request (for ca also)\n\n", progname, "-g -s <subject> -r <csr>"); fprintf(stderr, "%s %s\n --to in
put and store cert (for ca also)\n\n", progname, "-a -n <nickname> -t <trust> -c <cert> [ -r <csr> -u <issuernickname> [-x <\"\">] -m <serialnumber> ]"); fprintf(stderr, "%s %s\n --to
put cert in header\n\n", progname, "-h -n <nickname> -b <headerfilename> [-v <\"\">]"); fprintf(stderr, "%s %s\n --to find public key from cert in header and encrypt\n\n", progname, "-e -b <headerfilename> -i <ipfilenam...
..."-v -b <headerfilename> -i <ipfilename> "); fprintf(stderr, "options:\n\n"); fprintf(stderr, "%-30s - db directory path\n\n", "-d <dbdirpath>"); fprintf(stderr, "%-30s - db password [optional]\n\n", "-p <dbpwd>"); fprintf(stderr, "%-30s - db password file [optional]\n\n", "-f <dbpwdfile>"); fprintf(stderr, "%-30s - noise file name [optional]\n\n", "-z <noisefilename>"); fprintf(stderr, "%-30s - in
put file name\n\n", "-i <ipfilename>"); fprintf(stderr, "%-30s - header file name\n\n", "-b <headerfilename>"); fprintf(stderr, "%-30s - encrypt file name\n\n", "-e <encryptfilename>"); fprintf(stderr, "%-30s - out
put file name\n\n", "-o <opfilename>"); fprintf(stderr, "%-30s - certificate serial number\n\n", "-m <serialnumber>"); fprintf(stderr, "%-30s - certificate nickname\n\n", "-n <nickname>"); ...
... validationfailed = pr_false; if (!nicknamestr) { pr_fprintf(pr_stderr, "%s -e -d %s -n : nick name is missing\n", progname, dbdir); validationfailed = pr_true; } if (!headerfilename) { pr_fprintf(pr_stderr, "%s -e -d %s -n %s -b : header file name is not found\n", progname, dbdir, nicknamestr); validationfailed = pr_true; } if (!infilename) { pr_fprintf(pr_stderr, "%s -e -d %s -n %s -b %s -i : in
put file name is not found\n", progname, dbdir, nicknamestr, headerfilename); validationfailed = pr_true; } if (!encryptedfilename) { pr_fprintf(pr_stderr, "%s -e -d %s -n %s -b %s -i %s -e : encrypt file name is not found\n", progname, dbdir, nicknamestr, headerfilename, infilename); validationfailed = pr_true; } if (validationfailed) { fprintf(stderr, "\nusage: %s %s \n\n", progname, "-e -d <dbdirp...
...And 19 more matches
Using files from web applications - Web APIs
this selection can be done by either using an html <in
put type="file"> element or by drag and drop.
... accessing selected file(s) consider this html: <in
put type="file" id="in
put" multiple> the file api makes it possible to access a filelist containing file objects representing the files selected by the user.
... the multiple attribute on the in
put element allows the user to select multiple files.
...And 19 more matches
Rendering and the WebXR frame animation callback - Web APIs
the browser always tries to refresh at the same rate as the display, which means that on some com
puters, your callback will be run a maximum of 60 times per second, while on others it might be called 90 or 120 times per second or even more, depending on the frame rate.
... this is important because as the com
puter becomes increasingly busy, it may not be able to accurately call your callback every frame and may have to skip frames.
... fortunately, you can easily com
pute how much time you're allowed to use between frames as 1/refreshrate seconds.
...And 19 more matches
filter - CSS: Cascading Style Sheets
filter: url(resources.svg#c1) filter functions blur() the blur() fucntion applies a gaussian blur to the in
put image.
...lign: left; vertical-align: top; width:25%; height:auto; } #img3 { height:100%; } <svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> <filter id="svgblur" x="-5%" y="-5%" width="110%" height="110%"> <fegaussianblur in="sourcegraphic" stddeviation="5"/> </filter> </svg> brightness() the brightness() function applies a linear multiplier to the in
put image, making it appear more or less bright.
...a value of 100% leaves the in
put unchanged.
...And 19 more matches
Index - Archive of obsolete content
160 in
puttooltiptext xul attributes, xul reference no summary!
...a change event is fired in different ways for different xul in
put elements as listed below: 219 onclick xul attributes, xul reference no summary!
... 233 onin
put xul attributes, xul reference no summary!
...And 18 more matches
How does the Internet work? - Learn web development
at its most basic, the internet is a large network of com
puters which communicate all together.
...the various technologies that support the internet have evolved over time, but the way it works hasn't changed that much: internet is a way to connect com
puters all together and ensure that, whatever happens, they find a way to stay connected.
... deeper dive a simple network when two com
puters need to communicate, you have to link them, either physically (usually with an ethernet cable) or wirelessly (for example with wifi or bluetooth systems).
...And 18 more matches
Command line crash course - Learn web development
you can read a bit of the history on wikipedia’s entry for com
puter terminal.
... since then, the terminal has remained a constant feature of all operating systems — from desktop machines, to servers tucked away in the cloud (it’s not really a cloud), to microcom
puters like the raspberry pi zero, and even to mobile phones.
... it provides direct access to the com
puter’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.
...And 18 more matches
nsIWebBrowserPersist
components.classes["@mozilla.org/embedding/browser/nswebbrowserpersist;1"] .createinstance(components.interfaces.nsiwebbrowserpersist); method overview void cancelsave(); void savechannel(in nsichannel achannel, in nsisupports afile); void savedocument(in nsidomdocument adocument, in nsisupports afile, in nsisupports adatapath, in string aout
putcontenttype, in unsigned long aencodingflags, in unsigned long awrapcolumn); void saveuri(in nsiuri auri, in nsisupports acachekey, in nsiuri areferrer, in long areferrerpolicy, in nsiin
putstream apostdata, in string aextraheaders, in nsisupports afile, in nsiloadcontext aprivacycontext); void saveprivacyawareuri(in nsiuri auri, in nsisupports acachekey, in nsiuri areferrer, in l...
...ong areferrerpolicy, in nsiin
putstream apostdata, in string aextraheaders, in nsisupports afile, in boolean aisprivate); attributes attribute type description currentstate unsigned long current state of the persister object.
... persist_flags_serialize_out
put 1024 force serialization of out
put (one file at a time; not concurrent) persist_flags_dont_change_filenames 2048 don't make any adjustments to filenames.
...And 18 more matches
AudioWorkletProcessor.process - Web APIs
important: currently, audio data blocks are always 128 frames long—that is, they contain 128 32-bit floating-point samples for each of the in
puts' channels.
... syntax var isactivelyprocessing = audioworkletprocessor.process(in
puts, out
puts, parameters); parameters in
puts an array of in
puts connected to the node, each item of which is, in turn, an array of channels.
...for example, in
puts[n][m][i] will access n-th in
put, m-th channel of that in
put, and i-th sample of that channel.
...And 18 more matches
WAI-ARIA basics - Learn web development
prerequisites: basic com
puter literacy, a basic understanding of html, css, and javascript, an understanding of the previous articles in the course.
...html5 provides special in
put types to render such controls: <in
put type="date"> <in
put type="range"> these are not well-supported across browsers, and it is also difficult to style them, making them not very useful for integrating with website designs.
...as an example, aria-required="true" specifies that a form in
put 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="in
put">.
...And 17 more matches
Your first form - Learn web development
prerequisites: basic com
puter literacy, and a basic understanding of html.
...the controls can be single or multi-line text fields, dropdown boxes, buttons, checkboxes, or radio buttons, and are mostly created using the <in
put> element, although there are some other elements to learn about too.
...we will use the following html elements: <form>, <label>, <in
put>, <textarea>, and <button>.
...And 17 more matches
HTML text fundamentals - Learn web development
in the example below, add elements to the raw text in the in
put field so that it appears as a heading and two paragraphs in the out
put field.
... playable code <h2>live out
put</h2> <div class="out
put" 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="in
put" 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"> <in
put id="reset" type="button" value="reset"> <in
put 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 out
put = document.queryselector('.out
put'); var code = textarea.value; var userentry = textarea.value; function updatecode() { out
put.innerhtml = textarea.value; } reset.addeventlistener('click', function() { textarea.value = co...
...And 17 more matches
FileUtils.jsm
m"); the file constructor if you have a path to a file (or directory) you want to obtain an nsifile for, you can do so using the file constructor, like this: var f = new fileutils.file(mypath); method overview nsifile getfile(string key, array patharray, bool followlinks); nsifile getdir(string key, array patharray, bool shouldcreate, bool followlinks); nsifileout
putstream openfileout
putstream(nsifile file, int modeflags); nsifileout
putstream openatomicfileout
putstream(nsifile file, int modeflags); nsifileout
putstream opensafefileout
putstream(nsifile file, int modeflags); void closeatomicfileout
putstream(nsifileout
putstream stream); void closesafefileout
putstream(nsifileout
putstream stream); constants const...
...instead use the file constructor, so simply: var dir = new fileutils.file('c:\\blah\\blah'); if (dir.exists()) { //yes directory exists } openfileout
putstream() opens a file out
put stream for writing.
... the stream is opened with the defer_open nsifileout
putstream.behavior flag constant this means the file is not actually opened until the first time it's accessed.
...And 17 more matches
nsIDOMWindowUtils
to get this interface, use: var domwindowutils = window.windowutils; method overview void activatenativemenuitemat(in astring indexstring); void clearmozafterpaintevents(); pruint32 comparecanvases(in nsidomhtmlcanvaselement acanvas1, in nsidomhtmlcanvaselement acanvas2, out unsigned long amaxdifference); double com
puteanimationdistance(in nsidomelement element, in astring property, in astring value1, in astring value2); nsicompositionstringsynthesizer createcompositionstringsynthesizer(); obsolete since gecko 38.0 void disablenontestmouseevents(in boolean adisable); boolean dispatchdomeventviapresshell(in nsidomnode atarget, in nsidomevent aevent, in boolean atrusted); n...
...(in astring aname); nsidomwindow getouterwindowwithid(in unsigned long long aouterwindowid); long getpccountscriptcount(); astring getpccountscriptsummary(in long ascript); astring getpccountscriptcontents(in long ascript); void getscrollxy(in boolean aflushlayout, out long ascrollx, out long ascrolly); astring getvisiteddependentcom
putedstyle(in nsidomelement aelement, in astring apseudoelement, in astring apropertyname); boolean isinmodalstate(); void leavemodalstate(); void loadsheet(in nsiuri sheeturi, in unsigned long type); nsidomnodelist nodesfromrect(in float ax, in float ay, in float atopsize, in float arightsize, in float abottomsize, in float aleftsize, in boolean aignorerootscr...
... focusedin
puttype string the type of the currently-focused html <in
put> element, if one is focused.
...And 17 more matches
Introduction to CSS layout - Learn web development
i don’t need to
put any rules on the child elements; they are automatically placed into the cells our grid has created.
...nulla luctus aliquam dolor, eu lacinia lorem placerat vul
putate.
... there are five types of positioning you should know about: static positioning is the default that every element gets — it just means "
put the element into its normal position in the document layout flow — nothing special to see here".
...And 16 more matches
Other form controls - Learn web development
previous overview: forms next we now look at the functionality of non-<in
put> 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 <out
put> element (which we saw in action in the previous article), and progress bars.
... prerequisites: basic com
puter literacy, and a basic understanding of html.
... objective: to understand the non-<in
put> form features, and how to implement them using html.
...And 16 more matches
Useful string methods - Learn web development
prerequisites: basic com
puter literacy, a basic understanding of html and css, an understanding of what javascript is.
...inside the square brackets you include the number of the character you want to return, so for example to retrieve the first letter you'd do this: browsertype[0]; remember: com
puters count from 0, not 1!
...all you need to do in each case is write the code that will out
put the strings in the format that we want them in.
...And 16 more matches
DMD
for instance, on osx, you can run something like: dmd=1 /applications/firefox\ nightly.app/contents/macos/firefox you can tell it is working by going to about:memory and looking for "save dmd out
put".
... const cc = components.classes; let mydumper = cc["@mozilla.org/memory-info-dumper;1"] .getservice(ci.nsimemoryinfodumper); mydumper.dumpmemoryinfototempdir(identifier, anonymize, minimize); this will dump memory reports and dmd out
put to the temporary directory.
...dmd[5222] } in an e10s-enabled build, you'll see separate out
put for each process.
...And 16 more matches
Encrypt Decrypt MAC Keys As Session Objects
" "); fprintf(stderr, "%-20s specify db directory path\n\n", "-d "); fprintf(stderr, "%-20s specify db password [optional]\n\n", "-p "); fprintf(stderr, "%-20s specify db password file [optional]\n\n", "-f "); fprintf(stderr, "%-20s specify noise file name [optional]\n\n", "-z "); fprintf(stderr, "%-21s specify an in
put file name\n\n", "-i "); fprintf(stderr, "%-21s specify an out
put file name\n\n", "-o "); fprintf(stderr, "%-7s for encrypt, it takes as an in
put file and produces\n", "note :"); fprintf(stderr, "%-7s .enc and .header as intermediate out
put files.\n\n", ""); fprintf(stderr, "%-7s for decrypt, it takes .enc and .header\n", ...
... ""); fprintf(stderr, "%-7s as in
put files and produces as a final out
put file.\n\n", ""); exit(-1); } /* * gather a cka_id */ secstatus gathercka_id(pk11symkey* key, secitem* buf) { secstatus rv = pk11_readrawattribute(pk11_typesymkey, key, cka_id, buf); if (rv != secsuccess) { pr_fprintf(pr_stderr, "pk11_readrawattribute returned (%d)\n", rv); pr_fprintf(pr_stderr, "could not read symkey cka_id attribute\n"); return rv; } return rv; } /* * generate a symmetric key */ pk11symkey * generatesymkey(pk11slotinfo *slot, ck_mechanism_type mechanism, int keysize, secitem *keyid, secupwdata *pwdata) { secstatus rv; pk11symkey *key; if (pk11_needlogin(slot)) { rv = pk11_authenticate(s...
...symmetric key */ key = pk11_tokenkeygen(slot, mechanism, null, keysize, keyid, pr_true, pwdata); if (!key) { pr_fprintf(pr_stderr, "symmetric key generation failed \n"); } return key; } /* * macinit */ secstatus macinit(pk11context *ctx) { secstatus rv = pk11_digestbegin(ctx); if (rv != secsuccess) { pr_fprintf(pr_stderr, "com
pute mac failed : pk11_digestbegin()\n"); } return rv; } /* * macupdate */ secstatus macupdate(pk11context *ctx, unsigned char *msg, unsigned int msglen) { secstatus rv = pk11_digestop(ctx, msg, msglen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "com
pute mac failed : digestop()\n"); } return rv; } /* * finalize macing */ secstatus macfinal(pk11conte...
...And 16 more matches
Encrypt and decrypt MAC using token
" "); fprintf(stderr, "%-20s specify db directory path\n\n", "-d "); fprintf(stderr, "%-20s specify db password [optional]\n\n", "-p "); fprintf(stderr, "%-20s specify db password file [optional]\n\n", "-f "); fprintf(stderr, "%-20s specify noise file name [optional]\n\n", "-z "); fprintf(stderr, "%-21s specify an in
put file name\n\n", "-i "); fprintf(stderr, "%-21s specify an out
put file name\n\n", "-o "); fprintf(stderr, "%-7s for encrypt, it takes as an in
put file and produces\n", "note :"); fprintf(stderr, "%-7s .enc and .header as intermediate out
put files.\n\n", ""); fprintf(stderr, "%-7s for decrypt, it takes .enc and .header\n", ...
... ""); fprintf(stderr, "%-7s as in
put files and produces as a final out
put file.\n\n", ""); exit(-1); } /* * gather a cka_id */ secstatus gathercka_id(pk11symkey* key, secitem* buf) { secstatus rv = pk11_readrawattribute(pk11_typesymkey, key, cka_id, buf); if (rv != secsuccess) { pr_fprintf(pr_stderr, "pk11_readrawattribute returned (%d)\n", rv); pr_fprintf(pr_stderr, "could not read symkey cka_id attribute\n"); return rv; } return rv; } /* * generate a symmetric key */ pk11symkey * generatesymkey(pk11slotinfo *slot, ck_mechanism_type mechanism, int keysize, secitem *keyid, secupwdata *pwdata) { secstatus rv; pk11symkey *key; if (pk11_needlogin(slot)) { rv = pk11_authenticate(s...
...symmetric key */ key = pk11_tokenkeygen(slot, mechanism, null, keysize, keyid, pr_true, pwdata); if (!key) { pr_fprintf(pr_stderr, "symmetric key generation failed \n"); } return key; } /* * macinit */ secstatus macinit(pk11context *ctx) { secstatus rv = pk11_digestbegin(ctx); if (rv != secsuccess) { pr_fprintf(pr_stderr, "com
pute mac failed : pk11_digestbegin()\n"); } return rv; } /* * macupdate */ secstatus macupdate(pk11context *ctx, unsigned char *msg, unsigned int msglen) { secstatus rv = pk11_digestop(ctx, msg, msglen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "com
pute mac failed : digestop()\n"); } return rv; } /* * finalize macing */ secstatus macfinal(pk11conte...
...And 16 more matches
NSS Sample Code Sample_3_Basic Encryption and MACing
ify db directory path\n\n", "-d <dbdirpath>"); fprintf(stderr, "%-20s specify db password [optional]\n\n", "-p <dbpwd>"); fprintf(stderr, "%-20s specify db password file [optional]\n\n", "-f <dbpwdfile>"); fprintf(stderr, "%-20s specify noise file name [optional]\n\n", "-z <noisefilename>"); fprintf(stderr, "%-21s specify an in
put file name\n\n", "-i <ipfilename>"); fprintf(stderr, "%-21s specify an out
put file name\n\n", "-o <opfilename>"); fprintf(stderr, "%-7s for encrypt, it takes <ipfilename> as an in
put file and produces\n", "note :"); fprintf(stderr, "%-7s <ipfilename>.enc and <ipfilename>.header as intermediate out
put files.\n\n", ""); fprintf(stde...
...rr, "%-7s for decrypt, it takes <ipfilename>.enc and <ipfilename>.header\n", ""); fprintf(stderr, "%-7s as in
put files and produces <opfilename> as a final out
put file.\n\n", ""); exit(-1); } /* this source code form is subject to the terms of the mozilla public * license, v.
...symmetric key */ key = pk11_tokenkeygen(slot, mechanism, null, keysize, keyid, pr_true, pwdata); if (!key) { pr_fprintf(pr_stderr, "symmetric key generation failed \n"); } return key; } /* * macinit */ secstatus macinit(pk11context *ctx) { secstatus rv = pk11_digestbegin(ctx); if (rv != secsuccess) { pr_fprintf(pr_stderr, "com
pute mac failed : pk11_digestbegin()\n"); } return rv; } /* * macupdate */ secstatus macupdate(pk11context *ctx, unsigned char *msg, unsigned int msglen) { secstatus rv = pk11_digestop(ctx, msg, msglen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "com
pute mac failed : digestop()\n"); } return rv; } /* * finalize macing */ secstatus macfinal(pk11conte...
...And 16 more matches
Using the CSS Typed Object Model - Web APIs
com
putedstylemap() with the css typed om api, we can access all the css properties and values — including custom properties — that are impacting an element.
... let's see how this works by creating our first example, which explores com
putedstylemap().
... <p> <a href="https://example.com">link</a> </p> <dl id="regurgitation"></dl> we add javascript to grab our unstyled link and return back a definition list of all the default css property values impacting the link using com
putedstylemap().
...And 16 more matches
Reading from Files - Archive of obsolete content
reading data from a file involves getting a reference to a file and then creating an in
put stream to read from it.
... an in
put stream provides a means of reading bytes, strings or other values from the file.
... while there is only one method to create an in
put stream, it provides a number of options to control exactly how reading is performed.
...And 15 more matches
Floats - Learn web development
you can follow along by creating a new index.html file on your com
puter, filling it with a simple html template, and inserting the below code into it at the appropriate places.
...nulla luctus aliquam dolor, eu lacinia lorem placerat vul
putate.
...ut id ornare felis, eget fermentum sapien.</p> <p>nam vul
putate diam nec tempor bibendum.
...And 15 more matches
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 in
put 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 paperclip character n/a n/a n/a for graphics representing data chart n/a figure ?
... a checkbox; aria has two kinds: use checkbox if you need to express 'mixed' state (some of the descendents are true, some are false), otherwise use switch or (preferred in html) <in
put type=checkbox>, which are true/false only.
... checkbutton check_box check_box checkbox or switch <in
put type=checkbox> pretty obvious what this is for clock n/a n/a timer <time> column of cells in a table - how would the user specifically point to this, as opposed to the column header or cells?
...And 15 more matches
Eclipse CDT Manual Setup
the way that eclipse cdt does build option discovery is to scan the console out
put from a real build looking for lines where a compiler was invoked.
...if relative paths are used to specify the source file or any of its include paths (common in mozilla), and if you fail to take steps to make sure the build out
put specifies which directory the compiler is invoked from, this will not be possible.
...first, eclipse needs build console out
put for a complete build, so that it can find compiler options for as many source files as possible.
...And 15 more matches
EncDecMAC using token object - sample 3
encdecmac using token object example: <h2 id="nss_sample_code_3_hashing.">nss sample code 3: enc/dec/mac using token object id.</h2> <p class="summary">com
putes the hash of a file and saves it to another file, illustrates the use of nss message apis.</p> <pre class="brush: cpp"> /* this source code form is subject to the terms of the mozilla public * license, v.
...tion\n\n", "-c "); fprintf(stderr, "%-20s specify 'b' for decrypt operation\n\n", " "); fprintf(stderr, "%-20s specify db directory path\n\n", "-d "); fprintf(stderr, "%-20s specify db password [optional]\n\n", "-p "); fprintf(stderr, "%-20s specify db password file [optional]\n\n", "-f "); fprintf(stderr, "%-20s specify noise file name [optional]\n\n", "-z "); fprintf(stderr, "%-21s specify an in
put file name\n\n", "-i "); fprintf(stderr, "%-21s specify an out
put file name\n\n", "-o "); fprintf(stderr, "%-7s for encrypt, it takes as an in
put file and produces\n", "note :"); fprintf(stderr, "%-7s .enc and .header as intermediate out
put files.\n\n", ""); fprintf(stderr, "%-7s for decrypt, it takes .enc and .header\n", ""); fprintf(stderr, "%-7s as in
put files and produces as a final out
put fil...
...oken %s.\n", pk11_gettokenname(slot)); return null; } } /* generate the symmetric key */ key = pk11_tokenkeygen(slot, mechanism, null, keysize, keyid, pr_true, pwdata); if (!key) { pr_fprintf(pr_stderr, "symmetric key generation failed \n"); } return key; } /* * macinit */ secstatus macinit(pk11context *ctx) { secstatus rv = pk11_digestbegin(ctx); if (rv != secsuccess) { pr_fprintf(pr_stderr, "com
pute mac failed : pk11_digestbegin()\n"); } return rv; } /* * macupdate */ secstatus macupdate(pk11context *ctx, unsigned char *msg, unsigned int msglen) { secstatus rv = pk11_digestop(ctx, msg, msglen); if (rv != secsuccess) { pr_fprintf(pr_stderr, "com
pute mac failed : digestop()\n"); } return rv; } /* * finalize macing */ secstatus macfinal(pk11context *ctx, unsigned char *mac, unsigned int *macle...
...And 15 more matches
NSS Tools ssltap
syntax to run the ssl debugging tool, type this command in a command shell: ssltap [-vhfsxl] [-p port] hostname:port options the command does not require any options other than hostname:port, but you normally use them to control the connection interception and out
put.
...instead of out
putting raw data, the command interprets each record as a numbered line of hex values, followed by the same data as ascii characters.
...out
put is printed in colored html.
...And 15 more matches
nsIScriptableIO
to get a reference as with other components: var scriptableio = components.classes["@mozilla.org/io/scriptable-io;1"] .getservice(); scriptableio.getfile("profile", "cookies.txt"); method overview nsifile getfile(in astring alocation, in astring afilename); nsifile getfilewithpath(in astring afilepath); nsisupports newin
putstream(in nsivariant abase, in astring amode, [optional] in astring acharset, [optional] in astring areplacechar, [optional] in unsigned long abuffersize); nsisupports newout
putstream(in nsivariant abase, in astring amode, [optional] in astring acharset, [optional] in astring areplacechar, [optional] in unsigned long abuffersize, [optional] in unsigned long apermissions); ...
...the file does not have to exist already; this method simply creates the file reference which may then be passed to the newin
putstream() or newout
putstream() method to open the file for reading or writing.
... newin
putstream() retrieves a stream from which data can be read.
...And 15 more matches
Advanced techniques: Creating and sequencing audio - Web APIs
we can allow the user to control these using range in
puts on the interface: <label for="attack">attack</label> <in
put name="attack" id="attack" type="range" min="0" max="1" value="0.2" step="0.1" /> <label for="release">release</label> <in
put name="release" id="release" type="range" min="0" max="1" value="0.5" step="0.1" /> now we can create some variables over in javascript and have them change when the in
put values are updated: let attacktime = 0...
....2; const attackcontrol = document.queryselector('#attack'); attackcontrol.addeventlistener('in
put', function() { attacktime = number(this.value); }, false); let releasetime = 0.5; const releasecontrol = document.queryselector('#release'); releasecontrol.addeventlistener('in
put', function() { releasetime = number(this.value); }, false); the final playsweep() function now we can expand our playsweep() function.
...in our case when is controlled by our in
puts.
...And 15 more matches
Web Audio API - Web APIs
audio nodes are linked into chains and simple webs by their in
puts and out
puts.
...these could be either com
puted mathematically (such as oscillatornode), or they can be recordings from sound/video files (like audiobuffersourcenode and mediaelementaudiosourcenode) and audio streams (mediastreamaudiosourcenode).
... out
puts of these nodes could be linked to in
puts of others, which mix or modify these streams of sound samples into different streams.
...And 15 more matches
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
in this chapter, we’ll discuss how to
put them together to actually build an extension.
... true javascript.options.showinconsole (present in firefox 3.5+) out
puts javascript errors to the error console.
... true javascript.options.strict (present in firefox 3.5+) enforces strict error out
put from javascript true table 1: preferences to set for developing extensions to make these changes, start your development profile, type about:config into firefox’s location bar and open the preferences window; find the preferences listed in table 1 and double-click on them to set them accordingly.
...And 14 more matches
Writing to Files - Archive of obsolete content
to write to a file, an out
put stream is used.
... an out
put stream is an object which can be used to write bytes, strings and other values to a file.
... to create an out
put stream, use nsiscriptableio.newout
putstream().
...And 14 more matches
Mobile touch controls - Game development
the events are as follows: touchstart is fired when the user
puts a finger on the screen.
...s moved on the screen (touchmove): document.addeventlistener("touchstart", touchhandler); document.addeventlistener("touchmove", touchhandler); the touchhandler function looks like this: function touchhandler(e) { if(e.touches) { playerx = e.touches[0].pagex - canvas.offsetleft - playerwidth / 2; playery = e.touches[0].pagey - canvas.offsettop - playerheight / 2; out
put.innerhtml = "touch: "+ " x: " + playerx + ", y: " + playery; e.preventdefault(); } } if the touch occurs (touches object is not empty), then we will have all the info we need in that object.
... to see if it's working correctly we can out
put the x and y positions using the out
put element.
...And 14 more matches
Advanced text formatting - Learn web development
here you'll learn about marking up quotations, description lists, com
puter code and other related text, subscript and superscript, contact information, and more.
...ought, or piece of additional background information.</dd> <dd>in writing, a section of content that is related to the current topic, but doesn't fit directly into the main flow of content so is presented nearby (often in a box off to the side.)</dd> </dl> active learning: marking up a set of definitions it's time to try your hand at description lists; add elements to the raw text in the in
put field so that it appears as a description list in the out
put field.
... playable code <h2>live out
put</h2> <div class="out
put" 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="in
put" style="min-height: 100px; width: 95%"> bacon the glue that binds the world together.
...And 14 more matches
Animated PNG graphics
the canvas is the area on the out
put device on which the frames are to be displayed.
... the out
put buffer is a pixel array with dimensions specified by the width and height parameters of the png 'ihdr' chunk.
... conceptually, each frame is constructed in the out
put buffer before being composited onto the canvas.
...And 14 more matches
Pointer events - Web APIs
however, since many devices support other types of pointing in
put devices, such as pen/stylus and touch surfaces, extensions to the existing pointing device event models are needed.
...they are designed to create a single dom event model to handle pointing in
put devices such as a mouse, pen/stylus or touch (such as one or more fingers).
... the events needed to handle generic pointer in
put are analogous to mouse events (mousedown/pointerdown, mousemove/pointermove, etc.).
...And 14 more matches
Movement, orientation, and motion: A WebXR example - Web APIs
mouse_speed a multiplier used to scale the in
puts from the mouse used for pitch and yaw control.
...this lets you compare any differences in rendering between the two modes, and lets you see out
put from immersive mode even if you don't have a headset.
... setup and utility functions next, we declare the variables and constants used throughout the application, starting with those used to store webgl and webxr specific information: let polyfill = null; let xrsession = null; let xrin
putsources = null; let xrreferencespace = null; let xrbutton = null; let gl = null; let animationframerequestid = 0; let shaderprogram = null; let programinfo = null; let buffers = null; let texture = null; let mouseyaw = 0; let mousepitch = 0; this is followed by a set of constants, mostly to contain various vectors and matrices used while rendering the scene.
...And 14 more matches
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
caret-color the color to use when drawing the caret (sometimes referred to as the text in
put cursor) within the element.
... this is only useful in elements that are editable, such as <in
put> and <textarea> or elements whose html contenteditable attribute is set.
...it's generally used as a focus indicator, to show which element will receive in
put events.
...And 14 more matches
Styling web forms - Learn web development
prerequisites: basic com
puter literacy, and a basic understanding of html and css.
...these include the following elements: <form> <fieldset> and <legend> single-line text <in
put>s (e.g.
... type text, url, email...), except for <in
put type="search">.
...And 13 more matches
Making decisions in your code — conditionals - Learn web development
overview: building blocks next in any programming language, the code needs to make decisions and carry out actions accordingly depending on different in
puts.
... prerequisites: basic com
puter literacy, a basic understanding of html and css, javascript first steps.
...each extra choice requires an additional block to
put in between if() { ...
...And 13 more matches
NSS tools : ssltab
instead of out
putting raw data, the command interprets each record as a numbered line of hex values, followed by the same data as ascii characters.
...out
put is printed in colored html.
...you can use this option to upload the out
put into a browser.
...And 13 more matches
NSS tools : ssltap
instead of out
putting raw data, the command interprets each record as a numbered line of hex values, followed by the same data as ascii characters.
...out
put is printed in colored html.
...you can use this option to upload the out
put into a browser.
...And 13 more matches
NSS tools : ssltap
instead of out
putting raw data, the command interprets each record as a numbered line of hex values, followed by the same data as ascii characters.
...out
put is printed in colored html.
...you can use this option to upload the out
put into a browser.
...And 13 more matches
Using media queries - CSS: Cascading Style Sheets
a media query com
putes to true when the media type (if specified) matches the device on which a document is being displayed and all media feature expressions com
pute as true.
... media features media features describe specific characteristics of the user agent, out
put device, or environment.
... name summary notes any-hover does any available in
put mechanism allow the user to hover over elements?
...And 13 more matches
Index - XSLT: Extensible Stylesheet Language Transformations
21 <xsl:apply-templates> element, reference, xslt, apply-templates the <xsl:apply-templates> element selects a set of nodes in the in
put tree and instructs the processor to apply the proper templates to them.
... 22 <xsl:attribute-set> element, reference, xslt, attribute-set the <xsl:attribute-set> element creates a named set of attributes, which can then be applied as whole to the out
put document, in a manner similar to named styles in css.
... 23 <xsl:attribute> attribute, element, reference, xslt the <xsl:attribute> element creates an attribute in the out
put document, using any values that can be accessed from the stylesheet.
...And 13 more matches
Chapter 4: Using XPCOM—Implementing advanced processes - Archive of obsolete content
save a text file containing only the ascii characters "xul" and
put in the path to that file.
... running this code should produce the out
put "58 55 4c" so you can check your results.
... listing 13: reading the contents of a binary file file.initwithpath('c:\\temp\\temp.txt'); var filestream = components.classes['@mozilla.org/network/file-in
put-stream;1'] .createinstance(components.interfaces.nsifilein
putstream); filestream.init(file, 1, 0, false); var binarystream = components.classes['@mozilla.org/binaryin
putstream;1'] .createinstance(components.interfaces.nsibinaryin
putstream); binarystream.setin
putstream(filestream); var array = binarystream.readbytearray(filestream.available()); binarystream.close(); filestream.close(); alert(array.map( function(aitem) {return aitem.tostring(16); } ).join(' ').touppercase( )); when ...
...And 12 more matches
Anatomy of a video game - Game development
present, accept, interpret, calculate, repeat the goal of every video game is to present the user(s) with a situation, accept their in
put, interpret those signals into actions, and calculate a new situation resulting from those acts.
... some games drive this cycle by user in
put.
...these games present two images to the user; they accept their click (or touch); they interpret the in
put as a success, failure, pause, menu interaction, etc.; finally, they calculate an updated scene resulting from that in
put.
...And 12 more matches
Index - Learn web development
13 aprender y obtener ayuda beginner, learn, learning, web development, getting help it is great that you are
putting some time into learning a new set of skills, but there are good practices to employ that will make your learning more effective.
... beginner, ftp, github, uploading, webmechanics, hosting, rsync, sftp if you have built a simple web page (see html basics for an example), you will probably want to
put it online, on a web server.
...at its most basic, the internet is a large network of com
puters which communicate all together.
...And 12 more matches
A first splash into JavaScript - Learn web development
prerequisites: basic com
puter literacy, a basic understanding of html and css, an understanding of what javascript is.
...we'll tell you if your guess was too high or too low.</p> <div class="form"> <label for="guessfield">enter a guess: </label><in
put type="text" id="guessfield" class="guessfield"> <in
put type="submit" value="submit guess" class="guesssubmit"> </div> <div class="resultparas"> <p class="guesses"></p> <p class="lastresult"></p> <p class="loworhi"></p> </div> <script> // your javascript goes here let randomnumber = math.floor(math.random() * 100) + 1; const guesses = document.queryselec...
...s in our html, and are used to insert values into the paragraphs later on in the code (note how they are inside a <div> element, which is itself used to select all three later on for resetting, when we restart the game): <div class="resultparas"> <p class="guesses"></p> <p class="lastresult"></p> <p class="loworhi"></p> </div> the next two constants store references to the form text in
put and submit button and are used to control submitting the guess later on.
...And 12 more matches
Beginning our React todo list - Learn web development
this article will walk you through
putting the basic app component structure and styling in place, ready for individual component definition and interactivity, which we'll add later.
... 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-in
put" classname="label__lg"> what needs to be done?
... </label> </h2> <in
put type="text" id="new-todo-in
put" classname="in
put in
put__lg" name="text" autocomplete="off" /> <button type="submit" classname="btn btn__primary btn__lg"> add </button> </form> <div classname="filters btn-group stack-exception"> <button type="button" classname="btn toggle-btn" aria-pressed="true"> <span classname="visually-hidden">show </span> <span>all</span> <span classname="visually-hidden"> tasks</span> </button> <button type="button" classname="btn toggle-btn" aria-pressed="false"> <span classname="visually-hidden">show </span> <span>active</span> <span classname=...
...And 12 more matches
Setting up your own test automation environment - Learn web development
for example, if we were using a mac os x machine, our user name was bob, and we
put our drivers in the root of our home folder, the path would be /users/bob.
...add the following code and try running your test again: const in
put = driver.findelement(by.id('name')); in
put.sendkeys('filling in my form'); you can submit key presses that can't be represented by normal characters using properties of the webdriver.key object.
... for example, above we used this construct to tab out of the form in
put before submitting it: driver.sleep(1000).then(function() { driver.findelement(by.name('q')).sendkeys(webdriver.key.tab); }); waiting for something to complete there are times where you'll want to make webdriver wait for something to complete before carrying on.
...And 12 more matches
Creating localizable web applications
don't
put text or numbers in images.
... you can
put the locale code as the top-most element of the url's path (e.g.
...good: function num_format($num, $decimals) { $locale_info = localeconv(); return number_format($num, $decimals, $locale_info['decimal_point'], $locale_info['thousands_sep']); } printf(_("%s mb"), num_format($size, 1)); wrap as few html tags as possible when wrapping the localizable content with the gettext function calls,
put all the code that irrelevant to localization outside the function call.
...And 12 more matches
imgIEncoder
1.0 66 introduced gecko 1.8 inherits from: nsiasyncin
putstream last changed in gecko 1.9 (firefox 3) method overview void addimageframe( [array, size_is(length), const] in pruint8 data, in unsigned long length, in pruint32 width, in pruint32 height, in pruint32 stride, in pruint32 frameformat, in astring frameoptions); void encodeclipboardimage(in nsiclipboardimage aclipboardimage, out nsifile aimagefile); obsolete since gecko 1.9 void endimageencode(); void initfromdata([array, size_is(length), const] in pruint8 data, in unsigned long length, in pruint32 width, in pruint32 height, in pruint32 stride, in pruint32 in
putformat, in astring out
putoptions); v...
...oid startimageencode(in pruint32 width, in pruint32 height, in pruint32 in
putformat, in astring out
putoptions); constants possible values for in
put format (note that not all image formats support saving alpha channels): constant value description in
put_format_rgb 0 in
put is rgb each pixel is represented by three bytes: r, g, and b (in that order, regardless of host endianness) in
put_format_rgba 1 in
put is rgb each pixel is represented by four bytes: r, g, and b (in that order, regardless of host endianness).
... post-multiplied alpha us used (for example 50% transparent red is 0xff000080) in
put_format_hostargb 2 in
put is host-endian argb: on big-endian machines each pixel is therefore argb, and for little-endian machiens (intel) each pixel is bgra (this is used by canvas to match it's internal representation) pre-multiplied alpha is used (that is, 50% transparent red is 0x80800000, not 0x80ff0000) possible values for out
putoptions.
...And 12 more matches
WebGL model view projection - Web APIs
for this section we will
put our data into the clip space coordinate system directly.
...the value of w is used as a divisor for the other components of the coordinate, so that the true values of x, y, and z are com
puted as x/w, y/w, and z/w (and w is then also w/w, becoming 1).
... when numbers are extremely large (or extremely small) on com
puters they begin to become less and less precise because there are only so many ones and zeros that are used to represent them.
...And 12 more matches
XForms Custom Controls - Archive of obsolete content
purpose you are in the right place if you would like to create your own custom renderings of the xforms controls like in
put, out
put, trigger, etc.
...xf|out
put[mediatype^="image"] { -moz-binding: url('chrome://xforms/content/xforms-xhtml.xml#xformswidget-out
put-mediatype-anyuri'); } custom data types if you define a new schema data type or you use a built-in data type and find the current xforms control for this type to be insufficient, then you should write a new custom control.
...so if you want an in
put bound to an instance node of type integer (and all types derived from integer), you would use: @namespace xf url(http://www.w3.org/2002/xforms); @namespace moztype url(http://www.mozilla.org/projects/xforms/2005/type); xf|in
put[moztype|typelist~="http://www.w3.org/2001/xmlschema#integer"] { -moz-binding: url('chrome://xforms/content/in
put-xhtml.xml#xformswidget-in
put-integer'); } advanced xfo...
...And 11 more matches
CSS and JavaScript accessibility best practices - Learn web development
prerequisites: basic com
puter literacy, a basic understanding of html, css, and javascript, and understanding of what accessibility is.
...to
put it another way, it is important that you consider some best practice advice to make sure that your use of css and javascript doesn't ruin the accessibility of your documents.
... form elements elements to allow users to in
put data into websites: <div> <label for="name">enter your name</label> <in
put type="text" id="name" name="name"> </div> you can see some good example css in our form-css.html example (see it live also).
...And 11 more matches
Images in HTML - Learn web development
prerequisites: basic com
puter literacy, basic software installed, basic knowledge of working with files, familiarity with html fundamentals (as covered in getting started with html.) objective: to learn how to embed simple images in html, annotate them with captions, and how html images relate to css background images.
... how do we
put an image on a webpage?
... in order to
put a simple image on a webpage, we use the <img> element.
...And 11 more matches
Arrays - Learn web development
prerequisites: basic com
puter literacy, a basic understanding of html and css, an understanding of what javascript is.
...try this: shopping[0] = 'tahini'; shopping; // shopping will now return [ "tahini", "milk", "cheese", "hummus", "noodles" ] note: we've said it before, but just as a reminder — com
puters start counting from 0!
... note: okay, this is technically a string method, not an array method, but we've
put it in with arrays as it goes well here.
...And 11 more matches
Starting our Svelte Todo list app - Learn web development
in this article we will first have a look at the desired functionality of our app, then we'll create a todos.svelte component and
put static markup and styles in place, leaving everything ready to start developing our to-do list app features, which we'll go on to in subsequent articles.
... note: you can
put your components anywhere inside the src folder, but the components folder is a recognized convention to follow, allowing you to find your components easily.
... </label> </h2> <in
put type="text" id="todo-0" autocomplete="off" class="in
put in
put__lg" /> <button type="submit" disabled="" class="btn btn__primary btn__lg"> add </button> </form> <!-- filter --> <div class="filters btn-group stack-exception"> <button class="btn toggle-btn" aria-pressed="true"> <span class="visually-hidden">show</span> <span>all</span> <span class="vi...
...And 11 more matches
Dynamic behavior in Svelte: working with variables and props - Learn web development
objective: learn and
put into practice some basic svelte concepts, like creating components, passing data using props, render javascript expressions into our markup, modify the components state and iterating over lists.
... replace the existing <ul> element with the following simplified version to get an idea of how it works: <ul> {#each todos as todo, index (todo.id)} <li> <in
put type="checkbox" checked={todo.completed}/> {index}.
...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"> <in
put 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"> <button type="button" class="btn"> edit <span class="visually-hidden">{todo.name}</span> </button> <button type="button" class="btn btn__danger"> ...
...And 11 more matches
Software accessibility: Where are we today?
the accessibility of com
puter software has seen drastic improvements over the past two decades.
...up until this point, the largest driving force behind desktop com
puting environments has been microsoft, first with ms dos, followed by variants of microsoft windows.
...these applications assumed that com
puter users could: read and react to text and images displayed on the screen.
...And 11 more matches
NSS tools : certutil
out
put defaults to standard out unless you use -o out
put-file argument.
... use the -a argument to specify ascii out
put.
... -a use ascii format or allow the use of ascii format for in
put or out
put.
...And 11 more matches
Necko walkthrough
nsdocshell as an example client of the nsihttpchannel api nsdocshell::loaduri(string) create nsiuri from string nsdocshell::loaduri(nsiuri) creates 2 nsiin
putstream for read response from; passes them with uri to ...
...pool) some other things nshttpchannel::connect might to a speculativeconnect (pre open tcp socket) nshttpchannel::continueconnect some cache stuff nshttpchannel::setuptransaction creates new nshttptransaction, and inits it with mrequesthead (the request headers) and muploadstream (which was created from the request data in channel setup) gets an nsiasyncin
putstream (for the response; corresponds to the nspipein
putstream for the response stream pipe) passes it to nsin
putstreampump nshttpchannel::ghttphandler->initiatetransaction (called from connect) this is the global nshttphandler object, which adds the transaction to the nshttpconnectionmgr (one of these per nshttphandler).
... dispatches the nsconnevent to the socket thread back to the context of nshttpchannel::continueconnect: nsin
putstreampump->asyncread this pump calls nsiasyncin
putstream::asyncwait (the in
put for the response stream pipe created with the nshttptransaction, i.e.
...And 11 more matches
nsICryptoHash
netwerk/base/public/nsicryptohash.idlscriptable this interface can be used to com
pute a cryptographic hash function of some data.
... inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview acstring finish(in prbool aascii); void init(in unsigned long aalgorithm); void initwithstring(in acstring aalgorithm); void update([const, array, size_is(alen)] in octet adata, in unsigned long alen); void updatefromstream(in nsiin
putstream astream, in unsigned long alen); constants hash algorithms these constants are used by the init() method to indicate which hashing function to use.
...see com
puting the hash of a string for an example of using this method.
...And 11 more matches
nsIZipReader
ttern); nsiutf8stringenumerator findentries(in string apattern); obsolete since gecko 10 nsiprincipal getcertificateprincipal(in autf8string aentryname); nsiprincipal getcertificateprincipal(in string aentryname); obsolete since gecko 10 nsizipentry getentry(in autf8string zipentry); nsizipentry getentry(in string zipentry); obsolete since gecko 10 nsiin
putstream getin
putstream(in autf8string zipentry); nsiin
putstream getin
putstream(in string zipentry); obsolete since gecko 10 nsiin
putstream getin
putstreamwithspec(in autf8string ajarspec, in autf8string zipentry); nsiin
putstream getin
putstreamwithspec(in autf8string ajarspec, in string zipentry); obsolete since gecko 10 boolean hasentry(in autf8string zipentry); ...
...subsequent attempts to extract() files or read from its in
put stream will result in an error.
...if aentryname is an entry in the jar, getin
putstream() must be called after parsemanifest.
...And 11 more matches
AudioNode - Web APIs
description the audio routing graph each audionode has in
puts and out
puts, and multiple audio nodes are connected to build a processing graph.
... a source node has zero in
puts but one or multiple out
puts, and can be used to generate sound.
... on the other hand, a destination node has no out
puts; instead, all its in
puts are directly played back on the speakers (or whatever audio out
put device the audio context uses).
...And 11 more matches
Recording a media element - Web APIs
note that the autoplay attribute is used so that as soon as the stream starts to arrive from the camera, it immediately gets displayed, and the muted attribute is specified to ensure that the sound from the user's microphone isn't out
put to their speakers, causing an ugly feedback loop.
... function log(msg) { logelement.innerhtml += msg + "\n"; } the log() function is used to out
put text strings to a <div> so we can share information with the user.
... for " + (lengthinms/1000) + " seconds..."); let stopped = new promise((resolve, reject) => { recorder.onstop = resolve; recorder.onerror = event => reject(event.name); }); let recorded = wait(lengthinms).then( () => recorder.state == "recording" && recorder.stop() ); return promise.all([ stopped, recorded ]) .then(() => data); } startrecording() takes two in
put parameters: a mediastream to record from and the length in milliseconds of the recording to make.
...And 11 more matches
TextEncoder.prototype.encodeInto() - Web APIs
the textencoder.prototype.encodeinto() method takes a usvstring to encode and a destination uint8array to
put resulting utf-8 encoded text into, and returns a dictionary object indicating the progress of the encoding.
... encode into a specific position encoder.encodeinto always
puts its out
put at the start of the array.
... however, it is sometimes useful to make the out
put start at a particular index.
...And 11 more matches
WebXR Device API - Web APIs
the webxr device api implements the core of the webxr feature set, managing the selection of out
put devices, render the 3d scene to the chosen device at the appropriate frame rate, and manage motion vectors created using in
put controllers.
... webxr-compatible devices include fully-immersive 3d headsets with motion and orientation tracking, eyeglasses which overlay graphics atop the real world scene passing through the frames, and handheld mobile phones which augment reality by capturing the world with a camera and augment that scene with com
puter-generated imagery.
... to accomplish these things, the webxr device api provides the following key capabilities: find compatible vr or ar out
put devices render a 3d scene to the device at an appropriate frame rate (optionally) mirror the out
put to a 2d display create vectors representing the movements of in
put controls at the most basic level, a scene is presented in 3d by com
puting the perspective to apply to the scene in order to render it from the viewpoint of each of the user's eyes by com
puting the position of each eye and rendering the scene from that position, looking in the direction the user is currently facing.
...And 11 more matches
Controlling multiple parameters with ConstantSourceNode - Web APIs
for example, perhaps you have a set of oscillators, and two of them need to share the same, configurable volume, or you have a filter that's been applied to certain in
puts but not to all of them.
...since constantsourcenode's offset value is simply sent straight through to all of its out
puts, it acts as a splitter for that value, sending it to each connected parameter.
... the diagram below shows how this works; an in
put value, n, is set as the value of the constantsourcenode.offset property.
...And 11 more matches
Using the Web Speech API - Web APIs
we simply have a title, instructions paragraph, and a div into which we out
put diagnostic messages.
... <h1>speech color changer</h1> <p>tap/click then say a color to change the background color of the app.</p> <div> <p class="out
put"><em>...diagnostic messages</em></p> </div> the css provides a very simple responsive styling so that it looks ok across devices.
...but it is not needed for this simple demo, so we are just specifying one (which is actually the default anyway.) recognition.grammars = speechrecognitionlist; recognition.continuous = false; recognition.lang = 'en-us'; recognition.interimresults = false; recognition.maxalternatives = 1; starting the speech recognition after grabbing references to the out
put <div> and the html element (so we can out
put diagnostic messages and update the app background color later on), we implement an onclick handler so that when the screen is tapped/clicked, the speech recognition service will start.
...And 11 more matches
Using XMLHttpRequest - Web APIs
// progress on transfers from the server to the client (downloads) function updateprogress (oevent) { if (oevent.lengthcom
putable) { var percentcomplete = oevent.loaded / oevent.total * 100; // ...
... } else { // unable to com
pute progress information since the total size is unknown } } function transfercomplete(evt) { console.log("the transfer is complete."); } function transferfailed(evt) { console.log("an error occurred while transferring the file."); } function transfercanceled(evt) { console.log("the transfer has been canceled by the user."); } lines 3-6 add event listeners for the various events that are sent while performing a data transfer using xmlhttprequest.
...however, if the lengthcom
putable field is false, the total length is not known and will be zero.
...And 11 more matches
Constraint validation - Developer guides
html5 introduced new mechanisms for forms: it added new semantic types for the <in
put> element and constraint validation to ease the work of checking the form content on the client side.
...therefore, like with html4, you need to also validate in
put constraints on the server side, in a way that is consistent with what is done on the client side.
... intrinsic and basic constraints in html5, basic constraints are declared in two ways: by choosing the most semantically appropriate value for the type attribute of the <in
put> element, e.g., choosing the email type automatically creates a constraint that checks whether the value is a valid e-mail address.
...And 11 more matches
HTML attribute: multiple - HTML: Hypertext Markup Language
valid for the email and file in
put types and the <select>, the manner by which the user opts for multiple values depends on the form control.
...for the file in
put type, the native messaging the browser provides differs.
... in firefox, the file in
put reads "no files selected" when the attribute is present and "no file selected" when not, when no files are selected.
...And 11 more matches
<details>: The Details disclosure element - HTML: Hypertext Markup Language
<details> <p>requires a com
puter running an operating system.
... the com
puter must have some memory and ideally some kind of long-term storage.
... an in
put device as well as some form of out
put device is recommended.</p> </details> in this situation, the browser will use a default summary string (usually "details").
...And 11 more matches
<label> - HTML: Hypertext Markup Language
associating a <label> with an <in
put> element offers some major advantages: the label text is not only visually associated with its corresponding text in
put; it is programmatically associated with it too.
... this means that, for example, a screenreader will read out the label when the user is focused on the form in
put, making it easier for an assistive technology user to understand what data should be entered.
... you can click the associated label to focus/activate the in
put, as well as the in
put itself.
...And 11 more matches
switch - JavaScript
it then looks for the first case clause whose expression evaluates to the same value as the result of the in
put expression (using the strict comparison, ===) and transfers control to that clause, executing the associated statements.
... case 0: // foo is 0 so criteria met here so this block will run console.log(0); // note: the forgotten break would have been here case 1: // no break statement in 'case 0:' so this case will run as well console.log(1); break; // it encounters this break so will not continue into 'case 2:' case 2: console.log(2); break; default: console.log('default'); } can i
put a default between cases?
...javascript will drop you back to the default if it can't find a match: var foo = 5; switch (foo) { case 2: console.log(2); break; // it encounters this break so will not continue into 'default:' default: console.log('default') // fall-through case 1: console.log('1'); } it also works when you
put default before all other cases.
...And 11 more matches
Style System Overview - Archive of obsolete content
cssruleprocessor one cssruleprocessor per origin (ua, user, author) css rule processor sorts all the rules in cascade order, and then
puts them in rulehash, which remembers order and then hashes by first of id, class, tag, namespace, or unhashed.
... some style data is cached on nsrulenode objects to speed up com
putation and reduce memory use.
... style data cached in rule tree if the data struct doesn't depend on the parent style context in any ways (inheritance, perhaps by omission; percentages and ems when com
puted), we can cache it in the rule tree.
...And 10 more matches
Practical positioning examples - Learn web development
save this somewhere sensible on your local com
puter, and open it up in your text editor.
...vestibulum et orci scelerisque, vul
putate tellus quis, lobortis dui.
...secondly, we'll set a rule that
puts the same styling on one of the tabs when a class of active is present on it.
...And 10 more matches
Client-side storage - Learn web development
previous overview: client-side web apis modern web browsers support a number of ways for web sites to store data on the user's com
puter — with the user's permission — then retrieve it when necessary.
... first, make a local copy of our personal-greeting.html file in a new directory on your com
puter.
...add the following lines to your javascript file: // create needed constants const rememberdiv = document.queryselector('.remember'); const forgetdiv = document.queryselector('.forget'); const form = document.queryselector('form'); const namein
put = document.queryselector('#entername'); const submitbtn = document.queryselector('#submitname'); const forgetbtn = document.queryselector('#forgetname'); const h1 = document.queryselector('h1'); const personalgreeting = document.queryselector('.personal-greeting'); next up, we need to include a small event listener to stop the form from actually submitting itself when the submit button is ...
...And 10 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> <in
put 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.
... this is useful in such cases where we have an <in
put> being used with no corresponding html text that could be turned into a label.
...the rendered out
put should now look like this: it doesn't take too much effort to get our html looking like a fully-featured to-do list app.
...And 10 more matches
Componentizing our Svelte app - Learn web development
newtodo.svelte: the text in
put and button that allow you to enter a new todo item.
...
put the following contents inside this file: <script> export let todo </script> <div class="stack-small"> <div class="c-cb"> <in
put 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="butto...
...when entering editing mode we'll show an <in
put> field to allow us to edit the current todo name, with two buttons to confirm or cancel our changes.
...And 10 more matches
Adding a new CSS property
the style system is the part of the code in gecko that is responsible for producing a com
puted value for every property for every element.
... then, unless you're implementing a shorthand property, you need to decide which style struct the com
puted value of the property should go in.
... com
puted style when adding a new longhand property, you also need to implement the com
puted style side of things.
...And 10 more matches
certutil
out
put defaults to standard out unless you use -o out
put-file argument.
... use the -a argument to specify ascii out
put.
... -a use ascii format or allow the use of ascii format for in
put or out
put.
...And 10 more matches
Using IndexedDB - Web APIs
(to learn more about how much storage you can have for each browser, see storage limits.) obviously, browsers do not want to allow some advertising network or malicious website to pollute your com
puter, so browsers used to prompt the user the first time any given web app attempts to open an indexeddb for storage.
...you're storing critical data that cannot be recom
puted later) you can force a transaction to flush to disk before delivering the complete event by creating a transaction using the experimental (non-standard) readwriteflush mode (see idbdatabase.transaction.
...if you're trying to modify an existing entry, or you don't care if one exists already, you can use the
put() function, as shown below in the updating an entry in the database section.
...And 10 more matches
ARIA: textbox role - Accessibility
the textbox role is used to identify an element that allows the in
put of free-form text.
... whenever possible, rather than using this role, use an <in
put> element with type="text", for single-line in
put, or a <textarea> element for multi-line in
put.
... the default is a single line in
put, in which return or enter submits the form; in this case, it is preferable to use an html <in
put> with type="text".
...And 10 more matches
@media - CSS: Cascading Style Sheets
media features media features describe specific characteristics of the user agent, out
put device, or environment.
... name summary notes any-hover does any available in
put mechanism allow the user to hover over elements?
... any-pointer is any available in
put mechanism a pointing device, and if so, how accurate is it?
...And 10 more matches
Scaling of SVG backgrounds - CSS: Cascading Style Sheets
source: no dimensions or intrinsic ratio given this css: background: url(no-dimensions-or-ratio.svg); background-size: 125px 175px; the rendered out
put would look like this: source: one specified dimension, no intrinsic ratio given this css: background: url(100px-wide-no-height-or-ratio.svg); background-size: 250px 150px; the rendered out
put would look like this: source: one specified dimension with intrinsic ratio given this css: background: url(100px-height-3x4-ratio.svg); background-size: 275px 125px; the rendered out
put would l...
...ook like this: source: no specified width or height with intrinsic ratio given this css: background: url(no-dimensions-1x1-ratio.svg); background-size: 250px 100px; the rendered out
put would look like this: using contain or cover specifying cover for background-size makes the picture as small as possible while still covering the entire background area.
... background: url(no-dimensions-or-ratio.svg); background-size: contain; the rendered out
put looks like this: source: one specified dimension, no intrinsic ratio similarly, if the image has one dimension specified but no intrinsic ratio, rule 4 applies, and the image is scaled to cover the entire background area.
...And 10 more matches
textbox - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] an in
put field where the user can enter text.
... it is similar to the html in
put element.
... attributes cols, decimalplaces, disabled, emptytext, hidespinbuttons, increment, label, max, maxlength, min, multiline, newlines, onblur, onchange, onfocus, onin
put, placeholder, preference, readonly, rows, searchbutton, size, spellcheck, tabindex, timeout, type, value, wrap, wraparound properties accessibletype, clickselectsall, decimalplaces, decimalsymbol, defaultvalue, disabled, editor, emptytext, increment, in
putfield, label, max, maxlength, min, placeholder, readonly, searchbutton, selectionend, selectionstart, size, spinbuttons, tabindex, textlength, timeout, type, value, valuenumber, wraparound ...
...And 9 more matches
Desktop mouse and keyboard controls - Game development
we could write our own keycode object containing the key codes, for example: var keyboardhelper = { left: 37, up: 38, right: 39, down: 40 }; that way instead of using the codes to compare the in
put in the handler functions we could do something like this, which is arguably easier to remember: if(event.keycode == keyboardhelper.left) { leftpressed = true; } note: you can also find a list if the different keycodes and what keys they relate to in the keycode reference page.
...in phaser the buttons you create will take any type of in
put, whether it's a touch on mobile or a click on desktop.
...we can assign actions directly to the buttons: this.buttonshoot = this.add.button(this.world.width*0.5, 0, 'button-alpha', null, this); this.buttonshoot.onin
putdown.add(this.shootingpressed, this); this.buttonshoot.onin
putup.add(this.shootingreleased, this); the button used for shooting works perfectly fine on both the mobile and desktop approach.
...And 9 more matches
Functions — reusable blocks of code - Learn web development
prerequisites: basic com
puter literacy, a basic understanding of html and css, javascript first steps.
...again, this looks something like this: mybutton.onclick = function() { alert('hello'); // i can
put as much code // inside here as i want } function parameters some functions require parameters to be specified when you are invoking them — these are values that need to be included inside the function parentheses, which it needs to do its job properly.
...it also contains a third function called out
put(), which takes a single parameter and out
puts it in a paragraph on the page.
...And 9 more matches
What is JavaScript? - Learn web development
prerequisites: basic com
puter literacy, a basic understanding of html and css.
...they do the same thing for programming that ready-made furniture kits do for home building — it is much easier to take ready-cut panels and screw them together to make a bookshelf than it is to work out the design yourself, go and find the correct wood, cut all the panels to the right size and shape, find the correct-sized screws, and then
put them together to make a bookshelf.
... browser apis are built into your web browser, and are able to expose data from the surrounding com
puter environment, or do useful complex things.
...And 9 more matches
Styling Vue components with CSS - Learn web development
} h1, h2 { margin-bottom: 0; } ul { list-style: none; padding: 0; } button { border: none; margin: 0; padding: 0; width: auto; overflow: visible; background: transparent; color: inherit; font: inherit; line-height: normal; -webkit-font-smoothing: inherit; -moz-osx-font-smoothing: inherit; -webkit-appearance: none; } button::-moz-focus-inner { border: 0; } button, in
put, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, in
put { /* 1 */ overflow: visible; } in
put[type="text"] { border-radius: 0; } body { width: 100%; max-width: 68rem; margin: 0 auto; font: 1.6rem/1.25 "helvetica neue", helvetica, arial, sans-serif; background-color: #f5f5f5; color: #4d4d4d; -moz-osx-font-smoothi...
... before: after: noticeable changes include the removal of the list bullets, background color changes, and changes to the base button and in
put styles.
...these styles do a few things — adding some styling to buttons and in
puts, and customizing the #app element and its children.
...And 9 more matches
Handling common accessibility problems - Learn web development
really, the aim of accessibility is to make your websites/apps usable by as many people in as many contexts as possible, not just those users using high-powered desktop com
puters.
...the elements that have this capability are the common ones that allow user to interact with web pages, namely links, <button>s, and form elements like <in
put>.
... you can then press enter/return to follow a focused link or press a button (we've included some javascript to make the buttons alert a message), or start typing to enter text in a text in
put (other form elements have different controls, for example the <select> element can have its options displayed and cycled between using the up and down arrow keys).
...And 9 more matches
Handling common HTML and CSS problems - Learn web development
html5 form elements also exhibit fallback qualities — html5 introduced some special <in
put> types for in
putting specific information into forms, such as times, dates, colors, numbers, etc.
...supporting platforms provide special ui widgets when these in
put types are used, such as a calendar widget for entering dates.
... the following example shows date and time in
puts: <form> <div> <label for="date">enter a date:</label> <in
put id="date" type="date"> </div> <div> <label for="time">enter a time:</label> <in
put id="time" type="time"> </div> </form> the out
put of this code is as follows: hidden example label { float: left; width: 30%; text-align: right; } in
put { float: right; width: 65%; } label, in
put { margin-bottom: 20px; } div { clear: both; margin: 10px; } body { width: 400px; margin: 0 auto; } <form> <div> <label for="date">enter a date:</label> <in
put id="date" type="date"> </div> <div> <label f...
...And 9 more matches
HTTP Cache
currently we have 3 types of storages, all the access methods return an nsicachestorage object: memory-only (memorycachestorage): stores data only in a memory cache, data in this storage are never
put to disk disk (diskcachestorage): stores data on disk, but for existing entries also looks into the memory-only storage; when instructed via a special argument also primarily looks into application caches application cache (appcachestorage): when a consumer has a specific nsiapplicationcache (i.e.
... represents a distinct storage area (or scope) to
put and get cache entries mapped by urls into and from it.
...the response payload) to write to the cache entry, it must open the out
put stream on it before it calls metadataready.
...And 9 more matches
TimerFirings logging
nspr_log_modules=timerfirings:4 out
put once enabled, timerfirings will print one line of logging out
put per timer fired.
... it's best to redirect this out
put to a file.
... the following sample shows the basics of this out
put.
...And 9 more matches
nss tech note1
this was written to be a generic decoder, that includes both der (distinguished encoding rules) and ber (basic encoding rules).† it handles both streaming and non-streaming in
put.
...it can only decode der .† it does not handle streaming in
put, and requires that all in
put be present before beginning to decode.
...this is where the decoder stores its out
put.
...And 9 more matches
Bytecode Descriptions
this is used to implement setters with com
puted property keys or numeric keys.
...implements:
putvalue step 6 for non-strict code.
...implements:
putvalue step 6 for non-strict code.
...And 9 more matches
Working with data
example: creating an array of strings var cstr1 = ctypes.jschar.array()('rawr'); var cstr2 = ctypes.jschar.array()('boo'); var mycarray_ofstrings = ctypes.jschar.ptr.array(2)([cstr1, cstr2]); // specifying length of 2 is optional, can omit it, so can just do `ctypes.jschar.ptr.array()([cstr1, cstr2])` mycarray_ofstrings.addressofelement(0).contents.readstring(); // out
puts: "rawr" mycarray_ofstrings.addressofelement(1).contents.readstring(); // out
puts: "boo" example: creating an array of integers var jsarr = [4, 10]; var mycarr = ctypes.int.array(jsarr.length)(jsarr); // specifying length is optional, can omit.
... this will also work: `ctypes.int.array()(jsarr)` mycarr.addressofelement(0).contents; // out
puts: 4 mycarr.addressofelement(1).contents; // out
puts: 10 type casting you can type cast data from one type to another by using the ctypes.cast() function: var newobj = ctypes.cast(origobj, newtype); this will return a new object whose data block is shared with the original object, but whose type is newtype.
... // lets create an array of long's var my = ctypes.long.array()([1, 2, 3, 4]); my.tostring(); // this out
puts to browser console: `"ctypes.long.array(4)([ctypes.int64("1"), ctypes.int64("2"), ctypes.int64("3"), ctypes.int64("4")])"` my.addressofelement(1).contents; // this out
puts `int64 { }` my.addressofelement(1).contents.tostring(); // out
puts: `"2"` // now this is how to get the array of long's cast to array of int's var mycasted = ctypes.cast(my.address(), ctypes.int.array(my.length).ptr).content...
...And 9 more matches
AudioNode.connect() - Web APIs
the connect() method of the audionode interface lets you connect one of the node's out
puts to a target, which may be either another audionode (thereby directing the sound data to the specified node) or an audioparam, so that the node's out
put data is automatically used to change the value of that parameter over time.
... syntax var destinationnode = audionode.connect(destination, out
putindex, in
putindex); audionode.connect(destination, out
putindex); parameters destination the audionode or audioparam to which to connect.
... out
putindex optional an index specifying which out
put of the current audionode to connect to the destination.
...And 9 more matches
Using the CSS Painting API - Web APIs
.fancy { background-image: paint(headerhighlight); }
putting it together we can then add the fancy class to any element on the page to add a yellow box as a background: <h1 class="fancy">my cool header</h1> the following example will look like the image above in browsers supporting the css painting api.
... registerpaint('csspaintfunctionname', class { static get in
putproperties() { return ['propertyname1', '--custompropertyname2']; } static get in
putarguments() { return ['<color>']; } static get contextoptions() { return {alpha: true}; } paint(drawingcontext, elementsize, stylemap) { // paint code goes here.
...to be able to access properties, we include the static in
putproperties() method, which provides live access to css properties, including regular properties and custom properties, and returns an array of property names.
...And 9 more matches
HTMLTextAreaElement - Web APIs
autocapitalize string: returns / sets the element's capitalization behavior for user in
put.
... autocomplete autofocus boolean: returns / sets the element's autofocus attribute, indicating that the control should have in
put focus when the page loads cols unsigned long: returns / sets the element's cols attribute, indicating the visible width of the text area.
... in
putmode maxlength long: returns / sets the element's maxlength attribute, indicating the maximum number of characters the user can enter.
...And 9 more matches
Cognitive accessibility - Accessibility
in
put assistance guideline 3.3 helps to ensure accurate data entry, stating "help users avoid and correct mistakes." while we all make mistakes, some people are more likely to make mistakes, less likely to notice a mistake, or have a harder time correcting a mistake once they make one.
... in
put assistance guidelines aim to reduce the likelihood that users, especially those with disabilities, make a mistake, and, if they do make a mistake, increase the likelihood that they see and comprehend the error message and can successfully fix any errors.
...if multiple errors are present, provide a summary, with each error linking to the related in
put.
...And 9 more matches
Web Accessibility: Understanding Colors and Luminance - Accessibility
at the surface, the subject seems simple, but it is actually a complex subject because color is as much about the physiology of the eye and human perception as it is about light emitting from a com
puter screen.
... perception of color in a well-lit room will be different than perception of that same color on that same com
puter screen in a dark room.
...because of the current domination of the rgb color space in measuring color out
put, most calculations in this document are presumed to be in the rgb color space, and very specifically, in the srgb color space.
...And 9 more matches
::placeholder - CSS: Cascading Style Sheets
the ::placeholder css pseudo-element represents the placeholder text in an <in
put> or <textarea> element.
... syntax ::placeholder accessibility concerns color contrast contrast ratio placeholder text typically has a lighter color treatment to indicate that it is a suggestion for what kind of in
put will be valid, and is not actual in
put of any kind.
... it is important to ensure that the contrast ratio between the color of the placeholder text and the background of the in
put is high enough that people experiencing low vision conditions will be able to read it while also making sure there is enough of a difference between the placeholder text and in
put text color that users do not mistake the placeholder for in
puted data.
...And 9 more matches
Public class fields - JavaScript
class classwithstaticfield { static staticfield = 'static field' } console.log(classwithstaticfield.staticfield) // expected out
put: "static field" fields without initializers are initialized to undefined.
... class classwithstaticfield { static staticfield } console.assert(classwithstaticfield.hasownproperty('staticfield')) console.log(classwithstaticfield.staticfield) // expected out
put: "undefined" public static fields are not reinitialized on subclasses, but can be accessed via the prototype chain.
... class classwithstaticfield { static basestaticfield = 'base field' } class subclasswithstaticfield extends classwithstaticfield { static substaticfield = 'sub class field' } console.log(subclasswithstaticfield.substaticfield) // expected out
put: "sub class field" console.log(subclasswithstaticfield.basestaticfield) // expected out
put: "base field" when initializing fields, this refers to the class constructor.
...And 9 more matches
Populating the page: how browsers work - Web Performance
network latency is the time it takes to transmit bytes over-the-air to com
puters.
... tcp's three way handshaking technique is often referred to as "syn-syn-ack"—or more accurately syn, syn-ack, ack—because there are three messages transmitted by tcp to negotiate and start a tcp session between two com
puters.
...the parser parses tokenized in
put into the document, building up the document tree.
...And 9 more matches
Creating a Microsummary - Archive of obsolete content
for example, if you use php scripts to generate pages on your site, you could write php code to out
put a microsummary when the view=microsummary url parameter is present.
...te> element: <?xml version="1.0" encoding="utf-8"?> <generator xmlns="http://www.mozilla.org/microsummaries/0.1" name="firefox download count"> <template> <transform xmlns="http://www.w3.org/1999/xsl/transform" version="1.0"> </transform> </template> </generator> note that while microsummary generators can include arbitrary xslt, including xslt that produces rich text out
put, firefox currently only displays the text version of the xslt out
put.
... specifying the out
put type since the xslt transform sheet will generate a text microsummary, we should indicate this with the xslt <out
put> element: <?xml version="1.0" encoding="utf-8"?> <generator xmlns="http://www.mozilla.org/microsummaries/0.1" name="firefox download count"> <template> <transform xmlns="http://www.w3.org/1999/xsl/transform" version="1.0"> <out
put method="text"/> </transform> </template> </generator> using a simple xslt <template> the xslt processor transforms documents by comparing each xslt <template> element in the transform sheet to a set of nodes in the document.
...And 8 more matches
Block and Line Layout Cheat Sheet - Archive of obsolete content
used in nsblockreflowcontext::com
putecollapsedtopmargin().
... mcom
putedwidth mcom
putedheight mcom
putedmargin mcom
putedborderpadding mcom
putedpadding mcom
putedoffsets mcom
putedminwidth mcom
putedmaxwidth mcom
putedminheight mcom
putedmaxheight given the current container frame and the style applied to the child, these values are the resolved values for the child frame's box.
...this is com
puted when the nsblockreflowstate flag brs_com
putemaxwidth is set.
...And 8 more matches
jspage - Archive of obsolete content
t;},getwindow:function(){return this;}});native.implement([element,document],{getelement:function(a,b){return document.id(this.getelements(a,true)[0]||null,b); },getelements:function(a,d){a=a.split(",");var c=[];var b=(a.length>1);a.each(function(e){var f=this.getelementsbytagname(e.trim());(b)?c.extend(f):c=f; },this);return new elements(c,{ddup:b,cash:!d});}});(function(){var h={},f={};var i={in
put:"checked",option:"selected",textarea:(browser.engine.webkit&&browser.engine.version<420)?"innerhtml":"value"}; var c=function(l){return(f[l]||(f[l]={}));};var g=function(n,l){if(!n){return;}var m=n.uid;if(browser.engine.trident){if(n.clearattributes){var q=l&&n.clonenode(false); n.clearattributes();if(q){n.mergeattributes(q);}}else{if(n.removeevents){n.removeevents();}}if((/object/i).test(n.tagna...
...indow:function(){return this.ownerdocument.window;},getdocument:function(){return this.ownerdocument; },getelementbyid:function(o,n){var m=this.ownerdocument.getelementbyid(o);if(!m){return null;}for(var l=m.parentnode;l!=this;l=l.parentnode){if(!l){return null; }}return document.id(m,n);},getselected:function(){return new elements($a(this.options).filter(function(l){return l.selected;}));},getcom
putedstyle:function(m){if(this.currentstyle){return this.currentstyle[m.camelcase()]; }var l=this.getdocument().defaultview.getcom
putedstyle(this,null);return(l)?l.getpropertyvalue([m.hyphenate()]):null;},toquerystring:function(){var l=[]; this.getelements("in
put, select, textarea",true).each(function(m){if(!m.name||m.disabled||m.type=="submit"||m.type=="reset"||m.type=="file"){return;}var n=(m.tagna...
...umber(a))){a=math.round(a);}}this.style[b]=a;return this;},getstyle:function(g){switch(g){case"opacity":return this.get("opacity"); case"float":g=(browser.engine.trident)?"stylefloat":"cssfloat";}g=g.camelcase();var a=this.style[g];if(!$chk(a)){a=[];for(var f in element.shortstyles){if(g!=f){continue; }for(var e in element.shortstyles[f]){a.push(this.getstyle(e));}return a.join(" ");}a=this.getcom
putedstyle(g);}if(a){a=string(a);var c=a.match(/rgba?\([\d\s,]+\)/); if(c){a=a.replace(c[0],c[0].rgbtohex());}}if(browser.engine.presto||(browser.engine.trident&&!$chk(parseint(a,10)))){if(g.test(/^(height|width)$/)){var b=(g=="width")?["left","right"]:["top","bottom"],d=0; b.each(function(h){d+=this.getstyle("border-"+h+"-width").toint()+this.getstyle("padding-"+h).toint();},this);return this["offse...
...And 8 more matches
Table Reflow Internals - Archive of obsolete content
absolutely positioned elements) reflows reflowee and passes a reflow state (in) and a reflow metrics (in/out) review of reflow the reflow state: is a node in a tree structurally equivalent to the frame tree of reflow participants contains: reflow type, avail size, various com
puted values, resolved style structs possible request for preferred size and more.
...table reflow example <table width=300> <tr> <td>foo</td> <td>bar zap</td> </tr> </table> key: r = reflow reason, 0 (initial), 2 (resize) a = avail w, h c = com
puted w, h d = desired w, h me = max elem w debugging frame reflow gives instructions for turning this on: tblo 030176cc r=0 a=8940,uc c=0,0 cnt=429 tbl 030178c4 r=0 a=8940,uc c=4470,uc cnt=430 rowg 03017a7c r=0 a=uc,uc c=uc,uc cnt=431 row 03017c08 r=0 a=uc,uc c=uc,uc cnt=432 cell 03017da8 r=0 a=uc,uc c=uc,uc cnt=433 block 03017e08 r=0 a=uc,uc c=uc,uc cnt=434 bloc...
... special height reflow when there is a % height frame inside a cell without a com
puted height the frame will never get a chance to size based on the final cell height in paginated mode when there is a height on the table, the table doesn't allocate extra height to rows until after it does a pass 2 reflow and then it is too late this can be fixed by doing a special 3rd pass reflow special reflow example <table border=2 width=300> <tr> <td> this cell's width is ...
...And 8 more matches
Mozilla XForms User Interface - Archive of obsolete content
for example, a xforms in
put control may appear as a text field or as a datepicker depending on whether it is bound to a xsd:string type or a xsd:date type.
... when a xf:out
put binds to a node that has a type of xsd:date, we out
put the date value as plain text.
... an out
put bound to a date and also having @appearance='full' will display as a calendar.
...And 8 more matches
HTML: A good basis for accessibility - Learn web development
prerequisites: basic com
puter literacy, a basic understanding of html (see introduction to html), and an understanding of what accessibility is.
... note: it is a good idea to have a screen reader set up on your local com
puter so that you can do some testing of the examples shown below.
...00"> <a href="#" align="center">home</a> </td> <td width="200"> <a href="#" align="center">our team</a> </td> <td width="200"> <a href="#" align="center">projects</a> </td> <td width="200"> <a href="#" align="center">contact</a> </td> <td width="300"> <form width="300"> <in
put type="search" name="q" placeholder="search query" width="300"> </form> </td> <td width="100"> <button width="100">go!</button> </td> </tr> <!-- spacer row --> <tr id="spacer" height="10"> <td> </td> </tr> <!-- main content and aside row --> <tr id="main"> <td id="content" colspan="4" bgcolor="...
...And 8 more matches
HTML: A good basis for accessibility - Learn web development
prerequisites: basic com
puter literacy, a basic understanding of html (see introduction to html), and an understanding of what accessibility is.
... note: it is a good idea to have a screen reader set up on your local com
puter so that you can do some testing of the examples shown below.
...00"> <a href="#" align="center">home</a> </td> <td width="200"> <a href="#" align="center">our team</a> </td> <td width="200"> <a href="#" align="center">projects</a> </td> <td width="200"> <a href="#" align="center">contact</a> </td> <td width="300"> <form width="300"> <in
put type="search" name="q" placeholder="search query" width="300"> </form> </td> <td width="100"> <button width="100">go!</button> </td> </tr> <!-- spacer row --> <tr id="spacer" height="10"> <td> </td> </tr> <!-- main content and aside row --> <tr id="main"> <td id="content" colspan="4" bgcolor="...
...And 8 more matches
Images, media, and form elements - Learn web development
prerequisites: basic com
puter literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to understand the way that some elements behave unusually when styled with css.
... many form controls are added to your page by way of the <in
put> element — this defines simple form fields such as text in
puts, through to more complex fields added in html5 such as color and date pickers.
... there are some additional elements, such as <textarea> for multiline text in
put, and also elements used to contain and label parts of forms such as <fieldset> and <legend>.
...And 8 more matches
Fundamental text and font styling - Learn web development
prerequisites: basic com
puter literacy, html basics (study introduction to html), css basics (study introduction to css).
...a simple example looks like so: p { font-family: arial; } this would make all paragraphs on a page adopt the arial font, which is found on any com
puter.
...the problem is to find a way to know which font is available on the com
puter used to see our web pages.
...And 8 more matches
HTML forms in legacy browsers - Learn web development
and html5 <in
put> types don't fail when not supported: they fall back to type=text.
... html in
put types the in
put types added in html5 are all useable, even in ancient browsers, because the way they degrade is highly predictable.
... if a browser does not know the value of the type attribute of an <in
put> element, it will fall back as if the value were text.
...And 8 more matches
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 "{{label}}"</label> <in
put :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 <span class="visually-hidden">edit for {{label}}</span> ...
... 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; } in
put { 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 > * { flex: 0 0 100%; } </style> note: walk through the above code then read the below description to make sure you understand everything the component is doing before moving on.
...we create a form with an <in
put> field for editing the name of our to-do.
...And 8 more matches
Creating our first Vue component - Learn web development
<template> <div> <in
put type="checkbox" id="todo-item" checked="false" /> <label for="todo-item">my todo item</label> </div> </template> using todoitem inside our app this is all fine, but we haven’t added the component to our app yet, so there’s no way to test it and see if everything is working.
...you can think of props as being similar to in
puts in a function.
... your component’s template section should now look like this: <template> <div> <in
put type="checkbox" id="todo-item" checked="false" /> <label for="todo-item">{{label}}</label> </div> </template> go back to your browser and you'll see the todo item rendered as before, but without a label (oh no!).
...And 8 more matches
NSS tools : signtool
you can, for example, move an object-signing certificate and its associated private key from one com
puter to another on a credit-card-sized device called a smart card.
...the higher the level of compression, the smaller the out
put but the longer the operation takes.
...in all cases, the certificate is also out
put to a file named x509.cacert, which has the mime-type application/x-x509-ca-cert.
...And 8 more matches
Hacking Tips
it might be simpler to use the codegenerator::link lineno instead of the full qualified name to
put the breakpoint.
... if you want to
put a breakpoint at the function's entry, you can do: b *address (for instance here, b* 0x7ffff7ff6032).
...be aware that functions which are usually dumping some out
put will do it in the shell where valgrind is started and not in the shell where gdb is started.
...And 8 more matches
Index
(there is a pending exception if the most recently thrown exception in cx has not yet been caught or cleared.) 203 js_clearregexpstatics jsapi reference, reference, référence(2), spidermonkey js_clearregexpstatics clears the pending in
put string and flags of the built-in regexp object.
...the result could be the same as one of the in
put strings, if the other string is zero length.
... 263 js_executeregexp jsapi reference, spidermonkey js_executeregexp and js_newregexpobjectnostatics execute the regexp object, reobj, to the specified in
put string, chars, from *indexp index.
...And 8 more matches
nsIAnnotationService
if they haven't visited a page in a couple of months, they probably aren't interested in many other annotations, the positions of things, or other stuff you create, so
put that in the weeks policy.
... setpageannotationstring() this method sets an annotation for given uri by taking a string as in
put value, overwriting any previous annotation with the same url/name.
... setitemannotationstring() this method sets an annotation for given item by taking a string as in
put value, overwriting any previous annotation with the same url/name.
...And 8 more matches
Using the clipboard
const gclipboardhelper = components.classes["@mozilla.org/widget/clipboardhelper;1"] .getservice(components.interfaces.nsiclipboardhelper); gclipboardhelper.copystring("
put me on the clipboard, please."); this example will first create a clipboard helper and then copy a short string to the clipboard.
... this method only works to
put strings on the clipboard.
...the first is an object that holds the data to
put on the clipboard.
...And 8 more matches
AudioWorkletNodeOptions - Web APIs
properties numberofin
puts optional the value to initialize the numberofin
puts property to.
... numberofout
puts optional the value to initialize the numberofout
puts property to.
... out
putchannelcount optional an array defining the number of channels for each out
put.
...And 8 more matches
Background Tasks API - Web APIs
this code draws any pending updates to the document currently being displayed, runs any javascript code the page needs to run, accepts events from in
put devices, and dispatches those events to the elements that should receive them.
...by the time your callback is run, the current frame has already finished drawing, and all layout updates and com
putations have been completed.
...we'll be using that to com
pute the value returned by our shim for timeremaining().
...And 8 more matches
ScriptProcessorNode - Web APIs
the scriptprocessornode interface is an audionode audio-processing module that is linked to two buffers, one containing the in
put audio data, one containing the processed out
put audio data.
... an event, implementing the audioprocessingevent interface, is sent to the object each time the in
put buffer contains new data, and the event handler terminates when it has filled the out
put buffer with data.
... the size of the in
put and out
put buffer are defined at the creation time, when the audiocontext.createscriptprocessor() method is called (both are defined by audiocontext.createscriptprocessor()'s buffersize parameter).
...And 8 more matches
A simple RTCDataChannel sample - Web APIs
we'll cover the mechanics of accomplishing the connection and transmitting and receiving data, but we will save the bits about locating and linking to a remote com
puter for another example.
...first, we have a couple of buttons for establishing and closing the connection: <button id="connectbutton" name="connectbutton" class="buttonleft"> connect </button> <button id="disconnectbutton" name="disconnectbutton" class="buttonright" disabled> disconnect </button> then there's a box which contains the text in
put box into which the user can type a message to transmit, with a button to send the entered text.
... <div class="messagebox"> <label for="message">enter a message: <in
put type="text" name="message" id="message" placeholder="message text" in
putmode="latin" size=60 maxlength=120 disabled> </label> <button id="sendbutton" name="sendbutton" class="buttonright" disabled> send </button> </div> finally, there's the little box into which we'll insert the messages.
...And 8 more matches
Spaces and reference spaces: Spatial tracking in WebXR - Web APIs
but webxr goes beyond that by adding the ability to track the location, orientation, and motion of the in
put devices which generate data used to determine the position and movement of individual parts of the viewer's body (with appropriate equipment).
...a pose, simply
put, describes a position and orientation relative to the origin of the reference space from which it was created.
... getpose() com
putes the position of an xrreferencespace relative to the origin of a specified xrspace and then creates a pose representing the resulting position and orientation.
...And 8 more matches
font - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyespercentagesas each of the properties of the shorthand:font-size: refer to the parent element's font sizeline-height: refer to the font size of the element itselfcom
puted valueas each of the properties of the shorthand:font-style: as specifiedfont-variant: as specifiedfont-weight: the keyword or the numerical value as specified, with bolder and lighter transformed to the real valuefont-stretch: as specifiedfont-size: as specified, but with relative lengths converted into absolute lengthsline-height: for percentage and length values, the absolute length, otherwis...
...</p> <form action="createshorthand()"> <div class="cf"> <div class="setpropcont"> font-style<br/> <in
put type="radio" id="font-style-none" name="font_style" checked="" value="" onchange="setcss()"> <label for="font-style-none">none</label><br/> <in
put type="radio" id="font-style-normal" name="font_style" value="normal" onchange="setcss()"> <label for="font-style-normal">normal</label><br/> <in
put type="radio" id="font-style-italic" name="font_style" value="italic" onchange="s...
...etcss()"> <label for="font-style-italic">italic</label><br/> <in
put type="radio" id="font-style-oblique" name="font_style" value="oblique" onchange="setcss()"> <label for="font-style-oblique">oblique</label> </div> <div class="setpropcont"> font-variant<br> <in
put type="radio" id="font-variant-none" name="font_variant" checked="" value=" " onchange="setcss()"> <label for="font-variant-none">none</label><br/> <in
put type="radio" id="font-variant-normal" name="font_variant" value="normal" onchange="setcss()"> <label for="font-variant-normal">normal</label><br/> <in
put type="radio" id="font-variant-small-caps" name="font_variant" value="small-caps" onchange="setcss()"> <label for="font-variant-small-caps">small-caps</la...
...And 8 more matches
HTML attribute: min - HTML: Hypertext Markup Language
the min attribute defines the minimum value that is acceptable and valid for the in
put containing the attribute.
...if a value is specified for min that isn't a valid number, the in
put has no minimum value.
... valid for the numeric in
put types, including the date, month, week, time, datetime-local, number and range types, and the <meter> element, the min attribute is a number that specifies the most negative value a form control to be considered valid.
...And 8 more matches
HTML attribute: step - HTML: Hypertext Markup Language
valid for the numeric in
put types, including the date, month, week, time, datetime-local, number and range types, the step attribute is a number that specifies the granularity that the value must adhere to or the keyword any.
...if not explicitly included, step defaults to 1 for number and range, and 1 unit type (minute, week, month, day) for the date/time in
put types.
... the default stepping value for number in
puts is 1, allowing only integers to be entered, unless the stepping base is not an integer.
...And 8 more matches
Authoring MathML - MathML
mathbird is a convenient add-on for thunderbird to insert such mathml expressions using the asciimath in
put syntax.
... moreover, a latex-to-mathml in
put box has also been integrated into seamonkey since version 2.28 and into thunderbird since version 31.
... pros: you get static web pages: the latex source don't need to be parsed at each page load, the mathml code is exposed to web crawlers and you can
put them easily on any web server.
...And 8 more matches
Digital audio concepts - Web media technologies
com
puters, however, are digital.
... in order to represent a sound wave in a way com
puters can manipulate and work with (let alone transmit over a network), the sound has to be converted into a digital form.
... sound enters the com
puter through a microphone or other in
put in the form of a stream of electrons whose voltage varies to represent the amplitude of the sound wave.
...And 8 more matches
lang/functional - Archive of obsolete content
memoize(fn, hasher) memoizes a given function by caching the com
puted result.
... useful for speeding up slow-running com
putations.
... if passed an optional hashfunction, it will be used to com
pute the hash key for storing the result, based on the arguments to the original function.
...And 7 more matches
How to convert an overlay extension to restartless - Archive of obsolete content
if you want to also make your add-on extractionless then you may need "step 3" if you're loading files with nsifilein
putstream or something similar, or a jar: uri might work.
...the first is to use the nsizipreader interface which permits continuing to use nsiin
putstreams, etc.
... a constant with your id components.utils.import("resource://gre/modules/addonmanager.jsm"); addonmanager.getaddonbyid(myaddonid,function(addon) { var file = services.io.newuri("resource://myaddon/filename.ext",null,null) .queryinterface(components.interfaces.nsifileurl) .file; var stream = components.classes["@mozilla.org/network/file-in
put-stream;1"] .createinstance(components.interfaces.nsifilein
putstream) .queryinterface(components.interfaces.nsiseekablestream); stream.init(file, 0x01, 0444, 0); // read-only, read by owner/group/others, normal behavior /* do stuff */ }); this bit of code is paraphrased and probably not to be recommended as-is, but it should work.
...And 7 more matches
JXON - Archive of obsolete content
org/licenses/gpl-3.0-standalone.html |*| \*/ function parsetext (svalue) { if (/^\s*$/.test(svalue)) { return null; } if (/^(?:true|false)$/i.test(svalue)) { return svalue.tolowercase() === "true"; } if (isfinite(svalue)) { return parsefloat(svalue); } if (isfinite(date.parse(svalue))) { return new date(svalue); } return svalue; } function getjxontree (oxmlparent) { var vresult = /*
put here the default value for empty nodes!
...vbuiltval : /*
put here the default value for empty nodes: */ true; } /* else { object.freeze(vresult); } */ return vresult; } var myobject = getjxontree(doc); alert(myobject.catalog.product.catalog_item[1].size.color_swatch["@image"]); // "black_cardigan.jpg" alert(myobject.catalog.product.catalog_item[1].size.color_swatch); // "black" !
...{} : /*
put here the default value for empty nodes: */ true; if (bchildren) { for (var onode, nitem = 0; nitem < oparentnode.childnodes.length; nitem++) { onode = oparentnode.childnodes.item(nitem); if (onode.nodetype === 4) { scollectedtxt += onode.nodevalue; } /* nodetype is "cdatasection" (4) */ else if (onode.nodetype === 3) { scollectedtxt += onode.nodevalue.trim(); } ...
...And 7 more matches
MMgc - Archive of obsolete content
forgetting a write barrier if you forget to
put a write barrier on a pointer, the incremental mark process might miss the pointer being changed.
...forgetting a drc if you forget to
put a drc macro on a pointer to an rcobject from unmanaged memory, you can get a dangling pointer.
...see if there are missing drc macros that need to be
put in.
...And 7 more matches
Reading textual data - Archive of obsolete content
converting read data if you read data from nsiscriptablein
putstream as described on the file i/o code snippets page, you can convert it to utf-8 // sstream is nsiscriptablein
putstream var str = sstream.read(4096); var utf8converter = components.classes["@mozilla.org/intl/utf8converterservice;1"].
... getservice(components.interfaces.nsiutf8converterservice); var data = utf8converter.converturispectoutf8 (str, "utf-8"); gecko 1.8 and newer reading strings starting with gecko 1.8 (seamonkey 1.0, firefox 1.5), you can use nsiconverterin
putstream to read strings from a stream (nsiin
putstream).
...using utf-8 for this example: */ "utf-8"; const replacementchar = components.interfaces.nsiconverterin
putstream.default_replacement_character; var is = components.classes["@mozilla.org/intl/converter-in
put-stream;1"] .createinstance(components.interfaces.nsiconverterin
putstream); is.init(fis, charset, 1024, replacementchar); now you can read string from is: var str = {}; var numchars = is.readstring(4096, str); if (numchars != 0 /* eof */) var read_string = str.value; to read the entire stream and do something with the data: var str = {}; while (is.readstring(4096, str) != 0) { processdata(str.value); } don't forget to close the stream when you're done w...
...And 7 more matches
RDF Modifications - Archive of obsolete content
« previousnext » one of the most useful aspects of using templates with rdf datasources is that when the rdf datasource changes, for instance a new triple is added, or a triple is removed, the template updates accordingly, adding or removing result out
put as needed.
...when the rdf parser loads rdf/xml, it starts with a new empty datasource, and as the parser parses the in
put data, it calls the datasource's assert function to add each found triple.
...if the triple wouldn't cause any change in the out
put, the builder won't make any changes.
...And 7 more matches
textbox (Toolkit autocomplete) - Archive of obsolete content
attributes accesskey, autocompletepopup, autocompletesearch, autocompletesearchparam, completedefaultindex, completeselectedindex,crop, disableautocomplete, disabled, disablekeynavigation, enablehistory, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, in
puttooltiptext, label, maxlength, maxrows, minresultsforpopup, nomatch, onchange, onin
put, onsearchcomplete, ontextentered, ontextreverted, open, readonly,showcommentcolumn, showimagecolumn, size, tabindex, tabscrolling, timeout, type, value properties accessibletype, completedefaultindex, controller, crop, disableautocomplete, disablekeynavigation, disabled, editable, focused, forcecomplet...
...e, highlightnonmatches, ignoreblurwhilesearching, in
putfield, label, maxlength, maxrows, minresultsforpopup, open, popup, popupopen, searchcount, searchparam, selectionend, selectionstart, showcommentcolumn, showimagecolumn,size, tabindex, tabscrolling, textlength, textvalue, timeout, type, value methods getsearchat, onsearchcomplete, ontextentered, ontextreverted, select, setselectionrange examples <textbox type="autocomplete" autocompletesearch="history"/> attributes accesskey type: character this should be set to a character that is used as a shortcut key.
... in
puttooltiptext type: string the tooltip text for the textbox.
...And 7 more matches
Textbox (XPFE autocomplete) - Archive of obsolete content
attributes accesskey, alwaysopenpopup, autocompletesearch, autocompletesearchparam, autofill, autofillaftermatch, autofill, completedefaultindex, crop, disableautocomplete, disableautocomplete, disabled, disablehistory, enablehistory, focused, forcecomplete, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, ignoreblurwhilesearching, in
puttooltiptext, label, maxlength, maxrows, minresultsforpopup, minresultsforpopup, nomatch, onchange, onerrorcommand, onin
put, onsearchcomplete, ontextcommand, ontextentered, ontextrevert, ontextreverted, open, readonly, searchsessions, showcommentcolumn, showcommentcolumn, showpopup, size, tabindex, tabscrolling, tabscrolling, timeout, type, useraction, value properties accessible, a...
...lwaysopenpopup, autofill, autofillaftermatch, completedefaultindex, crop, disableautocomplete, disabled, editable, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, in
putfield, issearching, iswaiting, label, maxlength, maxrows, minresultsforpopup, nomatch, open, popup, popupopen, resultspopup, searchcount, searchparam, searchsessions, selectionend, selectionstart, sessioncount, showcommentcolumn, showpopup, size, tabindex, tabscrolling, textlength, textvalue, timeout, type, useraction, value methods addsession, clearresults, getdefaultsession, getresultat, getresultcount, getresultvalueat, getsession, getsessionbyname, getsessionresultat, getsessionstatusat, getsessionvalueat, removesession, select, setselectionrange, syncsessions examples (example needed...
... autofillaftermatch obsolete since gecko 1.9.1 type: boolean if set to true, the entire text of the best match will be displayed at the end of the in
put.
...And 7 more matches
Creating XULRunner Apps with the Mozilla Build System - Archive of obsolete content
dd_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.
...and what's more, you can skip the following section, partially compensating you for all that extra work you
put in just now.
...ac_add_options --with-libxul-sdk=/path/to/xulrunner-sdk ac_add_options --enable-application=mccoy you still need to get the mozilla source code and
put your project in a subdirectory underneath the mozilla root.
...And 7 more matches
CSS - Archive of obsolete content
-linesthe -ms-hyphenate-limit-lines css property is a microsoft extension specifying the maximum number of consecutive lines in an element that may be ended with a hyphenated word.-ms-hyphenate-limit-zonethe -ms-hyphenate-limit-zone css property is a microsoft extension specifying the width of the hyphenation zone.-ms-ime-alignthe -ms-ime-align css property is a microsoft extension aligning the in
put method editor (ime) candidate window box relative to the element on which the ime composition is active.
...however, those elements' ancestors have this pseudo-class applied to them.:-moz-system-metric()this page was auto-generated because a user created a sub-page to this page.::-ms-browsethe ::-ms-browse css pseudo-element is a microsoft extension that represents the button that opens the file picker of <in
put type="file">.::-ms-checkthe ::-ms-check css pseudo-element is a microsoft extension that represents checkboxes and radio button groups created by <in
put type="checkbox"> and <in
put type="radio">.::-ms-clearthe ::-ms-clear css pseudo-element creates a clear button at the edge of an <in
put type="text"> text control that clears the current value.
...a slider control is one possible representation of <in
put type="range">.::-ms-fill-upperthe ::-ms-fill-upper css pseudo-element is a microsoft extension that represents the upper portion of the track of a slider control; that is, the portion corresponding to values greater than the value currently selected by the thumb.
...And 7 more matches
Drawing graphics - Learn web development
inside the canvas tags, you can
put some fallback content, which is shown if the user's browser doesn't support canvas.
...we use our degtorad() function to convert 60 degrees to radians, as math.tan() expects an in
put value in radians.
... a simple character animation now let's create our own simple animation — we'll get a character from a certain rather awesome retro com
puter game to walk across the screen.
...And 7 more matches
Introduction to web APIs - Learn web development
prerequisites: basic com
puter literacy, a basic understanding of html and css, javascript basics (see first steps, building blocks, javascript objects).
... 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 com
puter's gpu or other graphics functions.
...they generally fall into two categories: browser apis are built into your web browser and are able to expose data from the browser and surrounding com
puter environment and do useful complex things with it.
...And 7 more matches
Manipulating documents - Learn web development
prerequisites: basic com
puter literacy, a basic understanding of html, css, and javascript — including javascript objects.
... active learning: a dynamic shopping list to round off the article, we'd like to set you a little challenge — we want to make a simple shopping list example that allows you to dynamically add items to the list using a form in
put and button.
... when you add an item to the in
put and press the button: the item should appear in the list.
...And 7 more matches
Ember interactivity: Events, classes and state - Learn web development
creating todos for our card-header / todo in
put, we'll want to be able to submit our typed in todo task when we press the enter key and have it appear in the todos list.
... we want to be able to capture the text typed into the in
put.
... add the new line shown below to your header.hbs file: <in
put 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.
...And 7 more matches
Accessibility in React - Learn web development
exploring the keyboard usability problem start by clicking on the in
put at the top of our app, as if you're going to add a new task.
... you'll see a thick, dashed outline around that in
put.
...press the tab key, and you will see the outline appear around the "add" button beneath the in
put.
...And 7 more matches
Focus management with Vue refs - Learn web development
the last bit of functionality to look at is focus management, or
put another way, how we can improve our app's keyboard accessibility.
...you should see a focus outline on the in
put for adding new to-do items.
...we'll also want to
put focus back on the "edit" button when a user cancels or saves their edit.
...And 7 more matches
NSS Tools certutil
out
put defaults to standard out unless you use -oout
put-file argument.
... use the -a argument to specify ascii out
put.
... arguments -a use ascii format or allow the use of ascii format for in
put or out
put.
...And 7 more matches
Rhino serialization
rhino serialization apis two new classes, scriptableout
putstream and scriptablein
putstream, were introduced to handle serialization of rhino classes.
... these classes extend objectout
putstream and objectin
putstream respectively.
... writing an object to a file can be done in a few lines of java code: fileout
putstream fos = new fileout
putstream(filename); scriptableout
putstream out = new scriptableout
putstream(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.
...And 7 more matches
Rhino shell
readurl(url [, charactercoding]) open an in
put connection to the given string url, read all its bytes and convert them to a string using the specified character coding or default character coding if explicit coding argument is not given.
... in
put - the process in
put.
... if it is not java.io.in
putstream, it is converted to string and sent to the process as its in
put.
...And 7 more matches
Parser API
source string default: null a description of the in
put source; typically a filename, path, or url.
... interface memberexpression <: expression { type: "memberexpression"; object: expression; property: identifier | expression; com
puted: boolean; } a member expression.
... if com
puted === true, the node corresponds to a com
puted e1[e2] expression and property is an expression.
...And 7 more matches
nsIHTMLEditor
atagname); nsidomelement getselectioncontainer(); void ignorespuriousdragevent(in boolean aignorespuriousdragevent); void increasefontsize(); void indent(in astring aindent); void insertelementatselection(in nsidomelement aelement, in boolean adeleteselection); void insertfromdrop(in nsidomevent aevent); void inserthtml(in astring ain
putstring); void inserthtmlwithcontext(in astring ain
putstring, in astring acontextstr, in astring ainfostr, in astring aflavor, in nsidomdocument asourcedoc, in nsidomnode adestinationnode, in long adestinationoffset, in boolean adeleteselection); void insertlinkaroundselection(in nsidomelement aanchorelement); boolean isanonymouselement(in nsidomelement aelement); ...
...special in
put value for links: use "href" to get a link node (an "a" tag with the "href" attribute set) return value the new element created.
... getelementorparentbytagname() return the in
put node or a parent matching the given atagname, starting the search at the supplied node.
...And 7 more matches
nsIPipe
xpcom/io/nsipipe.idlscriptable this interface represents an in-process buffer that can be read using nsiin
putstream and written using nsiout
putstream.
... inherits from: nsisupports last changed in gecko 1.6 method overview void init(in boolean nonblockingin
put, in boolean nonblockingout
put, in unsigned long segmentsize, in unsigned long segmentcount, in nsimemory segmentallocator); attributes attribute type description in
putstream nsiasyncin
putstream the pipe's in
put end, which also implements nsisearchablein
putstream.
... out
putstream nsiasyncout
putstream the pipe's out
put end.
...And 7 more matches
AudioProcessingEvent - Web APIs
the web audio api audioprocessingevent represents events that occur when a scriptprocessornode in
put buffer is ready to be processed.
... playbacktime read only double the time when the audio will be played, as defined by the time of audiocontext.currenttime in
putbuffer read only audiobuffer the buffer containing the in
put audio data to be processed.
... the number of channels is defined as a parameter, numberofin
putchannels, of the factory method audiocontext.createscriptprocessor().
...And 7 more matches
Examples of web and XML development using the DOM - Web APIs
mple shows the use of the height and width properties alongside images of varying dimensions: <!doctype html> <html lang="en"> <head> <title>width/height example</title> <script> function init() { var arrimages = new array(3); arrimages[0] = document.getelementbyid("image1"); arrimages[1] = document.getelementbyid("image2"); arrimages[2] = document.getelementbyid("image3"); var objout
put = document.getelementbyid("out
put"); var strhtml = "<ul>"; for (var i = 0; i < arrimages.length; i++) { strhtml += "<li>image" + (i+1) + ": height=" + arrimages[i].height + ", width=" + arrimages[i].width + ", style.height=" + arrimages[i].style.height + ", style.width=" + arrimages[i].style.width + "<\/li>"; } strhtml += "...
...<\/ul>"; objout
put.innerhtml = strhtml; } </script> </head> <body onload="init();"> <p>image 1: no height, width, or style <img id="image1" src="https://udn.realityripple.com/samples/d2/8ba7141ed1.gif"> </p> <p>image 2: height="50", width="500", but no style <img id="image2" src="https://udn.realityripple.com/samples/d2/8ba7141ed1.gif" height="50" width="500"> </p> <p>image 3: no height, width, but style="height: 50px; width: 500px;" <img id="image3" src="https://udn.realityripple.com/samples/d2/8ba7141ed1.gif" style="height: 50px; width: 500px;"> </p> <div id="out
put"> </div> </body> </html> example 2: image attributes <!doctype html> <html lang="en"> <head> <title>modifying an image border</title> <script> function setborderwidth(width) { docum...
...ent.getelementbyid("img1").style.borderwidth = width + "px"; } </script> </head> <body> <p> <img id="img1" src="image1.gif" style="border: 5px solid green;" width="100" height="100" alt="border test"> </p> <form name="formname"> <in
put type="button" value="make border 20px-wide" onclick="setborderwidth(20);" /> <in
put type="button" value="make border 5px-wide" onclick="setborderwidth(5);" /> </form> </body> </html> example 3: manipulating styles in this simple example, some basic style properties of an html paragraph element are accessed using the style object on the element and that object's css style properties, which can be retrieved and set from the dom.
...And 7 more matches
The HTML DOM API - Web APIs
tmlbrelement htmlbaseelement htmlbodyelement htmlbuttonelement htmlcanvaselement htmldlistelement htmldataelement htmldatalistelement htmldetailselement htmldialogelement htmldirectoryelement htmldivelement htmlelement htmlembedelement htmlfieldsetelement htmlformelement htmlhrelement htmlheadelement htmlheadingelement htmlhtmlelement htmliframeelement htmlimageelement htmlin
putelement htmllielement htmllabelelement htmllegendelement htmllinkelement htmlmapelement htmlmediaelement htmlmenuelement htmlmetaelement htmlmeterelement htmlmodelement htmlolistelement htmlobjectelement htmloptgroupelement htmloptionelement htmlout
putelement htmlparagraphelement htmlparamelement htmlpictureelement htmlpreelement htmlprogresselement htmlquoteelement htmlscrip...
... barprop navigator window deprecated web app and browser integration interfaces external obsolete web app and browser integration interfaces applicationcache plugin pluginarray form support interfaces these interfaces provide structure and functionality required by the elements used to create and manage forms, including the <form> and <in
put> elements.
... eventsource examples in this example, an <in
put> element's in
put event is monitored in order to update the state of a form's "submit" button based on whether or not a given field currently has a value.
...And 7 more matches
Lighting a WebXR setting - Web APIs
fundamentally, simulating lighting in a virtual scene involves com
puting how much light from each light source is received by the eye after interacting with and reflecting off of each object in the scene.
... the effect of ambient light is com
puted by simply multiplying the intensity of the light source by the reflectance of the surface at the pixel's location.
... because the bouncing and scattering of light can be expensive to com
pute in real time, especially if multiple light sources are involved, it's common to use ambient lighting to simulate the scattered light caused by all the other light sources in the scene, instead of actually calculating the true effect of light scattering.
...And 7 more matches
Using the Web Audio API - Web APIs
you have in
put nodes, which are the source of the sounds you are manipulating, modification nodes that change those sounds as desired, and out
put nodes (destinations), which allow you to save or hear those sounds.
... since our scripts are playing audio in response to a user in
put event (a click on a play button, for instance), we're in good shape and should have no problems from autoplay blocking.
...we have a play button that changes to a pause button when the track is playing: <button data-playing="false" role="switch" aria-checked="false"> <span>play/pause</span> </button> before we can play our track we need to connect our audio graph from the audio source/in
put node to the destination.
...And 7 more matches
XRTargetRayMode - Web APIs
the webxr device api enumerated type xrtargetraymode describes the method by an in
put controller's targeting ray is being produced.
... values gaze the user is using a gaze-tracking system (or gaze in
put) which detects the direction in which the user is looking.
... screen the direction of the target ray is indicated using a tap on a touch screen, mouse, or other tactile in
put device.
...And 7 more matches
Understandable - Accessibility
3.2.2 on in
put (a) when data is in
putted into a control, or a setting is changed, context should not be changed unexpectedly.
... globaleventhandlers.onin
put is useful here.
... guideline 3.3 — in
put assistance: help users avoid and correct mistakes this guideline centers around helping users enter correct information when required with the minimum of mistakes.
...And 7 more matches
Audio and video manipulation - Developer guides
in this case, we'll show both the source video and the out
put greyscale frames.
... var processor = { timercallback: function() { if (this.video.paused || this.video.ended) { return; } this.com
puteframe(); var self = this; settimeout(function () { self.timercallback(); }, 16); // roughly 60 frames per second }, doload: function() { this.video = document.getelementbyid("my-video"); this.c1 = document.getelementbyid("my-canvas"); this.ctx1 = this.c1.getcontext("2d"); var self = this; this.video.addeventlistener("play", function() { self.width...
... = self.video.width; self.height = self.video.height; self.timercallback(); }, false); }, com
puteframe: function() { this.ctx1.drawimage(this.video, 0, 0, this.width, this.height); var frame = this.ctx1.getimagedata(0, 0, this.width, this.height); var l = frame.data.length / 4; for (var i = 0; i < l; i++) { var grey = (frame.data[i * 4 + 0] + frame.data[i * 4 + 1] + frame.data[i * 4 + 2]) / 3; frame.data[i * 4 + 0] = grey; frame.data[i * 4 + 1] = grey; frame.data[i * 4 + 2] = grey; } this.ctx1.
putimagedata(frame, 0, 0); return; } }; once the page has loaded you can call processor.doload() result this is a pretty simple example showing how to manipulate video frames using a canvas.
...And 7 more matches
HTML attribute: accept - HTML: Hypertext Markup Language
the accept property is an attribute of the file <in
put> type.
... for instance, there are a number of ways microsoft word files can be identified, so a site that accepts word files might use an <in
put> like this: <in
put type="file" id="docpicker" accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"> whereas if you're accepting a media file, you may want to be include any format of that media type: <in
put type="file" id="soundfile" accept="audio/*"> <in
put type="file" id="videofile" accept="video/*"> <in
put type="file" id="imagefile...
... examples when set on a file in
put type, the native file picker that opens up should only enable selecting files of the correct file type.
...And 7 more matches
HTML attribute: readonly - HTML: Hypertext Markup Language
if the readonly attribute is specified on an in
put element, because the user can not edit the in
put, the element does not participate in constraint validation.
... the readonly attribute is supported by text, search, url, tel, email, password, date, month, week, time, datetime-local, and number<in
put> types and the <textarea> form control elements.
... if present on any of these in
put types and elements, the :read-only pseudo class will match.
...And 7 more matches
Regular expressions - JavaScript
use the constructor function when you know the regular expression pattern will be changing, or you don't know the pattern and are getting it from another source, such as user in
put.
... escaping if you need to use any of the special characters literally (actually searching for a "*", for instance), you must escape it by
putting a backslash in front of it.
... var myre = /d(b+)d/g; var myarray = myre.exec('cdbbdbsbz'); if you do not need to access the properties of the regular expression, an alternative way of creating myarray is with this script: var myarray = /d(b+)d/g.exec('cdbbdbsbz'); // similar to "cdbbdbsbz".match(/d(b+)d/g); however, // "cdbbdbsbz".match(/d(b+)d/g) out
puts array [ "dbbd" ], while // /d(b+)d/g.exec('cdbbdbsbz') out
puts array [ 'dbbd', 'bb', index: 1, in
put: 'cdbbdbsbz' ].
...And 7 more matches
Web video codec guide - Web media technologies
effect of source video format on encoded out
put the degree to which the format of the source video will affect the out
put varies depending on the codec and how it works.
...however, things such as frame rate and, obviously, resolution will always have an impact on the out
put size of the media.
...for this and other reasons, the more motion there is in a video, the larger the out
put file will typically be.
...And 7 more matches
Performance fundamentals - Web Performance
users provide in
puts to the system through touch, movement, and speech.
... in return, they perceive out
puts through sight, touch, and hearing.
... performance is the quality of system out
puts in response to user in
puts.
...And 7 more matches
Miscellaneous - Archive of obsolete content
var focusedcontrol; window.addeventlistener("load", function(e) { onwindowload(e); }, false); function onwindowload() { gbrowser.addeventlistener("load", onpageload, true); } function onpageload() { pagedoc = document.commanddispatcher.focusedwindow.document; var in
putlist = pagedoc.getelementsbytagname('in
put'); for (var i=1; i<in
putlist.length; i++) { in
putlist.item(i).
... addeventlistener("focus", function(e) {onfocusin
put(e);}, false); in
putlist.item(i).
... addeventlistener("blur", function(e) {onblurin
put(e);}, false); } } function onfocusin
put(focusevent) { focusedcontrol = focusevent.originaltarget; } function onblurin
put(blurevent) { focusedcontrol = null; } or var element = document.commanddispatcher.focusedelement; inserting text at the cursor function inserttext(element, snippet) { var selectionend = element.selectionstart + snippet.length; var currentvalue = element.value; var beforetext = currentvalue.substring(0, element.selectionstart); var aftertext = currentvalue.substring(element.selectionend, currentvalue.length); element.value = beforetext + snippet + aftertext; element.focus(); //
put the cursor after the inserted text element.setselectionrange(selectionend, selectionend); } inserttext(docum...
...And 6 more matches
Positioning - Learn web development
we'd like you to follow along with the exercises on your local com
puter, if possible — grab a copy of 0_basic-flow.html from our github repo (source code here) and use that as a starting point.
... there are a number of different types of positioning that you can
put into effect on html elements.
... static positioning static positioning is the default that every element gets — it just means "
put the element into its normal position in the document layout flow — nothing special to see here." to demonstrate this, and get your example set up for future sections, first add a class of positioned to the second <p> in the html: <p class="positioned"> ...
...And 6 more matches
Styling links - Learn web development
prerequisites: basic com
puter literacy, html basics (study introduction to html), css basics (study introduction to css), css text and font fundamentals.
... default styles the following example illustrates what a link will behave like by default (the css is simply enlarging and centering the text to make it stand out more.) <p><a href="#">a simple link</a></p> p { font-size: 2rem; text-align: center; } note: all the links in the examples in this page are fake links — a # (hash, or pound sign) is
put in place of the real url.
...if you
put these in the wrong order, things won't work properly.
...And 6 more matches
Adding vector graphics to the Web - Learn web development
popular web raster formats include bitmap (.bmp), png (.png), jpeg (.jpg), and gif (.gif.) vector images are defined using algorithms — a vector image file contains shape and path definitions that the com
puter can use to work out what the image should look like when rendered on the screen.
...vector graphic,) and <mask> (apply a mask over the top of your image.) as a simple example, the following code creates a circle and a rectangle: <svg version="1.1" baseprofile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <rect width="100%" height="100%" fill="black" /> <circle cx="150" cy="100" r="90" fill="blue" /> </svg> this creates the following out
put: from the example above, you may get the impression that svg is easy to handcode.
... how to include svg code inside your html you can also open up the svg file in a text editor, copy the svg code, and paste it into your html document — this is sometimes called
putting your svg inline, or inlining svg.
...And 6 more matches
Test your skills: Conditionals - Learn web development
note: in the examples below, if there is an error in your code it will be out
putted into the results panel on the page, to help you try to figure out the answer (or into the browser's javascript console, in the case of the downloadable version).
... response — begins uninitialized, but is later used to store a reponse that will be printed to the out
put panel.
... response — begins uninitialized, but is later used to store a reponse that will be printed to the out
put panel.
...And 6 more matches
Website security - Learn web development
prerequisites: basic com
puter literacy.
... the process of modifying user data so that it can't be used to run scripts or otherwise affect the execution of server code is known as in
put sanitization.
... many web frameworks automatically sanitize user in
put from html forms by default.
...And 6 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"> <in
put 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 class...
...
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"> <in
put id="todo-0" type="checkbox" defaultchecked={true} /> <label classname="todo-label" htmlfor="todo-0"> {props.name} </label> </div> <div classname="btn-group"> ...
...change the defaultchecked attribute on the <in
put /> so that its value is equal to the completed prop.
...And 6 more matches
Strategies for carrying out testing - Learn web development
this is old and less capable, so let's
put it in the b grade tier.
...we should
put this into grade b as well.
...
putting together a testing lab one option for carrying out browser tests is to do the testing yourself.
...And 6 more matches
Gecko info for Windows accessibility vendors
it would be impractical to number all of the nodes in a document starting at 0, because whenever a node is inserted or removed it would be com
putationally very expensive to renumber things.
...this com
puted child id for events is always a negative value, unique to the iaccessible firing the event these negative childid's from events can be used with accessibleobjectfromevent(), or on the root accessible of a window with any iaccessible method that takes a variant, such as get_accchild().
... msaa features we do not support no one has yet asked for the following features (if you need something, please contact the mozilla accessibility community ): iaccessible methods that we don't currently support: get_acchelp get_acchelptopic
put_accname
put_accvalue we do not currently support the visual basic (idispatch) bindings for iaccessible.
...And 6 more matches
Internationalized Domain Names (IDN) Support in Mozilla Browsers
idn allows host/domain names with non-ascii characters for user in
put into a browser's location bar or url's embedded in web pages.
...if end users in
put non-ascii characters as part of a domain name or if a web page contains a link using a non-ascii domain name, the application must convert such in
put into a special encoded format using only the usual ascii subset characters.
... how mozilla browsers handle non-ascii domain names unicode and nameprep when mozilla receives idn in
put from the user via the location bar or a request to process non-ascii host name links, it first turns them into unicode, then normalizes the in
put string to make it conform to general uri requirement.
...And 6 more matches
nsIAccessNode
method overview nsiaccessnode getchildnodeat(in long childnum); obsolete since gecko 2.0 nsidomcssprimitivevalue getcom
putedstylecssvalue(in domstring pseudoelt, in domstring propertyname); domstring getcom
putedstylevalue(in domstring pseudoelt, in domstring propertyname); void scrollto(in unsigned long ascrolltype); void scrolltopoint(in unsigned long acoordinatetype, in long ax, in long ay); attributes note: attempting to access the attributes of a node that is unattached from ...
... getcom
putedstylecssvalue() retrieve the com
puted style value as nsidomcssprimitivevalue for the dom node this access node is associated with.
... nsidomcssprimitivevalue getcom
putedstylecssvalue( in domstring pseudoelt, in domstring propertyname ); parameters pseudoelt the pseudo element to retrieve style for, or empty string for general com
puted style information for the node.
...And 6 more matches
nsICacheEntryDescriptor
inherits from: nsicacheentryinfo last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void close(); void doom(); void doomandfailpendingrequests(in nsresult status); string getmetadataelement(in string key); void markvalid(); nsiin
putstream openin
putstream(in unsigned long offset); nsiout
putstream openout
putstream(in unsigned long offset); void setdatasize(in unsigned long size); void setexpirationtime(in pruint32 expirationtime); void setmetadataelement(in string key, in string value); void visitmetadata(in nsicachemetadatavisitor visitor); attributes attribute type description accessgranted nscacheaccessmode ge...
...openin
putstream() this method opens blocking in
put stream to cache data.
...nsiin
putstream openin
putstream( in unsigned long offset ); parameters offset read starting from this offset into the cached data.
...And 6 more matches
AudioWorkletProcessor() - Web APIs
available properties are as follows: numberofin
puts optional the value to initialize the numberofin
puts property to.
... numberofout
puts optional the value to initialize the numberofout
puts property to.
... out
putchannelcount optional an array defining the number of channels for each out
put.
...And 6 more matches
BaseAudioContext.createScriptProcessor() - Web APIs
syntax var scriptprocessor = audioctx.createscriptprocessor(buffersize, numberofin
putchannels, numberofout
putchannels); parameters buffersize the buffer size in units of sample-frames.
... numberofin
putchannels integer specifying the number of channels for this node's in
put, defaults to 2.
... numberofout
putchannels integer specifying the number of channels for this node's out
put, defaults to 2.
...And 6 more matches
Constraint validation API - Web APIs
concepts and usage certain html form controls, such as <in
put>, <select> and <textarea>, can restrict the format of allowable values, using attributes like required and pattern to set basic constraints.
...therefore, you need to also validate in
put values on the server side, in a way that is consistent with what is done on the client side.
... extensions to other interfaces the constraint validation api extends the interfaces for the form-associated elements listed below with a number of new properties and methods (elements that can have a form attribute that indicates their form owner): htmlbuttonelement htmlfieldsetelement htmlin
putelement htmlobjectelement htmlout
putelement htmlselectelement htmltextareaelement properties validity a read-only property that returns a validitystate object, whose properties represent validation errors for the value of that element.
...And 6 more matches
Timing element visibility with the Intersection Observer API - Web APIs
ting) { if (entry.intersectionratio >= 0.75) { adbox.dataset.lastviewstarted = entry.time; visibleads.add(adbox); } } else { visibleads.delete(adbox); if ((entry.intersectionratio === 0.0) && (adbox.dataset.totalviewtime >= 60000)) { replacead(adbox); } } }); } as previously mentioned, the intersectionobserver callback receives as in
put an array of all of the observer's targeted elements which have become either more or less visible than one of the intersection observer ratios.
...this function takes as an in
put an ad's htmldivelement object.
... if laststarted is non-zero—meaning the timer is currently running, we com
pute the difference between the current time and the start time to determine the number of milliseconds the timer has been visible since the last time it became visible.
...And 6 more matches
PerformanceEventTiming - Web APIs
auxclick beforein
put click compositionend compositionstart compositionupdate contextmenu dblclick dragend dragenter dragleave dragover dragstart drop in
put keydown keypress keyup mousedown mouseenter mouseleave mouseout mouseover mouseup pointerover pointerenter pointerdown pointerup pointercancel pointerout pointerleave gotpointercapture lostpointercapture touchstart touchend touchcancel properties performanceeventtiming.processingstart returns the time at which event dispatch started.
... examples the following example shows how to use the api for all events: const observer = new performanceobserver(function(list) { const perfentries = list.getentries().foreach(entry => { // full duration const in
putduration = entry.duration; // in
put delay (before processing event) const in
putdelay = entry.processingstart - entry.starttime; // synchronous event processing time (between start and end dispatch).
... const in
putsyncprocessingtime = entry.processingend - entry.processingstart; }); }); // register observer for event.
...And 6 more matches
XRSession - Web APIs
in
putsources read only returns a list of this session's xrin
putsources, each representing an in
put device used to control the camera and/or scene.
... in
putsourceschange an event of type xrin
putsourceschangeevent sent to the xrsession when the list of active xr in
put sources has changed.
... also available through the onin
putsourceschange event handler property.
...And 6 more matches
ime-mode - CSS: Cascading Style Sheets
the ime-mode css property controls the state of the in
put method editor (ime) for text fields.
... values auto no change is made to the current in
put method editor state.
... active the in
put method editor is initially active; text entry is performed through it unless the user specifically dismisses it.
...And 6 more matches
Content categories - Developer guides
they are: <a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>,<bdo>, <bdi>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <del>, <details>, <dfn>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <i>, <iframe>, <img>, <in
put>, <ins>, <kbd>, <keygen>, <label>, <main>, <map>, <mark>, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <out
put>, <p>, <picture>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <ul>, <var>, <video>, <wbr> and text.
... elements belonging to this category are <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <in
put>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <out
put>, <picture>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> and plain text (not only consisting of white spaces characters).
... some elements belong to this category only under specific conditions: <audio>, if the controls attribute is present <img>, if the usemap attribute is present <in
put>, if the type attribute is not in the hidden state <menu>, if the type attribute is in the toolbar state <object>, if the usemap attribute is present <video>, if the controls attribute is present palpable content content is palpable when it's neither empty or hidden; it is content that is rendered and is substantive.
...And 6 more matches
HTML attribute: required - HTML: Hypertext Markup Language
the boolean required attribute which, if present, indicates that the user must specify a value for the in
put before the owning form can be submitted.
... the required attribute is supported by text, search, url, tel, email, password, date, month, week, time, datetime-local, number, checkbox, radio, file, <in
put> types along with the <select> and <textarea> form control elements.
... if present on any of these in
put types and elements, the :required pseudo class will match.
...And 6 more matches
<form> - HTML: Hypertext Markup Language
instead, use the accept attribute on <in
put type=file> elements.
... autocomplete indicates whether in
put elements can by default have their values automatically completed by the browser.
...this value can be overridden by a formaction attribute on a <button>, <in
put type="submit">, or <in
put type="image"> element.
...And 6 more matches
HTTP Index - HTTP
18 list of default accept values accept, content negotiation, http, reference this article documents the default values for the http accept header for specific in
puts and browser versions.
... 23 reason: cors header 'access-control-allow-origin' does not match 'xyz' cors, corsalloworiginnotmatchingorigin, cross-origin, error, http, https, messages, reasons, security, console, troubleshooting simply
put, the origin making the request does not match any of the origins permitted by the access-control-allow-origin header.
... 127 feature-policy: camera directive, feature policy, feature-policy, http, reference, camera the http feature-policy header camera directive controls whether the current document is allowed to use video in
put devices.
...And 6 more matches
edgeMode - SVG: Scalable Vector Graphics
the edgemode attribute determines how to extend the in
put image as necessary with color values so that the matrix operations can be applied when the kernel is positioned at or near the edge of the in
put image.
... two elements are using this attribute: <feconvolvematrix> and <fegaussianblur> feconvolvematrix for <feconvolvematrix>, edgemode determines how to extend the in
put image as necessary with color values so that the matrix operations can be applied when the kernel is positioned at or near the edge of the in
put image.
... value duplicate | wrap | none default value duplicate animatable yes duplicate this value indicates that the in
put image is extended along each of its borders as necessary by duplicating the color values at the given edge of the in
put image.
...And 6 more matches
Compiling a New C/C++ Module to WebAssembly - WebAssembly
io.h> int main(int argc, char ** argv) { printf("hello world\n"); } now, using the terminal window you used to enter the emscripten compiler environment, navigate to the same directory as your hello.c file, and run the following command: emcc hello.c -s wasm=1 -o hello.html the options we’ve passed in with the command are as follows: -s wasm=1 — specifies that we want wasm out
put.
... if we don’t specify this, emscripten will just out
put asm.js, as it does by default.
... at this point in your source directory you should have: the binary wasm module code (hello.wasm) a javascript file containing glue code to translate between the native c functions, and javascript/wasm (hello.js) an html file to load, compile, and instantiate your wasm code, and display its out
put in the browser (hello.html) running your example now all that remains is for you to load the resulting hello.html in a browser that supports webassembly.
...And 6 more matches
passwords - Archive of obsolete content
so: given a form at http://www.example.com/login with the following html: <form action="http://login.example.com/foo/authenticate.cgi"> <div>please log in.</div> <label>username:</label> <in
put type="text" name="uname"> <label>password:</label> <in
put type="password" name="pword"> </form> the corresponding values for the credential (excluding username and password) should be: url: "http://www.example.com" formsubmiturl: "http://login.example.com" usernamefield: "uname" passwordfield: "pword" note that for both url and formsubmiturl, the portion of the url after the h...
... usernamefield string the value of the name attribute for the user name in
put field in a form.
... passwordfield string the value of the name attribute for the password in
put field in a form.
...And 5 more matches
places/bookmarks - Archive of obsolete content
examples creating a new bookmark let { bookmark, save } = require("sdk/places/bookmarks"); // create a new bookmark instance, unsaved let bookmark = bookmark({ title: "mozilla", url: "http://mozilla.org" }); // attempt to save the bookmark instance to the bookmarks database // and store the emitter let emitter = save(bookmark); // listen for events emitter.on("data", function (saved, in
putitem) { // on a "data" event, an item has been updated, passing in the // latest snapshot from the server as `saved` (with properties // such as `updated` and `id`), as well as the initial in
put // item as `in
putitem` console.log(saved.title === in
putitem.title); // true console.log(saved !== in
putitem); // true console.log(in
putitem === bookmark); // true }).on("end", function (save...
...ditems, in
putitems) { // similar to "data" events, except "end" is an aggregate of // all progress events, with ordered arrays as `saveditems` // and `in
putitems` }); creating several bookmarks with a new group let { bookmark, group, save } = require("sdk/places/bookmarks"); let group = group({ title: "guitars" }); let bookmarks = [ bookmark({ title: "ran", url: "http://ranguitars.com", group: group }), bookmark({ title: "ibanez", url: "http://ibanez.com", group: group }), bookmark({ title: "esp", url: "http://espguitars.com", group: group }) ]; // save `bookmarks` array -- notice we don't have `group` in the array, // although it needs to be saved since all bookmarks are children // of `group`.
... save(bookmarks).on("data", function (saved, in
put) { // a data event is called once for each item saved, as well // as implicit items, like `group` console.log(in
put === group || ~bookmarks.indexof(in
put)); // true }).on("end", function (saves, in
puts) { // like the previous example, the "end" event returns an // array of all of our updated saves.
...And 5 more matches
Rule Compilation - Archive of obsolete content
this will return a table of result records which are then used to generate out
put.
...the job of the query is to generate a set of out
put results.
...this way, different kinds of out
put can be created based on the specifics of the result.
...And 5 more matches
Grids - Archive of obsolete content
just like html tables, you
put content such as labels and buttons inside the rows.
... however, the grid allows either row or column based organization so you may
put content in either rows or in columns.
...alternatively, you can
put content inside the columns, and use the rows to specify the appearance.
...And 5 more matches
Legacy layout methods - Learn web development
you can follow along by creating a new index.html file on your com
puter, filling it with a simple html template, and inserting the below code into it at the appropriate places.
... first of all, we need some content to
put into our columns.
...nulla luctus aliquam dolor, eu lacinia lorem placerat vul
putate.
...And 5 more matches
Introduction to automated testing - Learn web development
inside this file,
put the following: const gulp = require('gulp'); gulp.task('default', function() { console.log('gulp running'); }); this requires the gulp module we installed earlier, and then runs a basic task that does nothing except for printing a message to the terminal — this is useful for letting us know that gulp is working.
...the second pipe() function writes the out
put html file to the build directory.
... in the in
put version of the file, you may have noticed that we
put an empty <p> element; htmltidy has removed this by the time the out
put file has been created.
...And 5 more matches
Introducing a complete toolchain - Learn web development
we'll go all the way from setting up a sensible development environment and
putting transformation tools in place to actually deploying your app on netlify.
...if this is the case, install it using the following command: npm install prettier -g now that prettier is installed, running and tidying your code can be done on the command line on an individual file basis from anywhere on your com
puter, for example: prettier --write ./src/index.html note: in the command above, i use prettier with the --write flag.
... for the sake of simplicity, in this chapter we're not going to explore all the features of eslint, but we will
put a configuration in place that works for our particular project and its requirements.
...And 5 more matches
Mozilla Web Developer FAQ
in fact, since the in
put to the browser can be of arbitrary length, there is no upper bound for the number of distinct ways of deviating from the standards.
... therefore, it is impossible to test whether mozilla reacts exactly like browser x to every possible in
put.
... (likewise, there is no upper bound for the number of ways different features of the standards themselves can be combined, which makes software quality assurance challenging.) also, the ways in which browser x reacts to some standards-incompliant in
put are not all intentional.
...And 5 more matches
NSS sources building testing
create a new directory on your com
puter that you will use as your local work area, and run the following commands.
... once the build is done, you can find the build out
put below directory dist/?, where ?
...after the build on your com
puter has succeeded, before you can run the tests on your com
puter, it might be necessary to set additional environment variables.
...And 5 more matches
NSS tools : signver
synopsis signtool -a | -v -d directory [-a] [-i in
put_file] [-o out
put_file] [-s signature_file] [-v] description the signature verification tool, signver, is a simple command-line utility that unpacks a base-64-encoded pkcs#7 signed object and verifies the digital signature using standard cryptographic techniques.
... -i in
put_file gives the in
put file for the object with signed data.
... -o out
put_file gives the out
put file to which to write the results.
...And 5 more matches
XPCOM Interface Reference
cessibletextnsiaccessibletextchangeeventnsiaccessibletreecachensiaccessiblevaluensiaccessiblewin32objectnsialertsservicensiannotationobservernsiannotationservicensiappshellnsiappshellservicensiappstartupnsiappstartup_mozilla_2_0nsiapplicationcachensiapplicationcachechannelnsiapplicationcachecontainernsiapplicationcachenamespacensiapplicationcacheservicensiapplicationupdateservicensiarraynsiasyncin
putstreamnsiasyncout
putstreamnsiasyncstreamcopiernsiasyncverifyredirectcallbacknsiauthinformationnsiauthmodulensiauthpromptnsiauthprompt2nsiauthpromptadapterfactorynsiauthpromptcallbacknsiauthpromptprovidernsiauthpromptwrappernsiautocompletecontrollernsiautocompletein
putnsiautocompleteitemnsiautocompletelistenernsiautocompleteobservernsiautocompleteresultnsiautocompletesearchnsibadcertlistener2nsibid...
...ikeyboardnsibinaryin
putstreamnsibinaryout
putstreamnsiblocklistpromptnsiblocklistservicensiboxobjectnsibrowserboxobjectnsibrowserhistorynsibrowsersearchservicensicrlinfonsicrlmanagernsicachensicachedeviceinfonsicacheentrydescriptornsicacheentryinfonsicachelistenernsicachemetadatavisitornsicacheservicensicachesessionnsicachevisitornsicachingchannelnsicancelablensicategorymanagernsichannelnsichanneleventsinknsichannelpolicynsicharsetresolvernsichromeframemessagemanagernsichromeregistrynsiclassinfonsiclipboardnsiclipboardcommandsnsiclipboarddragdrophooklistnsiclipboarddragdrophooksnsiclipboardhelpernsiclipboardownernsicollectionnsicommandcontrollernsicommandlinensicommandlinehandlernsicommandlinerunnernsicomponentmanagernsicomponentregistrarnsicompositionstringsynthesizernsiconsolelistenernsicons...
...olemessagensiconsoleservicensicontainerboxobjectnsicontentframemessagemanagernsicontentprefnsicontentprefcallback2nsicontentprefobservernsicontentprefservicensicontentprefservice2nsicontentsecuritypolicynsicontentsniffernsicontentviewnsicontentviewmanagernsicontentviewernsicontrollernsicontrollersnsiconverterin
putstreamnsiconverterout
putstreamnsicookiensicookie2nsicookieacceptdialognsicookieconsentnsicookiemanagernsicookiemanager2nsicookiepermissionnsicookiepromptservicensicookieservicensicookiestoragensicrashreporternsicryptohmacnsicryptohashnsicurrentcharsetlistenernsicyclecollectorlistenernsidbchangelistenernsidbfolderinfonsidnslistenernsidnsrecordnsidnsrequestnsidnsservicensidomcanvasrenderingcontext2dnsidomchromewindownsidomclientrectnsidomdesktopnotificationnsidomdesktopnotificationcent...
...And 5 more matches
Migrating from Firebug - Firefox Developer Tools
in the devtools the box model is part of the com
puted side panel.
... inspect com
puted styles the com
puted values of css properties are displayed within the devtools' com
puted side panel like within firebug's com
puted side panel.
... the difference is that in the devtools the properties are always listed alphabetically and not grouped (see bug 977128) and there is no option to hide the mozilla specific styles, therefore there is an in
put field allowing to filter the properties.
...And 5 more matches
Intensive JavaScript - Firefox Developer Tools
a button to run the javascript, labeled "do pointless com
putations!".
... leaving the radio button set to "use blocking call in main thread", make a recording: press the "start animations" button start recording a performance profile press "do pointless com
putations!" two or three times stop recording the profile exactly what you see will vary from one machine to another, but it will be something like this: the top half of this is the waterfall overview.
...mes = []; for (var i = 0; i < iterations; i++) { var candidate = i * (multiplier * math.random()); var isprime = true; for (var c = 2; c <= math.sqrt(candidate); ++c) { if (candidate % c === 0) { // not prime isprime = false; break; } } if (isprime) { primes.push(candidate); } } return primes; } function dopointlesscom
putationswithblocking() { var primes = calculateprimes(iterations, multiplier); pointlesscom
putationsbutton.disabled = false; console.log(primes); } we're just running a (very inefficient) primality test 50 times, for some quite large numbers.
...And 5 more matches
Console messages - Firefox Developer Tools
because reflows can be com
putationally expensive and directly affect the user interface, they can have a big impact on the responsiveness of a website or web app.
... however, if some javascript code reads a style that has been modified, then the browser must perform a synchronous reflow in order to calculate the com
puted style to return.
... for example, code like this will cause an immediate, synchronous, reflow, when it calls window.getcom
putedstyle(thing).height: var thing = document.getelementbyid("the-thing"); thing.style.display = "inline-block"; var thingheight = window.getcom
putedstyle(thing).height; because of this, it's a good idea to avoid interleaving write and read calls to an element's styles when manipulating the dom, because every time you read back a style that has been invalidated by a previous write call, you force a synchronous reflow.
...And 5 more matches
AudioNode.disconnect() - Web APIs
syntax audionode.disconnect(); audionode.disconnect(out
put); audionode.disconnect(destination); audionode.disconnect(destination, out
put); audionode.disconnect(destination, out
put, in
put); return value undefined parameters there are several versions of the disconnect() method, which accept different combinations of parameters to control which nodes to disconnect from.
...if this value is an audionode, a single node is disconnected from, with any other, optional, parameters (out
put and/or in
put) further limiting which in
puts and/or out
puts should be disconnected.
... if this value is an audioparam, then the connection to that audioparam is terminated, and the node's contributions to that com
puted parameter become 0 going forward once the change takes effect.
...And 5 more matches
HTMLFormElement - Web APIs
named in
puts are added to their owner form instance as properties, and can overwrite native properties if they share the same name (e.g.
... a form with an in
put named action will have its action property return that in
put instead of the form's action html attribute).
... for example: <in
put name="id"> will take precedence over <form id="…">.
...And 5 more matches
Using microtasks in JavaScript with queueMicrotask() - Web APIs
they're a highly specialized feature of modern browser-based javascript development, allowing you to schedule code to jump in front of other things in the long set of things waiting to happen on the user's com
puter.
... html <pre id="log"> </pre> javascript the code below is used to log the out
put.
...this call is bracketed by calls to log(), a custom function that simply out
puts text to the screen.
...And 5 more matches
KeyboardEvent.code - Web APIs
if the in
put device isn't a physical keyboard, but is instead a virtual keyboard or accessibility device, the returned value will be set by the browser to match as closely as possible to what would happen with a physical keyboard, to maximize compatibility between physical and virtual in
put devices.
... this property is useful when you want to handle keys based on their physical positions on the in
put device rather than the characters associated with those keys; this is especially common when writing code to handle in
put for games that simulate a gamepad-like environment using keys on the keyboard.
... be aware, however, that you can't use the value reported by keyboardevent.code to determine the character generated by the keystroke, because the keycode's name may not match the actual character that's printed on the key or that's generated by the com
puter when the key is pressed.
...And 5 more matches
SubtleCrypto.deriveKey() - Web APIs
basekey is a cryptokey representing the in
put to the derivation algorithm.
...they can then use this shared secret as a symmetric key to secure their communication, or can use the secret as an in
put to derive such a key (for example, using the hkdf algorithm).
...it's designed to derive key material from some high-entropy in
put, such as the out
put of an ecdh key agreement operation.
...And 5 more matches
Using Touch Events - Web APIs
today, most web content is designed for keyboard and mouse in
put.
... however, devices with touch screens (especially portable devices) are mainstream and web applications can either directly process touch-based in
put by using touch events or the application can use interpreted mouse events for the application in
put.
... a disadvantage to using mouse events is that they do not support concurrent user in
put, whereas touch events support multiple simultaneous in
puts (possibly at different locations on the touch surface), thus enhancing user experiences.
...And 5 more matches
ValidityState.typeMismatch - Web APIs
the read-only typemismatch property of a validitystate object indicates if the value of an <in
put>, after having been edited by the user, does not conform to the constraints set by the element's type attribute.
... the email in
put type expects one or more valid email addresses, depending on whether the multiple attribute is present.
...if the value of the email in
put is not an empty string, a single valid e-mail address, or one or more comma separated email address if the multiple attribute is present, there is a typemismatch.
...And 5 more matches
A basic 2D WebGL animation example - Web APIs
we'll see that com
putation shortly.
...the rotated position of the vertex is com
puted by applying the rotation vector, found in the uniform urotationvector, that's been com
puted by the javascript code.
... then the final position is com
puted by multiplying the rotated position by the scaling vector provided by the javascript code in uscalingfactor.
...And 5 more matches
Writing a WebSocket server in C# - Web APIs
you must: obtain the value of the "sec-websocket-key" request header without any leading or trailing whitespace concatenate it with "258eafa5-e914-47da-95ca-c5ab0dc85b11" (a special guid specified by rfc 6455) com
pute sha-1 and base64 hash of the new value write the hash back as the value of "sec-websocket-accept" response header in an http response if (new system.text.regularexpressions.regex("^get").ismatch(data)) { const string eol = "\r\n"; // http/1.1 defines the sequence cr lf as the end-of-line marker byte[] response = encoding.utf8.getbytes("http/1.1 101 switching protocols" + eol ...
... + "connection: upgrade" + eol + "upgrade: websocket" + eol + "sec-websocket-accept: " + convert.tobase64string( system.security.cryptography.sha1.create().com
putehash( encoding.utf8.getbytes( new system.text.regularexpressions.regex("sec-websocket-key: (.*)").match(data).groups[1].value.trim() + "258eafa5-e914-47da-95ca-c5ab0dc85b11" ) ) ) + eol + eol); stream.write(response, 0, response.length); } decoding messages after a successful handshake, the client will send encoded messages to the server.
... example in c#: byte[] decoded = new byte[3]; byte[] encoded = new byte[3] {112, 16, 109}; byte[] mask = new byte[4] {61, 84, 35, 6}; for (int i = 0; i < encoded.length; i++) { decoded[i] = (byte)(encoded[i] ^ mask[i % 4]); }
put together wsserver.cs // // csc wsserver.cs // wsserver.exe using system; using system.net; using system.net.sockets; using system.text; using system.text.regularexpressions; class server { public static void main() { string ip = "127.0.0.1"; int port = 80; var server = new tcplistener(ipaddress.parse(ip), port); server.start(); console.writeline("s...
...And 5 more matches
Starting up and shutting down a WebXR session - Web APIs
emulator usage while somewhat awkward compared to using an actual headset, this makes it possible to experiment with and developer webxr code on a desktop com
puter, where webxr isn't normally available.
... other improvements include updating the emulator to rename the xr interface to xrsystem, introduce support for squeeze (grip) in
put sources, and add support for the xrin
putsource property profiles.
... if you use xr in
put controllers, watch the in
putsourceschange event to detect the addition or removal of xr in
put controllers, and the various select and squeeze action events.
...And 5 more matches
Example and tutorial: Simple synth keyboard - Web APIs
the settings bar beneath the keyboard, we'll
put some controls for configuring the layer.
...then we establish a box that will be presented on the left side of the bar and place a label and an <in
put> element of type "range".
... <div class="settingsbar"> <div class="left"> <span>volume: </span> <in
put type="range" min="0.0" max="1.0" step="0.01" value="0.5" list="volumes" name="volume"> <datalist id="volumes"> <option value="0.0" label="mute"> <option value="1.0" label="100%"> </datalist> </div> we specify a default value of 0.5, and we provide a <datalist> element which is connected to the range using the name attribute to find an option list whose id matches; in this case, the data set is named "volume".
...And 5 more matches
XRView - Web APIs
model view matrix the model view matrix is a matrix which defines the position of an object relative to the space in which it's located: if objectmatrix is a transform applied to the object to provide its basic position and rotation, then the model view matrix can be com
puted by multiplying the object's matrix by the inverse of the view transform matrix, like this: mat4.multiply(modelviewmatrix, view.transform.inverse.matrix, objectmatrix); normal matrix the model view's normal matrix is used when lighting the scene, in order to transform each surface's normal vectors to ensure that the light is reflected in the correct direction given the orientation and positio...
...it's com
puted by inverting then transposing the model view matrix: mat4.invert(normalmatrix, modelviewmatrix); mat4.transpose(normalmatrix, normalmatrix); teleporting an object to programmatically move and/or rotate (often referred to as teleporting) an object, you need to create a new reference space for that object which applies a transform that encapsulates the desired changes.
... the createteleporttransform() function returns the transform needed to move and rotate an object whose current situation is described by the reference space refspace to a new position and orientation which is com
puted using previously recorded mouse and keyboard in
put data which has generated offsets for yaw, pitch, and position along all three axes.
...And 5 more matches
Accessibility documentation index - Accessibility
8 forms aria, accessibility the following pages provide various techniques for improving the accessibility of web forms: 9 alerts aria, accessibility, forms, web you have a form — a contact form, for example — that you want to
put some accessible error checking into.
... 20 using the aria-invalid attribute aria, accessibility, attribute, codingscripting, html, javascript, needscontent, role(2), agent, alert, user, useragent the aria-invalid attribute is used to indicate that the value entered into an in
put field does not conform to the format expected by the application.this may include formats such as email addresses or telephone numbers.
...list multiple element ids in a space delimited fashion.this idea is similar to how the "for" attribute is used to link a label to an in
put.assistive technology, such as screen readers, use this attribute to catalog the objects in a document so that users can navigate between them.
...And 5 more matches
:valid - CSS: Cascading Style Sheets
the :valid css pseudo-class represents any <in
put> or other <form> element whose contents validate successfully.
... /* selects any valid <in
put> */ in
put:valid { background-color: powderblue; } this pseudo-class is useful for highlighting correct fields for the user.
... syntax :valid examples indicating valid and invalid form fields in this example, we use structures like this, which include extra <span>s to generate content on; we'll use these to provide indicators of valid/invalid data: <div> <label for="fname">first name *: </label> <in
put id="fname" name="fname" type="text" required> <span></span> </div> to provide these indicators, we use the following css: in
put + span { position: relative; } in
put + span::before { position: absolute; right: -20px; top: 5px; } in
put:invalid { border: 2px solid red; } in
put:invalid + span::before { content: '✖'; color: red; } in
put:valid + span::before { content: '✓'; color: green; } we set the <span>s to position: relative so that we can position the generated content relative ...
...And 5 more matches
background-size - CSS: Cascading Style Sheets
intrinsic dimensions and proportions the com
putation of values depends on the image's intrinsic dimensions (width and height) and intrinsic proportions (width-to-height ratio).
... based on the intrinsic dimensions and proportions, the rendered size of the background image is com
puted as follows: if both components of background-size are specified and are not auto: the background image is rendered at the specified size.
...the other dimension is com
puted using the specified dimension and the intrinsic proportions.
...And 5 more matches
Event reference
submit the submit button is pressed printing events event name fired when beforeprint the print dialog is opened afterprint the print dialog is closed text composition events event name fired when compositionstart the composition of a passage of text is prepared (similar to keydown for a keyboard in
put, but works with other in
puts such as speech recognition).
... media events event name fired when audioprocess the in
put buffer of a scriptprocessornode is ready to be processed.
... storage events change (see non-standard events) storage update events checking downloading error noupdate obsolete updateready value change events broadcast checkboxstatechange hashchange in
put radiostatechange readystatechange valuechange uncategorized events invalid message message open show less common and non-standard events abortable fetch events event name fired when abort a dom request is aborted, i.e.
...And 5 more matches
Getting Started - Developer guides
step 3 – a simple example let's
put it all together with a simple http request.
...our javascript will request a dynamic page this time, test.php, which will take the data we send and return a "com
puted" string - "hello, [user data]!" - which we'll alert().
... first we'll add a text box to our html so the user can enter their name: <label>your name: <in
put type="text" id="ajaxtextbox" /> </label> <span id="ajaxbutton" style="cursor: pointer; text-decoration: underline"> make a request </span> we'll also add a line to our event handler to get the user's data from the text box and send it to the makerequest() function along with the url of our server-side script: document.getelementbyid("ajaxbutton").onclick = function() { var username = document.getelementbyid("ajaxtextbox").value; makerequest('test.php',username); }; we need to modify makerequest() to accept the user data and pass it along to the server.
...And 5 more matches
HTML attribute: pattern - HTML: Hypertext Markup Language
the pattern attribute is an attribute of the text, tel, email, url, password, and search in
put types.
... the pattern attribute, when specified, is a regular expression which the in
put's value must match in order for the value to pass constraint validation.
... some of the in
put types supporting the pattern attribute, notably the email and url in
put types, have expected value syntaxes that must be matched.
...And 5 more matches
<button>: The Button element - HTML: Hypertext Markup Language
autofocus html5 this boolean attribute specifies that the button should have in
put focus when the page loads.
... multipart/form-data: use to submit <in
put> elements with their type attributes set to file.
... this attribute is also available on <in
put type="image"> and <in
put type="submit"> elements.
...And 5 more matches
Browser detection using the user agent - HTTP
if more people visit the webpage to see the cats, then it might be a good idea to
put all the cats higher in the source code than the dogs so that more people can find what they are looking for faster on smaller screens where the content collapses down to one column.
... browser version the browser version is often, but not always,
put in the value part of the browsername/versionnumber token in the user agent string.
... this is of course not the case for internet explorer (which
puts the version number right after the msie token), and for opera after version 10, which has added a version/versionnumber token.
...And 5 more matches
Introduction - JavaScript
there are also more advanced server side versions of javascript such as node.js, which allow you to add more functionality to a website than simply downloading files (such as realtime collaboration between multiple com
puters).
...for example, client-side extensions allow an application to place elements on an html form and respond to user events such as mouse clicks, form in
put, and page navigation.
... javascript and the ecmascript specification javascript is standardized at ecma international — the european association for standardizing information and communication systems (ecma was formerly an acronym for the european com
puter manufacturers association) to deliver a standardized, international programming language based on javascript.
...And 5 more matches
Inline options - Archive of obsolete content
!-- boolean stored as an integer --> <setting pref="extensions.myaddon.boolint" type="boolint" title="boolean 3" on="1" off="2"/> <!-- integer example --> <setting pref="extensions.myaddon.int" type="integer" title="integer"/> <!-- string examples --> <setting pref="extensions.myaddon.text" type="string" title="text"/> <setting pref="extensions.myaddon.password" type="string" title="password" in
puttype="password"/> <!-- color example --> <setting pref="extensions.myaddon.color" type="color" title="color"/> <!-- file and directory examples --> <setting pref="extensions.myaddon.file" type="file" title="file"/> <setting pref="extensions.myaddon.directory" type="directory" title="directory"/> <!-- list example (this example would be stored as an integer) --> <setting pref="extensions.myaddon...
...alue="true" label="enabled"/> </radiogroup> </setting> <!-- button example - not tied to a preference, but attached to a command --> <setting title="do something" type="control"> <button id="myaddon-button" label="click me" oncommand="alert('thank you!');"/> </setting> setting element changed notifications most of the setting elements (it might be all i havent really looked), support onin
putchanged attribute.
... so like for the type="file", once a user browses and picks a file, when it updates the label it will trigger the onin
putchanged attribute.
...And 4 more matches
Notes on HTML Reflow - Archive of obsolete content
overview reflow is the process by which the geometry of the layout engine's formatting objects are com
puted.
...html uses a flow based layout model, meaning that most of the time it is possible to com
pute the geometry in a single pass.
...the xul box layout model, on the other hand, is constraint based , meaning that geometric preferences and constraints of neighboring elements are taken into consideration before the elements' final geometry can be com
puted.
...And 4 more matches
XUL accessibility guidelines - Archive of obsolete content
many screen reader users and those with physical disabilities rely on the keyboard as their primary in
put tool.
...
put into xul, this looking something like the following.
...many users set their com
puters to use larger than normal fonts and/or specific color themes.
...And 4 more matches
Explaining basic 3D theory - Game development
rendering pipeline the rendering pipeline is the process by which images are prepared and out
put onto the screen.
... terminology used in the diagram above is as follows: a primitive: an in
put to the pipeline — it's built from vertices and can be a triangle, point or line.
... vertex and fragment processing are programmable — you can write your own shaders that manipulate the out
put.
...And 4 more matches
Unconventional controls - Game development
there's already a gamepad api working on the desktop com
puters, so we can imitate the experience, but we can go even further.
...captain rogers had the keyboard controls implemented already: this.cursors = this.in
put.keyboard.createcursorkeys(); //...
... to get the leap motion working on your com
puter you have to first install it by following the steps at leapmotion.com/setup.
...And 4 more matches
State machine - MDN Web Docs Glossary: Definitions of Web-related terms
a state machine reads a set of in
puts and changes to a different state based on those in
puts.
... looking at the final state, you can discern something about the series of in
puts leading to that state.
... there are two types of basic state machines: deterministic finite state machine this kind allows only one possible transition for any allowed in
put.
...And 4 more matches
Assessment: Accessibility troubleshooting - Learn web development
prerequisites: basic com
puter literacy, a basic understanding of html, css, and javascript, an understanding of the previous articles in the course.
...decompress the contents into a new directory somewhere on your local com
puter.
...if the online editor you are using doesn't have a separate css/js panel, feel free to
put them in appropriate <style> / <script> elements.
...And 4 more matches
Mobile accessibility - Learn web development
prerequisites: basic com
puter literacy, a basic understanding of html, css, and javascript, and an understanding of the previous articles in the course.
... user in
put — make user in
put requirements as painless as possible on mobile (e.g., in forms, keep typing to a minimum).
... user in
put on mobile devices, in
putting data tends to be more annoying for users than the equivalent experience on desktop com
puters.
...And 4 more matches
Styling lists - Learn web development
prerequisites: basic com
puter literacy, html basics (study introduction to html), css basics (study introduction to css), css text and font fundamentals.
...the following example: <ol start="4"> <li>toast pita, leave to cool, then slice down the edge.</li> <li>fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li> <li>wash and chop the salad.</li> <li>fill pita with salad, hummus, and fried halloumi.</li> </ol> gives you this out
put: reversed the reversed attribute will start the list counting down instead of up.
... the following example: <ol start="4" reversed> <li>toast pita, leave to cool, then slice down the edge.</li> <li>fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li> <li>wash and chop the salad.</li> <li>fill pita with salad, hummus, and fried halloumi.</li> </ol> gives you this out
put: note: if there are more list items in a reversed list than the value of the start attribute, the count will continue to zero and then into negative values.
...And 4 more matches
How to build custom form controls - Learn web development
remember, if you want to provide the same functionality as the existing native <select>, it should behave the exact same way as the select for all users, from keyboard to mouse to touch to screen reader, and any other in
put device.
...when it comes to standardized elements, of which the <select> is one, the specification authors spent an inordinate amount of time specifying all interactions for every use case for every in
put device.
... .select { /* the com
putations are made assuming 1em == 16px which is the default value in most browsers.
...And 4 more matches
Sending form data - Learn web development
prerequisites: basic com
puter literacy, an understanding of html, and basic knowledge of http and server-side programming.
... consider the following form: <form action="http://www.foo.com" method="get"> <div> <label for="say">what greeting do you want to say?</label> <in
put name="say" id="say" value="hi"> </div> <div> <label for="to">who do you want to say it to?</label> <in
put name="to" id="to" value="mom"> </div> <div> <button>send my greetings</button> </div> </form> since the get method has been used, you'll see the url www.foo.com/?say=hi&to=mom appear in the browser address bar when you submit the form.
... <form action="https://www.foo.com" method="post"> <div> <label for="say">what greeting do you want to say?</label> <in
put name="say" id="say" value="hi"> </div> <div> <label for="to">who do you want to say it to?</label> <in
put name="to" id="to" value="mom"> </div> <div> <button>send my greetings</button> </div> </form> when the form is submitted using the post method, you get no data appended to the url, and the http request looks like so, with the data included in the request body instead: ...
...And 4 more matches
Test your skills: HTML5 controls - Learn web development
this aim of this skill test is to assess whether you've understood our the html5 in
put types article.
... html5 controls 1 first let's explore some of the new html5 in
put types.
... create appropriate in
puts for a user to update their details for: email website phone number favourite color try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor.
...And 4 more matches
Test your skills: Other controls - Learn web development
other controls 1 in our first "other controls" assessment, we'll get you to create a multi-line text in
put.
... create a basic multi-line text in
put.
... give the in
put 35 columns, and 10 rows of space in which to add comments.
...And 4 more matches
Web forms — Working with user data - Learn web development
we have
put together a course that includes all the essential information you need to work towards your goal.
... the above text is a good indicator as to why we've
put web forms into its own standalone module, rather than trying to mix bits of it into the html, css, and javascript topic areas — form elements are more complex than most other html elements, and they also require a close marriage of related css and javascript techniques to get the most out of them.
... note: if you are working on a com
puter/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as jsbin or glitch.
...And 4 more matches
Dealing with files - Learn web development
when you're building a website, you need to assemble these files into a sensible structure on your local com
puter, make sure they can talk to one another, and get all your content looking right before you eventually upload them to a server.
... where should your website live on your com
puter?
... when you are working on a website locally on your com
puter, you should keep all the related files in a single folder that mirrors the published website's file structure on the server.
...And 4 more matches
From object to iframe — other embedding technologies - Learn web development
prerequisites: basic com
puter literacy, basic software installed, basic knowledge of working with files, familiarity with html fundamentals (as covered in getting started with html) and the previous articles in this module.
... insert it into the in
put box below, and see what the result is in the out
put.
... insert it into the in
put box below, and see what the result is in the out
put.
...And 4 more matches
Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
prerequisites: basic com
puter literacy, a reasonable understanding of javascript fundamentals.
... for instance, the code below (see it live) out
puts an alert containing "hello", then an alert containing "world" as soon as you click ok on the first alert.
... settimeout(function() { alert('world'); }, 0); alert('hello'); this can be useful in cases where you want to set a block of code to run as soon as all of the main thread has finished running —
put it on the async event loop, so it will run straight afterwards.
...And 4 more matches
Introduction to events - Learn web development
prerequisites: basic com
puter literacy, a basic understanding of html and css, javascript first steps.
... the example out
put is as follows: it's not just web pages another thing worth mentioning at this point is that events are not unique to javascript — most programming languages have some kind of event model, and the way the model works often differs from javascript's way.
...note: it is perfectly appropriate to
put all the code inside the addeventlistener() function, in an anonymous function, like this: btn.addeventlistener('click', function() { var rndcol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; document.body.style.backgroundcolor = rndcol; }); this mechanism has some advantages over the older mechanisms discussed earlier.
...And 4 more matches
Silly story generator - Learn web development
starting point to get this assessment started, you should: go and grab the html file for the example, save a local copy of it as index.html in a new directory somewhere on your com
puter, and do the assessment locally to begin with.
...if the online editor you are using doesn't have a separate javascript panel, feel free to
put it inline in a <script> element inside the html page.
... will generate another random silly story if you press the button again (and again...) the following screenshot shows an example of what the finished program should out
put: to give you more of an idea, have a look at the finished example (no peeking at the source code!) steps to complete the following sections describe what you need to do.
...And 4 more matches
Introduction to client-side frameworks - Learn web development
the web allows us to do things that used to be possible only in native applications installed on our com
puters.
... working directly with the dom, as in this example, requires understanding many things about how the dom works: how to make elements; how to change their properties; how to
put elements inside of each other; how to get them on the page.
...in order to translate what you write into dom changes, frameworks have to run their own code, which in turn makes your final piece of software larger and more com
putationally expensive to operate.
...And 4 more matches
TypeScript support in Svelte - Learn web development
thanks to the hard work of the svelte team, together with many contributors, we have an official solution ready to be
put to the test.
... let's start by running the validate script in watch mode inside your project root: npm run validate -- --watch this should out
put something like the following: svelte-check "--watch" loading svelte-check in workspace: ./svelte-todo-typescript getting svelte diagnostics...
...you'll see some warnings in the out
put of the validate script: $ npm run validate -- --watch > svelte-check "--watch" ./svelte-todo-typescript getting svelte diagnostics...
...And 4 more matches
Understanding client-side JavaScript frameworks - Learn web development
we have
put together a course that includes all the essential information you need to work towards your goal.
...we'll discover a little bit of detail about its background and use cases, set up a basic react toolchain on our local com
puter, and create and play with a simple starter app, learning a bit about how react works in the process.
...this article will walk you through
putting the basic app component structure and styling in place, ready for individual component definition and interactivity, which we'll add later.
...And 4 more matches
Accessibility information for UI designers and developers
see also: understanding sc 1.4.3: contrast the focus indicator users who navigate by keyboard (or other specialised in
put methods), rely on focus styles to see where they are on the page.
...this includes form elements like in
puts and select boxes, but also buttons.
... for form elements, it should be clear what kind of in
put is expected.
...And 4 more matches
Creating reftest-based unit tests
so, if the effect of complex markup is being tested,
put that complex markup into a page and create another page that uses simple markup to achieve the same visual effect.
...automated testing usually compares out
put against an invariant, a "gold standard", that is determined to be correct.
... the re-direct and the grep reduce the amount of excess out
put from the browser.
...And 4 more matches
How Mozilla's build system works
the primary out
put of the configure script is an executable file in the object directory called config.status.
... config.status contains 2 parts: data structures representing the out
put of configure and a command-line interface for preparing, configuring, or generating an appropriate build backend.
... when config.status runs, you'll see the following out
put: reticulating splines...
...And 4 more matches
Gecko Logging
mozilla logging macros moz_log(module, level, message) out
puts the given message if the module has the given log level enabled.
... message - a printf-style message to out
put.
... level - the out
put level of the message.
...And 4 more matches
mach
if you don't use mach, you have to find another solution for the following problems: discovering what commands or make targets are available (mach exposes everything through mach help while inside "mozilla-central" , else you'll just get a cryptic error message) making more sense out of command out
put (mach offers terminal colorization and structured logging) getting productive tools in the hands of others (mach "advertises" tools to people through mach help (unless it actually just gives you a cryptic error message) - in the former case, people don't need to discover your tool from a blog post, wiki page, or word of mouth).
... failed commands spew lots of extra error out
put, e.g.
... mach will print timings with each line of out
put from the build.
...And 4 more matches
Experimental features in Firefox
nightly 53 yes developer edition 53 no beta 53 no release 53 no preference name dom.dialog_element.enabled global attribute: in
putmode our implementation of the in
putmode global attribute has been updated as per the whatwg spec (bug 1509527), but we still need to make other changes too, like making it available on contenteditable content.
... nightly 75 yes developer edition 75 no beta 75 no release 75 no preference name dom.forms.in
putmode <link rel="preload"> the <link> element's rel attribute is intended to help provide performance gains by letting you download resources earlier in the page lifecycle, ensuring that they're available earlier and are less likely to block page rendering.
... webgpu api this new api provides low-level support for performing com
putation and graphics rendering using the graphics processing unit (gpu) of the user's device or com
puter.
...And 4 more matches
Performance best practices for Firefox front-end engineers
you might want to consider using a worker if you need to do some com
putation that can be done off of the main thread.
...this allows you to
put all of your dom writes (most importantly, anything that could change the size or position of things in the dom) just before the style and layout steps of the pipeline, combining all the style and layout calculations into a single batch so it all happens once, in a single frame tick, instead of across multiple frames.
... this also means that requestanimationframe() is not a good place to
put queries for layout or style information.
...And 4 more matches
HTML parser threading
additionally, each nshtml5parser has an associated nshtml5treeopexecutor that turns the out
put (tree operations; discussed later) of the portable parser core into actions performed on the gecko dom.
...once a unicode decoder has been set up, dodataavailable passes the byte data to the decoder whose out
put is accumulated into a linked list of nshtml5owningutf16buffer objects.
...the tokenizer calls into the tree builder which out
puts nshtml5treeoperation objects (tree ops) into a queue.
...And 4 more matches
SVN for Localizers
svn client: this is what a localizer installs on their own com
puter.
...you use it to copy files from the server to your com
puter and to push changed or localized files back onto the server.
... the first thing you need to do is copy the mozilla repository you want to work on to your com
puter.
...And 4 more matches
Mozilla Style System
the style system is the module of mozilla's code responsible for the loading and parsing of css style sheets, and the com
putation of com
puted values for all css properties.
... the handling of those com
puted values is the responsibility of other parts of the code.
...in one half (the backend) are the sources of specified style data, and in the other half (the frontend) is the code that turns the specified values into com
puted values.
...And 4 more matches
Memory reporting
the size is not com
puted analytically.
...this is a good thing, because com
puting sizes analytically doesn't count slop, and it is much more error-prone than using moz_malloc_usable_size.
...eturn moz_collect_report( "explicit/mystring", kind_heap, units_bytes, gmystring->sizeofincludingthis(mallocsizeof), "memory used for mystring."); } }; ns_impl_isupports1(mystringreporter, nsimemoryreporter) note that moz_define_malloc_size_of defines a function of type mozilla::mallocsizeof that is specific to this memory reporter (and will be identified as such in dmd's out
put).
...And 4 more matches
nsISelectionPrivate
allowadjacent specifies whether the returned ranges are allowed to touch the in
put range rather than merely overlapping it.
... resultcount returns the number of ranges that overlap (or touch) the in
put range.
... results returns the ranges that overlap (or touch) the in
put range.
...And 4 more matches
nsITransport
method overview void close(in nsresult areason); nsiin
putstream openin
putstream(in unsigned long aflags, in unsigned long asegmentsize, in unsigned long asegmentcount); nsiout
putstream openout
putstream(in unsigned long aflags, in unsigned long asegmentsize, in unsigned long asegmentcount); void seteventsink(in nsitransporteventsink asink, in nsieventtarget aeventtarget); constants open flags.
... openin
putstream() open an in
put stream on this transport.
... nsiin
putstream openin
putstream( in unsigned long aflags, in unsigned long asegmentsize, in unsigned long asegmentcount ); parameters aflags optional transport specific flags.
...And 4 more matches
AudioWorkletNode() - Web APIs
available properties are as follows: numberofin
puts optional the value to initialize the numberofin
puts property to.
... numberofout
puts optional the value to initialize the numberofout
puts property to.
... out
putchannelcount optional an array defining the number of channels for each out
put.
...And 4 more matches
BiquadFilterNode.getFrequencyResponse() - Web APIs
the two out
put arrays, magresponseout
put and phaseresponseout
put, must be created before calling this method; they must be the same size as the array of in
put frequency values (frequencyarray).
... syntax biquadfilternode.getfrequencyresponse(frequencyarray, magresponseout
put, phaseresponseout
put); parameters frequencyarray a float32array containing an array of frequencies, specified in hertz, which you want to filter.
... magresponseout
put a float32array to receive the com
puted magnitudes of the freqency response for each frequency value in the frequencyarray.
...And 4 more matches
ChannelMergerNode - Web APIs
the channelmergernode interface, often used in conjunction with its opposite, channelsplitternode, reunites different mono in
puts into a single out
put.
... each in
put is used to fill a channel of the out
put.
... if channelmergernode has one single out
put, but as many in
puts as there are channels to merge; the number of in
puts is defined as a parameter of its constructor and the call to audiocontext.createchannelmerger.
...And 4 more matches
console.assert() - Web APIs
objn a list of javascript objects to out
put.
... the string representations of each of these objects are appended together in the order listed and out
put.
...this parameter gives you additional control over the format of the out
put.
...And 4 more matches
Element: mousewheel event - Web APIs
note: on macos, the scroll distance (and therefore the value of detail) is com
puted based on the accelerated scroll distance.
... if the device supports continuous scroll (e.g., trackpad of macbook or mouse wheel which can be turned smoothly), the value is com
puted from accelerated scroll amount.
... if the device does not support continuous scroll (typically, old mouse wheel which cannot be turned smoothly), the value is com
puted from non-accelerated scroll amount (120 per notch).
...And 4 more matches
Element - Web APIs
element.com
putedname read only returns a domstring containing the label exposed to accessibility.
... element.com
putedrole read only returns a domstring containing the aria role that has been applied to a particular element.
... element.tabstop is a boolean indicating if the element can receive in
put focus via the tab key.
...And 4 more matches
FileList - Web APIs
an object of this type is returned by the files property of the html <in
put> element; this lets you access the list of files selected with the <in
put type="file"> element.
... note: prior to gecko 1.9.2, the in
put element only supported a single file being selected at a time, meaning that the filelist would contain only one file.
... starting with gecko 1.9.2, if the in
put element's multiple attribute is true, the filelist may contain multiple files.
...And 4 more matches
IIRFilterNode.getFrequencyResponse() - Web APIs
the two out
put arrays, magresponseout
put and phaseresponseout
put, must be created before calling this method; they must be the same size as the array of in
put frequency values (frequencyarray).
... syntax iirfilternode.getfrequencyresponse(frequencyarray, magresponseout
put, phaseresponseout
put); parameters frequencyarray a float32array containing an array of frequencies, specified in hertz, which you want to filter.
... magresponseout
put a float32array to receive the com
puted magnitudes of the freqency response for each frequency value in the frequencyarray.
...And 4 more matches
KeyboardEvent.key - Web APIs
if the key produces a character key that would result in a character being inserted into possibly an <in
put>, <textarea> or an element with htmlelement.contenteditable set to true, the beforein
put and in
put event types are fired in that order.
...clearconsole = document.getelementbyid('btn-clear-console'); function logmessage(message) { document.getelementbyid("console-log").innerhtml += message + "<br>"; } textarea.addeventlistener('keydown', (e) => { if (!e.repeat) logmessage(`key "${e.key}" pressed [event: keydown]`); else logmessage(`key "${e.key}" repeating [event: keydown]`); }); textarea.addeventlistener('beforein
put', (e) => { logmessage(`key "${e.data}" about to be in
put [event: beforein
put]`); }); textarea.addeventlistener('in
put', (e) => { logmessage(`key "${e.data}" in
put [event: in
put]`); }); textarea.addeventlistener('keyup', (e) => { logmessage(`key "${e.key}" released [event: keyup]`); }); btnclearconsole.addeventlistener('click', (e) => { let child = consolelog.firstchild; while (chi...
...ld) { consolelog.removechild(child); child = consolelog.firstchild; } }); result note: on browsers that don't fully implement the in
putevent interface which is used for the beforein
put and in
put events, you may get incorrect out
put on those lines of the log out
put.
...And 4 more matches
MediaDevices.ondevicechange - Web APIs
syntax mediadevices.ondevicechange = eventhandler; value a function you provide which accepts as in
put a event object describing the devicechange event that occurred.
...it displays in the browser window two lists: one of audio devices and one of video devices, with both the device's label (name) and whether it's an in
put or an out
put device.
... function updatedevicelist() { navigator.mediadevices.enumeratedevices() .then(function(devices) { audiolist.innerhtml = ""; videolist.innerhtml = ""; devices.foreach(function(device) { let elem = document.createelement("li"); let [kind, type, direction] = device.kind.match(/(\w+)(in
put|out
put)/i); elem.innerhtml = "<strong>" + device.label + "</strong> (" + direction + ")"; if (type === "audio") { audiolist.appendchild(elem); } else if (type === "video") { videolist.appendchild(elem); } }); }); } updatedevicelist() consists entirely of a call to the function enumeratedevices() on the mediadevices object referenced in the navigator...
...And 4 more matches
Capabilities, constraints, and settings - Web APIs
the constraint exerciser lets you experiment with the results of different constraint sets being applied to the audio and video tracks coming from the com
puter's a/v in
put devices (such as its webcam and microphone).
...in addition, the only acceptable in
put device is a camera facing the user (a "selfie cam").
... you can specify one or more media in
put device ids to establish restrictions on which in
put sources are allowed.
...And 4 more matches
Using Navigation Timing - Web APIs
for example, to measure the perceived loading time for a page: window.addeventlistener("load", function() { let now = new date().gettime(); let loadingtime = now - performance.timing.navigationstart; document.queryselector(".out
put").innertext = loadingtime + " ms"; }, false); this code, executed when the load event occurs, subtracts from the current time the time at which the navigation whose timing was recorded began (performance.timing.navigationstart), and out
puts that information to the screen by inserting it into an element.
... html <div class="out
put"> </div> css .out
put { border: 1px solid #bbb; font: 16px "open sans", "helvetica", "arial", sans-serif; } in tandem with appropriate html and css, the result is: the values listed are for the <iframe> in which the sample is presented above.
... determining navigation type to
put the timing information obtained from performancetiming into the correct perspective, you need to know more about what sort of load operation occurred.
...And 4 more matches
PublicKeyCredentialCreationOptions.extensions - Web APIs
extensions, an optional property of the publickeycredentialcreationoptions dictionary, is an object providing the client extensions and their in
put values.
...if true, the client out
puts an array of strings containing the extensions which are supported by the authenticator.
...if true, the client out
puts an arraybuffer which contains a value uniquely identifying a user verification data record.
...And 4 more matches
Using the Screen Capture API - Web APIs
example of a window allowing the user to select a display surface to capture you can then use the captured stream, capturestream, for anything that accepts a stream as in
put.
...the source of this audio might be the selected window, the entire com
puter's audio system, or the user's microphone (or a combination of all of the above).
... setup first, some constants are set up to reference the elements on the page to which we'll need access: the <video> into which the captured screen contents will be streamed, a box into which logged out
put will be drawn, and the start and stop buttons that will turn on and off capture of screen imagery.
...And 4 more matches
SubtleCrypto.digest() - Web APIs
a digest is a short fixed-length value derived from some variable-length in
put.
... cryptographic digests should exhibit collision-resistance, meaning that it's hard to come up with two different in
puts that have the same digest value.
... supported algorithms digest algorithms, also known as cryptographic hash functions, transform an arbitrarily large block of data into a fixed-size out
put, usually much shorter than the in
put.
...And 4 more matches
Adding 2D content to a WebGL context - Web APIs
it's just we're drawing a square and we're
putting it directly in front of the camera perpendicular to the view direction.
...its job is to transform the in
put vertex from its original coordinate system into the clip space coordinate system used by webgl, in which each axis has a range from -1.0 to 1.0, regardless of aspect ratio, actual size, or any other factors.
... in this example, we're not com
puting any lighting at all, since we haven't yet applied any to the scene.
...And 4 more matches
Taking still photos with WebRTC - Web APIs
this article shows how to use webrtc to access the camera on a com
puter or mobile phone with webrtc support and take a photo with it.
... next, we have a <canvas> element into which the captured frames are stored, potentially manipulated in some way, and then converted into an out
put image file.
... <canvas id="canvas"> </canvas> <div class="out
put"> <img id="photo" alt="the screen capture will appear in this box."> </div> that's all of the relevant html.
...And 4 more matches
Using DTMF with WebRTC - Web APIs
initialization when the page loads, we do some basic setup: we fetch references to the dial button and the log out
put box elements, and we use addeventlistener() to add an event listener to the dial button so that clicking it calls the connectanddial() function to begin the connection process.
... adding the audio to the connection as mentioned above, when the audio in
put from the microphone is obtained, gotstream() is called.
...e(event.candidate)) .catch(err => log("error adding candidate to receiver: " + err)); } else { log("caller is out of candidates."); } } if the icecandidate event has a non-null candidate property, we create a new rtcicecandidate object from the event.candidate string and "transmit" it to the receiver by calling receiverpc.addicecandidate(), providing the new rtcicecandidate as its in
put.
...And 4 more matches
Writing a WebSocket server in Java - Web APIs
here's an implementation split into parts: import java.io.ioexception; import java.io.in
putstream; import java.io.out
putstream; import java.net.serversocket; import java.net.socket; import java.security.messagedigest; import java.security.nosuchalgorithmexception; import java.util.base64; import java.util.scanner; import java.util.regex.matcher; import java.util.regex.pattern; public class websocket { public static void main(string[] args) throws ioexception, nosuchalgorithmexception ...
...{ serversocket server = new serversocket(80); try { system.out.println("server has started on 127.0.0.1:80.\r\nwaiting for a connection..."); socket client = server.accept(); system.out.println("a client connected."); socket methods: java.net.socket getin
putstream() returns an in
put stream for this socket.
... java.net.socket getout
putstream() returns an out
put stream for this socket.
...And 4 more matches
Fundamentals of WebXR - Web APIs
webxr additionally provides support for accepting in
puts from control devices such as handheld vr controllers or specialized mixed reality gamepads.
... another key difference is that webxr has integrated support for the advanced in
put controllers that are used with most mixed reality headsets, while webvr relied on the gamepad api to support the controllers.
... field of view the term field of view (fov) is one which applies to any visual technology, from old film cameras to modern digital video cameras, including the cameras in com
puters and mobile devices.
...And 4 more matches
XRHandedness - Web APIs
the webxr enumerated type xrhandedness provides values which identify which of a user's hands is being used to operate a particular in
put controller attached to the xr in
put device being used.
... xrhandedness is used as the value of the the xrin
putsource property handedness.
... values none the in
put controller is not associated with one of the user's hands.
...And 4 more matches
ARIA: search role - Accessibility
<form role="search"> <!-- search in
put --> </form> description the search role is a landmark.
...while there is a in
put of type search, there is html element that defines a search landmark.
... examples <form id="search" role="search"> <label for="search-in
put">search this site</label> <in
put type="search" id="search-in
put" name="search" spellcheck="false"> <in
put value="submit" type="submit"> </form> accessibility concerns landmark roles are intended to be used sparingly, to identify larger overall sections of the document.
...And 4 more matches
Alerts - Accessibility
the problem you have a form — a contact form, for example — that you want to
put some accessible error checking into.
... here is a simple form: <form method="post" action="post.php"> <fieldset> <legend>please enter your contact details</legend> <label for="name">your name (required):</label> <in
put name="name" id="name" aria-required="true"/> <br /> <label for="email">e-mail address (required):</label> <in
put name="email" id="email" aria-required="true"/> <br /> <label for="website">website (optional):</label> <in
put name="website" id="website"/> </fieldset> <label for="message">please enter your message (required):</label> <br /> <textarea name="me...
...ssage" id="message" rows="5" cols="80" aria-required="true"></textarea> <br /> <in
put type="submit" name="submit" value="send message"/> <in
put type="reset" name="reset" value="reset form"/> </form> checking for validity and notifying the user form validations consists of several steps: checking if the e-mail address or entered name are valid.
...And 4 more matches
Operable - Accessibility
this is often achieved using "skip links" — links
put at the top of the page source that link to the main content and are hidden by css.
...links, buttons, form in
puts) makes logical sense, meaning that the page is still usable by non-sighted/keyboard users.
... 2.4.7 visible focus for focusable elements (aa) when tabbing through focusable elements such as links or form in
puts, there should be a visual indicator to show you which element currently has focus.
...And 4 more matches
Using CSS animations - CSS: Cascading Style Sheets
if from/0% or to/100% is not specified, the browser starts or finishes the animation using the com
puted values of all attributes.
...to avoid this problem
put the element to be animated in a container, and set overflow:hidden on the container.
... we'll modify the sliding text example to out
put some information about each animation event when it occurs, so we can get a look at how they work.
...And 4 more matches
clamp() - CSS: Cascading Style Sheets
you may also use parentheses to establish com
putation order when needed.
...make sure to
put a space on each side of the + and - operands.
...you may also use parentheses to establish com
putation order when needed.
...And 4 more matches
<length> - CSS: Cascading Style Sheets
lh equal to the com
puted value of the line-height property of the element on which it is used, converted to an absolute length.
... rlh equal to the com
puted value of the line-height property on the root element (typically <html>), converted to an absolute length.
... absolute length units absolute length units represent a physical measurement when the physical properties of the out
put medium are known, such as for print layout.
...And 4 more matches
min() - CSS: Cascading Style Sheets
you may also use parentheses to establish com
putation order when needed.
...make sure to
put a space on each side of the + and - operands.
... mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | w3c understanding wcag 2.0 examples setting a maximum size for a label and in
put another use case for css functions is to set a maximum size on responsive form controls: enabling the width of labels and in
puts to shrink as the width of the form shrinks.
...And 4 more matches
Used value - CSS: Cascading Style Sheets
the used value of a css property is its value after all calculations have been performed on the com
puted value.
... note: the getcom
putedstyle() dom api returns the resolved value, which may either be the com
puted value or the used value, depending on the property.
... example this example com
putes and displays the used width value of three elements (updates on resize): html <div id="no-width"> <p>no explicit width.</p> <p class="show-used-width">..</p> <div id="width-50"> <p>explicit width: 50%.</p> <p class="show-used-width">..</p> <div id="width-inherit"> <p>explicit width: inherit.</p> <p class="show-used-width">..</p> </div> </div> </div> css #no-width { width: auto; } #width-50 { width: 50%; } #width-inherit { width: inherit; } /* make results easier to see */ div { border: 1px solid red; padding: 8px; } javascript function updateusedwidth(id) { var div = document.queryselector(`#${id}`); var par = div.queryselector('.show-used-width'); var wid = window.getcom
putedstyle(div)["width"];...
...And 4 more matches
WAI ARIA Live Regions/API Support - Developer guides
aria-atomic on ancestor element event-from-in
put "true" | "false" (described more below) browser could not calculate this was the root cause of this event explicit user in
put?
... the "container-" prefix is so named because the attribute describes what the final com
puted property of similar name is for that node.
...determining if event was from user in
put all events will now provide information about whether the event was caused by user in
put, or was something that the web page caused.
...And 4 more matches
HTML5 - Developer guides
performance and integration: providing greater speed optimization and better usage of com
puter hardware.
... device access: allowing for the usage of various in
put and out
put devices.
... forms improvements a look at the constraint validation api, several new attributes, new values for the <in
put> attribute type and the new <out
put> element.
...And 4 more matches
The HTML autocomplete attribute - HTML: Hypertext Markup Language
the html autocomplete attribute is available on <in
put> elements that take a text or numeric value as in
put, <textarea> elements, <select> elements, and <form> elements.
... if an <in
put>, <select> or <textarea> element has no autocomplete attribute, then browsers use the autocomplete attribute of the element's form owner, which is either the <form> element that the element is a descendant of, or the <form> whose id is specified by the form attribute of the element.
... in order to provide autocompletion, user-agents might require <in
put>/<select>/<textarea> elements to: have a name and/or id attribute be descendants of a <form> element the form to have a submit button values "off" the browser is not permitted to automatically enter or select a value for this field.
...And 4 more matches
<textarea> - HTML: Hypertext Markup Language
the <textarea> element also accepts several attributes common to form <in
put>s, such as autocomplete, autofocus, disabled, placeholder, readonly, and required.
...the form owner is either the <form> element that this <textarea> element is a descendant of or the form element whose id is specified by the form attribute of the in
put element.
... autofocus this boolean attribute lets you specify that a form control should have in
put focus when the page loads.
...And 4 more matches
Global attributes - HTML: Hypertext Markup Language
the event handler attributes: onabort, onautocomplete, onautocompleteerror, onblur, oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncontextmenu, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, onin
put, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onsort, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechan...
...the browser should use the first one that exists on the com
puter keyboard layout.
... autocapitalize controls whether and how text in
put is automatically capitalized as it is entered/edited by the user.
...And 4 more matches
Assertions - JavaScript
boundary-type assertions characters meaning ^ matches the beginning of in
put.
... $ matches the end of in
put.
... matching the beginning of in
put using a ^ control character use ^ for matching at the beginning of in
put.
...And 4 more matches
Object initializer - JavaScript
// shorthand property names (es2015) let a = 'foo', b = 42, c = {}; let o = {a, b, c} // shorthand method names (es2015) let o = { property(parameters) {} } // com
puted property names (es2015) let prop = 'foo' let o = { [prop]: 'hey', ['b' + 'ar']: 'there' } description an object initializer is an expression that describes the initialization of an object.
... json.parse() will reject com
puted property names and an error will be thrown.
...oftentimes, there are variables in your code that you would like to
put into an object.
...And 4 more matches
Web audio codec guide - Web media technologies
factors affecting the encoded audio there are two general categories of factors that affect the encoded audio which is out
put by an audio codec's encoder: details about the source audio's format and contents, and the codec and its configuration during the encoding process.
... the effect of source audio format on encoded audio out
put because encoded audio inherently uses fewer bits to represent each sample, the source audio format may actually have less impact on the encoded audio size than one might expect.
...for example, if the encoder is configured to reduce the sample rate, the sample rate's effect on the out
put file will be reduced in kind.
...And 4 more matches
Mobile first - Progressive web apps (PWAs)
the main objective is to
put the content first and to hide away the navigation until the user really needs it.
... second, a popular option is to
put the navigation menu down at the bottom of the page rather than up at the top as the expectation would commonly be.
... this
puts the content first at the top of the page and means that when the user has reached the end of a page, they have a signpost giving them an idea of where to go next.
...And 4 more matches
<metadata> - SVG: Scalable Vector Graphics
00" viewbox="0 0 400 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <metadata> <rdf:rdf xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:connect="http://www.w3.org/1999/08/29-svg-connections-in-rdf#"> <rdf:description about="#cablea"> <connect:ends rdf:resource="#socket1"/> <connect:ends rdf:resource="#com
putera"/> </rdf:description> <rdf:description about="#cableb"> <connect:ends rdf:resource="#socket2"/> <connect:ends rdf:resource="#com
puterb"/> </rdf:description> <rdf:description about="#cablen"> <connect:ends rdf:resource="#socket5"/> <connect:ends>everything</connect:ends> </rdf:description> <rdf:description about="#hub"> ...
... <connect:ends rdf:resource="#socket1"/> <connect:ends rdf:resource="#socket2"/> <connect:ends rdf:resource="#socket3"/> <connect:ends rdf:resource="#socket4"/> <connect:ends rdf:resource="#socket5"/> </rdf:description> </rdf:rdf> </metadata> <title>network</title> <desc>an example of a com
puter network based on a hub.</desc> <style> svg { /* default styles to be inherited */ fill: white; stroke: black; } text { fill: black; stroke: none; } path { fill: none; } </style> <!-- define symbols used in the svg --> <defs> <!-- hubplug symbol.
... <title>socket 3</title> <use xlink:href="#hubplug"/> </g> <g id="socket4" transform="translate(160 20)"> <title>socket 4</title> <use xlink:href="#hubplug"/> </g> <g id="socket5" transform="translate(205 20)"> <title>socket 5</title> <use xlink:href="#hubplug"/> </g> </g> </symbol> <!-- com
puter symbol --> <symbol id="com
puter"> <desc>a common desktop pc</desc> <g id="monitorstand" transform="translate(40 121)"> <title>monitor stand</title> <desc>one of those cool swivelling monitor stands that sit under the monitor</desc> <path d="m0,0 s 10 10 40 12"/> <path d="m80,0 s 70 10 40 12"/> <path d="m0,20 l 10 10 s 40 12 70 10 l 80 20z"...
...And 4 more matches
How to turn off form autocompletion - Web security
by default, browsers remember information that the user submits through <in
put> fields on websites.
... note that the wcag 2.1 success criterion 1.3.5: identify in
put purpose does not require that autocomplete/autofill actually work - merely that form fields that relate to specific personal user information are programmatically identified.
... disabling autocompletion to disable autocompletion in forms, you can set the autocomplete attribute to "off": autocomplete="off" you can do this either for an entire form, or for specific in
put elements in a form: <form method="post" action="/form" autocomplete="off"> […] </form> <form method="post" action="/form"> […] <div> <label for="cc">credit card:</label> <in
put type="text" id="cc" name="cc" autocomplete="off"> </div> </form> setting autocomplete="off" on fields has two effects: it tells the browser not to save data in
putted by the user for later autocompletion on similar form...
...And 4 more matches
io/text-streams - Archive of obsolete content
r = fileio.open(filename, "r"); if (!textreader.closed) { text = textreader.read(); textreader.close(); } } return text; } function writetexttofile(text, filename) { var fileio = require("sdk/io/file"); var textwriter = fileio.open(filename, "w"); if (!textwriter.closed) { textwriter.write(text); textwriter.close(); } } globals constructors textreader(in
putstream, charset) creates a buffered in
put stream that reads text from a backing stream using a given text encoding.
... parameters in
putstream : stream the backing stream, an nsiin
putstream.
... charset : string in
putstream is expected to be in the character encoding named by this value.
...And 3 more matches
console - Archive of obsolete content
console.error(object[, object, ...]) logs the arguments to the console, preceded by "error:" and the name of your add-on: console.error("this is an error message"); error: my-addon: this is an error message console.exception(exception) logs the given exception instance as an error, out
putting information about the exception's stack traceback if one is available.
... console.log(object[, object, ...]) logs the arguments to the console, preceded by "info:" and the name of your add-on: console.log("this is an informational message"); info: my-addon: this is an informational message console.time(name) starts a timer with a name specified as an in
put parameter.
...but the more logging there is, the more noise you see in the console out
put.
...And 3 more matches
Developing for Firefox Mobile - Archive of obsolete content
then type: adb devices you should see some out
put like: list of devices attached 51800f220f01564 device (the long hex string will be different.) if you do, then adb has found your device and you can get started.
... this will be followed by lots of debug out
put.
... console.log() out
put from your add-on is written to the command shell, just as it is in desktop development.
...And 3 more matches
Adding windows and dialogs - Archive of obsolete content
others unprivileged javascript can also use the window.prompt function to receive text in
put from the user.
... the prompt service has a very rich set of functions that allow different kinds of in
puts, such as text, passwords, usernames and passwords, and checkboxes that can be used for "never ask this again"-type dialogs.
... in
put controls most additional xul windows and dialogs in extensions are some kind of in
put form.
...And 3 more matches
Introducing the Audio API extension - Archive of obsolete content
for example: // create a new audio element var audioout
put = new audio(); // set up audio element with 2 channel, 44.1khz audio stream.
... audioout
put.mozsetup(2, 44100); once this is done, the samples need to be created.
...you can see an example below: // write samples using a js array var samples = [0.242, 0.127, 0.0, -0.058, -0.242, ...]; var numbersampleswritten = audioout
put.mozwriteaudio(samples); // write samples using a typed array var samples = new float32array([0.242, 0.127, 0.0, -0.058, -0.242, ...]); var numbersampleswritten = audioout
put.mozwriteaudio(samples); in the following example, we create an audio pulse: <!doctype html> <html> <head> <title>generating audio in real time</title> <script type="text/javascript"> function playtone() { ...
...And 3 more matches
File object - Archive of obsolete content
pipe to programs generating out
put on stdout) begin with the pipe symbol; writeable pipelines end with the pipe symbol.
... properties static properties file.in
put a file object that represents the standard in
put (stdin).
... file.currentdir a file object that represents the standard out
put (stdout).
...And 3 more matches
Running Tamarin performance tests - Archive of obsolete content
performance test options there are a variety of options available with runtests.py - here is the help text followed by explanations for some options: $ ./runtests.py -h usage: runtests.py [options] [tests] -v --verbose enable additional out
put -e --avm avmplus command to use -a --asc compiler to use -g --globalabc deprecated but still works - use builtin.abc (used to be location of global.abc) -b --builtinabc location 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 out
put during testrun -l --log also log all out
put 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 let a test run, in sec (default -1 = never timeout) --html also create an html out
put file --notimecheck do not recompile .abc if timestamp is older than .as --java loca...
...aargs arguments to pass to java --random run tests in random 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 out
put 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.
...And 3 more matches
Venkman Introduction - Archive of obsolete content
when the download is complete, restart your browser (some windows users may also need to restart their com
puter as well).
... each of the views has a label, a float button that lets you display the view in its own window, and a close button that
puts the view away until you want to display it again, as seen in figure 2.
... commands are entered in the text box, and responses are appended to the end of the out
put.
...And 3 more matches
Writing textual data - Archive of obsolete content
when writing textual data to an out
put stream or to a file, you need to pick a character encoding.
... writing to a stream in gecko 1.8 (seamonkey 1.0, firefox 1.5), you can use nsiconverterout
putstream: var charset = "utf-8"; // can be any character encoding name that mozilla supports var os = components.classes["@mozilla.org/intl/converter-out
put-stream;1"] .createinstance(components.interfaces.nsiconverterout
putstream); // this assumes that fos is the nsiout
putstream you want to write to os.init(fos, charset, 0, 0x0000); os.writestring("umlaute: \u00fc \u00e4\n");...
... versions before gecko 1.8 firefox 1.0.x, mozilla 1.7.x and older versions do not support nsiconverterout
putstream.
...And 3 more matches
Learn XPI Installer Scripting by Example - Archive of obsolete content
le / 1024); // do the verification if(spaceavailable < spacerequired) { logcomment("insufficient disk space: " + dirpath); logcomment(" required : " + spacerequired + " k"); logcomment(" available: " + spaceavailable + " k"); return(false); } return(true); } in the verifydiskspace block, filegetdiskspaceavailable is called with dirpath as its expected in
put.
... this in
put is defined in line 22, where getfolder() is used to assign a value to the communicatorfolder variable representing the "program" folder on the local system: var communicatorfolder = getfolder("program"); spaceavailable = filegetdiskspaceavailable(dirpath); spacerequired, the other expected in
put to the verifydiskspace function, is given as 17311 kilobytes on line 19.
...after
putting these two files in a xpi (which, as described above, is simply a zip file with an install.js script at the top and a suffix of '.xpi'), the next step is to add an installation script to the xpi.
...And 3 more matches
Adding HTML Elements - Archive of obsolete content
<html:img src="banner.jpg"/> <html:in
put type="checkbox" value="true"/> <html:table> <html:tr> <html:td> a simple table </html:td> </html:tr> </html:table> these examples will create an image from the file banner.jpg, a checkbox and a single-cell table.
...if you left out the html: part, the browser would think that the elements were xul elements and they would not display because img, in
put, table, and so on are not valid xul tags.
...you can also add labels to controls either by using the html label element, or you can simply
put the text inside another html block element (such as p or div) as in the example below.
...And 3 more matches
Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
let's take a look at various ssjs implementations and some examples of
putting them to use.
...sample out
put is shown in listing 2.
... importpackage( java.net ); // connect to the remote resource var u = new url( "http://www.mozilla.org/news.rdf" ); var c = u.openconnection(); c.connect(); // read in the raw data var s = new java.io.in
putstreamreader( c.getin
putstream() ); var b = new java.io.bufferedreader( s ); var l, str = ""; while( ( l = b.readline() ) != null ) { // skip if( l != "" ) { str = str + l + "\n"; } } // define the namespaces, first the default, // then additional namespaces default xml namespace = "http://purl.org/rss/1.0/"; var dc = new namespace( "http://purl.org/dc/elements/1.1/" ); var rdf = new namespac...
...And 3 more matches
Implementation Status - Archive of obsolete content
rms-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-com
pute-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-out
put-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 in
put, secret, textarea, range, or upload controls supported 4.6.2 for out
put controls supported 4.6.3 for select or select1 controls partial 4.6.4 for trigger controls supported ...
...ation context partial 7.3 references, dependencies, and dynamic dependencies partial we probably already do most of it due to our 1.0 work, but we haven't verified we meet the 1.1 standards, yet 7.4 expression categories supported 7.4.2 model binding expressions and com
puted expressions supported 7.4.3 expressions in actions and submissions partial 7.4.4 ui expressions partial scenarios exist where controls contained inside other controls inside a repeat won't be bound correctly 333638; 7.4.5 ui binding in other xml vocabularies unsu...
...And 3 more matches
Distributed Denial of Service - MDN Web Docs Glossary: Definitions of Web-related terms
ddos concerns com
puter networks and cpu resource management.
... in a typical ddos attack, the assailant begins by exploiting a vulnerability in one com
puter system and making it the ddos master.
...the infected com
puters' owners normally don't know that their com
puters have been compromised, and they also suffer loss of service.
...And 3 more matches
Fundamental CSS comprehension - Learn web development
starting point to get this assessment started, you should: go and grab the html file for the exercise, and the associated image file, and save them in a new directory on your local com
puter.
...if the online editor you are using doesn't have a separate css panel, feel free to
put it in a <style> element in the head of the document.
... now it's time to
put the right selector on the right rule set!
...And 3 more matches
Pseudo-classes and pseudo-elements - Learn web development
prerequisites: basic com
puter literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to learn about the pseudo-class and pseudo-element selectors.
...try changing the text value of the content property and see it change in the out
put.
... :blank matches an <in
put> element whose in
put value is empty.
...And 3 more matches
Grids - Learn web development
ut id ornare felis, eget fermentum sapien.</p> <p>nam vul
putate diam nec tempor bibendum.
...cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </article> <aside> <h2>other things</h2> <p>nam vul
putate diam nec tempor bibendum.
...ut id ornare felis, eget fermentum sapien.</p> <p>nam vul
putate diam nec tempor bibendum.
...And 3 more matches
Web fonts - Learn web development
prerequisites: basic com
puter literacy, html basics (study introduction to html), css basics (study introduction to css), css text and font fundamentals.
...make a copy of these files in a new directory on your com
puter now.
... open up the stylesheet.css file and copy both the @font-face blocks contained inside into your web-font-start.css file — you need to
put them at the very top, before any of your css, as the fonts need to be imported before you can use them on your site.
...And 3 more matches
Test your skills: Form validation - Learn web development
note: you can try out solutions locally, however it may be helpful to
put your code in an online tool such as codepen, jsfiddle, or glitch to work on the tasks.
... form validation 1 in this task, we are providing you with a simple support query form, and we want you to add some validation features to it: make all of the in
put fields mandatory to complete before the form can be submitted.
... form validation 3 in our final task for this set, we are providing you with a similar example to what you saw in the accompanying article — a simple email address entry in
put.
...And 3 more matches
Function return values - Learn web development
prerequisites: basic com
puter literacy, a basic understanding of html and css, javascript first steps, functions — reusable blocks of code.
...this is a simple html page containing a text <in
put> field and a paragraph.
... next, we're going to include a way to print out information about the number entered into the text in
put.
...And 3 more matches
Handling text — strings in JavaScript - Learn web development
prerequisites: basic com
puter literacy, a basic understanding of html and css, an understanding of what javascript is.
...in javascript, we do this by
putting a backslash just before the character.
...so, taking a simple example: let song = 'fight the youth'; would be turned into a template literal like so: song = `fight the youth`; if we want to concatenate strings, or include expression results inside them, traditional strings can be fiddly to write: let score = 9; let highestscore = 10; let out
put = 'i like the song "' + song + '".
...And 3 more matches
JavaScript object basics - Learn web development
prerequisites: basic com
puter literacy, a basic understanding of html and css, familiarity with javascript basics (see first steps and building blocks).
... it is very common to create an object using an object literal when you want to transfer a series of structured, related data items in some manner, for example sending a request to the server to be
put into a database.
...let's say we wanted users to be able to store custom value types in their people data, by typing the member name and value into two text in
puts.
...And 3 more matches
Aprender y obtener ayuda - Learn web development
it is great that you are
putting some time into learning a new set of skills, but there are good practices to employ that will make your learning more effective.
...this also highlights the importance of taking regular breaks when you are studying in front of the com
puter.
...and there is also nothing wrong with creating your own code examples on your com
puter, or in an online code editor like jsbin, codepen, or glitch.
...And 3 more matches
Properly configuring server MIME types - Learn web development
serving content using the correct mime type can also be important for security reasons; it's possible for malicious content to affect the user's com
puter by pretending to be a safe type of document when it is in fact not.
...an executable program should not be executed on the user's com
puter and at most should cause a dialog to appear asking the user if they wish to download the file.
...this bypassed the normal download dialog resulting in internet explorer guessing that the content was an executable program and then running it on the user's com
puter.
...And 3 more matches
Server-side web frameworks - Learn web development
prerequisites: basic com
puter literacy.
...they provide tools and libraries that simplify common web development tasks, including routing urls to appropriate handlers, interacting with databases, supporting sessions and user authorization, formatting out
put (e.g.
...every "view" function (a request handler) receives an httprequest object containing request information, and is required to return an httpresponse object with the formatted out
put (in this case a string).
...And 3 more matches
Getting started with React - Learn web development
we'll discover a little bit of detail about its background and use cases, set up a basic react toolchain on our local com
puter, and create and play with a simple starter app — learning a bit about how react works in the process.
...they're a signal to you (and your com
puter) that the multiple lines of code inside are part of the same expression.
... initializes the directory as a git repository, if you have git installed on your com
puter.
...And 3 more matches
React interactivity: Editing, filtering, conditional rendering - Learn web development
copy this block of code into the todo() function, beneath your usestate() hook but above the return statement: const editingtemplate = ( <form classname="stack-small"> <div classname="form-group"> <label classname="todo-label" htmlfor={props.id}> new name for {props.name} </label> <in
put id={props.id} classname="todo-text" type="text" /> </div> <div classname="btn-group"> <button type="button" classname="btn todo-cancel"> cancel <span classname="visually-hidden">renaming {props.name}</span> </button> <button type="submit" classname="btn btn__primary todo-edit"> save <span classname="visually-hidden">new name for {props.nam...
...e}</span> </button> </div> </form> ); const viewtemplate = ( <div classname="stack-small"> <div classname="c-cb"> <in
put id={props.id} type="checkbox" defaultchecked={props.completed} onchange={() => props.toggletaskcompleted(props.id)} /> <label classname="todo-label" htmlfor={props.id}> {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" onclick={() => props.deletetask(props.id)} > delete <span classname="visually-hidden">{props.name}</span...
... editing from the ui much of what we're about to do will mirror the work we did in form.js: as the user types in our new in
put field, we need to track the text they enter; once they submit the form, we need to use a callback prop to update our state with the new name of the task.
...And 3 more matches
Getting started with Svelte - Learn web development
on the left side of the screen you'll see the code of your components, and on the right you'll see the running out
put of your app.
... on the right side you have three tabs: the result tab shows your app out
put, and provides a console at the bottom.
... the js out
put tab lets you inspect the javascript code generated by svelte, and set compiler options.
...And 3 more matches
Package management basics - Learn web development
downloading them and
putting them in the correct locations in your project.
... run the following command: parcel build index.html you should see an out
put like so: ✨ built in 9.35s.
...it differs in that it uses a different method for downloading and storing the packages on your com
puter, aiming to reduce the overall disk space required.
...And 3 more matches
Debugging Frame Reflow
it provides the following information for each frame at the start of its reflow reflow reason available width, available height com
puted width, com
puted height the previous and the next frame in flow and a count number.
...the com
puted width is 9180 twips.
... the com
puted height is 4470 twips (c=9180,4470).
...And 3 more matches
Eclipse CDT
for this to work reliably though, you still need to build using slow -j1 -w builds, so that make out
puts non-interleaved "entering"/"leaving" lines.
... it also used to be necessary to add the following two lines to your mozconfig to make the compiler out
put errors all on a single line, but that may not be needed anymore: export cflags="-fmessage-length=0" export cppflags="-fmessage-length=0" debugging to create a debug configuration, open the project properties window, and select "run/debug settings" on the left.
... this "parse once" strategy can also cause "unresolved inclusion" errors in headers if the first time eclipse sees the header is while indexing a file for which it doesn't have any build out
put parser data.
...And 3 more matches
SVG Guidelines
this flexibility depends on doing com
putations for svg images at the time they're displayed, rather than at the time the author creates them.
...if saved as a raster image then the work to rasterize the gradients and filters takes place on the authors com
puter before the result is stored in the raster file.
... this work doesn't need to be redone when the image is displayed on someone else's com
puter.
...And 3 more matches
Extending a Protocol
anyway, let's
put the above into practice by creating our custom protocol: pecho.ipdl.
... implementing methods on windowglobalparent.cpp open up dom/ipc/windowglobalparent.cpp and let's implement: allocpechoparent() deallocpechoparent(pechoparent* aactor) so, let's add: already_addrefed<echoparent> windowglobalparent::allocpechoparent() {
puts("windowglobalparent::allocpechoparent was called"); refptr<echoparent> actor = new echoparent(); return actor.forget(); } bool windowglobalparent::deallocpechoparent( pechoparent* aactor) { refptr actor = dont_addref(static_cast(aactor)); return true; } the "
puts()" there will help us see what's going on once we get things going.
... #include "echoparent.h" namespace mozilla { namespace dom { echoparent::echoparent() : mactoralive(true) {} mozilla::ipc::ipcresult echoparent::recvecho( const nscstring& astring, echoparent::echoresolver&& aresolver) {
puts("[echoparent] recvecho() - yay!"); aresolver(astring); // let's send it back!
...And 3 more matches
Localizing without a specialized tool
next, again in your working dir, create a directory that will serve as localization base: $ mkdir l10n-mozilla-1.9.2 $ cd l10n-mozilla-1.9.2 inside this directory you will
put all the localization files in a folder named after your locale, e.g.
...$ compare-locales mozilla-1.9.2/browser/locales/l10n.ini l10n-mozilla-1.9.2 x-testing for convenience, try saving the out
put of this command to a text file on your desktop so you can review it as you go.
...x-testing: unchanged: 2 changed: 3 missinginfiles: 6117 missing: 13 0% of entries changed the beauty of the compare-locales out
put is that it tells you all the missing files and which files you need to add and localize.
...And 3 more matches
Mozilla Style System Documentation
for frames: const nsstyledisplay *display; ::getstyledata(frame, &display); or for style contexts: const nsstyledisplay *display; ::getstyledata(sc, &display); these functions cause an appropriate struct to be com
puted if it hasn't been com
puted already and then fill in the struct pointer.
...the out
put of css selector matching as defined by the css specification is an ordered list of rules, where the order determines which declarations override other declarations.
...in mozilla, nscssdeclaration objects correspond to css declaration-blocks.) due to the high similarity of these lists between elements in the content tree, mozilla stores the out
put of the selector matching process in a lexicographic tree, the rule tree.
...And 3 more matches
TraceMalloc
try running with the unified out
put format option, -u.
... the out
put is a large html file that hyperlinks ancestor and descendent libraries, classes, and functions that call into one another, attributing malloc blame up and down each graph.
...this file can be post-processed by tools in mozilla/tools/trace-malloc as follows: histogram.pl, which produces a type histogram that can be diffed with histogram-diff.sh to produce out
put that looks like this: ---- base ---- ---- incr ---- ----- difference ---- type count bytes count bytes count bytes %total total 48942 4754774 76136 6566453 27194 1811679 100.00 nstokenallocator 17 110007 60 388260 43 278253 15.36 nsimagegtk 476 2197708 341 2366564 -135 168856 9.32 ...
...And 3 more matches
nss tech note2
using the pkcs #11 module logger nss technical note: 2 modes of operation extracting out
put from log files the logger displays all activity between nss and a specified pkcs #11 module.
...to enable this mode, set: nspr_log_modules=nss_mod_log:1 nspr_log_file=<logfile> the out
put format is: osthreadid[nsprthreadid]: c_xxx osthreadid[nsprthreadid]: rv = 0xyyyyyyyy for example, 1024[805ef10]: c_initialize 1024[805ef10]: rv = 0x0 1024[805ef10]: c_getinfo 1024[805ef10]: rv = 0x0 1024[805ef10]: c_getslotlist 1024[805ef10]: rv = 0x0 2.
...to enable this mode, set: nspr_log_modules=nss_mod_log:3 nspr_log_file=<logfile> the out
put format is: osthreadid[nsprthreadid]: c_xxx osthreadid[nsprthreadid]: arg1 = 0xaaaaaaaa ...
...And 3 more matches
NSS Tools crlutil
-a use ascii format or allow the use of ascii format for in
put and out
put.
...if options -m|-g is used and -c crl-script-file is not specified, crlutil will read script data from standard in
put.
... -o out
put-file specify the out
put file name for new crl.
...And 3 more matches
SpiderMonkey Build Documentation
before you begin, make sure you have the right build tools for your com
puter: linux, windows, mac, others.
...bs="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 3 more matches
imgIDecoder
modules/libpr0n/public/imgidecoder.idlscriptable base class for a decoder that reads an image from an in
put stream and sends it to an imgiloader object.
...method overview void close(); void flush(); void init(in imgiload aload); unsigned long writefrom(in nsiin
putstream instr, in unsigned long count); methods close() closes the stream.
... writefrom() writes data into the stream from an in
put stream.
...And 3 more matches
nsIAuthModule
void getnexttoken( [const] in voidptr aintoken, in unsigned long aintokenlength, out voidptr aouttoken, out unsigned long aouttokenlength ); parameters aintoken a buffer containing the in
put token (for example a challenge from a server).
...aintokenlength the length of the in
put token.
...aintokenlength the length of the in
put token.
...And 3 more matches
nsIFaviconService
amimetype out
put parameter where the mime type will be placed.
... adatalen out
put parameter where the size of the binary data will be placed.
... adata out
put parameter where the binary favicon data will be placed.
...And 3 more matches
nsIIDNService
inherits from: nsisupports last changed in gecko 1.9 (firefox 3) implemented by: @mozilla.org/network/idn-service;1 as a service: var idnservice = components.classes["@mozilla.org/network/idn-service;1"] .getservice(components.interfaces.nsiidnservice); method overview autf8string convertacetoutf8(in acstring in
put); autf8string converttodisplayidn(in autf8string in
put, out boolean isascii); acstring convertutf8toace(in autf8string in
put); boolean isace(in acstring in
put); autf8string normalize(in autf8string in
put); methods convertacetoutf8() converts an ace (ascii compatible encoding) hostname into unicode format, returning a utf-8 format string.
...autf8string convertacetoutf8( in acstring in
put ); parameters in
put the ace encoded hostname to convert into utf-8 format.
...autf8string converttodisplayidn( in autf8string in
put, out boolean isascii ); parameters in
put the string to convert to display format.
...And 3 more matches
nsIJSON
jsobject decodefromstream(in nsiin
putstream stream, in long contentlength); astring encode(in jsobject value); obsolete since gecko 7.0 astring encodefromjsval(in jsvaljsval value, in jscontext cx); native code only!
... void encodetostream(in nsiout
putstream stream, in string charset, in boolean writebom, in jsobject value); jsval legacydecode(in astring str); deprecated since gecko 2.0 jsval legacydecodefromstream(in astring str); deprecated since gecko 2.0 jsval legacydecodetojsval(in astring str, in jscontext cx); native code only!
... decodefromstream() decodes a json string read from an in
put stream, returning the javascript object it represents.
...And 3 more matches
nsIMsgFolder
label); nsimsgdatabase getmsgdatabase(in nsimsgwindow msgwindow); void setmsgdatabase(in nsimsgdatabase msgdatabase); nsimsgdatabase getdbfolderinfoanddb(out nsidbfolderinfo folderinfo); nsimsgdbhdr getmessageheader(in nsmsgkey msgkey); boolean shouldstoremsgoffline(in nsmsgkey msgkey); boolean hasmsgoffline(in nsmsgkey msgkey); nsiin
putstream getofflinefilestream(in nsmsgkey msgkey, out pruint32 offset, out pruint32 size); void downloadmessagesforoffline(in nsisupportsarray messages, in nsimsgwindow window); nsimsgfolder getchildwithuri(in acstring uri, in boolean deep, in boolean caseinsensitive); void downloadallforoffline(in nsiurllistener listener, in nsimsgwindow window); void enablenotif...
...; void notifyitemadded(in nsisupports item); void notifyitemremoved(in nsisupports item); void notifyfolderevent(in nsiatom event); void listdescendents(in nsisupportsarray descendents); void shutdown(in boolean shutdownchildren); void setinvfeditsearchscope(in boolean asearchthisfolder, in boolean asetonsubfolders); void copydatatoout
putstreamforappend(in nsiin
putstream aistream, in long alength, in nsiout
putstream out
putstream); void copydatadone(); void setjunkscoreformessages(in nsisupportsarray amessages, in acstring ajunkscore); void applyretentionsettings(); boolean fetchmsgpreviewtext([array, size_is (anumkeys)] in nsmsgkey akeystofetch, in unsigned long anumkeys, in boolean alocalonly, ...
...in nsiurllistener aurllistener); void addkeywordstomessages(in nsisupportsarray amessages, in acstring akeywords); void removekeywordsfrommessages(in nsisupportsarray amessages, in acstring akeywords); autf8string getmsgtextfromstream(in nsimsgdbhdr amsghdr, in nsiin
putstream astream, in long abytestoread, in long amaxout
putlen, in boolean acompressquotes); attributes attribute type description supportsoffline boolean readonly offlinestoreout
putstream nsiout
putstream readonly offlinestorein
putstream nsiin
putstream readonly retentionsettings nsimsgretentionsettings downloadsettings nsimsgdownloadsettings sortorder long used for order in the folder pane, ...
...And 3 more matches
nsIXULTemplateBuilder
a template builder, given an in
put source of data, a template, and a reference point, generates a list of results from the in
put, and copies part of the template for each result.
...for the next iteration, those children would be used to generate out
put for their child nodes and so forth.
...the template builder then generates out
put for each result based on the <rule> elements.
...And 3 more matches
nsIZipWriter
modtime, in print32 acompression, in nsichannel achannel, in boolean aqueue); void addentrydirectory(in autf8string azipentry, in prtime amodtime, in boolean aqueue); void addentryfile(in autf8string azipentry, in print32 acompression, in nsifile afile, in boolean aqueue); void addentrystream(in autf8string azipentry, in prtime amodtime, in print32 acompression, in nsiin
putstream astream, in boolean aqueue); void close(); nsizipentry getentry(in autf8string azipentry); boolean hasentry(in autf8string azipentry); void open(in nsifile afile, in print32 aioflags); void processqueue(in nsirequestobserver aobserver, in nsisupports acontext); void removeentry(in autf8string azipentry, in boolean aqueue); attribu...
... addentrystream() adds data from an in
put stream to the zip file.
... void addentrystream( in autf8string azipentry, in prtime amodtime, in print32 acompression, in nsiin
putstream astream, in boolean aqueue ); parameters azipentry the path of the file entry to add to the zip file.
...And 3 more matches
Add to iPhoto
in c, these are declared thusly: void cfrelease(cftyperef cf); void cfretain(cftyperef cf); in javascript, this translates to: this.cfrelease = this.lib.declare("cfrelease", ctypes.default_abi, ctypes.void_t, ctypes.voidptr_t); // in
put: object to release this.cfretain = this.lib.declare("cfretain", ctypes.default_abi, ctypes.void_t, ctypes.voidptr_t); // in
put: object to retain these methods are used to manage the reference counting for core foundation objects.
...it returns a cfstringref, which is a pointer to the new string, and accepts, as in
put, three parameters: an allocator, which is a pointer to a routine that will allocate the memory to contain the new object (we use the ctypes.voidptr_t type for this), a pointer to the unicode string to copy into the new string object (ctypes.jschar.ptr), and the length of the unicode string in characters.
... let's take a look at two of the routines declared here: this.cfurlcreatefromfilesystemrepresentation = this.lib.declare("cfurlcreatefromfilesystemrepresentation", ctypes.default_abi, this.cfurlref, // returns ctypes.voidptr_t, // in
put: allocator ctypes.unsigned_char.ptr, // in
put: pointer to string cfindex, // in
put: string length ctypes.bool) // in
put: isdirectory this method is used to convert a unix pathname into an url.
...And 3 more matches
Mozilla
the style system is the part of the code in gecko that is responsible for producing a com
puted value for every property for every element.
...so, if the effect of complex markup is being tested,
put that complex markup into a page and create another page that uses simple markup to achieve the same visual effect.
...this may be because of a code error within firefox itself, such as a deadlock or infinite loop, or it may be caused by 3rd-party software such as a firefox extension, antivirus software, or even malware or a virus on your com
puter.
...And 3 more matches
about:debugging - Firefox Developer Tools
connect the android device to your com
puter using a usb cable.
... if it still doesn't appear, it may be because the link between your android device and your com
puter is not authorized yet.
... first make sure you have installed android debug bridge from android tools on your com
puter in order for it to be able to connect to your device.
...And 3 more matches
AudioWorkletProcessor - Web APIs
this method gets called for each block of 128 sample-frames and takes in
put and out
put arrays and calculated values of custom audioparams (if they are defined) as parameters.
... you can use in
puts and audio parameter values to fill the out
puts array, which by default holds silence.
...their calculated values will be passed into the process() method of the processor for you to shape the node out
put accordingly.
...And 3 more matches
Cache - Web APIs
this is functionally equivalent to calling fetch(), then using
put() to add the results to the cache.
... cache.
put(request, response) takes both a request and its response and adds it to the given cache.
...if there isn't a matching font, the code fetches the font from the network and uses cache.
put() to cache the fetched resource.
...And 3 more matches
Manipulating video using canvas - Web APIs
in response to the user beginning playback, this code fetches the width and height of the video, halving each (we will be halving the size of the video when we perform the chroma-keying effect), then calls the timercallback() method to start watching the video and com
puting the visual effect.
... processor.timercallback = function timercallback() { if (this.video.paused || this.video.ended) { return; } this.com
puteframe(); let self = this; settimeout(function() { self.timercallback(); }, 0); }, the first thing the callback does is check to see if the video is even playing; if it's not, the callback returns immediately without doing anything.
... then it calls the com
puteframe() method, which performs the chroma-keying effect on the current video frame.
...And 3 more matches
Applying styles and colors - Web APIs
note: be aware that in our vertical line example, the y position still referenced an integer gridline position—if it hadn't, we would see pixels with half coverage at the endpoints (but note also that this behavior depends on the current linecap style whose default value is butt; you may want to com
pute consistent strokes with half-pixel coordinates for odd-width lines, by setting the linecap style to square, so that the outer border of the stroke around the endpoint will be automatically extended to cover the whole pixel exactly).
... the example below draws three different paths, demonstrating each of these three linejoin property settings; the out
put is shown above.
... function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); // clear canvas ctx.clearrect(0, 0, 150, 150); // draw guides ctx.strokestyle = '#09f'; ctx.linewidth = 2; ctx.strokerect(-5, 50, 160, 50); // set line styles ctx.strokestyle = '#000'; ctx.linewidth = 10; // check in
put if (document.getelementbyid('miterlimit').value.match(/\d+(\.\d+)?/)) { ctx.miterlimit = parsefloat(document.getelementbyid('miterlimit').value); } else { alert('value must be a positive number'); } // draw lines ctx.beginpath(); ctx.moveto(0, 100); for (i = 0; i < 24 ; i++) { var dy = i % 2 == 0 ?
...And 3 more matches
Pixel manipulation with canvas - Web APIs
event) { var x = event.layerx; var y = event.layery; var pixel = ctx.getimagedata(x, y, 1, 1); var data = pixel.data; var rgba = 'rgba(' + data[0] + ', ' + data[1] + ', ' + data[2] + ', ' + (data[3] / 255) + ')'; color.style.background = rgba; color.textcontent = rgba; } canvas.addeventlistener('mousemove', pick); painting pixel data into a context you can use the
putimagedata() method to paint pixel data into a context: ctx.
putimagedata(myimagedata, dx, dy); the dx and dy parameters indicate the device coordinates within the context at which to paint the top left corner of the pixel data you wish to draw.
... for example, to paint the entire image represented by myimagedata to the top left corner of the context, you can simply do the following: ctx.
putimagedata(myimagedata, 0, 0); grayscaling and inverting colors in this example we iterate over all pixels to change their values, then we
put the modified pixel array back to the canvas using
putimagedata().
... <canvas id="canvas" width="300" height="227"></canvas> <div> <in
put id="grayscalebtn" value="grayscale" type="button"> <in
put id="invertbtn" value="invert" type="button"> </div> var img = new image(); img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'; img.onload = function() { draw(this); }; function draw(img) { var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.drawimage(img, 0, 0); img.style.display = 'none'; var imagedata = ctx.geti...
...And 3 more matches
ChannelSplitterNode - Web APIs
the channelsplitternode interface, often used in conjunction with its opposite, channelmergernode, separates the different channels of an audio source into a set of mono out
puts.
... if your channelsplitternode always has one single in
put, the amount of out
puts is defined by a parameter on its constructor and the call to audiocontext.createchannelsplitter().
...if there are fewer channels in the in
put than there are out
puts, supernumerary out
puts are silent.
...And 3 more matches
console.debug() - Web APIs
the console method debug() out
puts a message to the web console at the "debug" log level.
... the message is only displayed to the user if the console is configured to display debug out
put.
...objn a list of javascript objects to out
put.
...And 3 more matches
DocumentOrShadowRoot.activeElement - Web APIs
often activeelement will return a htmlin
putelement or htmltextareaelement object if it has the text selection at the time.
...other times the focused element might be a <select> element (menu) or an <in
put> element, of type "button", "checkbox", or "radio".
...for example, on macos systems, elements that aren't text in
put elements are not typically focusable by default.
...And 3 more matches
msAudioDeviceType - Web APIs
msaudiodevicetype specifies the out
put device id that the audio will be sent to.
... syntax <audio src="sound.mp3" msaudiodevicetype="communications" /> by default, audio on your system will out
put to your default speakers and be considered a foreground element, meaning that the audio will play only when the element is active in the app.
... for real-time communications, you can use the msaudiodevicetype property with the value console, multimedia, or communications to specify where the current audio should out
put.
...And 3 more matches
HTMLElement: change event - Web APIs
the change event is fired for <in
put>, <select>, and <textarea> elements when an alteration to the element's value is committed by the user.
... unlike the in
put event, the change event is not necessarily fired for each alteration to an element's value.
... bubbles yes cancelable no interface event event handler property onchange depending on the kind of element being changed and the way the user interacts with the element, the change event fires at a different moment: when the element is :checked (by clicking or using the keyboard) for <in
put type="radio"> and <in
put type="checkbox">; when the user commits the change explicitly (e.g., by selecting a value from a <select>'s dropdown with a mouse click, by selecting a date from a date picker for <in
put type="date">, by selecting a file in the file picker for <in
put type="file">, etc.); when the element loses focus after its value was changed, but not commited (e.g., after editing the value of <textarea> or <in
put type="text">).
...And 3 more matches
HTMLElement - Web APIs
htmlelement.offsetparent read only returns a element that is the element from which all offset calculations are currently com
puted.
... in
put events beforein
put fired when the value of an <in
put>, <select>, or <textarea> element is about to be modified.
... in
put fired when the value of an <in
put>, <select>, or <textarea> element has been changed.
...And 3 more matches
MediaDevices.getUserMedia() - Web APIs
the mediadevices.getusermedia() method prompts the user for permission to use a media in
put which produces a mediastream with tracks containing the requested types of media.
...on browsers that support managing media permissions with feature policy, this error is returned if feature policy is not configured to allow access to the in
put source(s).
... in addition, user permission is always required to access the user's audio and video in
puts.
...And 3 more matches
MediaStreamAudioSourceNode - Web APIs
a mediastreamaudiosourcenode has no in
puts and exactly one out
put, and is created using the audiocontext.createmediastreamsource() method.
... the number of channels out
put by the node matches the number of tracks found in the selected audio track.
... number of in
puts 0 number of out
puts 1 channel count defined by the first audio mediastreamtrack passed to the audiocontext.createmediastreamsource() method that created it.
...And 3 more matches
Using the MediaStream Recording API - Web APIs
when used with navigator.mediadevices.getusermedia(), it provides an easy way to record from the user's in
put devices and instantly use the result in web apps.
...it even gives you a visualization of your device's sound in
put, using the web audio api.
...why was css2 layout so awkward?" it allows you do a calculation to determine the com
puted value of a css unit, mixing different units in the process.
...And 3 more matches
PublicKeyCredentialRequestOptions.extensions - Web APIs
extensions, an optional property of the publickeycredentialrequestoptions dictionary, is an object providing the client extensions and their in
put values.
...the client out
puts a usvstring which is the text as it was displayed (line breaks may have been added).
...the client out
puts the hash of the content which was displayed (hashing with the same algorithm which is used for the signature).
...And 3 more matches
ScriptProcessorNode.bufferSize - Web APIs
the buffersize property of the scriptprocessornode interface returns an integer representing both the in
put and out
put buffer size, in sample-frames.
... example the following example shows basic usage of a scriptprocessornode to take a track loaded via audiocontext.decodeaudiodata(), process it, adding a bit of white noise to each audio sample of the in
put track (buffer) and play it through the audiodestinationnode.
... for each channel and each sample frame, the scriptnode.onaudioprocess function takes the associated audioprocessingevent and uses it to loop through each channel of the in
put buffer, and each sample in each channel, and add a small amount of white noise, before setting that result to be the out
put sample in each case.
...And 3 more matches
Supporting both TouchEvent and MouseEvent - Web APIs
however, the reality is the vast majority of today's web content is designed only to work with mouse in
put.
... consequently, even if a browser supports touch, the browser must still emulate mouse events so content that assumes mouse-only in
put will work as is without direct modification.
... ideally, a touch-based application does not need to explicitly address mouse in
put.
...And 3 more matches
ValidityState.patternMismatch - Web APIs
the read-only patternmismatch property of a validitystate object indicates if the value of an <in
put>, after having been edited by the user, does not conform to the constraints set by the element's pattern attribute.
... if the field supports the pattern attribute -- which means the <in
put> is of type text, tel, email, url, password, or search -- and the pattern value is set to a valid regular expression, if the value don't doesn't conform to the constraints set by the pattern value, the patternmismatch property will be true.
... examples given the following: <p> <label>enter your phone number in the format (123)456-7890 (<in
put name="tel1" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit area code" size="2"/>)- <in
put name="tel2" type="tel" pattern="[0-9]{3}" placeholder="###" aria-label="3-digit prefix" size="2"/> - <in
put name="tel3" type="tel" pattern="[0-9]{4}" placeholder="####" aria-label="4-digit number" size="3"/> </label> </p> here we have 3 sections for a north american phone number with an implicit label encompassing all three components of the phone number, expecting 3-digits, 3-digits and 4-digits respectively, as defined by the pattern attribute set on each.
...And 3 more matches
Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
animating 3d graphics is an area of software development that brings together multiple disciplines in com
puter science, mathematics, art, graphic design, kinematics, anatomy, physiology, physics, and cinematography.
...on createperspectivematrix(viewport, fovdegrees, nearclip, farclip) { const fovradians = fov * (math.pi / 180.0); const aspectratio = viewport.width / viewport.height; const transform = mat4.create(); mat4.perspective(transform, fovradians, aspectratio, nearclip, farclip); return transform; } after converting the fov angle, fovdegrees, from degrees to radians and com
puting the aspect ratio of the xrviewport specified by the viewport parameter, this function uses the glmatrix library's mat4.perspective() function to com
pute the perspective matrix.
... if you start each frame's rendering pass by com
puting the perspective matrix, you can then multply into that matrix all the other transforms you need to apply in order to result in the frame's desired geometry.
...And 3 more matches
window.dump() - Web APIs
if the -console option was not specified then the out
put goes to stderr.
... out
put from dump() is not sent to the browser console.
... out
put can be sent to the browser console using console.log().
...And 3 more matches
Window - Web APIs
this can be used to com
pute rendering performance.
... window.getcom
putedstyle() gets com
puted style for the specified element.
... com
puted style indicates the com
puted values of all css properties of the element.
...And 3 more matches
XRPose.emulatedPosition - Web APIs
the emulatedposition read-only attribute of the xrpose interface is a boolean value indicating whether or not both the the position component of the pose's transform is directly taken from the xr device, or it's simulated or com
puted based on other sources.
... syntax let emulated = xrpose.emulatedposition; value a boolean which is true if the pose's position is com
puted based on estimates or is derived from sources other than direct sensor data.
... if the position is precisely gbased on direct sensor in
puts, the value is false.
...And 3 more matches
Generating HTML - Web APIs
the second example will transform the in
put document (example2.xml), which again contains information about an article, into an html document.
...since there is no html namespace, and using the xhtml namespace would force the xsl to create an xml document that would not behave like a html document, the xsl:out
put in the xsl stylesheet will make sure the resulting document will be handled as html.
...the out
put of the xsl stylesheet is set to html by using the xsl:out
put element.
...And 3 more matches
Web accessibility for seizures and physical reactions - Accessibility
the epilepsy foundation's article, photosensitivity and seizures, provides a list of triggers that may cause seizures in photosensitive people; here's an excerpt from that list: television screens or com
puter monitors due to the flicker or rolling images.
...for example, the page for trace research & development center’s photosensitive epilepsy analysis tool notes that “photosensitive seizures can be provoked by certain types of flashing in web or com
puter content, including mouse-overs that cause large areas of the screen to rapidly flash on and off repeatedly.” other physical reactions nausea, vertigo (or dizziness), and disorientation are very nonspecific symptoms associated with all kinds of diseases and not particularly suggestive of seizures (except maybe disorientation, which is seen in seizures).
...however, not everybody is wealthy enough to be able to afford the most recent technology: older or underpowered com
puters can have low refresh rates.
...And 3 more matches
Cubic Bezier Generator - CSS: Cascading Style Sheets
<html> <canvas id="bezier" width="336" height="336"> </canvas> <form> <label for="x1">x1 = </label><in
put onchange="updatecanvas();" type="text" maxlength=6 id="x1" value="0.79" class='field'> <label for="y1">y1 = </label><in
put onchange="updatecanvas();return true;" type="text" maxlength=6 id="y1" value="0.33" class='field'> <label for="x2">x2 = </label><in
put onchange="updatecanvas();return true;" type="text" maxlength=6 id="x2" value="0.14" class='field'> <label for="y2">y2 = </label><in
put onchange="updatecanvas();return true;" type="text" maxlength=6 id="y2" value="0.53" class='field'> <br> <out
put id="out
put">log</out
put> </form> </html> .field { width: 40px; } function updatecanvas() { var x1 ...
...1').value; var y1 = document.getelementbyid('y1').value; var x2 = document.getelementbyid('x2').value; var y2 = document.getelementbyid('y2').value; drawbeziercurve(x1, y1, x2, y2); } const radius = 4; // place needed to draw the rulers const rulers = 30.5; const margin = 10.5; const basic_scale_size = 5; // size of 0.1 tick on the rulers var scaling; //limitation: scaling is com
puted once: if canvas.height/canvas.width change it won't be recalculated var dragsm = 0; // drag state machine: 0 = nodrag, others = object being dragged function initcanvas() { // get the canvas element using the dom var canvas = document.getelementbyid('bezier'); // make sure we don't execute when canvas isn't supported if (canvas.getcontext) { // use getcontext to use th...
...0, -3 * basic_scale_size + cx(0), cy(i) + 4); // limitation the constant 4 should be font size dependant } ctx.lineto(cx(0), ly(i)); } ctx.stroke(); ctx.closepath(); ctx.beginpath(); // draw the y axis label ctx.save(); ctx.rotate(-math.pi / 2); ctx.textalign = "left"; ctx.filltext("out
put (value ratio)", -cy(0), -3 * basic_scale_size + cx(0)); ctx.restore(); // draw the x axis ctx.moveto(cx(0), cy(0)); ctx.lineto(cx(0), cy(1)); ctx.textalign = "center"; for (i = 0.1; i <= 1; i = i + 0.1) { ctx.moveto(lx(i), basic_scale_size + cy(0)); if ((i == 0.5) || (i > 0.9)) { ctx.moveto(lx(i), 2 * basic_s...
...And 3 more matches
color-adjust - CSS: Cascading Style Sheets
the color-adjust css property sets what, if anything, the user agent may do to optimize the appearance of the element on the out
put device.
... by default, the browser is allowed to make any adjustments to the element's appearance it determines to be necessary and prudent given the type and capabilities of the out
put device.
... values economy the user agent is allowed to make adjustments to the element as it deems appropriate and prudent in order to optimize the out
put for the device it's being rendered for.
...And 3 more matches
<color> - CSS: Cascading Style Sheets
this is because most devices are not calibrated, and some browsers do not support out
put devices' color profiles.
... activetext text of active links buttonface background of push buttons buttontext text of push buttons canvas background of application content or documents canvastext text in application content or documents field background of in
put fields fieldtext text in in
put fields graytext text that is disabled highlight background of items that are selected in a control highlighttext text of items that are selected in a control linktext text of non-active, non-visited links visitedtext text of visited links deprecated system color keywords the following keywords were defined in earlier versions...
... examples color value tester in this example we provide a <div> and a text in
put.
...And 3 more matches
<easing-function> - CSS: Cascading Style Sheets
they correlate a time ratio to an out
put ratio, both expressed as <number>s.
... depending on the specific function used, the calculated out
put can sometimes grow to be greater than 1.0 or smaller than 0.0 during the course of an animation.
... however, certain properties will restrict the out
put if it goes outside an allowable range.
...And 3 more matches
HTML elements reference - HTML: Hypertext Markup Language
<code> the html <code> element displays its contents styled in a fashion intended to indicate that the text is a short fragment of com
puter code.
... <kbd> the html keyboard in
put element (<kbd>) represents a span of inline text denoting textual user in
put from a keyboard, voice in
put, or any other text entry device.
... <samp> the html sample element (<samp>) is used to enclose inline text which represents sample (or quoted) out
put from a com
puter program.
...And 3 more matches
Functions - JavaScript
a function in javascript is similar to a procedure—a set of statements that performs a task or calculates a value, but for a procedure to qualify as a function, it should take some in
put and return an out
put where there is some obvious relationship between the in
put and the out
put.
...for example, here is a function that com
putes factorials recursively: function factorial(n) { if ((n === 0) || (n === 1)) return 1; else return (n * factorial(n - 1)); } you could then com
pute the factorials of 1 through 5 as follows: var a, b, c, d, e; a = factorial(1); // a gets the value 1 b = factorial(2); // b gets the value 2 c = factorial(3); // c gets the value 6 d = factorial(4); // d gets the value 24 e = factoria...
...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); // out
put: // 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.
...And 3 more matches
Grammar and types - JavaScript
the source text of javascript script gets scanned from left to right, and is converted into a sequence of in
put elements which are tokens, control characters, line terminators, comments, or whitespace.
...in the following code, the variable in
put is not assigned a value, and the if statement evaluates to true.
... var in
put; if (in
put === undefined) { dothis(); } else { dothat(); } the undefined value behaves as false when used in a boolean context.
...And 3 more matches
Promise.all() - JavaScript
the promise.all() method takes an iterable of promises as an in
put, and returns a single promise that resolves to an array of the results of the in
put promises.
... this returned promise will resolve when all of the in
put's promises have resolved, or if the in
put iterable contains no promises.
... it rejects immediately upon any of the in
put promises rejecting or non-promises throwing an error, and will reject with this first rejection message / error.
...And 3 more matches
Autoplay guide for media and Web Audio APIs - Web media technologies
this includes both the use of html attributes to autoplay media as well as the user of javascript code to start playback outside the context of handling user in
put.
... therefore subject to the browser's autoplay blocking policy: <audio src="/music.mp4" autoplay> and audioelement.play(); the following web features and apis may be affected by autoplay blocking: the html <audio> and <video> elements the web audio api from the user's perspective, a web page or app that spontaneously starts making noise without warning can be jarring, inconvenient, or off-
putting.
... note:
put another way, playback of any media that includes audio is generally blocked if the playback is programmatically initiated in a tab which has not yet had any user interaction.
...And 3 more matches
in - SVG: Scalable Vector Graphics
the in attribute identifies in
put for the given filter primitive.
...if no value is provided and this is the first filter primitive, then this filter primitive will use sourcegraphic as its in
put.
... if no value is provided and this is a subsequent filter primitive, then this filter primitive will use the result from the previous filter primitive as its in
put.
...And 3 more matches
Compiling an Existing C Module to WebAssembly - WebAssembly
now you only need some html and javascript to load your new module: <script src="./a.out.js"></script> <script> module.onruntimeinitialized = async _ => { const api = { version: module.cwrap('version', 'number', []), }; console.log(api.version()); }; </script> and you will see the correct version number in the out
put: note: libwebp returns the current version a.b.c as a hexadecimal number 0xabc.
...the function takes a pointer to the in
put image and its dimensions, as well as a quality option between 0 and 100.
... it also allocates an out
put buffer for us that we need to free using webpfree() once we are done with the webp image.
...And 3 more matches
cfx - Archive of obsolete content
cfx supports the following global options: -h, --help - show a help message and exit -v, --verbose - enable lots of out
put "command-specific options" are documented alongside the commands.
... --logfile=logfile log console out
put to the file specified by logfile.
... --logfile=logfile log console out
put to the file specified by logfile.
...And 2 more matches
Creating Reusable Modules - Archive of obsolete content
a hashing add-on a hash function takes a string of bytes of any length, and produces a short, fixed length string of bytes as out
put.
...we can adapt it like this: var {cc, ci} = require("chrome"); // return the two-digit hexadecimal code for a byte function tohexstring(charcode) { return ("0" + charcode.tostring(16)).slice(-2); } function md5file(path) { var f = cc["@mozilla.org/file/local;1"] .createinstance(ci.nsilocalfile); f.initwithpath(path); var istream = cc["@mozilla.org/network/file-in
put-stream;1"] .createinstance(ci.nsifilein
putstream); // open for reading istream.init(f, 0x01, 0444, 0); var ch = cc["@mozilla.org/security/hash;1"] .createinstance(ci.nsicryptohash); // we want to use the md5 algorithm ch.init(ch.md5); // this tells updatefromstream to read the entire file const pr_uint32_max = 0xffffffff; ch.updatefromstream(istream, pr_...
... var s = array.from(hash, (c, i) => tohexstring(hash.charcodeat(i))).join(""); return s; }
putting it together the complete add-on adds a button to firefox: when the user clicks the button, we ask them to select a file, com
pute the hash, and log the hash to the console: var {cc, ci} = require("chrome"); // return the two-digit hexadecimal code for a byte function tohexstring(charcode) { return ("0" + charcode.tostring(16)).slice(-2); } function md5file(path) { var f = cc["@mozilla.org/file/local;1"] .createinstance(ci.nsilocalfile); f.initwithpath(path); var istream = cc["@mozilla.org/network/file-in
put-stream;1"] ...
...And 2 more matches
JavaScript Daemons Management - Archive of obsolete content
in com
puter science a daemon is a task that runs as a background process, rather than being under the direct control of an interactive user.
...lay();">reverseplay</button> <button onclick="orecompose.reversals = 2;alert('changed');">two reversals</button> <button onclick="orecompose.makeloop();alert('changed');">makeloop</button> <button onclick="orecompose.unmakeloop();alert('changed');">unmakeloop</button> <button onclick="orecompose.close();">close</button> <button onclick="orecompose.reclose();">reclose</button><br /> frame rate: <in
put type="text" id="vello" value="33" style="width: 40px;" onkeypress="return event.charcode===0||/\d/.test(string.fromcharcode(event.charcode));" onkeyup="if(isfinite(this.value)&&number(this.value)>0){orecompose.setrate(this.value);}" /></p> </body> </html> example #2: a practical instantiation – daemon.buildaround() <!doctype html> <html> <head> <meta http-equiv="content-type" content="text...
...unhide.reverseplay();">reverseplay</button> <button onclick="ounhide.reversals = 2;alert('changed');">two reversals</button> <button onclick="ounhide.makeloop();alert('changed');">makeloop</button> <button onclick="ounhide.unmakeloop();alert('changed');">unmakeloop</button> <button onclick="ounhide.close();">close</button> <button onclick="ounhide.reclose();">reclose</button><br /> frame rate: <in
put type="text" id="vello" value="33" style="width: 40px;" onkeypress="return event.charcode===0||/\d/.test(string.fromcharcode(event.charcode));" onkeyup="if(isfinite(this.value)&&number(this.value)>0){ounhide.setrate(this.value);}" /></p> </body> </html> example #3: a safe (without setinterval) instantiation – new daemon.safe() <!doctype html> <html> <head> <meta http-equiv="content-type" co...
...And 2 more matches
Connecting to Remote Content - Archive of obsolete content
the http request method can be "get", "post" or "
put".
... using xslt xslt (extensible stylesheet language transformations) is another tool used to manipulate xml documents and transform them into other forms of text out
put, such as html, xul, and so on.
... we can not cover all transformations to various out
put formats, so we'll just look into converting an xml document to xul.
...And 2 more matches
List of Mozilla-Based Applications - Archive of obsolete content
ble software application used for information management and integration of patient clinical, specimen, genetic and molecular assay data based on xul liaison groupware client for novell’s email and collaboration server previously called mozngw linbox kiosk browser (fr) web browser dedicated browser for french prefecture and town hall litl internet com
puter for home uses spidermonkey and gecko lizilayers gis application 3liz also creates some gis firefox add-ons logitech harmony remote software software for remote control device uses gre or xulrunner longman dictionary of contemporary english cd-rom lotus notes / sametime groupware the latest version of ibm lotus notes and sametime ca...
...cms nightingale music player community run effort to continue songbird support for linux olpc web browser browser oneteam jabber client opendocument viewer viewer opengate's tools cd burner, file browser, and hardware diagnostic softwares opengate is the opensource side of the easyneuf project, “a free software com
puter, easy and preinstalled” open mashups development tool openoffice.org office suite uses nss openswan implementation of ipsec for linux uses nss orca browser web browser gecko-based version of avant browser pale moon web browser optimized browser developed by moonchild productions for gnu/linux & windows platforms, orig...
... palo suite excel extension uses prism partygaming online gaming product uses gecko pencil tool for making diagrams and gui prototyping available as a firefox extension or a standalone app pentaho bi suite commercial open source business intelligence uses xul and mozilla rhino persevere tools for persistence and distributed com
puting uses mozilla rhino phloneme publishing tool for vocab collab phped php editor embedded mozilla browser in product pidgin im client uses nss plain old webserver extension and standalone webserver 5,000 users and 30,000 downloads poe::xul framework for remote xul application in poe postbox email client ...
...And 2 more matches
Layout System Overview - Archive of obsolete content
additionally, layout must support a paginated presentation, where the width of the presentation is constrained by the dimensions of the printed out
put (paper) and the height of each page is fixed.
...the style context is associated with the frame via a reference because it is needed for many other com
putations during the formatting of the frames.
...each frame implements a reflow method to com
pute its position and size, among other things.
...And 2 more matches
Code snippets - Archive of obsolete content
tabs from other com
puters this snippet shows how to load all tabs from other com
puters.
...envelope.payload = json.stringify(payload); r.
put(json.stringify(envelope)); generate new keys // clients always wipe the server when they generate new keys.
... bump meta/global's modified time components.utils.import("resource://services-sync/main.js"); components.utils.import("resource://services-sync/resource.js"); function getpath(path) { let r = new resource(weave.service.storageurl + path); let g = r.get(); return [g, r]; }; let [g, r] = getpath("meta/global"); r.
put(g); delete and restore a record components.utils.import("resource://services-sync/main.js"); components.utils.import("resource://services-sync/resource.js"); components.utils.import("resource://services-sync/record.js"); // for example: let id = "iasokuozpixz" let collection = "bookmarks"; let resource = new resource(weave.service.storageurl + collection + "/" + id); let del = new cryptowrappe...
...And 2 more matches
Mozilla Application Framework in Detail - Archive of obsolete content
xul provides an excellent answer for organizations with heterogeneous com
puting environments.
... the gecko rendering engine gecko is the revolutionary rendering engine that offers advanced features for internet browsing anywhere across applications, com
puting platforms and devices.
...as personal connectivity expands from the desktop com
puter to new web-enabled products and devices, gecko is a browser engine that has been designed from the ground up to power a new generation of desktop browsers and browsing devices and to accelerate the growth and development of the next-generation internet.
...And 2 more matches
Using Recursive Templates - Archive of obsolete content
the result is out
put like the following: <groupbox> ...
...you could use multiple rules as well, in order to generate different out
put for each level.
...the out
put for groups is a groupbox with a caption containing the name.
...And 2 more matches
Creating a Window - Archive of obsolete content
generally, you will
put this line at the top of every xul file.
...you will usually
put an id attribute on all elements.
... xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> this line declares the namespace for xul, which you should
put on the window element to indicate that all of its children are xul.
...And 2 more matches
Focus and Selection - Archive of obsolete content
focused elements the focused element refers to the element which currently receives in
put events.
... first, when the textbox is focused, the tag name is 'html:in
put', not 'textbox' as we might expect.
... this is because xul text boxes are implemented using the html in
put widget, so the focus event is received for that element instead.
...And 2 more matches
Popup Menus - Archive of obsolete content
when invoked, it will display a window containing whatever you
put inside the menupopup.
... however, you should always
put an id attribute on the menupopup as it is used to associate the popup with an element.
...as the name popupset implies, you can
put multiple popup declarations inside it.
...And 2 more matches
Bounding volume collision detection with THREE.js - Game development
keep in mind that in order for this property to be defined, you need to manually call geometry.com
puteboundingbox beforehand.
... var knot = new three.mesh( new three.torusknotgeometry(0.5, 0.1), new meshnormalmaterial({})); knot.geometry.com
puteboundingbox(); var knotbbox = new box3( knot.geometry.boundingbox.min, knot.geometry.boundingbox.max); note: the boundingbox property takes the geometry itself as reference, and not the mesh.
...applied to the mesh will be ignored while com
puting the calculating box.
...And 2 more matches
Desktop gamepad controls - Game development
the gamepad api gives you the ability to connect a gamepad to your com
puter and detect pressed buttons directly from the javascript code thanks to the browsers implementing such feature.
...first, we need an event listener to listen for the connection of the new device: window.addeventlistener("gamepadconnected", gamepadhandler); it's executed once, so we can create some variables we will need later on for storing the controller info and the pressed buttons: var controller = {}; var buttonspressed = []; function gamepadhandler(e) { controller = e.gamepad; out
put.innerhtml = "gamepad: " + controller.id; } the second line in the gamepadhandler function shows up on the screen when the device is connected: we can also show the id of the device — in the case above we're using the xbox 360 wireless controller.
... first off, we'll create a small library that will take care of handling the in
put for us.
...And 2 more matches
Player paddle and controls - Game development
to do that we can use the system's default in
put (mouse or touch, depending on platform) and set the paddle position to where the in
put position is.
... add the following new line to the update() function, as shown: function update() { game.physics.arcade.collide(ball, paddle); paddle.x = game.in
put.x; } now on every new frame the paddle's x position will adjust accordingly to the in
put's x position, however when we start the game, the position of the paddle is not in the middle.
... it's because the in
put position is not yet defined.
...And 2 more matches
CSS values and units - Learn web development
prerequisites: basic com
puter literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to learn about the different types of values and units used in css properties.
...ntimeters 1cm = 96px/2.54 mm millimeters 1mm = 1/10th of 1cm q quarter-millimeters 1q = 1/40th of 1cm in inches 1in = 2.54cm = 96px pc picas 1pc = 1/6th of 1in pt points 1pt = 1/72th of 1in px pixels 1px = 1/96th of 1in most of these values are more useful when used for print, rather than screen out
put.
... the standard color system available in modern com
puters is 24 bit, which allows the display of about 16.7 million distinct colors via a combination of different red, green and blue channels with 256 different values per channel (256 x 256 x 256 = 16,777,216.) let's have a look at some of the ways in which we can specify colors in css.
...And 2 more matches
How do you upload your files to a web server? - Learn web development
summary if you have built a simple web page (see html basics for an example), you will probably want to
put it online, on a web server.
... your account is: demozilla your website will be visible at demozilla.examplehostingprovider.net to publish to this account, please connect through sftp with the following credentials: sftp server: sftp://demozilla.examplehostingprovider.net username: demozilla password: quickbrownfox port: 5548 to publish on the web,
put your files into the public/htdocs directory.
...respectively, these are a log of messages showing the connection status between your com
puter and the sftp server, and a live log of every interaction between your sftp client and the server.
...And 2 more matches
What is a Domain Name? - Learn web development
any internet-connected com
puter can be reached through a public ip address, either an ipv4 address (e.g.
... com
puters can handle such addresses easily, but people have a hard time finding out who's running the server or what service the website offers.
... your browser asks your com
puter if it already recognizes the ip address identified by this domain name (using a local dns cache).
...And 2 more matches
What is a web server? - Learn web development
on the hardware side, a web server is a com
puter that stores web server software and a website's component files.
... a static web server, or stack, consists of a com
puter (hardware) with an http server (software).
... technically, you could host all those files on your own com
puter, but it's far more convenient to store files all on a dedicated web server because: a dedicated web server is typically more available.
...And 2 more matches
Test your skills: Advanced styling - Learn web development
advanced form styling 1 in our first advanced styling tasks, we want you to handle making a search in
put as consistent as possible across browsers — a trickier task than with standard text in
puts, even on modern browsers.
...we've made one available in the same directory as our html files — see search-24px.png — plus a <div> element after the search in
put to help you attach it, should you need it.
... first of all, we want you to provide some specific styling to visually indicate which in
puts have to be filled in — they cannot be left empty.
...And 2 more matches
Document and website structure - Learn web development
it's a place to
put common information (like the header) but usually, that information is not critical or secondary to the website itself.
... note: colorblind people represent around 4% of the world population or, to
put it another way, approximately 1 in every 12 men and 1 in every 200 women are colorblind.
...--> <form> <in
put type="search" name="q" placeholder="search query"> <in
put type="submit" value="go!"> </form> </nav> <!-- here is our page's main content --> <main> <!-- it contains an article --> <article> <h2>article heading</h2> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit.
...And 2 more matches
HTML table advanced features and accessibility - Learn web development
adding a caption to your table with <caption> you can give your table a caption by
putting it inside a <caption> element and nesting that inside the <table> element.
... you should
put it just below the opening <table> tag.
... active learning: adding table structure let's
put these new elements into action.
...And 2 more matches
General asynchronous programming concepts - Learn web development
prerequisites: basic com
puter literacy, a reasonable understanding of javascript fundamentals.
...this cursor is how the operating system says "the current program you're using has had to stop and wait for something to finish up, and it's taking so long that i was worried you'd wonder what was going on." this is a frustrating experience and isn't a good use of com
puter processing power — especially in an era in which com
puters have multiple processor cores available.
...this is called blocking; the browser is blocked from continuing to handle user in
put and perform other tasks until the web app returns control of the processor.
...And 2 more matches
Introducing asynchronous JavaScript - Learn web development
prerequisites: basic com
puter literacy, a reasonable understanding of javascript fundamentals.
...both contain a callback function that will run if the previous operation is successful, and each callback receives as in
put the result of the previous successful operation, so you can go forward and do something else to it.
... the event queue async operations like promises are
put into an event queue, which runs after the main thread has finished processing so that they do not block subsequent javascript code from running.
...And 2 more matches
Build your own function - Learn web development
prerequisites: basic com
puter literacy, a basic understanding of html and css, javascript first steps, functions — reusable blocks of code.
... the basic function to begin with, let's
put together a basic function.
...we've also provided some basic css to style the custom message box, and an empty <script> element to
put our javascript in.
...And 2 more matches
Image gallery - Learn web development
starting point to get this assessment started, you should go and grab the zip file for the example, unzip it somewhere on your com
puter, and do the exercise locally to begin with.
...if the online editor you are using doesn't have separate javascript/css panels, feel free to
put them inline <script>/<style> elements inside the html page.
...pg"> <div class="overlay"></div> <button class="dark">darken</button> </div> <div class="thumb-bar"> </div> the example looks like this: the most interesting parts of the example's css file: it absolutely positions the three elements inside the full-img <div> — the <img> in which the full-sized image is displayed, an empty <div> that is sized to be the same size as the <img> and
put right over the top of it (this is used to apply a darkening effect to the image via a semi-transparent background color), and a <button> that is used to control the darkening effect.
...And 2 more matches
Basic math in JavaScript — numbers and operators - Learn web development
prerequisites: basic com
puter literacy, a basic understanding of html and css, an understanding of what javascript is.
...decimal is base 10 (meaning it uses 0–9 in each column), but we also have things like: binary — the lowest level language of com
puters; 0s and 1s.
...this most commonly happens when data is entered into a form in
put, and the in
put type is text.
...And 2 more matches
Adding features to our bouncing balls demo - Learn web development
objective: to test comprehension of javascript objects and object-oriented constructs starting point to get this assessment started, make a local copy of index-finished.html, style.css, and main-finished.js from our last article in a new directory in your local com
puter.
...if the online editor you are using doesn't have separate javascript/css panels, feel free to
put them inline <script>/<style> elements inside the html page.
...you might want to add another circle to the app later on that can be controlled by another player, or have several com
puter-controlled evil circles.
...And 2 more matches
Getting started with Vue - Learn web development
"in dedicated config files" will
put your config settings for things like eslint into their own, dedicated files.
... the other option, "in package.json", will
put all of your config settings into the app's package.json file.
...this object is where you locally register components, define component in
puts (props), handle local state, define methods, and more.
...And 2 more matches
Implementing feature detection - Learn web development
download the latest version (see manual installation), unzip the zip file, copy the html5shiv-printshiv.min.js and html5shiv.min.js files into your example directory, and link to one of the files by
putting the following under your <title> element: <script src="html5shiv.min.js"></script> have a look at your example css files — you'll see that basic-styling.css handles all the styling that we want to give to every browser, whereas the other two css files contain the css we want to selectively apply to browser depending on their support levels.
... see dive into html5 <in
put> types detection test.
...because all those class names have been
put on the <html> element, you can target browsers that do or don't support a feature using specific descendant selectors.
...And 2 more matches
Handling common JavaScript problems - Learn web development
online the jshint homepage provides an online linter, which allows you to enter your javascript code on the left and provides an out
put on the right, including metrics, warnings, and errors.
... try inserting the following line just below line 31 (bolded above): console.log('response value: ' + superheroes); refresh the page in the browser, and you will get an out
put in the console of "response value:", plus the same error message we saw before the console.log() out
put shows that the superheroes object doesn't appear to contain anything.
... note that polyfills.js is basically the two polyfills we are using
put together into one file.
...And 2 more matches
Git and GitHub - Learn web development
when working on a project on your own or with others, you'll want to be able to back up the code in a central place, so it is not lost if your com
puter breaks.
... note: git is actually a distributed version control system, meaning that a complete copy of the repository containing the codebase is made on your com
puter (and everyone else's).
... we have
put together a course that includes all the essential information you need to work towards your goal.
...And 2 more matches
Accessibility/LiveRegionDevGuide
the following is a list of potential filtering techniques: the "event-from-in
put" object attribute can be used to filter events that were triggered by user action.
...current utterances should be allowed to finish but the 'rude' messages should be out
put as soon as possible.
...it was originally intended to give web developers a means to force a live region message to go to a separate out
put device.
...And 2 more matches
Mozilla's Section 508 Compliance
(c) a well-defined on-screen indication of the current focus shall be provided that moves among interactive interface elements as the in
put focus changes.
...the minimum information that shall be made available is text content, text in
put caret location, and text attributes.
...gnopernicus support in beta no screen reader support on mac os x b) at least one mode of operation and information retrieval that does not require visual acuity greater than 20/70 shall be provided in audio and enlarged print out
put working together or independently, or support for assistive technology used by people who are visually impaired shall be provided.
...And 2 more matches
Multiprocess on Windows
com metadata midl out
puts two different types of metadata: "fast format strings" (also known as oicf) and (optionally, if a library statement is included in the idl) type libraries (also known as typelib).
...it also will out
put a file with the .tlb extension.
...if your interface out
puts an array of interfaces, the interceptor would only wrap the first element in the array, because it cannot distinguish between scalars and arrays.
...And 2 more matches
Adding a new event
a dom event which represents a native event like a user action such as keyboard or mouse in
put.
... mouseevents.h this header file should be used for defining in
put events from pointing devices such as mouse.
... textevents.h this header file should be used for defining in
put events from keyboard or ime and also other text edit related events like querying focused content information.
...And 2 more matches
Application Translation with Mercurial
comm-aurora.hg) from https://ftp.mozilla.org/pub/mozilla.org/thunderbird/bundles/ in the next step, we will unpack the source code: open an in
put shell, e.g.
...now go to the directory where you want to
put the source code.
... it's highly recommended to
put it onto the fastest hard drive in the device.
...And 2 more matches
L10n Checks
you pass both paths to the files, e.g.: check-l10n-completeness -i file en-us.dtd my.dtd the out
put the out
put of l10n checks shows the missing and obsolete strings in a pseudo-diff format.
...the out
put closes with a summary, giving the total counts of missing and obsolete strings and some statistics on how many strings are changed or not, excluding access and command keys.
...options reference locale in the source and xpi modes you can change the default reference locale (en-us) by setting the -r parameter, e.g.: check-l10n-completeness -r pl browser/locales/l10n.ini ../l10n/ de out
put mode you can change the look and feel of the out
put by setting the -o parameter to 0 (tree; default), 1 (full tree) or 2 (full relative paths), e.g.: check-l10n-completeness -o 2 browser/locales/l10n.ini ../l10n/ de en-us in the locale directory in the source mode you can tell l10n checks to look for the en-us locale in the directory containing all other locales instead of the directory containing the source by setting the -l parameter ...
...And 2 more matches
Localization and Plurals
install pluralform checker v0.3 extension extension in
put it would be good to keep this list updated with all the words that need plural forms.
... people using the extension can then copy/paste this in
put.
... chrome://mozapps/locale/downloads/do...tes,hours,days chrome://mozapps/locale/downloads/do...dstitlepercent chrome://browser/locale/browser.prop...auseddownloads version history 0.1: initial version with pluralrule check, properties in
put loading, table generation, sample out
put display 0.2: use pluralform.numforms() to get the number of forms instead of figuring out locally to better support future rules - requires build from 2007/01/27 or later 0.3: generate a list of what numbers fall into which plural form to minimize the sample out
put to at most 3 of each form developing with pluralform the functionality for getting the correct plural forms is provided by a javascript module, pluralform.jsm.
...And 2 more matches
QA phase
enter the following command to perform the configuration: $ ./mach configure once your command-line finishes spitting out the config command's out
put, navigate to the newly created directory: $ cd ../firefox-build/browser/locales now you're ready to build!
... testing the langpack will
put you one step closer to having your localization added to the l10n releases.
... enter the following command: $ hg log -l 1 you should see an out
put similar to the one below: changeset: 0:7c543e8f3a6a tag: tip user: your name <email@example.com> date: mon nov 23 18:08:25 2009 +0100 summary: added search bar strings now compare the local repository on your machine with the remote hg repository by entering this command: $ hg outgoing http://hg.mozilla.org/l10n-central/x-testing the hg outgoing command compares...
...And 2 more matches
Basics
</p> <div style="text-align:center"> fill the gaps in this matrix with resizable in
put fields.
... </div> <math class="in
putmath" display="block"> <mrow> <mi>a</mi> <mo>=</mo> <mo>[</mo> <mtable> <mtr> <mtd><mn>1</mn></mtd> <mtd> <mtext><in
put id="in
put12" value="?" size="1"/></mtext> </mtd> </mtr> <mtr> <mtd> <mtext><in
put id="in
put21" value="?" size="1"/></mtext> </mtd> <mtd><mn>4</mn></mtd> </mtr> </mtable> <mo>]</mo> </mrow> </math> <div style="text-align:center"> left size: <a class="control" href="javascript:incrementin
put('in
put21', 1);" title="increase in
put">+</a> <a class="control" href="javascript:incrementin
put('in
put21',-1);" title="decrease in
put">-</a> right size: <a class="control" href="javascript:incrementin
put('in
put12', 1);" title="increase in
put">+</a> <a class="control" href="javascript:incrementin
put('in
put12',-1);" titl...
...e="decrease in
put">-</a> <br/> (click these control buttons to see their effects.) </div> <p> each entry of the following matrix represents <math> <msup><mrow><mo>(</mo><mi>x</mi><mo>+</mo><mi>y</mi><mo>)</mo></mrow><mi>n</mi></msup> </math> for some <i>n</i>.
...And 2 more matches
Power profiling overview
strictly speaking, such a com
putation gives the average power but this is often referred to as just the power when context makes it clear.
... in the context of com
puting, a fully-charged mobile device battery (as found in a laptop or smartphone) holds a certain amount of energy, and the speed at which that stored energy is depleted depends on the power consumption of the mobile device.
... these values are com
puted using a power model that uses processor-internal counts as in
puts, and they have been verified as being fairly accurate.
...And 2 more matches
Profiling with the Firefox Profiler
tip: long-running tasks in the parent process will block all in
put or drawing with the browser ui (aka "ui jank") whereas long-running tasks in the content process will block interactivity with the page but still allowing the user to pan and zoom around thanks to apz.
... a presshell:flush means that we are either recom
puting styles or recom
puting layout.
...*/ ); ' -f ./run.js -e ' var profileobj = profiler.getprofiledata(); print(json.stringify(profileobj)); ' | tail -n 1 > run.cleo the xpcshell out
put all benchmark information and on its last line it out
put the result of the profiling, you can filter it with tail -n 1 and redirect it to a file to prevent printing it in your shell.
...And 2 more matches
L20n HTML Bindings
<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"> <in
put type="submit"> <a href="/main" class="btn-cancel"></a> </p> assume the following malicious translation: <save """ <in
put 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"> <in
put value="save" type="submit"> or <a href="/main" class="btn-cancel" title="back to the homepage">cancel</a>.
...And 2 more matches
NSPR Poll Method
in_flags [in
put argument] the in_flags argument specifies the events at the top layer of the i/o layer stack that the caller is interested in.
... for pr_recv, you should pass pr_poll_read as the in_flags argument to the poll method for pr_send, you should pass pr_poll_write as the in_flags argument to the poll method out_flags [out
put argument] if an i/o layer is ready to satisfy the i/o request defined by in_flags without involving the underlying network transport, its poll method sets the corresponding event in *out_flags on return.
... for example, consider an i/o layer that buffers in
put data.
...And 2 more matches
Utilities for nss samples
onst unsigned char *data, unsigned int len); /* * getdigit */ extern int getdigit(char c); /* * hextobuf */ extern int hextobuf(unsigned char *instring, secitem *outbuf, prbool ishexdata); /* * filetoitem */ extern secstatus filetoitem(secitem *dst, prfiledesc *src); /* * checkpassword */ extern prbool checkpassword(char *cp); /* * getpassword */ extern char * getpassword(file *in
put, file *out
put, char *prompt, prbool (*ok)(char *)); /* * filepasswd extracts the password from a text file * * storing passwords is often used with server environments * where prompting the user for a password or requiring it * to be entered in the commnd line is not a feasible option.
...d(char *cp) { int len; char *end; len = port_strlen(cp); if (len < 8) { return pr_false; } end = cp + len; while (cp < end) { unsigned char ch = *cp++; if (!((ch >= 'a') && (ch <= 'z')) && !((ch >= 'a') && (ch <= 'z'))) { return pr_true; } } return pr_false; } /* * getpassword */ char* getpassword(file *in
put, file *out
put, char *prompt, prbool (*ok)(char *)) { char phrase[200] = {'\0'}; int infd = fileno(in
put); int istty = isatty(infd); for (;;) { /* prompt for password */ if (istty) { fprintf(out
put, "%s", prompt); fflush (out
put); echooff(infd); } fgets(phrase, sizeof(phrase), inpu...
...t); if (istty) { fprintf(out
put, "\n"); echoon(infd); } /* stomp on newline */ phrase[port_strlen(phrase)-1] = 0; /* validate password */ if (!(*ok)(phrase)) { if (!istty) return 0; fprintf(out
put, "password must be at least 8 characters long with one or more\n"); fprintf(out
put, "non-alphabetic characters\n"); continue; } return (char*) port_strdup(phrase); } } /* * filepasswd extracts the password from a text file * * storing passwords is often used with server environments * where prompting the user for a password or requiring it * to be entered in the commnd line is not a feasible option.
...And 2 more matches
NSS tools : crlutil
-a use ascii format or allow the use of ascii format for in
put and out
put.
...if options -m|-g is used and -c crl-script-file is not specified, crlutil will read script data from standard in
put.
... -o out
put-file specify the out
put file name for new crl.
...And 2 more matches
sslfnc.html
on out
put, the integer will be one of these values: ssl_security_status_ off (= 0) ssl_security_status_ on_high (= 1) ssl_security_status_on_low (= 2) cipher a pointer to a string pointer.
... on out
put, the string pointer references a newly allocated string specifying the name of the cipher.
...on out
put, the integer is the session key size used, in bits.
...And 2 more matches
NSS tools : crlutil
-a use ascii format or allow the use of ascii format for in
put and out
put.
...if options -m|-g is used and -c crl-script-file is not specified, crlutil will read script data from standard in
put.
... -o out
put-file specify the out
put file name for new crl.
...And 2 more matches
Web Replay
when a call or message is intercepted, the wrapped call/message is first performed normally and then it and its out
puts are recorded in a data stream for the thread performing the call.
... diffs are com
puted by first setting up an exception handler thread (mac only) very similar to the one used by asm.js.
... once all thread are idle, the main thread com
putes the memory diff, reads the stacks from each thread and their register state (which each thread recorded by calling setjmp before idling).
...And 2 more matches
Secure Development Guidelines
the eip otherwise the attacker can try to control memory pointed to by an existing function pointer a vulnerability is required to modify the eip or sensitive memory saved return addr or function pointer get altered introduction: gaining control (3) common issues used to gain control buffer overflows format string bugs integer overflows/underflows writing secure code: in
put validation in
put validation most vulnerabilities are a result of un-validated in
put always perform in
put validation could save you without knowing it examples: if it doesn’t have to be negative, store it in an unsigned int if the in
put doesn’t have to be > 512, cut it off there if the in
put should only be [a-za-z0-9], enforce it cross site scripting (xss) xss is a...
...is exploitable (in some browsers) with a simple request such as: http://www.victim.com?something=<script>alert('oops')</script> xss: prevention escape all dynamic in
put that will be sent back to the user html encoding & → & < → < > → > " → " ' → ' url encoding % encoding java/vbscript escaping depends on the context; in a single-quoted string, escaping ' would suffice sql injection occurs when un-trusted in
put is mixed with a sql string sql is a language used to interact with dat...
...abases code injection attack that is similar to xss but targeted at sql rather than html and javascript if in
put is mixed with sql, it could itself become an sql instruction and be used to: query data from the database (passwords) insert value into the database (a user account) change application logic based on results returned by the database sql injection: example snprintf(str, sizeof(str), "select * from account where name ='%s'", name); sqlite3_exec(db, str, null, null, null); sql injection: prevention use parameterized queries insert a marker for every piece of dynamic content so data does not get mixed with sql instructions example: sqlite3_stmt *stmt; char *str = "select * from account where name='?'"; sqlite3_prepare_v2(db, str, strlen(str)...
...And 2 more matches
XForms Accessibility
in
put a key xforms element to show and change the instance data to which it is bound (see the spec, the docs).
... the follwoing representations in
put element are accessible: text field - see the docs.
... secret used for in
putting passwords (see the spec, the docs).
...And 2 more matches
Mozilla internal string guide
you must not access the string except via the handle until you call finish() on the handle in the success case or you let the handle go out of scope without calling finish() in the failure case, in which case the destructor of the handle
puts the string in a mostly harmless but consistent state (containing a single replacement character if a capacity greater than 0 was requested, or in the char case if the three-byte utf-8 representation of the replacement character doesn't fit, an ascii substitute).
...this function should only be used if the in
put is known to be strictly ascii.
...(in the future, these conversions may start asserting in debug builds that their in
put is in the permissible range.) if the in
put is actually in the latin1 range, each 16-bit code unit in narrowed to an 8-bit byte by removing the high half.
...And 2 more matches
Components.Constructor
another important benefit is that it precom
putes some of the com
putation it does, so using a function returned from components.constructor() to create xpcom objects is faster than creating the object from base principles, as demonstrated below.
...for example: var binaryin
putstream = components.constructor("@mozilla.org/binaryin
putstream;1"); var bis = new binaryin
putstream(); print(bis.tostring()); // "[xpconnect wrapped nsisupports]" try { // somein
putstream is an existing nsiin
putstream // throws because bis hasn't been qi'd to nsibinaryin
putstream bis.setin
putstream(somein
putstream); } catch (e) { bis.queryinterface(components.interfaces.nsibinaryin
putstr...
...eam); bis.setin
putstream(somein
putstream); // succeeds now } if two arguments are given, the created instance will be nsisupports.queryinterface()'d to the xpcom interface whose name is the second argument: var binaryin
putstream = components.constructor("@mozilla.org/binaryin
putstream;1", "nsibinaryin
putstream"); var bis = new binaryin
putstream(); print(bis.tostring()); // "[xpconnect wrapped nsibinaryin
putstream]" // somein
putstream is an existing nsiin
putstream bis.setin
putstream(somein
putstream); // succeeds if three arguments are given, then in addition to being nsisupports.queryinterface()'d, the instance will also have had an initialization method called on it.
...And 2 more matches
nsIAccessibleProvider
this property is used for upload, in
put[type="xsd:gday"] and in
put[type="xsd:gmonth"] xformslabel 0x00002001 used for label element.
... xformsou
put 0x00002002 used for out
put element.
... xformsin
put 0x00002004 used for in
put and textarea elements.
...And 2 more matches
nsIAccessibleRole
is is used for xul:label, xul:description, html:label, role="label", or xforms:out
put.
...it is used for xul:checkbox, html:in
put@type="checkbox", role="checkbox", boolean xforms:in
put.
...it is used for xul:radio, html:in
put@type="radio", role="radio".
...And 2 more matches
nsIAsyncStreamCopier
inherits from: nsirequest last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) method overview void asynccopy(in nsirequestobserver aobserver, in nsisupports aobservercontext); void init(in nsiin
putstream asource, in nsiout
putstream asink, in nsieventtarget atarget, in boolean asourcebuffered, in boolean asinkbuffered, in unsigned long achunksize, in boolean aclosesource, in boolean aclosesink); methods asynccopy() starts the copy operation.
...void init( in nsiin
putstream asource, in nsiout
putstream asink, in nsieventtarget atarget, in boolean asourcebuffered, in boolean asinkbuffered, in unsigned long achunksize, in boolean aclosesource, in boolean aclosesink ); parameters asource contains the data to be copied.
...asourcebuffered true if asource implements nsiin
putstream.readsegments().
...And 2 more matches
nsISelection2
allowadjacent specifies whether the returned ranges are allowed to touch the in
put range rather than merely overlapping it.
... resultcount returns the number of ranges that overlap (or touch) the in
put range.
... results returns the ranges that overlap (or touch) the in
put range.
...And 2 more matches
nsIURIFixupInfo
the in
put is an invalid uri and fixup_flag_allow_keyword_lookup is not passed).
... fixeduri nsiuri the fixed-up original in
put, *never* using a keyword search.
... (may be null if the original in
put was broken as a url, e.g.
...And 2 more matches
Browser Console - Firefox Developer Tools
in
put/out
put messages: commands send to the browser via the command line, and the result of executing them.
... components.utils.import("resource://gre/modules/console.jsm"); console.log("hello from firefox code"); //out
put messages to the console learn more: console api reference console.jsm source code in the mozilla dxr hudservice there is also the hudservice which allows access to the browse console.
... here is an example on how to clear the contents of the browser console: components.utils.import("resource://devtools/shared/loader.jsm"); var hudservice = devtools.require("devtools/client/webconsole/hudservice"); var hud = hudservice.getbrowserconsole(); hud.jsterm.clearout
put(true); if you would like to access the content document of the browser console this can be done with the hudservice.
...And 2 more matches
Deprecated tools - Firefox Developer Tools
the editor mode can be triggered clicking on the icon on the right of the console in
put, or with ctrl + b (cmd + b on macos) when in editor mode, the enter key adds a new line in the in
put, and you can evaluate the expression using ctrl + enter (cmd + enter on macos).
... when evaluating, the in
put isn't cleared, which makes it possible to quickly iterrate over a snippet of code.
... the results are displayed in the console out
put, to the right of the in
put, providing immediate feedback.
...And 2 more matches
Web Console Helpers - Firefox Developer Tools
clear() clears the console out
put area.
... inspect() given an object, generates rich out
put for that object.
... once you select the object in the out
put area, you can use the arrow keys to navigate the object.
...And 2 more matches
AnalyserNode - Web APIs
it is an audionode that passes the audio stream unchanged from the in
put to the out
put, but allows you to take the generated data, process it, and create audio visualizations.
... an analysernode has exactly one in
put and one out
put.
... the node works even if the out
put is not connected.
...And 2 more matches
Basic animations - Web APIs
it takes a lot of time to redraw complex frames and the performance depends highly on the speed of the com
puter it's running on.
... }); } </script> <style> #cw { position: fixed; z-index: -1; } body { margin: 0; padding: 0; background-color: rgba(0,0,0,0.05); } </style> </head> <body> <canvas id="cw"></canvas> </body> </html> out
put snake game <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>nokia 1100:snake..member berries</title> </head> <body> <div class="keypress hide"> <div class="up" onclick="emit(38)">↑</div> ...
..."#", i = 0; i < 6; i++) e += t[math.ceil(15 * math.random())]; return e } function food() { this.x = 0, this.y = 0, this.b = 10, this.w = this.b, this.h = this.b, this.color = gc(), this.renew = function () { this.x = math.floor(math.random() * (w - 200) + 10), this.y = math.floor(math.random() * (h - 200) + 30), this.color = gc() }, this.renew(), this.
put = (() => { c.fillstyle = this.color, c.arc(this.x, this.y, this.b - 5, 0, 2 * math.pi), c.fill(), c.beginpath(), c.arc(this.x, this.y, this.b - 5, 0, math.pi), c.strokestyle = "green", c.linewidth = 10, c.stroke(), c.beginpath(), c.linewidth = 1 }) } function init() { cc.height = h, cc.width = w, c.fillrect(0, 0, w, innerheight); for (var t = 0; t < 10...
...And 2 more matches
Using channel messaging - Web APIs
it looks like so: creating the channel in the main page of the demo, we have a simple form with a text in
put for entering messages to be sent to an <iframe>.
... var in
put = document.getelementbyid('message-in
put'); var out
put = document.getelementbyid('message-out
put'); var button = document.queryselector('button'); var iframe = document.queryselector('iframe'); var channel = new messagechannel(); var port1 = channel.port1; // wait for the iframe to load iframe.addeventlistener("load", onload); function onload() { // listen for button clicks button.addeventlistener('click', onclick); // listen for messages on port1 port1.onmessage = onmessage; // transfer port2 to the iframe iframe.contentwindow.postmessage('init', '*', [channel.port2]); } // post a message on port1 when the button is clicked function o...
...nclick(e) { e.preventdefault(); port1.postmessage(in
put.value); } // handle messages received on port1 function onmessage(e) { out
put.innerhtml = e.data; in
put.value = ''; } we start off by creating a new message channel by using the messagechannel() constructor.
...And 2 more matches
Console.error() - Web APIs
out
puts an error message to the web console.
...objn a list of javascript objects to out
put.
... the string representations of each of these objects are appended together in the order listed and out
put.
...And 2 more matches
Console.info() - Web APIs
the console.info() method out
puts an informational message to the web console.
...objn a list of javascript objects to out
put.
... the string representations of each of these objects are appended together in the order listed and out
put.
...And 2 more matches
console.log() - Web APIs
the console method log() out
puts a message to the web console.
...objn a list of javascript objects to out
put.
... the string representations of each of these objects are appended together in the order listed and out
put.
...And 2 more matches
Console.warn() - Web APIs
out
puts a warning message to the web console.
...objn a list of javascript objects to out
put.
... the string representations of each of these objects are appended together in the order listed and out
put.
...And 2 more matches
ConstantSourceNode - Web APIs
the constantsourcenode interface—part of the web audio api—represents an audio source (based upon audioscheduledsourcenode) whose out
put is single unchanging value.
... a constantsourcenode has no in
puts and exactly one monaural (one-channel) out
put.
... the out
put's value is always the same as the value of the offset parameter.
...And 2 more matches
FileSystemDirectoryReader.readEntries() - Web APIs
the function receives a single in
put parameter: an array of file system entry objects, each based on filesystementry.
...it receives one in
put parameter: a fileerror object describing the error which occurred.
... example in this example, a drop zone is created, which responds to the drop event by scanning through the dropped files and directories, out
putting a hierarchical directory listing.
...And 2 more matches
Using FormData Objects - Web APIs
creating a formdata object from scratch you can build a formdata object yourself, instantiating it then appending fields to it by calling its append() method, like this: var formdata = new formdata(); formdata.append("username", "groucho"); formdata.append("accountnum", 123456); // number 123456 is immediately converted to a string "123456" // html file in
put, chosen by user formdata.append("userfile", filein
putelement.files[0]); // javascript file-like object var content = '<a id="a"><b id="b">hey!</b></a>'; // the body of the new file...
... retrieving a formdata object from an html form to construct a formdata object that contains the data from an existing <form>, specify that form element when creating the formdata object: note: formdata will only use in
put fields that use the name attribute.
...simply include an <in
put> element of type file in your <form>: <form enctype="multipart/form-data" method="post" name="fileinfo"> <label>your email address:</label> <in
put type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br /> <label>custom file label:</label> <in
put type="text" name="filelabel" size="12" maxlength="32" /><br /> <label>file to stas...
...And 2 more matches
GainNode - Web APIs
it is an audionode audio-processing module that causes a given gain to be applied to the in
put data before its propagation to the out
put.
... a gainnode always has exactly one in
put and one out
put, both with the same number of channels.
... the gain is a unitless value, changing with time, that is multiplied to each corresponding sample of all in
put channels.
...And 2 more matches
Checking when a deadline is due - Web APIs
recording the date information to provide a reasonable user experience on mobile devices, and to cut down on ambiguities, i decided to create an html form with: a text in
put for entering a title for your to-do list.
... number in
puts for the hour and minute parts of the deadline.
...on others you just get a standard text in
put, which is okay.
...And 2 more matches
Intersection Observer API - Web APIs
as the user scrolls the page, these intersection detection routines are firing constantly during the scroll handling code, resulting in an experience that leaves the user frustrated with the browser, the web site, and their com
puter.
...this set of values serves to grow or shrink each side of the root element's bounding box before com
puting intersections.
...rget; let visiblepct = (math.floor(entry.intersectionratio * 100)) + "%"; box.queryselector(".topleft").innerhtml = visiblepct; box.queryselector(".topright").innerhtml = visiblepct; box.queryselector(".bottomleft").innerhtml = visiblepct; box.queryselector(".bottomright").innerhtml = visiblepct; }); } startup(); clipping and the intersection rectangle the browser com
putes the final intersection rectangle as follows; this is all done for you, but it can be helpful to understand these steps in order to better grasp exactly when intersections will occur.
...And 2 more matches
MediaDevices.enumerateDevices() - Web APIs
the mediadevices method enumeratedevices() requests a list of the available media in
put and out
put devices, such as microphones, cameras, headsets, and so forth.
...each object in the array describes one of the available media in
put and out
put devices.
...it simply out
puts a list of the device ids, with their labels if available.
...And 2 more matches
MediaDevices - Web APIs
the mediadevices interface provides access to connected media in
put devices like cameras and microphones, as well as screen sharing.
... events devicechange fired when a media in
put or out
put device is attached to or removed from the user's com
puter.
... enumeratedevices() obtains an array of information about the media in
put and out
put devices available on the system.
...And 2 more matches
MediaStreamTrack.enabled - Web APIs
when enabled, a track's data is out
put from the source to the destination; otherwise, empty frames are out
put.
... the value of enabled, in essence, represents what a typical user would consider the muting state for a track, whereas the muted property indicates a state in which the track is temporarily unable to out
put data, such as a scenario in which frames have been lost in transit.
... syntax const enabledflag = track.enabled track.enabled = [true | false] value when true, enabled indicates that the track is permitted to render its actual media to the out
put.
...And 2 more matches
MediaStreamTrackAudioSourceNode - Web APIs
the audio itself might be in
put from a microphone or other audio sampling device, or might be received through a rtcpeerconnection, among other posible options.
... a mediastreamtrackaudiosourcenode has no in
puts and exactly one out
put, and is created using the audiocontext.createmediastreamtracksource() method.
... number of in
puts 0 number of out
puts 1 channel count defined by the first audio mediastreamtrack passed to the audiocontext.createmediastreamtracksource() method that created it.
...And 2 more matches
RTCDataChannel: error event - Web APIs
error information is out
put to the console using console.error().
... the message string is always out
put, as is information about the source file's name, line number, and column number at which the error occurred.
... in addition, however, depending on the value of errordetail, additional information may be out
put.
...And 2 more matches
RTCPeerConnection.getStats() - Web APIs
the function receives as in
put a single parameter: an rtcstatsreport with the collected statistics.
... no out
put is expected from the function.
...the callback receives as in
put the exception (a domexception object describing the error which occurred.
...And 2 more matches
RTCRemoteOutboundRtpStreamStats.localId - Web APIs
example in this example, we have a pair of functions: the first, networkteststart(), captures an initial report, and the second, networkteststop(), captures a second report, then uses the two reports to out
put some information about the network conditions...
...it takes as in
put the rtcpeerconnection being tested, calls getstats() to get a new rtcstatsreport with current statistics, then com
putes the results it's looking for, out
putting those results as appropriate to the user by appending appropriate html to the contents of the <div> element whose class is stats-box.
... we com
pute the number of packets sent during this interval—packetssent—by subtracting the two reports' values for the packetssent property.
...And 2 more matches
ScriptProcessorNode.onaudioprocess - Web APIs
} example the following example shows basic usage of a scriptprocessornode to take a track loaded via audiocontext.decodeaudiodata(), process it, adding a bit of white noise to each audio sample of the in
put track (buffer) and play it through the audiodestinationnode.
... for each channel and each sample frame, the scriptnode.onaudioprocess function takes the associated audioprocessingevent and uses it to loop through each channel of the in
put buffer, and each sample in each channel, and add a small amount of white noise, before setting that result to be the out
put sample in each case.
...t-processor-node github repo (also view the source code.) var myscript = document.queryselector('script'); var mypre = document.queryselector('pre'); var playbutton = document.queryselector('button'); // create audiocontext and buffer source var audioctx = new audiocontext(); source = audioctx.createbuffersource(); // create a scriptprocessornode with a buffersize of 4096 and a single in
put and out
put channel var scriptnode = audioctx.createscriptprocessor(4096, 1, 1); console.log(scriptnode.buffersize); // load in an audio track via xhr and decodeaudiodata function getdata() { request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decode...
...And 2 more matches
Using Service Workers - Web APIs
the following would do the trick: self.addeventlistener('fetch', (event) => { event.respondwith( caches.match(event.request).then((resp) => { return resp || fetch(event.request).then((response) => { return caches.open('v1').then((cache) => { cache.
put(event.request, response.clone()); return response; }); }); }) ); }); here we return the default network request with return fetch(event.request), which returns a promise.
...when that promise resolves, cache.
put() is used to add the resource to the cache.
...the clone is
put in the cache, and the original response is returned to the browser to be given to the page that called it.
...And 2 more matches
SpeechSynthesis - Web APIs
speechsynthesis.pause()
puts the speechsynthesis object into a paused state.
... speechsynthesis.resume()
puts the speechsynthesis object into a non-paused state: resumes it if it was already paused.
... inside the in
putform.onsubmit handler, we stop the form submitting with preventdefault(), create a new speechsynthesisutterance instance containing the text from the text <in
put>, set the utterance's voice to the voice selected in the <select> element, and start the utterance speaking via the speechsynthesis.speak() method.
...And 2 more matches
StereoPannerNode - Web APIs
number of in
puts 1 number of out
puts 1 channel count mode "clamped-max" channel count 2 channel interpretation "speakers" constructor stereopannernode() creates a new instance of a stereopannernode object.
... example in our stereopannernode example (see source code) html we have a simple <audio> element along with a slider <in
put> to increase and decrease pan value.
...we then use an onin
put event handler to change the value of the stereopannernode.pan parameter and update the pan value display when the slider is moved.
...And 2 more matches
SubtleCrypto.exportKey() - Web APIs
the exportkey() method of the subtlecrypto interface exports a key: that is, it takes as in
put a cryptokey object and gives you the key in an external, portable format.
...*/ async function exportcryptokey(key) { const exported = await window.crypto.subtle.exportkey( "raw", key ); const exportedkeybuffer = new uint8array(exported); const exportkeyout
put = document.queryselector(".exported-key"); exportkeyout
put.textcontent = `[${exportedkeybuffer}]`; } /* generate an encrypt/decrypt secret key, then set up an event listener on the "export" button.
...*/ async function exportcryptokey(key) { const exported = await window.crypto.subtle.exportkey( "pkcs8", key ); const exportedasstring = ab2str(exported); const exportedasbase64 = window.btoa(exportedasstring); const pemexported = `-----begin private key-----\n${exportedasbase64}\n-----end private key-----`; const exportkeyout
put = document.queryselector(".exported-key"); exportkeyout
put.textcontent = pemexported; } /* generate a sign/verify key pair, then set up an event listener on the "export" button.
...And 2 more matches
SubtleCrypto.wrapKey() - Web APIs
to use aes-kw, the in
put must be a multiple of 64 bits.
... let salt; /* get some key material to use as in
put to the derivekey method.
... let salt; let iv; /* get some key material to use as in
put to the derivekey method.
...And 2 more matches
sourceCapabilities - Web APIs
the uievent.sourcecapabilities read-only property returns an instance of the in
putdevicecapabilities interface which provides information about the physical device responsible for generating a touch event.
... if no in
put device was responsible for the event, it returns null.
... when a single user interaction with an in
put device generates a series of different in
put events, the sourcecapabilities property for all of them will point to the same instance of in
putdevicecapabilities.
...And 2 more matches
WebGL best practices - Web APIs
2) com
pute the number of pixels covered by a maximized browser window.
...re-com
pute this constant on a few target systems to get a reliable estimate.
... now adjust all internal caching in the application (webglbuffers, webgltextures, etc.) to obey a maximum size, com
puted by this constant multiplied by the number of pixels covered by the current browser window.
...And 2 more matches
window.location - Web APIs
proin non lectus eu turpis vul
putate cursus.
...maecenas vestibulum vul
putate felis, ut ullamcorper arcu faucibus in.
...vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; duis vul
putate magna ac metus pretium condimentum.
...And 2 more matches
XRReferenceSpace.getOffsetReferenceSpace() - Web APIs
this is demonstrated in the example implementing rotation based on non-xr in
puts, which demonstrates a way to use this method to let the user use their mouse to pitch and yaw their viewing angle.
... implementing rotation based on non-xr in
puts the in
put controls supported directly by webxr are all dedicated vr or ar in
put devices.
... in order to use mouse, keyboard, or other in
put devices to move or otherwise transform objects in the 3d space—or to allow the user to move through the space—you'll need to write some code to read the in
puts and move perform the movements.
...And 2 more matches
XRSession.onsqueeze - Web APIs
the xrsession interface's onsqueeze event handler property can be set to a function which is then invoked to handle the squeeze event that's sent when the user successfully completes a primary squeeze action on a webxr in
put device.
... to learn more about how to use and handle webxr controller in
puts, see in
puts and in
put sources.
...this is determined by comparing the in
put source's handedness against the value of a handedness property on a user object we've established previously.
...And 2 more matches
XRSession: squeeze event - Web APIs
the webxr event squeeze is sent to an xrsession when one of the session's in
put sources has completed a primary squeeze action.
... bubbles yes cancelable no interface xrin
putsourceevent event handler property onsqueeze for details on how the squeezestart, squeeze, and squeezeend events work, and how you should react to them, see primary squeeze actions in in
puts and in
put sources.
...the handler fetches the pose representing the target ray for tracked-pointer in
puts and sends the pose's transform to a function called myhandlesqueezewithray().
...And 2 more matches
ARIA: application role - Accessibility
in this mode, the web author is completely responsible for handling any and all keyboard in
put, focus management, and other interactions and cannot assume assistive technologies would do any processing on their end.
... for all of this to work, ats intercept almost all keyboard in
put and consume it themselves, letting nothing through to the browser or other user agent.
...the screen reader mode, often called forms mode or focus mode, lets all keyboard in
put go through to the browser again.
...And 2 more matches
:invalid - CSS: Cascading Style Sheets
the :invalid css pseudo-class represents any <in
put> or other <form> element whose contents fail to validate.
... /* selects any invalid <in
put> */ in
put:invalid { background-color: pink; } this pseudo-class is useful for highlighting field errors for the user.
... html <form> <div class="field"> <label for="url_in
put">enter a url:</label> <in
put type="url" id="url_in
put"> </div> <div class="field"> <label for="email_in
put">enter an email address:</label> <in
put type="email" id="email_in
put" required> </div> </form> css label { display: block; margin: 1px; padding: 1px; } .field { margin: 1px; padding: 1px; } in
put:invalid { background-color: #ffdddd; } form:invalid { border: 5px solid #ffdddd; } in
put:valid { background-color: #ddffdd; } form:valid { border: 5px solid #ddffdd; } in
put:required { border-color: #800000; border-width: 3px; } in
put:required:invalid...
...And 2 more matches
:optional - CSS: Cascading Style Sheets
the :optional css pseudo-class represents any <in
put>, <select>, or <textarea> element that does not have the required attribute set on it.
... /* selects any optional <in
put> */ in
put:optional { border: 1px dashed black; } this pseudo-class is useful for styling fields that are not required to submit a form.
... accessibility concerns if a form contains optional <in
put>s, required in
puts should be indicated using the required attribute.
...And 2 more matches
:required - CSS: Cascading Style Sheets
the :required css pseudo-class represents any <in
put>, <select>, or <textarea> element that has the required attribute set on it.
... /* selects any required <in
put> */ in
put:required { border: 1px dashed red; } this pseudo-class is useful for highlighting fields that must have valid data before a form can be submitted.
... accessibility concerns mandatory <in
put>s should have the required attribute applied to them.
...And 2 more matches
Using CSS custom properties (variables) - CSS: Cascading Style Sheets
0px; height: 70px; display: inline-block; } .three { color: white; background-color: brown; margin: 10px; width: 75px; } .four { color: white; background-color: brown; margin: 10px; width: 100px; } .five { background-color: brown; } we'll apply it to this html: <div> <div class="one">1:</div> <div class="two">2: text <span class="five">5 - more text</span></div> <in
put class="three"> <textarea class="four">4: lorem ipsum</textarea> </div> ...
...70px; display: inline-block; } .three { color: white; background-color: var(--main-bg-color); margin: 10px; width: 75px; } .four { color: white; background-color: var(--main-bg-color); margin: 10px; width: 100px; } .five { background-color: var(--main-bg-color); } <div> <div class="one"></div> <div class="two">text <span class="five">- more text</span></div> <in
put class="three"> <textarea class="four">lorem ipsum</textarea> </div> this leads to the same result as the previous example, yet allows for one canonical declaration of the desired property value; very useful if you want to change the value across the entire page later.
...the value is com
puted where it is needed, not stored for use in other rules.
...And 2 more matches
box-lines - CSS: Cascading Style Sheets
for calculating the height of a line, margins with a com
puted value of auto should be treated as having a value of 0.
... once the number of lines has been determined, elements with a com
puted value for box-flex other than 0 stretch as necessary in an attempt to fill the remaining space on the lines.
... each line com
putes flexes independently, so only elements on that line are considered when evaluating box-flex and box-flex-groups.
...And 2 more matches
<filter-function> - CSS: Cascading Style Sheets
the <filter-function> css data type represents a graphical effect that can change the appearance of an in
put image.
... saturate() super-saturates or desaturates the in
put image.
...bel> <select id="filter-select"> <option selected>blur</option> <option>brightness</option> <option>contrast</option> <option>drop-shadow</option> <option>grayscale</option> <option>hue-rotate</option> <option>invert</option> <option>opacity</option> <option>saturate</option> <option>sepia</option> </select> </li> <li> <in
put type="range"><out
put></out
put> </li> <li> <p>current value: <code></code></p> </li> </ul> css div { width: 300px; height: 300px; background: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png) no-repeat center; } li { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } in
put {...
...And 2 more matches
position - CSS: Cascading Style Sheets
description types of positioning a positioned element is an element whose com
puted position value is either relative, absolute, fixed, or sticky.
... (in other words, it's anything except static.) a relatively positioned element is an element whose com
puted position value is relative.
... an absolutely positioned element is an element whose com
puted position value is absolute or fixed.
...And 2 more matches
HTML attribute: capture - HTML: Hypertext Markup Language
the capture attribute is supported on the file in
put type.
... the capture attribute takes as it's value a string that specifies which camera to use for capture of image or video data, if the accept attribute indicates that the in
put should be of one of those types.
... environment the outward-facing camera and/or microphone should be used note: capture was previously a boolean attribute which, if present, requested that the device's media capture device(s) such as camera or microphone be used instead of requesting a file in
put.
...And 2 more matches
disabled - HTML: Hypertext Markup Language
the disabled attribute is supported by <button>, <command>, <fieldset>, <keygen>, <optgroup>, <option>, <select>, <textarea> and <in
put>.
... because a disabled field cannot have it's value changed, required does not have any effect on in
puts with the disabled attribute also specified.
... note: the required attribute is not permitted on in
puts with the disabled attribute specified.
...And 2 more matches
HTML attribute: minlength - HTML: Hypertext Markup Language
the minlength attribute defines the minimum number of characters (as utf-16 code units) the user can enter into an <in
put> or <textarea>.
...if no minlength is specified, or an invalid value is specified, the in
put has no minimum length.
... the in
put will fail constraint validation if the length of the text value of the field is less than minlength utf-16 code units long, with validitystate.tooshort returning true.
...And 2 more matches
HTML attribute: size - HTML: Hypertext Markup Language
the size attribute defines the width of the <in
put> and the height of the <select> element.
... for the in
put, if the type attribute is text or password then it's the number of characters.
...if no size is specified, or an invalid value is specified, the in
put has no size declared, and the form control will be the default width based on the user agent.
...And 2 more matches
An overview of HTTP - HTTP
in reality, there are more com
puters between a browser and the server handling the request: there are routers, modems, and more.
...a server appears as only a single machine virtually: this is because it may actually be a collection of servers, sharing the load (load balancing) or a complex piece of software interrogating other com
puters (like cache, a db server, or e-commerce servers), totally or partially generating the document on demand.
... proxies between the web browser and the server, numerous com
puters and machines relay the http messages.
...And 2 more matches
Array.prototype.reduce() - JavaScript
the reduce() method executes a reducer function (that you provide) on each element of the array, resulting in single out
put value.
... it is almost always safer to provide an initialvalue, because there can be up to four possible out
put types without initialvalue, as shown in the following example: let maxcallback = ( acc, cur ) => math.max( acc.x, cur.x ); let maxcallback2 = ( max, cur ) => math.max( max, cur ); // reduce without initialvalue [ { x: 2 }, { x: 22 }, { x: 42 } ].reduce( maxcallback ); // nan [ { x: 2 }, { x: 22 } ].reduce( maxcallback ); // 22 [ { x: 2 } ].reduce( maxcallback );...
...the code below will produce the same out
put as the code in the block above: [0, 1, 2, 3, 4].reduce( (accumulator, currentvalue, currentindex, array) => accumulator + currentvalue ) if you were to provide an initialvalue as the second argument to reduce(), the result would look like this: [0, 1, 2, 3, 4].reduce((accumulator, currentvalue, currentindex, array) => { return accumulator + currentvalue }, 10) callback iteratio...
...And 2 more matches
Intl.RelativeTimeFormat.prototype.resolvedOptions() - JavaScript
the intl.relativetimeformat.prototype.resolvedoptions() method returns a new object with properties reflecting the locale and relative time formatting options com
puted during initialization of this relativetimeformat object.
... syntax relativetimeformat.resolvedoptions() return value a new object with properties reflecting the locale and number formatting options com
puted during the initialization of the given relativetimeformat object.
...if any unicode extension values were requested in the in
put bcp 47 language tag that led to this locale, the key-value pairs that were requested and are supported for this locale are included in locale.
...And 2 more matches
Operator precedence - JavaScript
code out
put function echo(name, num) { console.log("evaluating the " + name + " side"); return num; } // notice the division operator (/) console.log(echo("left", 6) / echo("right", 2)); evaluating the left side evaluating the right side 3 function echo(name, num) { console.log("evaluating the " + name + " side"); return num; } // notice the ex...
...with only one operator or operators of different precedences, associativity doesn't affect the out
put, as seen in the example above.
... in the example below, observe how associativity affects the out
put when multiple of the same operator are used.
...And 2 more matches
Digital video concepts - Web media technologies
rgb most com
puter graphics models use the rgb color system, wherein some number of bits of data are used to represent each of the red, green, and blue components of the color of an individual pixel, and an image is comprised of a two-dimensional array of these pixels.
...this value is com
puted by subtracting the luma from the gamma corrected blue value; that is, u = b' - y'.
...com
puted by substracting luma from the gamma corrected red value: v = r' - y'.
...And 2 more matches
<feConvolveMatrix> - SVG: Scalable Vector Graphics
a convolution combines pixels in the in
put image with neighboring pixels to produce a resulting image.
... a matrix convolution is based on an n-by-m matrix (the convolution kernel) which describes how a given pixel value in the in
put image is combined with its neighboring pixel values to produce a resulting pixel value.
... note in the above formulas that the values in the kernel matrix are applied such that the kernel matrix is rotated 180 degrees relative to the source and destination images in order to match convolution theory as described in many com
puter graphics textbooks.
...And 2 more matches
<xsl:attribute> - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the <xsl:attribute> element creates an attribute in the out
put document, using any values that can be accessed from the stylesheet.
... the element must be defined before any other out
put document element inside the out
put document element for which it establishes attribute values.
... but it may be after or inside elements that won't be part of the out
put (like <xsl:choose> or <xsl:apply-templates> etc.).
...And 2 more matches
<xsl:text> - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the <xsl:text> element writes literal text to the out
put tree.
... syntax <xsl:text disable-out
put-escaping="yes" | "no"> text </xsl:text> required attributes none.
... optional attributes disable-out
put-escaping (netscape does not serialize the result of transformation - the "out
put" below - so this attribute is essentially irrelevant in context.
...And 2 more matches
Interacting with page scripts - Archive of obsolete content
n"}; unsafewindow.clonedcontentscriptobject = cloneinto(contentscriptobject, unsafewindow); unsafewindow.assignedcontentscriptobject = contentscriptobject; the "page.html" file adds two buttons and assigns an event listener to each: one listener displays a property of the cloned object, and the other listener displays a property of the assigned object: <html> <head> </head> <body> <in
put id="works" type="button" value="i will work"/> <in
put id="fails" type="button" value="i will not work"/> <script> var works = document.getelementbyid("works"); works.addeventlistener("click", function() { alert(clonedcontentscriptobject.greeting); }, false); var fails = document.getelementbyid("fails"); fails.addeventlistener("click", function() { ...
...note that the function's closure will be exported, too: // content-script.js var salutation = "hello, "; function greetme(user) { return salutation + user; } exportfunction(greetme, unsafewindow, {defineas: "greetme"}); finally, the "page.html" file adds a button and a page script that calls the exported function when the user pushes the button: <html> <head> </head> <body> <in
put id="test" type="button" value="click me"/> <script> var test = document.getelementbyid("test"); test.addeventlistener("click", function() { alert(window.greetme("page script")); }, false); </script> </body> </html> exportfunction() works by structured cloning the arguments and return value of the function from one scope to the other.
...now the page script can call the function as foo.greetme(): <html> <head> </head> <body> <in
put id="test" type="button" value="click me"/> <script> var test = document.getelementbyid("test"); test.addeventlistener("click", function() { alert(window.foo.greetme("page script")); }, false); </script> </body> </html> reverting to the old behavior you can switch firefox back to the old behavior in which content scripts could expose objects and functions to p...
... require("sdk/page-mod"); var self = require("sdk/self"); var pageurl = self.data.url("page.html") var pagemod = mod.pagemod({ include: pageurl, contentscriptfile: self.data.url("content-script.js"), contentscriptwhen: "ready" }) tabs.open(pageurl); the target web page "page.html" includes a button and a page script: <html> <head> <meta charset="utf-8"> </head> <body> <in
put id="message" type="button" value="send a message"/> <script type="text/javascript" src="page-script.js"></script> </body> </html> the content script "content-script.js" adds an event listener to the button, that sends a custom event containing a message: var messenger = document.getelementbyid("message"); messenger.addeventlistener("click", sendcustomevent, false); function sendcustomeve...
request - Archive of obsolete content
for post and
put requests, it will be sent as the body of the request.
... request the request object is used to make get, head, post,
put, or delete network requests.
...
put() make a
put request.
...it is returned by the get(), head(), post(),
put() or delete() method of a request object.
core/promise - Archive of obsolete content
var bar = foo().then(function success(value) { // com
pute something from a value...
... if the foo() promise gets rejected and you omit the error handler, the error will propagate to bar (bar will be rejected with that error): var bar = foo().then(function success(value) { // com
pute something out of the value...
...ue extracted query against db nested chaining flat chaining is not always an option though, as in some cases you may want to capture intermediate values of the chain: var result = readasync(url).then(function(source) { var json = parse(source); return readdbasync(extractquery(json)).then(function(data) { return writeasync(json.url, data); }); }); in general, nesting is useful for com
puting values from more than one promise: function eventualadd(a, b) { return a.then(function (a) { return b.then(function (b) { return a + b; }); }); } var c = eventualadd(aasync(), basync()); error handling one sometimes-unintuitive aspect of promises is that if you throw an exception in the value handler, it will not be be caught by the error handler.
...in such cases it's useful to
put a timer on such tasks: function timeout(promise, ms) { let deferred = defer(); promise.then(deferred.resolve, deferred.reject); delay(ms, 'timeout').then(deferred.reject); return deferred.promise; } var tweets = readasync(url); timeout(tweets, 20).then(function(data) { ui.display(data); }, function() { alert('network is being too slow, try again later'); }); alternative promise api...
io/byte-streams - Archive of obsolete content
o.open(filename, "rb"); if (!bytereader.closed) { data = bytereader.read(); bytereader.close(); } } return data; } function writebinarydatatofile(data, filename) { var fileio = require("sdk/io/file"); var bytewriter = fileio.open(filename, "wb"); if (!bytewriter.closed) { bytewriter.write(data); bytewriter.close(); } } globals constructors bytereader(in
putstream) creates a binary in
put stream that reads bytes from a backing stream.
... parameters in
putstream : stream the backing stream, an nsiin
putstream.
... bytewriter(out
putstream) creates a binary out
put stream that writes bytes to a backing stream.
... parameters out
putstream : stream the backing stream, an nsiout
putstream.
Modules - Archive of obsolete content
the use of eval() will probably not be of concern because it is only being used on the exported_symbols array which should not depend on user in
put.
... function importmodule (thatobj) { thatobj = thatobj || window; var exported_symbols = [ //
put the symbols here ]; // your code here...
... // at the end of your code: (assuming neither 'i' nor 'thatobj' is being exported!) for (var i=0; i < exported_symbols.length; i++) {thatobj[exported_symbols[i]] = eval(exported_symbols[i]);} } or for one-time-only usage of a module: (function (thatobj) { thatobj = thatobj || window; var exported_symbols = [ //
put the symbols here ]; // your code here...
... // at the end of your code: (assuming neither 'i' nor 'thatobj' is being exported!) for (var i=0; i < exported_symbols.length; i++) {thatobj[exported_symbols[i]] = eval(exported_symbols[i]);} })(); // can
put an object argument here ...
Post data to window - Archive of obsolete content
preprocessing post data the apostdata argument of the (global) loaduri(), opendialog(), and (tab)browser.loaduriwithflags() methods expects the post data in the form of an nsiin
putstream (because they eventually call nsiwebnavigation.loaduri()) while post data can be created using nsimimein
putstream.
...here is an example: var datastring = "name1=data1&name2=data2"; // post method requests must wrap the encoded text in a mime // stream const cc = components.classes; const ci = components.interfaces; var stringstream = cc["@mozilla.org/io/string-in
put-stream;1"].
... createinstance(ci.nsistringin
putstream); if ("data" in stringstream) // gecko 1.9 or newer stringstream.data = datastring; else // 1.8 or older stringstream.setdata(datastring, datastring.length); var postdata = cc["@mozilla.org/network/mime-in
put-stream;1"].
... createinstance(ci.nsimimein
putstream); postdata.addheader("content-type", "application/x-www-form-urlencoded"); postdata.addcontentlength = true; postdata.setdata(stringstream); // postdata is ready to be used as apostdata argument ...
Setting Up a Development Environment - Archive of obsolete content
after setting up make, you should be able to open a command line window, run "make -ver", and get the installed version of make as out
put.
...if everything went well, you should see an out
put similar to this: creating xpi file.
...you can do this by opening the automator application, choosing run shell script and then entering the profile-loading script in the textbox: /applications/firefox.app/contents/macos/firefox-bin -no-remote -p myprofile > /dev/null & you can change "/dev/null" to a file location, in case you want to see dump out
put from firefox, or other extensions.
...look at the final, com
puted style for the menu items.
XPCOM Objects - Archive of obsolete content
well, those are applications that, simply
put, take the underlying platform with perhaps a few changes and additions, and then write their own chrome layer.
...this specifies that these are in
put parameters, values that the method will use to perform its actions.
...the first parameter is an in
put that tells the method where to start looking.
... floating point float boolean boolean, prbool void void timestamps prtime this type is used to pass timestamps measured in milliseconds, such as the out
put of the gettime() method in a javascript date object.
Index of archived content - Archive of obsolete content
forming xml with xslt:the netscape xslt treehydra treehydra build instructions treehydra manual tuning pageload urischeme uris and urls uriloader using addresses of stack variables with nspr threads on win16 using cross commit using gdb on wimpy com
puters venkman using breakpoints in venkman venkman internals venkman introduction video presentations when to use ifdefs writing textual data xml in mozilla xpinstall creating xpi installer modules ...
... building mozilla xforms community developing mozilla xforms implementation status mozilla xforms specials mozilla xforms user interface xforms alert element xforms group element xforms help element xforms hint element xforms in
put element xforms label element xforms message element xforms out
put element xforms range element xforms repeat element xforms secret element xforms select element xforms select1 element xforms submit element xforms switch module xforms textarea el...
...p_newstream npp_print npp_setvalue npp_setwindow npp_streamasfile npp_urlnotify npp_write npp_writeready npprint npprintcallbackstruct nprect npregion npsaveddata npsetwindowcallbackstruct npstream npstring n
putf8 npvariant npvarianttype npwindow np_getmimedescription np_getvalue np_initialize np_port np_shutdown samples and test cases shipping a plugin as a toolkit bundle supporting private browsing in plugins the first install problem w...
...ng microformats in javascript popup window controls rdf in fifty words or less rdf in mozilla faq styling abbreviations and acronyms the business benefits of web standards using the right markup to invoke plugins windows media in netscape xquery xul booster xul parser in python in
put archive ...
Getting Started - Archive of obsolete content
into this directory
put a zip archive called my_theme.jar containing navigator, global, communicator, editor, help, messenger, messenger-newsblog and mozapps directories from above.
...css files the css files in these directories tell the browser how to display the buttons and other controls, where to
put the images, what border and padding it should
put around them, and so on.
...once you have
put the files in the zip folder, rename it to myskin.jar triggering the install from the web to install the theme's jar file directly from the web, you need to run some javascript.
...what you do is
put your folder(s) into a .zip file and then when it's compressed make the .zip into a .jar ...
In-Depth - Archive of obsolete content
this is useful for, say,
putting the navigation controls (back button) on the right hand side of the toolbar.
...this is where mozilla takes the code out of our xml file and
puts the two together.
...
put these 3 together and you get: #navigation-toolbar > .toolbar-holder > .toolbar-primary-icon inside this section of the css is where you add an image.
...when it's all done you should have something that looks like this: #navigation-toolbar > .toolbar-holder > .toolbar-primary-icon { background-image: url("chrome://navigator/skin/icons/dino.png"); }
put the image in that directory, fire up mozilla, and take a look at your creation.
Creating a Skin for Firefox/Getting Started - Archive of obsolete content
into this directory
put the browser, global, communicator, help, and mozapps directories from above, as well as the icon.png and preview.png files.
... css files the css files in these directories tell the browser how to display the buttons and other controls, where to
put the images, what border and padding it should
put around them, and so on.
...once you have
put the files in the zip folder, rename it to my_theme.jar triggering the install from the web to install the theme's jar file directly from the web, you need to run some javascript.
...what you do is
put your folder(s) into a .zip file and then when it's compressed make the .zip into a .jar ...
Nanojit - Archive of obsolete content
the in
put for nanojit is a stream of nanojit lir instructions.
...from an operational point of view, it is creating a function, which takes an integer in
put, and adds it to two, and out
puts the result.
... then a pointer to a function is used, which takes an int as in
put and returns the sum of that parameter with two.
... (typedef js_fastcall int32_t (*addtwofn)(int32_t); ) then, printf is hardcoded to call it with a parameter 5, and on linking with nanojit library, the following program will display 2+5=7 now, what i need to do is generate out
put for this: start two = int 2 twoplustwo = add two, two ret twoplustwo this adds two and two in the most hardcoded way possible.
Remotely debugging Firefox for Metro - Archive of obsolete content
prerequisites you will need: windows 8 (metro-style) firefox running in the touch-friendly "metro" mode on a windows 8 com
puter.
... firefox running in classic "desktop" mode on windows, mac os x, or linux, either on a separate com
puter or in a separate profile on the same com
puter.
...you'll see a page that looks like this: if you are running firefox for metro on the same com
puter with the default settings, use the default host (localhost) and port (6000), and press the "connect" button.
... if you are connecting to firefox for metro on a different com
puter or a different port, enter the appropriate hostname and port number and then press "connect." in the windows 8 (metro) browser next you'll see a dialog in firefox for metro asking you to confirm the connection.
Remote debugging - Archive of obsolete content
when a bug is reproducible by a community member, but not on a developer's com
puter, a last-resort strategy is to debug it on the community member's com
puter.
...(that is, there's a legitimate reason it happens only on some com
puters, but that reason just hasn't been discovered.) the crash victim, in turn, trusts the developer with full access to his com
puter.
...examples: 391851 share your com
puter with remote desktop offer to let a developer control your com
puter using remote desktop software such as vnc or fog creek copilot.
... share your com
puter in person if you happen to live in mountain view, california, you can probably hand your laptop to a mozilla developer for a bit.
Space Manager High Level Design - Archive of obsolete content
this information is used by block layout to correctly com
pute where other floated elements should be placed, and how much space is available to normal in-flow elements that flow around the floated bits.
...the actual rect for the frame is cached in an nsfloatcache so it does not have to be recom
puted.
...the block frame uses a helper method on the nsblockreflowstate class to do the actual com
putation of available space based on the data in the space manager.
... getavailablespace is called on the blockreflowstate the blockreflowstate calls getavailablespace on its blockbanddata instance (which was setup in the blockreflowstate's constructor based on the space manager passed in and com
puted content area).
Creating XPI Installer Modules - Archive of obsolete content
organizing the resources now that you have created the basic files to be included in your package, you should
put them all in a single directory so that they can be bundled up.
...ing supplied --> <rdf:seq about="urn:mozilla:package:root"> <rdf:li resource="urn:mozilla:package:barley"/> </rdf:seq> <!-- package information --> <rdf:description about="urn:mozilla:package:barley" chrome:displayname="barley grain" chrome:author="ian oeschger" chrome:name="barley"> </rdf:description> </rdf:rdf> create a contents.rdf file like the one in the listing above and
put it in the content/ subdirectory with the other package resources.
...but the xpi
puts all of the resources of your package together, including the instructions for installing it.
...for a xpi file to be valid and installable, it must contain an installation script like the one above that tells mozilla xpinstall where to
put the new resources and how to register them.
Uploading and Downloading Files - Archive of obsolete content
this is done by using an html <in
put> element using the file type from within a form.
...the formdata object can then simply be passed to xmlhttprequest: function upload(posturl, fieldname, filepath) { var formdata = new formdata(); formdata.append(fieldname, new file(filepath)); var req = new xmlhttprequest(); req.open("post", posturl); req.onload = function(event) { alert(event.target.responsetext); }; req.send(formdata); } http
put you can also upload a file using an http
put operation.
... this is simpler but it doesn't allow sending additional data and web servers usually need special configuration to support
put operations.
... function upload
put(posturl, filepath) { var req = new xmlhttprequest(); req.open("
put", posturl); req.setrequestheader("content-type", "text/plain"); req.onload = function(event) { alert(event.target.responsetext); } req.send(new file(filepath)); } in this example, a new in
put stream is created for a file, and is passed to the xmlhttprequest's send method.
Element Positioning - Archive of obsolete content
example 5 the text in
put is flexible but will never grow to be larger than 10 ems.
... <textbox id="find-text" flex="1" style="min-width: 15em;"/> here, the text in
put has been made flexible.
...if the user resizes the dialog to be very small, the text in
put will not shrink past 15 ems.
...notice in the image that the text in
put has grown to extend to the full size of the window.
Manifest Files - Archive of obsolete content
« previousnext » in this section, we'll see how to
put chrome and xul files into a package and create the manifest files for them.
...many people
put this as a subdirectory inside mozilla's chrome directory, but this isn't necessary.
...
put your xul files in this directory.
...you should be able to view any xul files you
put into the directory using a url of the form: chrome://applicationid/content/file.xul where file.xul is the filename.
Templates - Archive of obsolete content
we could have
put a uri in any of the attributes of the button, or any other element.
...we can of course
put more than one element inside a template and add the special rdf references to the attributes on any of the elements.
... the new elements that are created are functionally no different from ones that you
put directly in the xul file.
...
put simply, a rule matches if all of the attributes placed on the rule element match the corresponding attributes on the rdf resource.
XUL Structure - Archive of obsolete content
if you are going to use xul on a web site, you can just
put the xul file on the web site as you would an html file, and then load its url in a browser http://localhost/xul.php.
...typically, you
put all the xul files for an application in this directory, although extensions are installed in the extensions directory for a particular user.
...to gain the extra privileges, you will need to create a manifest file and
put that in the chrome directory.
...you can actually
put all the files in one directory at the top level and not use subdirectories.
Using the Editor from XUL - Archive of obsolete content
editor event handling editing operations happen in response to user events: mouse, key, drag and drop, and ime (international text in
put) events.
...in response to the handletext event, the editor sets the inline in
put composition string.
... nshtmleditor::editorkeypress() gets the character code from the key event,
puts that into a string, and calls nshtmleditor::typedtext(), which simply calls nshtmleditor::inserttext().
...we call into the normal insertion code, which loops through the in
put string looking for linebreaks, and inserts each text run, followed by a <br> when necessary.
menulist - Archive of obsolete content
to create the drop-down,
put a menupopup inside the menulist containing the choices as menuitem elements.
... attributes accesskey, crop, disableautoselect, disabled, editable, focused, image, label, oncommand, open, preference, readonly, sizetopopup, tabindex, value properties accessibletype, crop, description, disableautoselect, disabled, editable, editor, image, in
putfield, itemcount, label, menuboxobject, menupopup, open, selectedindex, selecteditem, tabindex, value methods appenditem, contains, getindexofitem, getitematindex, insertitemat, removeallitems, removeitemat, select examples <menulist> <menupopup> <menuitem label="option 1" value="1"/> <menuitem label="option 2" value="2"/> <menuitem label="option 3" value="3"/> <menuite...
...be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to
put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable).
... in
putfield type: textbox element a reference to the textbox element used for editable menu lists.
Debugging a XULRunner Application - Archive of obsolete content
xulrunner.exe /path/to/application.ini -console to out
put text to the console, use dump("my text here\n");.
... to out
put dump calls instead to a file, set browser.dom.window.dump.file to the file destination where the log should be created and restart the application.
... to out
put messages to the javascript console there are two ways to out
put messages to the js console: components.utils.reporterror(str) will out
put str as an "error" (i.e.
... jsdump(str) (function defined below) will out
put str as a "message" with a speech bubble icon next to it: function jsdump(str) { components.classes['@mozilla.org/consoleservice;1'] .getservice(components.interfaces.nsiconsoleservice) .logstringmessage(str); } for more information about the error console see the error console and browser console article.
Introduction to Public-Key Cryptography - Archive of obsolete content
network interactions typically take place between a client, such as browser software running on a personal com
puter, and a server, such as the software and hardware used to host a web site.
... the client unlocks the private-key database, retrieves the private key for the user's certificate, and uses that private key to digitally sign some data that has been randomly generated for this purpose on the basis of in
put from both the client and the server.
... most importantly, object signing helps users and network administrators implement decisions about software distributed over intranets or the internet-for example, whether to allow java applets signed by a given entity to use specific com
puter capabilities on specific users' machines.
...using certificates and digital signatures in this manner can also make it possible for users to identify and control the kind of access downloaded software has to their com
puters.
-ms-accelerator - Archive of obsolete content
initial valuefalseapplies toall elementsinheritednocom
puted valueas specifiedanimation typediscrete syntax /* the object is not a keyboard shortcut (the default) */ -ms-accelerator: false /* the object is a keyboard shortcut */ -ms-accelerator: true values false the object is not a keyboard shortcut.
...when alt + n is pressed, the <in
put> element that defines an accesskey attribute value of "n" receives the focus.
... <!doctype html> <html> <head> <title>accelerator</title> </head> <body> <label for="oname"><u style="-ms-accelerator: true; accelerator: true">n</u>ame: </label> <in
put type="text" id="oname" size="25" accesskey="n" value="your name here" /> </body> </html> specifications not part of any specification.
...the user presses the alt key and holds it while pressing the character to move in
put focus to the object, and to invoke the default event associated with the object.
-ms-ime-align - Archive of obsolete content
the -ms-ime-align css property is a microsoft extension aligning the in
put method editor (ime) candidate window box relative to the element on which the ime composition is active.
... ime candidate lists are positioned on the screen with sufficient size to allow basic text in
put.
... in the case of -ms-ime-align: after, an ime might adjust the candidate window and keyboard in
put behavior to provide a better user experience, such as using a horizontal candidate list and allowing some keys to be sent to the app for suggestion list navigation.
... initial valueautoapplies toall elementsinheritednocom
puted valueas specifiedanimation typediscrete syntax /* keyword values */ -ms-ime-align: auto; -ms-ime-align: after; values auto initial value.
::-ms-clear - Archive of obsolete content
the ::-ms-clear css pseudo-element creates a clear button at the edge of an <in
put type="text"> text control that clears the current value.
...this includes in
puts that appear text-like or fall back to type="text".
... such in
puts include: <in
put type="color"> <in
put type="date"> <in
put type="datetime"> <in
put type="datetime-local"> <in
put type="email"> <in
put type="month"> <in
put type="number"> <in
put type="search"> <in
put type="tel"> <in
put type="time"> <in
put type="url"> <in
put type="week"> allowable properties only the following css properties can be used in a rule with ::-ms-clear in its selector.
...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> <in
put type="text" id="firstname" name="firstname" placeholder="first name"> <br> <label for="lastname">last name:</label> <in
put type="text" id="lastname" name="lastname" placeholder="second name"> </form> css in
put, label { display: block; } in
put[type=text]::-ms-clear { color: red; /* this sets the cross color as red.
Mozilla XForms Specials - Archive of obsolete content
instead you will have to use the following normal classes instead: xf-value xf-repeat-item xf-repeat-index for example, to target the value element of an in
put control use: @namespace xf url("http://www.w3.org/2002/xforms"); xf|in
put .xf-value { ...
...it involves exposing some (script) functionality on all our controls, like out
put, in
put, etc.
...labelposition for xforms:in
put elements bound to a boolean node we support an attribute labelposition in the namespace http://www.mozilla.org/projects/xfor...009/extensions, which allows the form author to define on which side of the checkbox the label will be shown.
... for details, see the in
put control documentation.
RFE to the Custom Controls - Archive of obsolete content
rfe
put your requests here.
... out
put that shows the dom if out
put contains cdata section or text node and its data is any mozilla known language like xhtml/xul/svg then out
put should parse and display it (see bug 316817).
... out
put should show data in current locale format the bug 331585 address the issue.
... in
put that shows/modifies the dom like the request above for out
put.
XForms Secret Element - Archive of obsolete content
introduction used for in
putting passwords or other sensitive text.
... single-node binding special in
putmode - isn't supported.
...characteristics analogous widgets are <xhtml:in
put type="password"/> and <xul:textbox type="password"/> if the incremental attribute is present and has the value true, then the bound instance node is updated on every user in
put.
... please keep in mind that the instance data will hold exactly what the user gave as in
put.
XUL Parser in Python - Archive of obsolete content
v.00001 to celebrate activestate's recent announcement about support for perl and python in mozilla, i have
put together this little python script that parses your local xul and builds a list of all the xul elements and their attributes in an html page.
...argv[1]: for attr in a.keys(): if strip(attr) == sys.argv[1]: el_list[name][strip(attr)] = strip(a[attr]) and writing thevalues to the html results file instead of thekeys: for item in elements: w.write('<tr><td class="head">' + item + '</td></tr>\n') for a in el_list[item].values(): w.write('<tr><td class="at">' + a + '</td>') with these modifications, the script creates an out
put more like a periodic table of xul elements.
...but mozilla's upcoming support for languages like perl and python will really open up the mozilla platform to tools and approaches of this kind--and make now a good time to start thinking about how these various technologies will be
put together.
... please feel free to suggest changes, change the format of the results out
put, or adapt this script in any way you want.
Game monetization - Game development
even though the digital market is key and you don't need to print covers and
put your game in a physical store in boxes, to earn decent money on selling your games for a fixed price you have to invest your time and money in marketing.
...and on the topic of where to
put the advertisements in your game it really depends on you.
...prices in this model vary greatly depending on the brand, client, and amount of work you
put in.
... donations when all else fails you can try
putting a donate button on your game's page and asking for support from the community.
WebVR — Virtual Reality for the Web - Game development
the webvr api the webvr api is the central api for capturing information on vr devices connected to a com
puter and headset position/orientation/velocity/acceleration information, and converting that into useful data you can use in your games and other applications.
... note: there are of course other apis useful for creating games, for example the gamepad api for control in
puts, and the device orientation api for handling display orientation on mobile.
... get the devices to get information about devices connected to your com
puter, you can use the navigator.getvrdevices method: navigator.getvrdevices().then(function(devices) { for (var i = 0; i < devices.length; ++i) { if (devices[i] instanceof hmdvrdevice) { ghmd = devices[i]; break; } } if (ghmd) { for (var i = 0; i < devices.length; ++i) { if (devices[i] instanceof positionsensorvrdevice && devices[i].hardwareunitid === ghm...
...for example, the below code out
puts position information on the screen: function setview() { var posstate = gpositionsensor.getstate(); if(posstate.hasposition) { pospara.textcontent = 'position: x' + roundtotwo(posstate.position.x) + " y" + roundtotwo(posstate.position.y) + " z" + roundtotwo(posstate.position.z); xpos = -posstate.position.x * width * 2;...
Animations and tweens - Game development
next, we will load the spritesheet —
put the following line at the bottom of your preload() function: game.load.spritesheet('ball', 'img/wobble.png', 20, 20); instead of loading a single image of the ball we can load the whole spritesheet — a collection of different images.
... loading the animation next up, go into your create() function, find the line that loads the ball sprite, and below it
put the call to animations.add() seen below: ball = game.add.sprite(50, 250, 'ball'); ball.animations.add('wobble', [0,1,0,2,0,1,0,2,0], 24); to add an animation to the object we use the animations.add() method, which contains the following parameters the name we chose for the animation an array defining the order in which to display the frames during the animation.
...update the first line inside update() as shown below: function update() { game.physics.arcade.collide(ball, paddle, ballhitpaddle); game.physics.arcade.collide(ball, bricks, ballhitbrick); paddle.x = game.in
put.x || game.world.width*0.5; } then we can create the ballhitpaddle() function (having ball and paddle as default parameters), playing the wobble animation when it is called.
... compare your code you can check the finished code for this lesson in the live demo below, and play with it to understand better how it works: next steps animations and tweens look very nice, but we can add even more to our game — in the next section we'll look at handling button in
puts.
2D maze game with device orientation - Game development
var game = new phaser.game(320, 480, phaser.canvas, 'game'); the line above will initialize the phaser instance — the arguments are the width of the canvas, height of the canvas, rendering method (we're using canvas, but there are also webgl and auto options available) and the optional id of the dom container we want to
put the canvas in.
...all.mainmenu.prototype = { create: function() { this.add.sprite(0, 0, 'screen-mainmenu'); this.gametitle = this.add.sprite(ball._width*0.5, 40, 'title'); this.gametitle.anchor.set(0.5,0); this.startbutton = this.add.button(ball._width*0.5, 200, 'button-start', this.startgame, this, 2, 0, 1); this.startbutton.anchor.set(0.5,0); this.startbutton.in
put.usehandcursor = true; }, startgame: function() { this.game.state.start('howto'); } }; to create a new button there's add.button method with the following list of optional arguments: top absolute position on canvas in pixels.
...let’s focus on the keyboard first by adding the following to the create() function : this.keys = this.game.in
put.keyboard.createcursorkeys(); as you can see there’s a special phaser function called createcursorkeys(), which will give us an object with event handlers for the four arrow keys to play with: up, down, left and right.
...the this.keys object will be checked against player in
put, so the ball can react accordingly with the predefined force: if(this.keys.left.isdown) { this.ball.body.velocity.x -= this.movementforce; } else if(this.keys.right.isdown) { this.ball.body.velocity.x += this.movementforce; } if(this.keys.up.isdown) { this.ball.body.velocity.y -= this.movementforce; } else if(this.keys.down.isdown) { this.ball.body.velocity.y += this.movementforce; } that way we can check which key is pressed at the given frame and apply the defined force to the ball, thus increase the velocity in the proper direction.
IDL - MDN Web Docs Glossary: Definitions of Web-related terms
for example, to set an <in
put> element's maxlength to 42 using the content attribute, you have to call setattribute("maxlength", "42") on that element.
...for example, the default type for <in
put> elements is "text", so if you set in
put.type="foobar", the <in
put> element will be of type text (in the appearance and the behavior) but the "type" content attribute's value will be "foobar".
... idl attributes are not always strings; for example, in
put.maxlength is a number (a signed long).
... when using idl attributes, you read or set values of the desired type, so in
put.maxlength is always going to return a number and when you set in
put.maxlength ,it wants a number.
Cacheable - MDN Web Docs Glossary: Definitions of Web-related terms
(for example, firefox does not support it per https://bugzilla.mozilla.org/show_bug.cgi?id=109553.) other methods, like
put or delete are not cacheable and their result cannot be cached.
...for example, a
put to pagex.html will invalidate all cached get or head requests to the same uri.
... when both, the method of the request and the status of the response, are cacheable, the response to the request can be cached: get /pagex.html http/1.1 (…) 200 ok (…) a
put request cannot be cached.
... moreover, it invalidates cached data for request to the same uri done via head or get:
put /pagex.html http/1.1 (…) 200 ok (…) a specific cache-control header in the response can prevent caching: get /pagex.html http/1.1 (…) 200 ok cache-control: no-cache (…) ...
Accessible multimedia - Learn web development
prerequisites: basic com
puter literacy, a basic understanding of html, css, and javascript, an understanding of what accessibility is.
...look around and ask advice to make sure you find a re
putable company that you'll be able to work with effectively.
...if you pay a re
putable company or ai service to do the transcription, you will probably get it done rapidly and to a high quality.
... other multimedia content the above sections don't cover all types of multimedia content that you might want to
put on a web page.
Test your skills: HTML accessibility - Learn web development
html accessibility 2 in the second task, you have a form containing three in
put fields.
... you need to: semantically associate the in
put with their labels.
... assume that these in
puts will be part of a larger form, and wrap them in an element that associates them all together as a single related group.
... if you would like your work assessed, or are stuck and want to ask for help:
put your work into an online shareable editor such as codepen, jsfiddle, or glitch.
What is accessibility? - Learn web development
prerequisites: basic com
puter literacy, a basic understanding of html and css.
...the key lesson here is to think beyond your own com
puter and how you use the web, and start learning about how others use it — you are not your users.
...hearing-impaired people do use ats (see assistive devices for people with hearing, voice, speech, or language disorders), but there are not really special ats specific for com
puter/web use.
...some people might have difficulty making the exact hand movements required to use a mouse, while others might be more severely affected, perhaps being significantly paralyzed to the point where they need to use a head pointer to interact with com
puters.
Creating fancy letterheaded paper - Learn web development
if the online editor you are using doesn't have a separate css panel, feel free to
put it in a <style> element in the head of the document.
...you just need to
put the files together.
... hints and tips remember that you can create a fallback for older browsers by
putting the fallback version of a declaration first, followed by the version that works across newer browsers only.
... example the following screenshot shows an example of what the finished design could look like: assessment or further help if you would like your work assessed, or are stuck and want to ask for help:
put your work into an online shareable editor such as codepen, jsfiddle, or glitch.
Styling tables - Learn web development
to start with, make a local copy of the sample markup, download both images (noise and leopardskin), and
put the three resulting files in a working directory somewhere on your local com
puter.
... we've coupled this with a width of 100%, meaning that the table will fill any container it is
put in, and be nicely responsive (although it would still need some more work to get it looking good on narrow screen widths).
...by default, when you set borders on table elements, they will all have spacing between them, as the below image illustrates: this doesn't look very nice (although it might be the look you want, who knows?) with border-collapse: collapse; set, the borders collapse down into one, which looks much better: we've
put a border around the whole table, which is needed because we'll be
putting some borders round the table header and footer later on — it looks really odd and disjointed when you don't have a border round the whole outside of the table and end up with gaps.
...yes, we could have
put both the background image and the linear gradient on the <thead> and <tfoot> elements using multiple background images, but we decided to do it separately for the benefit of older browsers that don't support multiple background images or linear gradients.
How CSS is structured - Learn web development
prerequisites: basic com
puter literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works.
... playing with the css in this article for the exercise that follows, create a folder on your com
puter.
...the result of the calculation isn't something that can be com
puted in advance and entered as a static value.
... <div class="box"></div> .box { margin: 30px; width: 100px; height: 100px; background-color: rebeccapurple; transform: rotate(0.8turn) } the out
put from the above code looks like this: look up different values of properties listed below.
How CSS works - Learn web development
prerequisites: basic com
puter literacy, basic software installed, basic knowledge of working with files, and html basics (study introduction to html.) objective: to understand the basics of how css and html are parsed by the browser, and what happens when a browser encounters css it does not understand.
...the dom represents the document in the com
puter's memory.
...the span nodes are also parents, with text nodes as their children: p ├─ "let's use:" ├─ span | └─ "cascading" ├─ span | └─ "style" └─ span └─ "sheets" this is how a browser interprets the previous html snippet —it renders the above dom tree and then out
puts it in the browser like so: p {margin:0;} applying css to the dom let's say we added some css to our document, to style it.
... the updated out
put is as follows: in our debugging css article in the next module we will be using browser devtools to debug css problems, and will learn more about how the browser interprets css.
What is CSS? - Learn web development
prerequisites: basic com
puter literacy, basic software installed, basic knowledge of working with files, and html basics (study introduction to html.) objective: to learn what css is.
...browsers, like firefox, chrome, or edge , are designed to present documents visually, for example, on a com
puter screen, projector or printer.
... note: a browser is sometimes called a user agent, which basically means a com
puter program that represents a person inside a com
puter system.
...this means that the code has been written to turn the instruction in our css file into something that can be out
put to the screen.
Example - Learn web development
a payment form html content <form method="post"> <h1>payment form</h1> <p>required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p> <section> <h2>contact information</h2> <fieldset> <legend>title</legend> <ul> <li> <label for="title_1"> <in
put type="radio" id="title_1" name="title" value="a"> ace </label> </li> <li> <label for="title_2"> <in
put type="radio" id="title_2" name="title" value="k" > king </label> </li> <li> <label for="title_3"> <in
put type="radio" id="title_3" name="title" value="q"> queen ...
... </label> </li> </ul> </fieldset> <p> <label for="name"> <span>name: </span> <strong><abbr title="required">*</abbr></strong> </label> <in
put type="text" id="name" name="username"> </p> <p> <label for="mail"> <span>e-mail: </span> <strong><abbr title="required">*</abbr></strong> </label> <in
put type="email" id="mail" name="usermail"> </p> <p> <label for="pwd"> <span>password: </span> <strong><abbr title="required">*</abbr></strong> </label> <in
put type="password" id="pwd" name="password"> </p> </section> <section> <h2>payment information</h2> <p> <label for="card"> <span>card type:</span> </label> <select id...
...="card" name="usercard"> <option value="visa">visa</option> <option value="mc">mastercard</option> <option value="amex">american express</option> </select> </p> <p> <label for="number"> <span>card number:</span> <strong><abbr title="required">*</abbr></strong> </label> <in
put type="tel" id="number" name="cardnumber"> </p> <p> <label for="date"> <span>expiration date:</span> <strong><abbr title="required">*</abbr></strong> <em>formatted as mm/dd/yyyy</em> </label> <in
put type="date" id="date" name="expiration"> </p> </section> <section> <p> <button type="submit">validate the payment</button> </p> </section> </form> css content h1 { margin-top: 0; } ul {...
... margin: 0; padding: 0; list-style: none; } form { margin: 0 auto; width: 400px; padding: 1em; border: 1px solid #ccc; border-radius: 1em; } div+div { margin-top: 1em; } label span { display: inline-block; width: 120px; text-align: right; } in
put, textarea { font: 1em sans-serif; width: 250px; box-sizing: border-box; border: 1px solid #999; } in
put[type=checkbox], in
put[type=radio] { width: auto; border: none; } in
put:focus, textarea:focus { border-color: #000; } textarea { vertical-align: top; height: 5em; resize: vertical; } fieldset { width: 250px; box-sizing: border-box; margin-left: 136px; border: 1px solid #999; } button { margin: 20px 0 0 124px; } label { position: re...
Sending forms through JavaScript - Learn web development
many modern uis only use html forms to collect in
put from the user, and not for data submission.
... the html is typical: <form id="myform"> <label for="myname">send me your name:</label> <in
put id="myname" name="name" value="john"> <in
put type="submit" value="send me!"> </form> but javascript takes over the form: window.addeventlistener( "load", function () { function senddata() { const xhr = new xmlhttprequest(); // bind the formdata object and the form element const fd = new formdata( form ); // define what happens on successful data submission xhr.addevent...
... dealing with binary data if you use a formdata object with a form that includes <in
put type="file"> widgets, the data will be processed automatically.
... in the following example, we use the filereader api to access binary data and then build the multi-part form data request by hand: <form id="theform"> <p> <label for="thetext">text data:</label> <in
put id="thetext" name="mytext" value="some text data" type="text"> </p> <p> <label for="thefile">file data:</label> <in
put id="thefile" name="myfile" type="file"> </p> <button>send me!</button> </form> as you see, the html is a standard <form>.
Test your skills: Styling basics - Learn web development
note: you can try out solutions by editing the starting point file locally, however it may be helpful to
put your code in an online tool such as codepen, jsfiddle, or glitch to work on the tasks.
... on top of that, add in some nice, consistent styling for the in
puts and button.
... use some kind of layout technique to make the in
puts and labels line up neatly.
... if you would like your work assessed, or are stuck and want to ask for help:
put your work into an online shareable editor such as codepen, jsfiddle, or glitch.
HTML basics - Learn web development
nesting elements you can
put elements inside other elements too — this is called nesting.
...let's revisit the code we
put into our index.html example (which we first met in the dealing with files article): <!doctype html> <html> <head> <meta charset="utf-8"> <title>my test page</title> </head> <body> <img src="images/firefox-icon.png" alt="my test image"> </body> </html> here, we have the following: <!doctype html> — the doctype.
...essentially, it can now handle any textual content you might
put on it.
... each item inside the lists is
put inside an <li> (list item) element.
How the Web works - Learn web development
previous overview: getting started with the web how the web works provides a simplified view of what happens when you view a webpage in a web browser on your com
puter or phone.
... clients and servers com
puters connected to the web are called clients and servers.
... a simplified diagram of how they interact might look like this: clients are the typical web user's internet-connected devices (for example, your com
puter connected to your wi-fi, or your phone connected to your mobile network) and web-accessing software available on those devices (usually a web browser like firefox or chrome).
... servers are com
puters that store webpages, sites, or apps.
Installing basic software - Learn web development
a com
puter.
... maybe that sounds obvious to some people, but some of you are reading this article on your phone or a library com
puter.
... for serious web development, it's better to invest in a desktop or laptop com
puter running windows, macos or linux.
... installing a text editor you probably already have a basic text editor on your com
puter.
Debugging HTML - Learn web development
this webpage takes an html document as an in
put, goes through it, and gives you a report to tell you what is wrong with your html.
... to specify the html to validate, you can provide a web address, upload an html file, or directly in
put some html code.
... switch to the validate by direct in
put tab.
... you will know when all your errors are fixed when you see the following banner in your out
put: summary so there we have it, an introduction to debugging html, which should give you some useful skills to count on when you start to debug css, javascript, and other types of code later on in your career.
Structuring a page of content - Learn web development
create the example on your local com
puter, or alternatively use an online tool such as codepen, jsfiddle, or glitch to work on the tasks.
... you don't need to know any css to do this assessment; you just need to
put the provided css inside an html element.
... if you are getting stuck and can't envisage what elements to
put where, draw out a simple block diagram of the page layout, and write on the elements you think should wrap each block.
... assessment or further help if you would like your work assessed, or are stuck and want to ask for help:
put your work into an online shareable editor such as codepen, jsfiddle, or glitch.
Introduction to HTML - Learn web development
we have
put together a course that includes all the essential information you need to work towards your goal.
... get started prerequisites before starting this module, you don't need any previous html knowledge, but you should have at least basic familiarity with using com
puters and using the web passively (i.e., just looking at it and consuming content).
... note: if you are working on a com
puter/tablet/other devices that doesn't let you create your own files, you can try out (most of) the code examples in an online coding program such as jsbin or glitch.
...in this article, you'll learn about marking up quotations, description lists, com
puter code and other related text, subscript and superscript, contact information, and more.
Choosing the right approach - Learn web development
prerequisites: basic com
puter literacy, a reasonable understanding of javascript fundamentals.
... no support 4 — 11prefixed notes prefixed implemented with the vendor prefix: moznotes could be called with no in
put parameters.ie full support 10opera full support 15 full support 15 full support 15prefixed prefixed implemented with the vendor prefix: webkitsafari full support 6.1 ...
...for example: remotedb.alldocs({ include_docs: true, attachments: true }).then(function (result) { let docs = result.rows; docs.foreach(function(element) { localdb.
put(element.doc).then(function(response) { alert("pulled doc with id " + element.doc._id + " and added to local db."); }).catch(function (err) { if (err.name == 'conflict') { localdb.get(element.doc._id).then(function (resp) { localdb.remove(resp._id, resp._rev).then(function (resp) { // et cetera...
... it is better to use the chaining power of promises to go with a flatter, easier to parse structure: remotedb.alldocs(...).then(function (resultofalldocs) { return localdb.
put(...); }).then(function (resultof
put) { return localdb.get(...); }).then(function (resultofget) { return localdb.
put(...); }).catch(function (err) { console.log(err); }); or even: remotedb.alldocs(...) .then(resultofalldocs => { return localdb.
put(...); }) .then(resultof
put => { return localdb.get(...); }) .then(resultofget => { return localdb.
put(...); }) .catch(err => console.log(err)); that covers a lot of the basics.
Fetching data from the server - Learn web development
originally page loading on the web was simple — you'd send a request for a website to a server, and as long as nothing went wrong, the assets that made the web page would be downloaded and displayed on your com
puter.
... to speed things up even further, some sites also store assets and data on the user's com
puter when they are first requested, meaning that on subsequent visits they use the local versions instead of downloading fresh copies when the page is first loaded.
... to begin this example, make a local copy of ajax-start.html and the four text files — verse1.txt, verse2.txt, verse3.txt, and verse4.txt — in a new directory on your com
puter.
...first of all,
put the following beneath your previous code block — this is the empty shell of the function.
Test your skills: variables - Learn web development
note: in the examples below, if there is an error in your code it will be out
putted into the results panel on the page, to help you try to figure out the answer (or into the browser's javascript console, in the case of the downloadable version).
...the results panel should be out
putting the name chris, and a statement about how old chris will be in 20 years' time.
... how can you fix the problem and correct the out
put?
... if you would like your work assessed, or are stuck and want to ask for help:
put your work into an online shareable editor such as codepen, jsfiddle, or glitch.
Inheritance in JavaScript - Learn web development
prerequisites: basic com
puter literacy, a basic understanding of html and css, familiarity with javascript basics (see first steps and building blocks) and oojs basics (see introduction to objects).
...to see this, enter object.getownpropertynames(teacher.prototype) into either the text in
put field or your javascript console.
...to see this, compare the out
puts of person.prototype.greeting and teacher.prototype.greeting.
... trying the example out now that you've entered all the code, try creating an object instance from teacher() by
putting the following at the bottom of your javascript (or something similar of your choosing): let teacher1 = new teacher('dave', 'griffiths', 31, 'male', ['football', 'cookery'], 'mathematics'); now save and refresh, and try accessing the properties and methods of your new teacher1 object, for example: teacher1.name.first; teacher1.interests[0]; teacher1.bio(); teacher1.subject; teacher1.greetin...
Object-oriented JavaScript for beginners - Learn web development
prerequisites: basic com
puter literacy, a basic understanding of html and css, familiarity with javascript basics (see first steps and building blocks) and oojs basics (see introduction to objects).
...for example: in the rest of the article, we'll start to look at how oop theory can be
put into practice in javascript.
... in addition, there are a couple of problems with our bio() method — the out
put always includes the pronoun "he", even if your person is female, or some other preferred gender classification.
...you can
put any code you like inside a constructor (you'll probably need a few conditionals and a loop).
Client-Server Overview - Learn web development
prerequisites: basic com
puter literacy.
...
put: update an existing resource (or create a new one if it doesn't exist).
... the web application dynamically creates an html page by
putting the data (from the database) into placeholders inside an html template.
...websites created using this style of application push a lot of com
putational cost from the server to the web browser, and can result in websites that appear to behave a lot more like native apps (highly responsive, etc.).
Deployment and next steps - Learn web development
if we have a look at the rollup.config.js file, we can see that the svelte compiler is just a rollup plugin: import svelte from 'rollup-plugin-svelte'; [...] import { terser } from 'rollup-plugin-terser'; const production = !process.env.rollup_watch; export default { in
put: 'src/main.js', out
put: { sourcemap: true, format: 'iife', name: 'app', file: 'public/build/bundle.js' }, plugins: [ svelte({ // enable run-time checks when not in production dev: !production, // we'll extract any component css out into // a separate file - better for performance css: css => { css.write('public/build/bundle.css'); ...
..../ auto-detected project settings (svelte): - build command: `npm run build` or `rollup -c` - out
put directory: public - development command: sirv public --single --dev --port $port ?
...clicking on it will let you inspect the out
put of the job.
... ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue com
puted properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript ...
Rendering a list of Vue components - Learn web development
while it would be great to use the name field, this field will eventually be controlled by user in
put, which means we can't guarantee that the names would be unique.
...ibute to :label="item.label", and the :done="false" attribute to :done="item.done", as seen in context below: <ul> <li v-for="item in todoitems" :key="item.id"> <to-do-item :label="item.label" :done="item.done"></to-do-item> </li> </ul> now when you look at your running app, it'll show the todo items with their proper names, and if you inspect the source code you'll see that the in
puts all have unique ids, taken from the object in the app component.
... what we really need next is the ability to allow our users to enter their own todo items into the app, and for that we'll need a text <in
put>, an event to fire when the data is submitted, a method to fire upon submission to add the data and rerender the list, and a model to control the data.
... ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue com
puted properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript ...
Creating Sandboxed HTTP Connections
notificationcallbacks = listener; gchannel.asyncopen(listener, null); function streamlistener(acallbackfunc) { this.mcallbackfunc = acallbackfunc; } streamlistener.prototype = { mdata: "", // nsistreamlistener onstartrequest: function (arequest, acontext) { this.mdata = ""; }, ondataavailable: function (arequest, acontext, astream, asourceoffset, alength) { var scriptablein
putstream = components.classes["@mozilla.org/scriptablein
putstream;1"] .createinstance(components.interfaces.nsiscriptablein
putstream); scriptablein
putstream.init(astream); this.mdata += scriptablein
putstream.read(alength); }, onstoprequest: function (arequest, acontext, astatus) { if (components.issuccesscode(astatus)) { // request was successfull this.mca...
... first, a nsiin
putstream instance is created, after which the setdata method is called.
... var in
putstream = components.classes["@mozilla.org/io/string-in
put-stream;1"] .createinstance(components.interfaces.nsistringin
putstream); in
putstream.setdata(postdata, postdata.length); next, the nsichannel is qied to an nsiuploadchannel.
... its setuploadstream method is called, passing in the nsiin
putstream and the type (in this case, "application/x-www-form-urlencoded"): var uploadchannel = gchannel.queryinterface(components.interfaces.nsiuploadchannel); uploadchannel.setuploadstream(in
putstream, "application/x-www-form-urlencoded", -1); due to a bug, calling setuploadstream will reset the nsihttpchannel to be a
put request, so now the request type is set to post: // order important - setuploadstream resets to
put httpchannel.requestmethod = "post"; ...
Multiple Firefox profiles
close all instances of firefox, or restart the com
puter, and then try again.
... you can also choose where to store the profile on your com
puter.
... optionally, to change where the profile will be stored on your com
puter, click choose folder...
... confirm that you wish to delete the profile: don't delete files removes the profile from the profile manager yet retains the profile data files on your com
puter in the storage folder so that your information is not lost.
Release phase
the out
put will look something like this: comparing with ssh://hg.mozilla.org/releases/l10n-central/x-testing searching for changes changeset: 0:7c543e8f3a6a tag: tip user: your name <email@example.com> date: mon nov 23 18:08:25 2009 +0100 summary: added search bar strings make sure this out
put is accurate before continuing.
... once you've made sure the outgoing out
put is accurate, push this changeset to hg.mozilla.org by running the hg push command.
...the out
put should look something like this: pushing to ssh://hg.mozilla.org/releases/l10n-central/x-testing searching for changes adding changesets adding manifests adding file changes added 1 changesets with 2 changes to 2 files congratulations!
...if you can't figure it out on your own, copy the out
put of the above command, paste it on http://pastebin.mozilla.org and ask in #l10n on the irc.mozilla.org server.
Activity Monitor, Battery Status Menu and top
careful investigation indicates that on mac os 10.10 and 10.11 it is com
puted with a formula that is machine model-specific, and includes the following factors: cpu usage, wakeup frequency, quality of service class usage, and disk, gpu, and network activity.
... ioreg -l | grep board-id in contrast, on mac os 10.9 it is com
puted via a simpler machine model-independent formula that only factors in cpu usage and wakeup frequency.
...tests indicate that it is almost certainly using the same "energy impact" formula to com
pute the "average energy impact", using measurements from the past 8 hours of wake time (i.e.
... the power column's value is com
puted by the same formula as the one used for "energy impact" by activity monitor in mac os 10.9, and should also be avoided.
BloatView
reading individual bloat logs full bloatview out
put contains per-class statistics on allocations and refcounts, and provides gross numbers on the amount of memory being leaked broken down by class.
... here's a sample of the bloatview out
put.
... perl tools/bloatview/bloatdiff.pl <previous-log> <current-log> this will give you out
put of the form: bloat/leak delta report current file: dist/win32_d.obj/bin/bloatlogs/all-1999-10-22-133450.txt previous file: dist/win32_d.obj/bin/bloatlogs/all-1999-10-16-010302.txt -------------------------------------------------------------------------- class leaks delta bloat delta ----------------------------------------------------------------------...
... bloatview's out
put file can also show you where the leaked objects are allocated.
Investigating leaks using DMD heap scan mode
the result of that grep will contain out
put that looks something like this: cc-edges.15873.log:0x7f0897082c00 [rc=1285] nsglobalwindowinner # 2147483662 inner https://www.example.com/ * cc-edges.15873.log: the first part is the file name where it was found.
...it will eventually produce some out
put.
... you'll want to save a copy of this out
put for later.
... the out
put will look something like this, after a message about loading progress: 0x7f0882fe3230 [fragmentorelement (xhtml) script https://www.example.com] --[[via hash] mlistenermanager]--> 0x7f0899b4e550 [eventlistenermanager] --[mlisteners event=onload listenertype=3 [i]]--> 0x7f0882ff8f80 [callbackobject] --[mincumbentglobal]--> 0x7f0897082c00 [nsglobalwindowinner # 2147483662 inner https://www.example.com] root 0x7f0882fe3230 is a ref counted object with 1 unknown edge(s).
powermetrics
the following is example out
put from such an invocation: *** sampled system activity (fri sep 4 17:15:14 2015 +1000) (5009.63ms elapsed) *** *** running tasks *** name id cpu ms/s user% deadlines (<2 ms, 2-5 ms) wakeups (intr, pkg idle) gpu ms/s com.apple.terminal 293 447.66 274.83 120.35 221.74 firefox ...
... by default, the coalitions/processes are sorted by a composite value com
puted from several factors, though this can be changed via command-line options.
...the following is sample out
put.
... 186.90 66.68 0.00 com.apple.webkit.plugin.64 67373 55.55 74.38 0.74 0.00 9.51 3.13 0.02 com.apple.terminal 109 6.22 0.40 0.23 0.00 terminal 208 6.25 92.99 0.00 0.00 0.33 0.20 0.00 the rapl out
put is first, then the powermetrics out
put.
PR_dtoa
ndigits the number of digits desired in the out
put string.
... decpt a pointer to a memory location where the runtime will store the offset, relative to the beginning of the out
put string, of the conversion's decimal point.
... results the principle out
put is the null-terminated string stored in buf.
... if the in
put parameter d is+infinity,-infinity ornan, *decpt is set to 9999.
PR_strtod
syntax #include <prdtoa.h> prfloat64 pr_strtod(const char *s00, char **se); parameters the function has these parameters: s00 the in
put string to be scanned.
... se a pointer that, if not null, will be assigned the address of the last character scanned in the in
put string.
... returns the result of the conversion is a prfloat64 value equivalent to the in
put string.
... description pr_strtod converts the prefix of the in
put decimal string pointed to by s00 to a nearest double-precision floating point number.
NSS_3.12_release_notes.html
bug 354403: nsslist_createiterator returns pointer to a freed memory if the function fails to allocate a lock bug 399236: pkix wrapper must print debug out
put into stderr bug 399300: pkix error results not freed after use.
...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 out
puts 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_certchainfr...
...od_handle_string_arg called in loop bug 353904: klocwork null ptr deref in secasn1d.c bug 366390: correct misleading function names in fipstest bug 370536: memory leaks in pointer tracker code in debug builds only bug 372242: cert_comparerdn uses incorrect algorithm bug 379753: s/mime should support aes bug 381375: ocspclnt doesn't work on windows bug 398693: der_asciitotime produces incorrect out
put for dates 1950-1970 bug 420212: empty cert dns handled badly, display as !invalid ava!
... bug 420979: vfychain ignores -b time option when -p option is present bug 403563: implement the tls session ticket extension (ste) bug 400917: want exported function that out
puts all host names for dns name matching bug 315643: test_buildchain_resourcelimits won't build bug 353745: klocwork null ptr dereference in pkcs12 decoder bug 338367: the gf2m_populate and gfp_populate should check the eccurve_map array index bounds before use bug 201139: ssltap should display plain text for null cipher suites bug 233806: support nist crl policy bug 279085: nss tools display public exponent as negative number bug 363480: ocspclnt needs option to take cert from specified file bug 265715: remove unused hsearch.c dbm code bug 337361: leaks in jar_parse_any (security/nss/lib/jar/jarver.c) bug 338453: leaks...
NSS API Guidelines
the preferred format is: "@(#) $rcsfile: nss-guidelines.html, v $ $revision: 48936 $ $date: 2009-08-11 07:45:57 -0700 (tue, 11 aug 2009) $ $name$" you can
put the string in a comment or in a static char array.
...you can even
put them in header files; the header files are protected from double inclusion.
...gned char *outbuf, secbufferlen *outlen, secbufferlenmaxoutlength, unsigned char *inbuf, secbufferleninlen) encrypt and decrypt like functions which have different properties, additional parameters, callbacks, etc., should insert their additional parameters between the context (first parameter) and the out
put buffer.
...unctions which act like filters should have a consistent signature: secstatus pk11_digestop(pk11context *context, unsigned char *inbuf, secbufferleninlen) functions like these which have different properties, for example, additional parameters, callbacks, etc., should insert their additional parameters between the context (first parameter) and the in
put buffer.
NSS Sample Code Sample1
// utility function to print hex data static void printbuffer(unsigned char *digest, unsigned int len) { int i; cout << "length: " << len << endl; for(i = 0;i < len;i++) printf("%02x ", digest[i]); cout << endl; } // xxx data protection // - takes an in
put buffer, applies the encryption // and mac, and generates a buffer with the result.
...this becomes the in
put to // the exportkeys method on the remote server.
... *pubkey = seckey_converttopublickey(prvkey); if (!*pubkey) { rv = 1; goto done; } done: if (prvkey) seckey_destroyprivatekey(prvkey); return rv; } int server::wrapkey(pk11symkey *key, seckeypublickey *pubkey, secitem **ret) { int rv = 0; secitem *data; secstatus s; data = (secitem *)port_zalloc(sizeof(secitem)); if (!data) { rv = 1; goto done; } // allocate space for out
put of wrap data->len = seckey_publickeystrength(pubkey); data->data = new unsigned char[data->len]; if (!data->data) { rv = 1; goto done; } s = pk11_pubwrapsymkey(ckm_rsa_pkcs, pubkey, key, data); if (s != secsuccess) { rv = 1; goto done; } *ret = data; data = 0; done: if (data) secitem_freeitem(data, pr_true); return rv; } // example of how to do a raw export (no wrapping of ...
...s(pubkeydata, &wrappedenckey, &wrappedmackey); if (rv) { cout << "exportkeys failed" << endl; goto trans_done; } // print - for information cout << "wrapped encryption key" << endl; printbuffer(wrappedenckey->data, wrappedenckey->len); cout << "wrapped mac key" << endl; printbuffer(wrappedmackey->data, wrappedmackey->len); // import the keys into server 2 - this just
puts the wrapped // values into the "files" rv = server2->importkeys(wrappedenckey, wrappedmackey); if (rv) { cout << "importkeys failed" << endl; goto trans_done; } trans_done: if (wrappedenckey) secitem_freeitem(wrappedenckey, pr_true); if (wrappedmackey) secitem_freeitem(wrappedmackey, pr_true); if (pubkeydata) secitem_freeitem(pubkeydata, pr_true); } if (rv) goto do...
NSS Sample Code Sample_1_Hashing
this is an example program that demonstrates how to com
pute the hash of a file and save it to another file.
...> 76 || (i % 16 == limit)) { newline(out); column = level; limit = i % 16; } } if (column != level) { newline(out); } } /* * prints a usage message and exits */ static void usage(const char *progname) { int htype; int hash_algtotal = sizeof(hash_names) / sizeof(hash_names[0]); fprintf(stderr, "usage: %s -t type [ < in
put ] [ > out
put ]\n", progname); fprintf(stderr, "%-20s specify the digest method (must be one of\n", "-t type"); fprintf(stderr, "%-20s ", ""); for (htype = 0; htype < hash_algtotal; htype++) { fprintf(stderr, hash_names[htype].hashname); if (htype == (hash_algtotal - 2)) fprintf(stderr, " or "); else if (htype != (hash_algtotal - 1)) ...
... fprintf(stderr, ", "); } fprintf(stderr, " (case ignored))\n"); fprintf(stderr, "%-20s define an in
put file to use (default is stdin)\n", "< in
put"); fprintf(stderr, "%-20s define an out
put file to use (default is stdout)\n", "> out
put"); exit(-1); } /* * check for the missing arguments */ static void printmsgandexit(const char *progname, char opt) { fprintf(stderr, "%s: option -%c requires an argument\n", progname, opt); usage(progname); } #define require_arg(opt,value) if (!(value)) printmsgandexit(progname, opt) /* * digests a file according to the specified algorithm.
... */ printashex(outfile, digest, len); } while (0); /* cleanup */ if (hashcontext != null) hash_destroy(hashcontext); return secsuccess; } /* * this sample com
putes the hash of a file and saves it * to another file.
NSS Sample Code Sample_2_Initialization of NSS
"%-15s specify a db directory path\n\n", "-d <dbdirpath>"); fprintf(stderr, "%-15s specify a plaintext password\n\n", "-p <plainpasswc>"); fprintf(stderr, "%-15s specify a password file\n\n", "-f <plainpasswc>"); exit(-1); } /* initialize the slot password */ char *initslotpassword(pk11slotinfo *slot, prbool retry, void *arg) { file *in
put; file *out
put; char *p0 = null; char *p1 = null; secupwdata *pwdata = (secupwdata *) arg; if (pwdata->source == pw_fromfile) { return filepasswd(slot, retry, pwdata->data); } if (pwdata->source == pw_plaintext) { return pl_strdup(pwdata->data); } /* open terminal */ in
put = fopen("/dev/tty", "r"); if (...
...in
put == null) { pr_fprintf(pr_stderr, "error opening in
put terminal for read\n"); return null; } /* we have no password, so initialize database with one */ pr_fprintf(pr_stderr, "enter a password which will be used to encrypt your keys.\n" "the password should be at least 8 characters long,\n" "and should contain at least one non-alphabetic character.\n\n"); out
put = fopen("/dev/tty", "w"); if (out
put == null) { pr_fprintf(pr_stderr, "error opening out
put terminal for write\n"); return null; } for (;;) { if (p0) port_free(p0); p0 = getpassword(in
put, out
put, "enter new password: ", checkpassword); if (p1) port_free(p1); p1 ...
...= getpassword(in
put, out
put, "re-enter password: ", checkpassword); if (p0 && p1 && !port_strcmp(p0, p1)) { break; } pr_fprintf(pr_stderr, "passwords do not match.
... try again.\n"); } /* clear out the duplicate password string */ if (p1) { port_memset(p1, 0, port_strlen(p1)); port_free(p1); } fclose(in
put); fclose(out
put); return p0; } /* change the password */ secstatus changepw(pk11slotinfo *slot, char *oldpass, char *newpass, char *oldpwfile, char *newpwfile) { secstatus rv; secupwdata pwdata; secupwdata newpwdata; char *oldpw = null; char *newpw = null; if (oldpass) { pwdata.source = pw_plaintext; pwdata.data = oldpass; } else if (oldpwfile) { pwdata.source = pw_fromfile; pwdata.data = oldpwfile; } else { pwdata.source = pw_none; pwdata.data = null; } if (newpass) { newpwdata.source = pw_...
NSS Sample Code Utilities_1
d(char *cp) { int len; char *end; len = port_strlen(cp); if (len < 8) { return pr_false; } end = cp + len; while (cp < end) { unsigned char ch = *cp++; if (!((ch >= 'a') && (ch <= 'z')) && !((ch >= 'a') && (ch <= 'z'))) { return pr_true; } } return pr_false; } /* * getpassword */ char* getpassword(file *in
put, file *out
put, char *prompt, prbool (*ok)(char *)) { char phrase[200] = {'\0'}; int infd = fileno(in
put); int istty = isatty(infd); for (;;) { /* prompt for password */ if (istty) { fprintf(out
put, "%s", prompt); fflush (out
put); echooff(infd); } fgets(phrase, sizeof(phrase), inpu...
...t); if (istty) { fprintf(out
put, "\n"); echoon(infd); } /* stomp on newline */ phrase[port_strlen(phrase)-1] = 0; /* validate password */ if (!(*ok)(phrase)) { if (!istty) return 0; fprintf(out
put, "password must be at least 8 characters long with one or more\n"); fprintf(out
put, "non-alphabetic characters\n"); continue; } return (char*) port_strdup(phrase); } } /* * filepasswd extracts the password from a text file * * storing passwords is often used with server environments * where prompting the user for a password or requiring it * to be entered in the command line is not a feasible option.
...e, pr_geterror(), pr_getoserror()); rv = secfailure; goto cleanup; } if (ascii) { /* first convert ascii to binary */ secitem filedata; char *asc, *body; /* read in ascii data */ rv = filetoitem(&filedata, infile); asc = (char *)filedata.data; if (!asc) { pr_fprintf(pr_stderr, "unable to read data from in
put file\n"); rv = secfailure; goto cleanup; } /* check for headers and trailers and remove them */ if ((body = strstr(asc, "-----begin")) != null) { char *trailer = null; asc = body; body = port_strchr(body, '\n'); if (!body) body = port_strchr(asc, '\r'); /* maybe this is a mac file */ ...
... if (body) trailer = strstr(++body, "-----end"); if (trailer != null) { *trailer = '\0'; } else { pr_fprintf(pr_stderr, "in
put has header but no trailer\n"); port_free(filedata.data); rv = secfailure; goto cleanup; } } else { body = asc; } /* convert to binary */ rv = atob_convertasciitoitem(der, body); if (rv) { pr_fprintf(pr_stderr, "error converting ascii to binary %s\n", port_geterror()); port_free(filedata.data); rv = secfailure; goto cleanup; } port_free(filedata.data); } else { /* read in binar...
Hashing - sample 1
the nss same code below com
putes the hash of a file and saves it to another file, this illustrates the use of nss message apis.
... 76 || (i % 16 == limit)) { newline(out); column = level; limit = i % 16; } } if (column != level) { newline(out); } } /* * prints a usage message and exits */ static void usage(const char *progname) { int htype; int hash_algtotal = sizeof(hash_names) / sizeof(hash_names[0]); fprintf(stderr, "usage: %s -t type [ < in
put ] [ > out
put ]\n", progname); fprintf(stderr, "%-20s specify the digest method (must be one of\n", "-t type"); fprintf(stderr, "%-20s ", ""); for (htype = 0; htype < hash_algtotal; htype++) { fprintf(stderr, hash_names[htype].hashname); if (htype == (hash_algtotal - 2)) fprintf(stderr, " or "); else if (htype != (hash_algtotal - 1)) ...
... fprintf(stderr, ", "); } fprintf(stderr, " (case ignored))\n"); fprintf(stderr, "%-20s define an in
put file to use (default is stdin)\n", "< in
put"); fprintf(stderr, "%-20s define an out
put file to use (default is stdout)\n", "> out
put"); exit(-1); } /* * check for the missing arguments */ static void printmsgandexit(const char *progname, char opt) { fprintf(stderr, "%s: option -%c requires an argument\n", progname, opt); usage(progname); } #define require_arg(opt,value) if (!(value)) printmsgandexit(progname, opt) /* * digests a file according to the specified algorithm.
... */ printashex(outfile, digest, len); } while (0); /* cleanup */ if (hashcontext != null) hash_destroy(hashcontext); return secsuccess; } /* * this sample com
putes the hash of a file and saves it * to another file.
Initialize NSS database - sample 2
progname); fprintf(stderr, "%-15s specify a db directory path\n\n", "-d "); fprintf(stderr, "%-15s specify a plaintext password\n\n", "-p "); fprintf(stderr, "%-15s specify a password file\n\n", "-f "); exit(-1); } /* * initslotpassword */ char * initslotpassword(pk11slotinfo *slot, prbool retry, void *arg) { file *in
put; file *out
put; char *p0 = null; char *p1 = null; secupwdata *pwdata = (secupwdata *) arg; if (pwdata->source == pw_fromfile) { return filepasswd(slot, retry, pwdata->data); } if (pwdata->source == pw_plaintext) { return pl_strdup(pwdata->data); } /* open terminal */ in
put = fopen("/dev/tty", "r"); if (...
...in
put == null) { pr_fprintf(pr_stderr, "error opening in
put terminal for read\n"); return null; } /* we have no password, so initialize database with one */ pr_fprintf(pr_stderr, "enter a password which will be used to encrypt your keys.\n" "the password should be at least 8 characters long,\n" "and should contain at least one non-alphabetic character.\n\n"); out
put = fopen("/dev/tty", "w"); if (out
put == null) { pr_fprintf(pr_stderr, "error opening out
put terminal for write\n"); return null; } for (;;) { if (p0) port_free(p0); p0 = getpassword(in
put, out
put, "enter new password: ", checkpassword); if (p1) port_free(p1); p1 ...
...= getpassword(in
put, out
put, "re-enter password: ", checkpassword); if (p0 && p1 && !port_strcmp(p0, p1)) { break; } pr_fprintf(pr_stderr, "passwords do not match.
... try again.\n"); } /* clear out the duplicate password string */ if (p1) { port_memset(p1, 0, port_strlen(p1)); port_free(p1); } fclose(in
put); fclose(out
put); return p0; } /* * changepw */ secstatus changepw(pk11slotinfo *slot, char *oldpass, char *newpass, char *oldpwfile, char *newpwfile) { secstatus rv; secupwdata pwdata; secupwdata newpwdata; char *oldpw = null; char *newpw = null; if (oldpass) { pwdata.source = pw_plaintext; pwdata.data = oldpass; } else if (oldpwfile) { pwdata.source = pw_fromfile; pwdata.data = oldpwfile; } else { pwdata.source = pw_none; pwdata.data = null; } if (newpass) { newpwdata.source = pw_plaintext; ...
sample1
a program to com
pute the hash of a file and save it to another file.
... == limit)) { newline(out); column = level; limit = i % 16; } } if (column != level) { newline(out); } } /* prints a usage message and exits */ static void usage(const char *progname) { int htype; int hash_algtotal = sizeof(hash_names) / sizeof(hash_names[0]); fprintf(stderr, "usage: %s -t type [ < in
put ] [ > out
put ]\n", progname); fprintf(stderr, "%-20s specify the digest method (must be one of\n", "-t type"); fprintf(stderr, "%-20s ", ""); for (htype = 0; htype < hash_algtotal; htype++) { fprintf(stderr, hash_names[htype].hashname); if (htype == (hash_algtotal - 2)) fprintf(stderr, " or "); else if (htype != (hash_algtotal - ...
...1)) fprintf(stderr, ", "); } fprintf(stderr, " (case ignored))\n"); fprintf(stderr, "%-20s define an in
put file to use (default is stdin)\n", "< in
put"); fprintf(stderr, "%-20s define an out
put file to use (default is stdout)\n", "> out
put"); exit(-1); } /* check for the missing arguments */ static void printmsgandexit(const char *progname, char opt) { fprintf(stderr, "%s: option -%c requires an argument\n", progname, opt); usage(progname); } #define require_arg(opt,value) if (!(value)) printmsgandexit(progname, opt) /* digests a file according to the specified algorithm.
... */ printashex(outfile, digest, len); } while (0); /* cleanup */ if (hashcontext != null) hash_destroy(hashcontext); return secsuccess; } /* * this sample com
putes the hash of a file and saves it to another file.
nss tech note8
if zero, then the called cache function would com
pute the correct expiration time by adding the chosen timeout (from one of those two global variables) to the sid's creationtime, giving the expirationtime.
... however, none of the callers relied on the ability of the respective cache functions to be able to com
pute the expiration time.
... all callers com
puted the expiration times explicitly, as shown above.
... since all the callers of the socket's cache function always initialized both their creationtime and expirationtime using the client's session lifetime variables, i changed the server's caching function to ignore the expirationtime com
puted by the caller, and com
pute its own expiration time, using the cache's own timeout values, or that was the intent.
Build instructions
on windows, in both debug and optimized builds, when using msvc, tells nss to
put symbols in a .pdb file.
...default is not to
put debug symbols into optimized builds, and for msvc, is to
put symbols into the .exe or .dll file.
... cd nss gmake nss_build_all the out
put of the build will be in the dist directory alongside the nspr and nss directories.
... cd mozilla/security/nss gmake nss_build_all the out
put of the build will be in mozilla/dist subdirectory.
FC_SetPIN
syntax ck_rv fc_setpin( ck_session_handle hsession, ck_char_ptr poldpin, ck_ulong uloldlen, ck_char_ptr pnewpin, ck_ulong ulnewlen ); parameters fc_setpin takes five parameters: hsession [in
put] the session's handle poldpin [in
put] points to the old pin.
... uloldlen [in
put] the length in bytes of the old pin.
... pnewpin [in
put] points to the new pin.
... ulnewlen [in
put] the length in bytes of the new pin.
sslerr.html
ssl_error_md5_digest_failure -12215 "md5 digest function failed." ssl_error_sha_digest_failure -12214 "sha-1 digest function failed." ssl_error_mac_com
putation_failure -12213 "message authentication code com
putation failed." ssl_error_sym_key_context_failure -12212 "failure to create symmetric key context." ssl_error_sym_key_unwrap_failure -12211 "failure to unwrap the symmetric key in client key exchange message." ssl_error_iv_param_failure -12209 "pkcs11 code failed to translate an iv into a para...
... sec_error_out
put_len -8189 security library: out
put length error.
... sec_error_in
put_len -8188 security library: in
put length error.
...objects are still in use." sec_error_extra_in
put -8052 "der-encoded message contained extra unused data." sec_error_unsupported_elliptic_curve -8051 "unsupported elliptic curve." sec_error_unsupported_ec_point_form -8050 "unsupported elliptic curve point form." sec_error_unrecognized_oid -8049 "unrecognized object identifier." sec_error_ocsp_invalid_signing_cert -8048 "invalid oc...
Necko Architecture
one of the arguments to the ondataavailable() notification is an nsiin
putstream (which can be considered the underlying data).
...nsiin
putstream is read from.
... nsiout
putstream is written to).
...when you receive the ondataavailable() callback, you are handed an nsiin
putsteam which you can read the data from (you will more than likely need to be able to handle multiple ondataavailable() callbacks, buffering the data you receive as necessary).
64-bit Compatibility
luckily there is an alias that will choose the right opcode for you - lir_ldp: struct object { void *data; }; lir->insload(lir_ldp, objins, ins->insimm(offsetof(object, data))); when you use lirwriter::insstore, the correct size is chosen for you automatically, based on the size of the in
put operands.
... piadd add qiadd piand and qiand pilsh lsh qilsh pirsh rsh qirsh pursh ush qursh pcmov cmov qcmov pior or qior pxor xor qxor addp iaddp qaddp peq - puge eq - uge qeq - quge pcall icall qcall the 32-bit versions have the following in
puts and out
puts.
... 32-bit op in
puts out
put ld i32, i32 i32 ldc i32, i32 i32 add i32, i32 i32 and i32, i32 i32 lsh i32, i32 i32 rsh i32, i32 i32 ush i32 cmov i32, i32, i32 i32 or i32, i32 i32 xor i32, i32 i32 iaddp i32, i32 i32 eg - uge i32, i32 i32 icall n/a i32 the 64-bit versions have the following in
puts and out
puts.
... 64-bit op in
puts out
put ldq i64, i32 i64 ldcq i64, i32 i64 qiadd i64, i64 i64 qiand i64, i64 i64 qilsh i64, i32 i64 qirsh i64, i32 i64 qursh i64, i32 i64 qcmov i32, i64, i64 i32 qior i64, i64 i64 qixor i64, i64 i64 qiaddp i64, i64 i64 qeq - quge i64, i64 i32 qcall n/a i64 extending or truncating native integers sometimes it is necessary to reduce a native integer to a 32-bit integer (for example, array or string lengths in tracemonkey) or extend a 32-bit integer to a native integer.
Introduction to the JavaScript shell
putstr(expression) evaluates the expression and displays the result on stdout.
... readline() reads a single line of in
put from stdin, returning it to the caller.
... for example, if you enter the javascript function below: function test() { var i = 3; print(i+2); } then run the command dis(test);, you get this out
put: main: 00000: uint16 3 00003: setvar 0 00006: pop 00007: name "print" 00010: pushobj 00011: getvar 0 00014: uint16 2 00017: add 00018: call 1 00021: pop 00022: stop source notes: 0: 0 [ 0] newline 1: 3 [ 3] decl offset 0 2: 7 [ 4] newline 3: 18 [ 11] xdelta 4: 18 [ 0] pcbase offset 11 dissrc([function]) disassembles the javascript bytecod...
... if your program includes a function, dostuff(), like this: function dostuff(in
put) { print("enter a number: "); var n1 = readline(); print("enter another one: "); var n2 = readline(); print("you entered " + n1 + " and " + n2 + "\n"); } calling dissrc(dostuff) function would give this out
put: ;------------------------- 10: print("enter a number: "); 00000: 10 name "print" 00003: 10 pushobj 00004: 10 string "enter a number: " 00007: 10 call 1 00010: 10 pop ;------------------------- 11: var n1 = readline(); 00011: 11 name "readline" 0...
Handling Mozilla Security Bugs
when a bug is
put into the security bug group, the group members, bug reporter, and others associated with the bug will decide by consensus, either through comments on the bug or the group mailing list, whether an immediate warning to users is appropriate and how it should be worded.
... to establish, for each bug, the amount of information a distributor can reveal immediately (before a fix is available) without
putting other distributors and their customers at risk.
...if dis
putes arise about whether or when to disclose information about a security bug, the security bug group will discuss the issue via its mailing list and attempt to reach consensus.
...it is our hope that any dis
putes that arise over membership, disclosure, or any other issue addressed by this policy can be resolved by consensus among the mozilla security module owner, the module owner's peers, and other security bug group members through discussions on the private security bug group mailing list.
Setting up an update server
these changes will need to be made in order to use the locally built mar:
put this line in the mozconfig file in root of the build directory (create it if it does not exist): ac_add_options --disable-verify-mar several files contain a line that must be uncommented.
...then run these commands, substituting <obj dir>, <mar out
put path>, <version> and <channel> appropriately: ./mach package touch "<obj dir>/dist/firefox/precomplete" mar="<obj dir>/dist/host/bin/mar.exe" moz_product_version=<version> mar_channel_id=<channel> ./tools/update-packaging/make_full_update.sh <mar out
put path> "<obj dir>/dist/firefox" for a local build, <channel> can be default, and <version> can be the value from browser/config/version.txt (or...
... serving the update preparing the update files first, create the directory that updates will be served from and
put the mar file in it.
... windows/linux: <install dir>/distribution/policies.json macos: <install dir>/contents/resources/distribution/policies.json create the distribution directory, if necessary, and
put this in policies.json: { "policies": { "appupdateurl": "http://127.0.0.1:8000/update.xml" } } now you are ready to update!
Detailed XPCOM hashtable guide
at this point, use the functions
putentry/getentry/removeentry to alter the hashtable.
...use the
put(), get(), and remove() methods to alter the table.
...the appropriate entries are getentry and
putentry.
...wide strings, pointers, and most binary data: void* (or nsisupports*) cast using ns_ptr_to_int32 char* string nscrt::hashcode() prunichar* string nsastring hashstring() nsacstring nsid& nsidhashkey::hashkey() writing a good hash function is well beyond the scope of this document, and has been discussed extensively in com
puter-science circles for many years.
nsIAuthPrompt
methods prompt() this method
puts up a text in
put dialog with ok and cancel buttons.
...one of the save_password_* constants defaulttext the default text for the text in
put dialog box.
... promptpassword() this method
puts up a password dialog with ok and cancel buttons.
... promptusernameandpassword() this method
puts up a username/password dialog with ok and cancel buttons.
nsIDOMProgressEvent
method overview void initprogressevent(in domstring typearg, in boolean canbubblearg, in boolean cancelablearg, in boolean lengthcom
putablearg, in unsigned long long loadedarg, in unsigned long long totalarg); deprecated since gecko 22.0 attributes attribute type description lengthcom
putable boolean specifies whether or not the total size of the transfer is known.
... void initprogressevent( in domstring typearg, in boolean canbubblearg, in boolean cancelablearg, in boolean lengthcom
putablearg, in unsigned long long loadedarg, in unsigned long long totalarg ); parameters typearg the type of event.
... lengthcom
putablearg if the size of the data to be transferred is known, this should be true.
...if lengthcom
putable is false, this must be zero.
nsIDocShell
sionstorageforprincipal(in nsiprincipal principal, in domstring documenturi, in boolean create); nsidomstorage getsessionstorageforuri(in nsiuri uri, in domstring documenturi); void historypurged(in long numentries); void internalload(in nsiuri auri, in nsiuri areferrer, in nsisupports aowner, in pruint32 aflags, in wstring awindowtarget, in string atypehint, in nsiin
putstream apostdatastream, in nsiin
putstream aheadersstream, in unsigned long aloadflags, in nsishentry ashentry, in boolean firstparty, out nsidocshell adocshell, out nsirequest arequest); native code only!
... boolean isbeingdestroyed(); void loadstream(in nsiin
putstream astream, in nsiuri auri, in acstring acontenttype, in acstring acontentcharset, in nsidocshellloadinfo aloadinfo); native code only!
...void internalload( in nsiuri auri, in nsiuri areferrer, in nsisupports aowner, in pruint32 aflags, in wstring awindowtarget, in string atypehint, in nsiin
putstream apostdatastream, in nsiin
putstream aheadersstream, in unsigned long aloadflags, in nsishentry ashentry, in boolean firstparty, out nsidocshell adocshell, out nsirequest arequest ); parameters auri the uri to load.
...void loadstream( in nsiin
putstream astream, in nsiuri auri, in acstring acontenttype, in acstring acontentcharset, in nsidocshellloadinfo aloadinfo ); parameters astream the in
put stream that provides access to the data to be loaded.
nsIHttpUpgradeListener
method overview void ontransportavailable(in nsisockettransport atransport, in nsiasyncin
putstream asocketin, in nsiasyncout
putstream asocketout); methods ontransportavailable() called when an http protocol upgrade attempt is completed, passing in the information needed by the protocol handler to take over the channel that is no longer being used by http.
...void ontransportavailable( in nsisockettransport atransport, in nsiasyncin
putstream asocketin, in nsiasyncout
putstream asocketout ); parameters atransport the nsisockettransport describing the socket connection between the browser and the server; this socket can now be used for the new protocol instead of http.
... asocketin the nsiasyncin
putstream object representing the in
put stream for data coming from the server over the socket connection.
... asocketout the nsiasyncout
putstream object representing the out stream for sending data to the server over the socket.
nsILoginManagerStorage
ount, [retval, array, size_is(count)] out wstring hostnames); void getallencryptedlogins([optional] out unsigned long count, [retval, array, size_is(count)] out nsilogininfo logins); void getalllogins([optional] out unsigned long count, [retval, array, size_is(count)] out nsilogininfo logins); boolean getloginsavingenabled(in astring ahost); void init(); void initwithfile(in nsifile ain
putfile, in nsifile aout
putfile); void modifylogin(in nsilogininfo oldlogin, in nsisupports newlogindata); void removealllogins(); void removelogin(in nsilogininfo alogin); void searchlogins(out unsigned long count, in nsipropertybag matchdata, [retval, array, size_is(count)] out nsilogininfo logins); void setloginsavingenabled(in astring ahost, in boolean isenabled); attributes attr...
...void initwithfile( in nsifile ain
putfile, in nsifile aout
putfile ); parameters ain
putfile the file from which to read stored logins.
... aout
putfile the file to which to write stored logins, if not null.
... if this is null, use the default out
put file.
nsIScriptableUnicodeConverter
view acstring convertfromunicode(in astring asrc); acstring finish(); astring converttounicode(in acstring asrc); astring convertfrombytearray([const,array,size_is(acount)] in octet adata, in unsigned long acount); void converttobytearray(in astring astring,[optional] out unsigned long alen,[array, size_is(alen),retval] out octet adata); nsiin
putstream converttoin
putstream(in astring astring); attributes attribute type description charset string current character set.
... void converttobytearray(in astring astring, out unsigned long alen, optional [array, size_is(alen),retval] out octet adata ); converttoin
putstream() converts a unicode string to an in
put stream.
... nsiin
putstream converttoin
putstream( in astring astring ); parameters astring the text to encode to the stream.
... return value an nsiin
putstream that will present the text specified in astring as its data.
nsIStreamConverter
you can supply the service with a stream of type x and it will convert it to your desired out
put type and return a converted (blocking) stream to you.
...it will then convert that data from type x to your desired out
put type and return converted data to you via the nsistreamlistener you passed in by calling its nsistreamlistener.ondataavailable() method.
...stream converter contractid format (the stream converter root key is defined in this file): @mozilla.org/streamconv;1?from=from_mime_type&to=to_mime_type method overview void asyncconvertdata(in string afromtype, in string atotype, in nsistreamlistener alistener, in nsisupports actxt); nsiin
putstream convert(in nsiin
putstream afromstream, in string afromtype, in string atotype, in nsisupports actxt); methods asyncconvertdata() asynchronous version: converts data arriving via the converter's nsistreamlistener.ondataavailable() method from one type to another, pushing the converted data out to the caller via alistener::ondataavailable().
...nsiin
putstream convert( in nsiin
putstream afromstream, in string afromtype, in string atotype, in nsisupports actxt ); parameters afromstream the stream representing the original/raw data.
nsIStreamListener
method overview void ondataavailable(in nsirequest arequest, in nsisupports acontext, in nsiin
putstream ain
putstream, in unsigned long aoffset, in unsigned long acount); methods ondataavailable() this method is called when the next chunk of data for the ongoing request may be read without blocking the calling thread.
... the data can be read from the nsiin
putstream object passed as the argument to this method.
...void ondataavailable( in nsirequest arequest, in nsisupports acontext, in nsiin
putstream ain
putstream, in unsigned long aoffset, in unsigned long acount ); parameters arequest an nsirequest indicating the source of the data.
...ain
putstream an nsiin
putstream from which the data is to be read.
nsIXSLTProcessor
domstring localname); void importstylesheet(in nsidomnode style); void removeparameter(in domstring namespaceuri, in domstring localname); void reset(); void setparameter(in domstring namespaceuri, in domstring localname, in nsivariant value); nsidomdocument transformtodocument(in nsidomnode source); nsidomdocumentfragment transformtofragment(in nsidomnode source, in nsidomdocument out
put); methods clearparameters() removes all set parameters from this nsixsltprocessor.
...the created fragment will be owned by the specified out
put document.
... nsidomdocumentfragment transformtofragment( in nsidomnode source, in nsidomdocument out
put ); parameters source the node to be transformed.
... out
put the document to own the returned document fragment.
Reference Manual
nsresult rv; nscomptr<nsifoo> foo( do_queryinterface(abarptr, &rv) ); // or foo = do_queryinterface(abarptr, &rv); nscomptr<t> = dont_addref( t* ), nscomptr<t> = getter_addrefs( t* ) sometimes, you happen to have a pointer lying around that's already addrefed, but you want to
put it into an nscomptr.
... you can still call such a getter and
put the result into an nscomptr with a temporary, e.g., // calling a getter that (illegally) doesn't |addref| its result...
...the case using the temporary, however, uses construction to
put the value into the nscomptr, which (though slightly more complicated in source) is more efficient than default construction followed by assignment, the course of events followed by the simpler example.
...we just failed to release p before
putting a new pointer into it.
Xray vision
if chrome-privileged code is compromised, the attacker can take over the user's com
puter.
...components.utils.evalinsandbox(sandboxscript, sandbox); // date objects are xrayed console.log(sandbox.date.getfullyear()); // -> 2014 // but you can waive xray vision console.log(components.utils.waivexrays(sandbox.date).getfullyear()); // -> 1000 to test out examples like this, you can use the scratchpad in browser context for the code snippet, and the browser console to see the expected out
put.
... to test out examples like this, you can use the scratchpad in browser context for the code snippet, and the browser console to see the expected out
put.
...: function() { return "wait, is this really a getter?"; }' + '});'; var sandbox = components.utils.sandbox("https://example.org/"); components.utils.evalinsandbox(sandboxscript, sandbox); // 1) trying to access properties in the prototype that have been redefined // (non-own properties) will show the original 'native' version // note that functions are not included in the out
put console.log("1) property redefined in the prototype:"); console.log(sandbox.me.tosource()); // -> "({firstname:"joe", address:{street:"main street"}, lastname:"smith"})" // 2) trying to access properties on the object that shadow properties // on the prototype will show the original 'native' version console.log("2) property that shadows the prototype:"); console.log(sandbox.me.constructor); // -...
Mail composition back end
interfaces nsimsgsendlistener nsimsgcopyservicelistener copy operations copy to sent folder drafts templates "send later" sending unsent messages sending unsent messages listener quoting sample programs overview i've done considerable work in the past few weeks reorganizing the mail composition back end, so i thought it would be helpful to
put together a small doc on the new interfaces and how one can use them.
...it is a simple interface that takes a consumer out
put stream for the quoted data.
... the message will be out
put in html form and it is up to the caller to handle plain text conversion.
... ns_imethod quotemessage( const prunichar *msguri, - the uri of the message to be quoted nsiout
putstream *outstream) = 0; - the consumer out
put stream for the quoted data sample programs the mozilla/mailnews/compose/tests/ directory contains sample test programs for all of the above described interfaces.
Using the Mozilla symbol server
to use only the mozilla symbol server, add the following entry to your symbol path (note: you can replace c:\symcache\ with any writable directory on your com
puter, if you'd prefer a different location for downloaded symbols): srv*c:\symcache\*https://symbols.mozilla.org/ set this string as _nt_symbol_path in the environment, using the windbg menus, or by typing the .sympath command.
... if you would like to get symbols from microsoft's symbol server as well, you should list that first (note: you can replace c:\symcache\ with any writable directory on your com
puter, if you'd prefer a different location for downloaded symbols): srv*c:\symcache\*https://msdl.microsoft.com/download/symbols;srv*c:\symcache\*https://symbols.mozilla.org/ downloading symbols using symchk.exe you can also download the symbols using symchk.exe, part of microsoft's debugging tools for windows.
... the command should look like this (again, you can replace c:\symcache\ with any writable directory on your com
puter, if you'd prefer a different location for downloaded symbols): c:\program files\mozilla firefox>c:\progra~1\debugg~1\symchk.exe /r c:\progra~1\mozill~1\* /s srv*c:\symcache\*https://symbols.mozilla.org/ note the \* after the mozilla directory.
... the out
put of this command should be similar to: symchk: fullsoft.dll failed - image is split correctly, but fullsoft.dbg is missing symchk: qfaservices.dll failed - qfaservices.pdb mismatched or not found symchk: talkback.exe failed - built without debugging information.
Examine and edit CSS - Firefox Developer Tools
(note that this setting is independent of the "browser styles" checkbox in the com
puted view.) user-agent styles are displayed against a different background, and the link to the filename and line number contains the prefix (user agent): element {} rule the element {} rule at the top of the rules list isn't actually a css rule.
... examine com
puted css to see the complete com
puted css for the selected element, select the com
puted panel in the righthand pane.
...(this calculated value is exactly the same as what getcom
putedstyle would return.) you can tab through the styles to select them, and you can find more information about each property — pressing f1 on a selected property will open up its mdn reference page.
... while in the com
puted view, you can press ctrl / cmd + f to focus the search field.
UI Tour - Firefox Developer Tools
the following image shows the 2-pane layout: in 2-pane mode, the inspector includes the html pane, and the css pane, which can contain one of six tools: rules view layout view com
puted view changes view compatibility view (firefox developer edition 77 and later) fonts view animations view the following image shows the 3-pane mode (available from firefox 62 onwards) which moves the css rules view into a separate pane in the center of the inspector.
...note that before firefox 50, the box model view did not appear in the "com
puted view" tab, but had its own tab.
... to learn more about the css declarations listed in this view, see examine com
puted css.
... com
puted view the com
puted view shows you the complete com
puted css for the selected element (the com
puted values are the same as what getcom
putedstyle would return.): compatibility view starting with firefox developer edition version 77, the compatibility view shows css compability issues, if any, for properties applied to the selected element, and for the current page as a whole.
Call Tree - Firefox Developer Tools
in this article, we'll use the out
put of a simple program as an example.
... the screenshot below shows the out
put of a program that compares three sorting algorithms - bubble sort, selection sort, and quicksort.
...rtall() // 8 -> sort() // 37 -> bubblesort() // 1345 -> swap() // 252 -> selectionsort() // 190 -> swap() // 1 -> quicksort() // 103 -> partition() // 12 platform data you'll also see some rows labeled gecko, in
put & events, and so on.
... using an inverted, aka bottom-up, call tree an inverted call tree reverses the order of all stacks,
putting the leafmost function calls at the top.
Waterfall - Firefox Developer Tools
recalculate style calculating the com
puted styles that apply to page elements.
... recalculate style: if the browser thinks the com
puted styles for page elements have changed, it must then recalculate them.
... layout: next, the browser uses the com
puted styles to figure out the position and geometry for the elements.
...rations; i++) { var candidate = i * (multiplier * math.random()); var isprime = true; for (var c = 2; c <= math.sqrt(candidate); ++c) { if (candidate % c === 0) { // not prime isprime = false; break; } } if (isprime) { primes.push(candidate); } } console.timeend("calculating..."); return primes; } the waterfall's out
put will look something like this: the marker is labeled with the argument you passed to console.time(), and when you select the marker, you can see the program stack in the right-hand sidebar.
AudioBufferSourceNode.playbackRate - Web APIs
when set to another value, the audiobuffersourcenode resamples the audio before sending it to the out
put.
... example in this example, the audiocontext.decodeaudiodata() function is used to decode an audio track, and
put it into an audiobuffersourcenode.
... <in
put class="playback-rate-control" type="range" min="0.25" max="3" step="0.05" value="1"> <span class="playback-rate-value">1.0</span> function getdata() { source = audioctx.createbuffersource(); request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { mybuffer = buffer; source.buffer = mybuffer; source.playbackrate.va...
...est.send(); } // wire up buttons to stop and play audio, and range slider control play.onclick = function() { getdata(); source.start(0); play.setattribute('disabled', 'disabled'); playbackcontrol.removeattribute('disabled'); } stop.onclick = function() { source.stop(0); play.removeattribute('disabled'); playbackcontrol.setattribute('disabled', 'disabled'); } playbackcontrol.onin
put = function() { source.playbackrate.value = playbackcontrol.value; playbackvalue.innerhtml = playbackcontrol.value; } specification specification status comment web audio apithe definition of 'playbackrate' in that specification.
AudioBufferSourceNode - Web APIs
"_top"><rect x="561" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="666" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audiobuffersourcenode</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} an audiobuffersourcenode has no in
puts and exactly one out
put, which has the same number of channels as the audiobuffer indicated by its buffer property.
... if there's no buffer set—that is, if buffer is null—the out
put contains a single channel of silence (every sample is 0).
... number of in
puts 0 number of out
puts 1 channel count defined by the associated audiobuffer constructor audiobuffersourcenode() creates and returns a new audiobuffersourcenode object.
...since no pitch correction is applied on the out
put, this can be used to change the pitch of the sample.
AudioContext.createJavaScriptNode() - Web APIs
syntax var jsnode = audioctx.createjavascriptnode(buffersize, numin
putchannels, numout
putchannels); parameters buffersize the buffer size must be in units of sample frames, i.e., one of: 256, 512, 1024, 2048, 4096, 8192, or 16384.
... numin
putchannels the number of in
put channels in the audio stream.
... numout
putchannels the number of out
put channels in the audio stream.
... example the following script illustrates the use of createjavascriptnode(): var sinewave = function(context) { var that = this; this.x = 0; // initial sample number this.context = context; this.node = context.createjavascriptnode(1024, 1, 1); this.node.onaudioprocess = function(e) { that.process(e) }; } sinewave.prototype.process = function(e) { var data = e.out
putbuffer.getchanneldata(0); for (var i = 0; i < data.length; ++i) { data[i] = math.sin(this.x++); } } sinewave.prototype.play = function() { this.node.connect(this.context.destination); } sinewave.prototype.pause = function() { this.node.disconnect(); } see also generating tones with the web audio api exploring the html5 web audio: visualizing sound ...
AudioContext - Web APIs
audiocontext.out
putlatency read only returns an estimation of the out
put latency of the current audio context.
... audiocontext.createmediastreamsource() creates a mediastreamaudiosourcenode associated with a mediastream representing an audio stream which may come from the local com
puter microphone or other sources.
... audiocontext.createmediastreamdestination() creates a mediastreamaudiodestinationnode associated with a mediastream representing an audio stream which may be stored in a local file or sent to another com
puter.
... audiocontext.getout
puttimestamp() returns a new audiotimestamp object containing two audio timestamp values relating to the current audio context.
AudioDestinationNode - Web APIs
audiodestinationnode has no out
put (as it is the out
put, no more audionode can be linked after it in the audio graph) and one in
put.
... the number of channels in the in
put must be between 0 and the maxchannelcount value or an exception is raised.
... number of in
puts 1 number of out
puts 0 channel count mode "explicit" channel count 2 channel interpretation "speakers" properties inherits properties from its parent, audionode.
... example there is no complex set up for using an audiodestinationnode — by default, this simply represents the out
put of the user's system (e.g.
AudioWorkletNode - Web APIs
once fired, the processor and consequently the node will out
put silence throughout its lifetime.
... examples in this example we create a custom audioworkletnode that out
puts white noise.
... first, we need to define a custom audioworkletprocessor, which will out
put white noise, and register it.
... // white-noise-processor.js class whitenoiseprocessor extends audioworkletprocessor { process (in
puts, out
puts, parameters) { const out
put = out
puts[0] out
put.foreach(channel => { for (let i = 0; i < channel.length; i++) { channel[i] = math.random() * 2 - 1 } }) return true } } registerprocessor('white-noise-processor', whitenoiseprocessor) next, in our main script file we'll load the processor, create an instance of audioworkletnode passing it the name of the processor, and connect the node to an audio graph.
BaseAudioContext.createStereoPanner() - Web APIs
example in our stereopannernode example (see source code) html we have a simple <audio> element along with a slider <in
put> to increase and decrease pan value.
...we then use an onin
put event handler to change the value of the stereopannernode.pan parameter and update the pan value display when the slider is moved.
... moving the slider left and right while the music is playing pans the music across to the left and right speakers of the out
put, respectively.
... document.queryselector('.panning-value'); pre.innerhtml = myscript.innerhtml; // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a stereo panner var pannode = audioctx.createstereopanner(); // event handler function to increase panning to the right and left // when the slider is moved pancontrol.onin
put = function() { pannode.pan.setvalueattime(pancontrol.value, audioctx.currenttime); panvalue.innerhtml = pancontrol.value; } // connect the mediaelementaudiosourcenode to the pannode // and the pannode to the destination, so we can play the // music and adjust the panning using the controls source.connect(pannode); pannode.connect(audioctx.destination); specifications specification...
CSS Painting API - Web APIs
for example: aside { background-image: paint(mypaintedimage); } the api defines paintworklet, a worklet that can be used to programmatically generate an image that responds to com
puted style changes.
...it has an out
put bitmap that is the size of the object it is rendering to.
... paintsize returns the read-only values of the out
put bitmap's width and height.
... we create our paintworklet called 'hollowhighlights' using the registerpaint() function: registerpaint('hollowhighlights', class { static get in
putproperties() { return ['--boxcolor']; } static get in
putarguments() { return ['*','<length>']; } static get contextoptions() { return {alpha: true}; } paint(ctx, size, props, args) { const x = 0; const y = size.height * 0.3; const blockwidth = size.width * 0.33; const blockheight = size.height * 0.85; const thecolor = props.get( '--boxcolor' ); const stroketype = args[0].tost...
DelayNode - Web APIs
the delaynode interface represents a delay-line; an audionode audio-processing module that causes a delay between the arrival of an in
put data and its propagation to the out
put.
... a delaynode always has exactly one in
put and one out
put, both with the same amount of channels.
... number of in
puts 1 number of out
puts 1 channel count mode "max" channel count 2 (not used in the default count mode) channel interpretation "speakers" constructor delaynode() creates a new instance of an delaynode object instance.
... var delay1; rangesynth.onin
put = function() { delay1 = rangesynth.value; synthdelay.delaytime.setvalueattime(delay1, audioctx.currenttime); } specifications specification status comment web audio apithe definition of 'delaynode' in that specification.
Element: compositionend event - Web APIs
the compositionend event is fired when a text composition system such as an in
put method editor completes or cancels the current composition session.
... bubbles yes cancelable yes interface compositionevent event handler property none examples const in
putelement = document.queryselector('in
put[type="text"]'); in
putelement.addeventlistener('compositionend', (event) => { console.log(`generated characters were: ${event.data}`); }); live example html <div class="control"> <label for="name">on macos, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <in
put type="text" id="example" name="example"> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="25...
..."></textarea> <button class="clear-log">clear</button> </div> css body { padding: .2rem; display: grid; grid-template-areas: "control log"; } .control { grid-area: control; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } in
put[type="text"] { margin: .5rem 0; } kbd { border-radius: 3px; padding: 1px 2px 0; border: 1px solid black; } js const in
putelement = document.queryselector('in
put[type="text"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.addeventlistener('click', () => { log.textcontent = ''; }); function handleevent(event) { log.textcontent = log.textcontent + `${event.type}: ${event.data}\n`; } in
putele...
...ment.addeventlistener('compositionstart', handleevent); in
putelement.addeventlistener('compositionupdate', handleevent); in
putelement.addeventlistener('compositionend', handleevent); result specifications specification status ui events working draft ...
Element: compositionstart event - Web APIs
the compositionstart event is fired when a text composition system such as an in
put method editor starts a new composition session.
... bubbles yes cancelable yes interface compositionevent event handler property none examples const in
putelement = document.queryselector('in
put[type="text"]'); in
putelement.addeventlistener('compositionstart', (event) => { console.log(`generated characters were: ${event.data}`); }); live example html <div class="control"> <label for="name">on macos, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <in
put type="text" id="example" name="example"> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="25...
..."></textarea> <button class="clear-log">clear</button> </div> css body { padding: .2rem; display: grid; grid-template-areas: "control log"; } .control { grid-area: control; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } in
put[type="text"] { margin: .5rem 0; } kbd { border-radius: 3px; padding: 1px 2px 0; border: 1px solid black; } js const in
putelement = document.queryselector('in
put[type="text"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.addeventlistener('click', () => { log.textcontent = ''; }); function handleevent(event) { log.textcontent = log.textcontent + `${event.type}: ${event.data}\n`; } in
putele...
...ment.addeventlistener('compositionstart', handleevent); in
putelement.addeventlistener('compositionupdate', handleevent); in
putelement.addeventlistener('compositionend', handleevent); result specifications specification status ui events working draft ...
Element: compositionupdate event - Web APIs
the compositionupdate event is fired when a new character is received in the context of a text composition session controlled by a text composition system such as an in
put method editor.
... bubbles yes cancelable yes interface compositionevent event handler property none examples const in
putelement = document.queryselector('in
put[type="text"]'); in
putelement.addeventlistener('compositionupdate', (event) => { console.log(`generated characters were: ${event.data}`); }); live example html <div class="control"> <label for="name">on macos, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> <in
put type="text" id="example" name="example"> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="25"></text...
...area> <button class="clear-log">clear</button> </div> css body { padding: .2rem; display: grid; grid-template-areas: "control log"; } .control { grid-area: control; } .event-log { grid-area: log; } .event-log-contents { resize: none; } label, button { display: block; } in
put[type="text"] { margin: .5rem 0; } kbd { border-radius: 3px; padding: 1px 2px 0; border: 1px solid black; } js const in
putelement = document.queryselector('in
put[type="text"]'); const log = document.queryselector('.event-log-contents'); const clearlog = document.queryselector('.clear-log'); clearlog.addeventlistener('click', () => { log.textcontent = ''; }); function handleevent(event) { log.textcontent = log.textcontent + `${event.type}: ${event.data}\n`; } in
putelement.add...
...eventlistener('compositionstart', handleevent); in
putelement.addeventlistener('compositionupdate', handleevent); in
putelement.addeventlistener('compositionend', handleevent); result specifications specification status ui events working draft ...
Element.currentStyle - Web APIs
element.currentstyle is a proprietary property which is similar to the standardized window.getcom
putedstyle() method.
...however, it returns the units set in css while window.getcom
putedstyle() returns the values in pixels.
... polyfill this polyfill returns the values in pixels and is likely to be rather slow, as it has to call window.getcom
putedstyle() every time its value is read.
... * http://creativecommons.org/publicdomain/zero/1.0/ */ if (!("currentstyle" in element.prototype)) { object.defineproperty(element.prototype, "currentstyle", { get: function() { return window.getcom
putedstyle(this); } }); } specification not part of any specification.
Using Fetch - Web APIs
// example post method implementation: async function postdata(url = '', data = {}) { // default options are marked with * const response = await fetch(url, { method: 'post', // *get, post,
put, delete, etc.
... const data = { username: 'example' }; fetch('https://example.com/profile', { method: 'post', // or '
put' headers: { 'content-type': 'application/json', }, body: json.stringify(data), }) .then(response => response.json()) .then(data => { console.log('success:', data); }) .catch((error) => { console.error('error:', error); }); uploading a file files can be uploaded using an html <in
put type="file" /> in
put element, formdata() and fetch().
... const formdata = new formdata(); const filefield = document.queryselector('in
put[type="file"]'); formdata.append('username', 'abc123'); formdata.append('avatar', filefield.files[0]); fetch('https://example.com/profile/avatar', { method: '
put', body: formdata }) .then(response => response.json()) .then(result => { console.log('success:', result); }) .catch(error => { console.error('error:', error); }); uploading multiple files files can be uploaded using an html <in
put type="file" multiple /> in
put element, formdata() and fetch().
... const formdata = new formdata(); const photos = document.queryselector('in
put[type="file"][multiple]'); formdata.append('title', 'my vegas vacation'); for (let i = 0; i < photos.files.length; i++) { formdata.append('photos', photos.files[i]); } fetch('https://example.com/posts', { method: 'post', body: formdata, }) .then(response => response.json()) .then(result => { console.log('success:', result); }) .catch(error => { console.error('error:', error); }); processing a text file line by line the chunks that are read from a response are not broken neatly at line boundaries and are uint8arrays, not strings.
FileReaderSync - Web APIs
methods filereadersync.readasarraybuffer() this method converts a specified blob or a file into an arraybuffer representing the in
put data as a binary string.
... filereadersync.readasbinarystring() this method converts a specified blob or a file into a domstring representing the in
put data as a binary string.
... filereadersync.readastext() this method converts a specified blob or a file into a domstring representing the in
put data as a text string.
... filereadersync.readasdataurl() this method converts a specified blob or a file into a domstring representing the in
put data as a data url.
GlobalEventHandlers.onkeypress - Web APIs
examples basic example this example logs the keyboardevent.code value whenever you press a key inside the <in
put> element.
... html <in
put> <p id="log"></p> javascript const in
put = document.queryselector('in
put'); const log = document.getelementbyid('log'); in
put.onkeypress = logkey; function logkey(e) { log.textcontent += ` ${e.code}`; } result filter keys with a regular expression this example filters the characters typed into a form field using a regular expression.
... html <label>enter numbers only: <in
put> </label> javascript function numbersonly(event) { return event.charcode === 0 || /\d/.test(string.fromcharcode(event.charcode)); } const in
put = document.queryselector('in
put'); in
put.onkeypress = numbersonly; // prevent pasting (since pasted content might include non-number characters) in
put.onpaste = event => false; result capture the typing of a hidden word the following javascript function will do something after the user types the word "exit" in any point of a page.
...const ssecret = /* choose your hidden word...: */ "exit"; let noffset = 0; document.onkeypress = function(opevt) { let oevent = opevt || window.event, nchr = oevent.charcode, snodetype = oevent.target.nodename.touppercase(); if (nchr === 0 || oevent.target.contenteditable.touppercase() === "true" || snodetype === "textarea" || snodetype === "in
put" && oevent.target.type.touppercase() === "text") { return true; } if (nchr !== ssecret.charcodeat(noffset)) { noffset = nchr === ssecret.charcodeat(0) ?
HTMLFormElement: submit event - Web APIs
bubbles yes (although specified as a simple event that doesn't bubble) cancelable yes interface submitevent event handler property globaleventhandlers.onsubmit note that the submit event fires on the <form> element itself, and not on any <button> or <in
put type="submit"> inside it.
... the submit event fires when the user clicks a submit button (<button> or <in
put type="submit">) or presses enter while editing a field (e.g.
... <in
put type="text">) in a form.
... html <form id="form"> <label>test field: <in
put type="text"></label> <br><br> <button type="submit">submit form</button> </form> <p id="log"></p> javascript function logsubmit(event) { log.textcontent = `form submitted!
HTMLMediaElement.setSinkId() - Web APIs
the htmlmediaelement.setsinkid() method sets the id of the audio device to use for out
put and returns a promise.
... parameters sinkid the mediadeviceinfo.deviceid of the audio out
put device.
... exceptions exception explanation domexception no permission to use the requested device examples const devices = await navigator.mediadevices.enumeratedevices(); const audiodevices = devices.filter(device => device.kind === 'audioout
put'); const audio = document.createelement('audio'); await audio.setsinkid(audiodevices[0].deviceid); console.log('audio is being played on ' + audio.sinkid); specifications specification status comment audio out
put devices apithe definition of 'sinkid' in that specification.
...older versions of this spec were called "media capture out
put".
HTMLSelectElement - Web APIs
htmlselectelement.autofocus a boolean reflecting the autofocus html attribute, which indicates whether the control should have in
put focus when the page loads, unless the user overrides it, for example by typing in a different control.
... htmlselectelement.blur() removes in
put focus from this element.
... htmlselectelement.focus() gives in
put focus to this element.
... events listen to these events using addeventlistener() or by assigning an event listener to the oneventname property of this interface: in
put event fires when the value of an <in
put>, <select>, or <textarea> element has been changed.
In depth: Microtasks and the JavaScript runtime environment - Web APIs
it was designed in an era in which this was a positive choice; there were few multi-processor com
puters available to the general public, and the expected amount of code that would be handled by javascript was relatively low at that time.
... as time passed, of course, we know that com
puters have evolved into powerful multi-core systems, and javascript has become one of the most prolifically-used languages in the com
puting world.
...consider the javascript program below: let out
putelem = document.getelementbyid("out
put"); let userlanguages = { "mike": "en", "teresa": "es" }; function greetuser(user) { function localgreeting(user) { let greeting; let language = userlanguages[user]; switch(language) { case "es": greeting = `¡hola, ${user}!`; break; case "en": default: greeting = `hello, ${user}!`; break; ...
... } return greeting; } out
putelem.innerhtml += localgreeting(user) + "<br>\r"; } greetuser("mike"); greetuser("teresa"); greetuser("veronica"); this short program contains three execution contexts, some of which are created and destroyed several times over the course of the program's execution.
HkdfParams - Web APIs
ideally, the salt is a random or pseudo-random value with the same length as the out
put of the digest function.
... unlike the in
put key material passed into derivekey(), salt does not need to be kept secret.
...this is used to bind the derived key to an application or context, and enables you to derive different keys for different contexts while using the same in
put key material.
... it's important that this should be independent of the in
put key material itself.
LayoutShift - Web APIs
layoutshift.hadrecentin
put returns true if there was a user in
put in the past 500 milliseconds.
... layoutshift.lastin
puttime returns the time of the most recent user in
put.
...// https://bugs.webkit.org/show_bug.cgi?id=209216 try { let cumulativelayoutshiftscore = 0; const observer = new performanceobserver((list) => { for (const entry of list.getentries()) { // only count layout shifts without recent user in
put.
... if (!entry.hadrecentin
put) { cumulativelayoutshiftscore += entry.value; } } }); observer.observe({type: 'layout-shift', buffered: true}); document.addeventlistener('visibilitychange', () => { if (document.visibilitystate === 'hidden') { // force any pending records to be dispatched.
MIDIAccess - Web APIs
the midiaccess interface of the web midi api provides methods for listing midi in
put and out
put devices, and obtaining access to those devices.
... properties midiaccess.in
puts read only returns an instance of midiin
putmap which provides access to any available midi in
put ports.
... midiaccess.out
puts read only returns an instance of midiout
putmap which provides access to any available midi out
put ports.
... examples navigator.requestmidiaccess() .then(function(access) { // get lists of available midi controllers const in
puts = access.in
puts.values(); const out
puts = access.out
puts.values(); access.onstatechange = function(e) { // print information about the (dis)connected midi controller console.log(e.port.name, e.port.manufacturer, e.port.state); }; }); specifications specification status comment web midi api working draft initial definition.
MediaDeviceInfo - Web APIs
the mediadeviceinfo interface contains information that describes a single media in
put or out
put device.
... mediadeviceinfo.kindread only returns an enumerated value that is either "videoin
put", "audioin
put" or "audioout
put".
... navigator.mediadevices.enumeratedevices() .then(function(devices) { devices.foreach(function(device) { console.log(device.kind + ": " + device.label + " id = " + device.deviceid); }); }) .catch(function(err) { console.log(err.name + ": " + err.message); }); this might produce: videoin
put: id = cso9c0ypaf274oucpua53cne0yhlir2yxci+sqfbzz8= audioin
put: id = rkxxbyjnabbadgqnnzqlvldmxls0yketycibg+xxnvm= audioin
put: id = r2/xw1xupiyzunfv1lgrkoma5wtovckwfz368xcndm0= or if one or more media streams are active, or if persistent permissions have been granted: videoin
put: facetime hd camera (built-in) id=cso9c0ypaf274oucpua53cne0yhlir2yxci+sqfbzz8= audioin
put: default (built-in microphone...
...) id=rkxxbyjnabbadgqnnzqlvldmxls0yketycibg+xxnvm= audioin
put: built-in microphone id=r2/xw1xupiyzunfv1lgrkoma5wtovckwfz368xcndm0= specifications specification status comment media capture and streamsthe definition of 'mediadevicesinfo' in that specification.
MediaStream Recording API - Web APIs
examining potential in
put sources if your goal is to record camera and/or microphone in
put, you may wish to examine the available in
put devices before beginning the process of constructing the mediarecorder.
...you can then examine that list and identify the potential in
put sources, and even filter the list based on desired criteria.
... in this code snippet, enumeratedevices() is used to examine the available in
put devices, locate those which are audio in
put devices, and create <option> elements that are then added to a <select> element representing an in
put source picker.
... navigator.mediadevices.enumeratedevices() .then(function(devices) { devices.foreach(function(device) { let menu = document.getelementbyid("in
putdevices"); if (device.kind == "audioin
put") { let item = document.createelement("option"); item.innerhtml = device.label; item.value = device.deviceid; menu.appendchild(item); } }); }); code similar to this can be used to let the user restrict the set of devices they wish to use.
Media Capture and Streams API (Media Stream) - Web APIs
mediastream objects have a single in
put and a single out
put.
... a mediastream object generated by getusermedia() is called local, and has as its source in
put one of the user's cameras or microphones.
... the out
put of the mediastream object is linked to a consumer.
... blobevent canvascapturemediastreamtrack in
putdeviceinfo mediadevicekind mediadeviceinfo mediadevices mediastream mediastreamconstraints mediastreamevent mediastreamtrack mediastreamtrackevent mediatrackconstraints mediatracksettings mediatracksupportedconstraints overconstrainederror url early versions of the media capture and streams api specification included separate audiostreamtrack and videostreamtrack interfaces—each based upon mediastreamtrack—whi...
RTCDataChannel: open event - Web APIs
it enables the message in
put box and send button as well as enabling the disconnect button and disabling the connect button.
... finally, the message in
put box is focused so the user can immediately begin to type.
... dc.addeventlistener("open", ev => { messagein
putbox.disabled = false; sendmessagebutton.disabled = false; disconnectbutton.disabled = false; connectbutton.disabled = true; messagein
putbox.focus(); }, false); this can also be done by directly setting the value of the channel's onopen event handler property.
... dc.onopen = ev => { messagein
putbox.disabled = false; sendmessagebutton.disabled = false; disconnectbutton.disabled = false; connectbutton.disabled = true; messagein
putbox.focus(); } ...
Selection.setBaseAndExtent() - Web APIs
next, we have two form in
puts that allow you to set the anchoroffset and focusoffset — they both have a default value of 0.
... we also have a button that when pressed invokes a function that runs the setbaseandextent() method with the specified offsets, and copies the selection into the out
put paragraph at the very bottom of the html.
... <h1>setbaseandextent example</h1> <div> <p class="one"><span>fish</span><span>dog</span><span>cat</span><span>bird</span></p> <p>middle</p> <p class="two"><span>car</span><span>bike</span><span>boat</span><span>plane</span></p> </div> <div> <p> <label for="aoffset">anchor offset</label> <in
put id="aoffset" name="aoffset" type="number" value="0"> </p> <p> <label for="foffset">focus offset</label> <in
put id="foffset" name="foffset" type="number" value="0"> </p> <p><button>capture selection</button></p> </div> <p><strong>out
put</strong>: <span class="out
put"></span></p> the javascript looks like so: var one = document.queryselector('.one'); var two = document.queryselector('.two'); var aoffset = document.getelementbyid('aoffset'); var foffset = document.get...
...elementbyid('foffset'); var button = document.queryselector('button'); var out
put = document.queryselector('.out
put'); var selection; button.onclick = function() { try { selection = document.getselection(); selection.setbaseandextent(one, aoffset.value, two, foffset.value); var text = selection.tostring(); out
put.textcontent = text; } catch(e) { out
put.textcontent = e.message; } } play with the live example below, setting different offset values to see how this affects the selection.
StereoPannerNode.pan - Web APIs
example in our stereopannernode example (see source code) html we have a simple <audio> element along with a slider <in
put> to increase and decrease pan value.
...we then use an onin
put event handler to change the value of the stereopannernode.pan parameter and update the pan value display when the slider is moved.
... moving the slider left and right while the music is playing pans the music across to the left and right speakers of the out
put, respectively.
... document.queryselector('.panning-value'); pre.innerhtml = myscript.innerhtml; // create a mediaelementaudiosourcenode // feed the htmlmediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a stereo panner var pannode = audioctx.createstereopanner(); // event handler function to increase panning to the right and left // when the slider is moved pancontrol.onin
put = function() { pannode.pan.setvalueattime(pancontrol.value, audioctx.currenttime); panvalue.innerhtml = pancontrol.value; } // connect the mediaelementaudiosourcenode to the pannode // and the pannode to the destination, so we can play the // music and adjust the panning using the controls source.connect(pannode); pannode.connect(audioctx.destination); specifications specification...
TextEncoder - Web APIs
textencoder takes a stream of code points as in
put and emits a stream of utf-8 bytes.
... textencoder.prototype.encode() takes a usvstring as in
put, and returns a uint8array containing utf-8 encoded text.
... textencoder.prototype.encodeinto() takes a usvstring to encode and a destination uint8array to
put resulting utf-8 encoded text into, and returns a dictionary object indicating the progress of the encoding.
...these sequences are not already precom
puted because they serve to aesthetically illustrate how the polyfill works.
Multi-touch interaction - Web APIs
however, the interfaces can be a bit tricky for programmers to use because touch events are very different from other dom in
put events, such as mouse events.
... <div id="target1"> tap, hold or swipe me 1</div> <div id="target2"> tap, hold or swipe me 2</div> <div id="target3"> tap, hold or swipe me 3</div> <div id="target4"> tap, hold or swipe me 4</div> <!-- ui for logging/bebugging --> <button id="log" onclick="enablelog(event);">start/stop event logging</button> <button id="clearlog" onclick="clearlog(event);">clear the log</button> <p></p> <out
put></out
put> miscellaneous functions these functions support the application but aren't directly involved with the event flow.
...false : true; } function log(name, ev, printtargetids) { var o = document.getelementsbytagname('out
put')[0]; var s = name + ": touches = " + ev.touches.length + " ; targettouches = " + ev.targettouches.length + " ; changedtouches = " + ev.changedtouches.length; o.innerhtml += s + " "; if (printtargetids) { s = ""; for (var i=0; i < ev.targettouches.length; i++) { s += "...
... id = " + ev.targettouches[i].identifier + " "; } o.innerhtml += s; } } function clearlog(event) { var o = document.getelementsbytagname('out
put')[0]; o.innerhtml = ""; } related topics and resources pointer events ...
Lighting in WebGL - Web APIs
ectionallightcolor = vec3(1, 1, 1); highp vec3 directionalvector = normalize(vec3(0.85, 0.8, 0.75)); highp vec4 transformednormal = unormalmatrix * vec4(avertexnormal, 1.0); highp float directional = max(dot(transformednormal.xyz, directionalvector), 0.0); vlighting = ambientlight + (directionallightcolor * directional); } `; once the position of the vertex is com
puted, and we pass the coordinates of the texel corresponding to the vertex to the fragment shader, we can work on com
puting the shading for the vertex.
...we can then com
pute the amount of directional lighting that needs to be applied to the vertex by calculating the dot product of the transformed normal and the directional vector (that is, the direction from which the light is coming).
... once the amount of directional lighting is com
puted, we can generate the lighting value by taking the ambient light and adding in the product of the directional light's color and the amount of directional lighting to provide.
... the fragment shader the fragment shader now needs to be updated to take into account the lighting value com
puted by the vertex shader: const fssource = ` varying highp vec2 vtexturecoord; varying highp vec3 vlighting; uniform sampler2d usampler; void main(void) { highp vec4 texelcolor = texture2d(usampler, vtexturecoord); gl_fragcolor = vec4(texelcolor.rgb * vlighting, texelcolor.a); } `; here we fetch the color of the texel, just like we did in the previous example, but before setting the color of the fragment, we multiply the texel's color by the lighting value to adjust the texel's color to take into account the effect of o...
Signaling and video calling - Web APIs
each ice message suggests a communication protocol (tcp or udp), ip address, port number, connection type (for example, whether the specified ip is the peer itself or a relay server), along with other information needed to link the two com
puters together.
...it receives, as in
put, a mediastream object representing the stream with audio from the user's microphone and video from their webcam.
... note: we could restrict the set of permitted media in
puts to a specific device or set of devices by calling navigator.mediadevices.enumeratedevices() to get a list of devices, filtering the resulting list based on our desired criteria, then using the selected devices' deviceid values in the deviceid field of the the mediaconstraints object passed into getusermedia().
...open the web console on both devices and look at the logged out
put—although you don't see it in the code as shown above, the code on the server (and on github) has a lot of console out
put so you can see the signaling and connection processes at work.
Geometry and reference spaces in WebXR - Web APIs
fundamentals of 3d geometry while we'll examine here the required math operations used to com
pute the positions, orientations, and movement of objects in virtual space—plus the need to integrate the human viewer of the scene into the mix—a thorough introduction to geometry and the use of matrices and vectors to manage 3d representations of a scene is well beyond the scope of what can be accomplished in this article.
...after
putting on a headset, consider the virtual world around you to have a coordinate system in which your position is (0, 0, 0)—that is, you're at the center of everything.
...this is a reference space which is provided to your app when in
put events occur.
...it's particularly useful when determining the distance between the viewer and an in
put, or when working with offset spaces.
Using the Web Animations API - Web APIs
for instance, in the growing and shrinking alice game example, you might have noticed something odd about the cake’s duration: duration: alicechange.effect.getcom
putedtiming().duration / 2 to understand what’s happening here, let’s take a look at alice’s animation: var alicechange = document.getelementbyid('alice').animate( [ { transform: 'translate(-50%, -50%) scale(.5)' }, { transform: 'translate(-50%, -50%) scale(2)' } ], { duration: 8000, easing: 'ease-in-out', fill: 'both' }); alice’s animation has her going from half...
...we can, in fact, do so by referencing alicechange’s animation.effect property, which returns an object containing all the details of the effect(s) active on alice: alicechange.currenttime = alicechange.effect.getcom
putedtiming().duration / 2; effect lets us access the animation’s keyframes and timing properties — alicechange.effect.getcom
putedtiming() points to alice’s timing object (which is of type com
putedeffecttiming) — this contains her com
putedeffecttiming.duration.
... and we can do the same thing when setting the cake and bottle durations: var drinking = document.getelementbyid('liquid').animate( [ { height: '100%' }, { height: '0' } ], { fill: 'forwards', duration: alicechange.effect.getcom
putedtiming().duration / 2 }); drinking.pause(); now all three animations are linked to just one duration, which we can change easily from one place.
...we can figure out whether she's on the large end or small end of her animation by getting her animation's currenttime and dividing it by her activeduration: var endgame = function() { // get alice's timeline's playhead location var aliceplayhead = alicechange.currenttime; var alicetimeline = alicechange.effect.getcom
putedtiming().activeduration; // stops alice's and other animations stopplayingalice(); // depending on which third it falls into var aliceheight = aliceplayhead / alicetimeline; if (aliceheight <= .333){ // alice got smaller!
XRSession: select event - Web APIs
the webxr event select is sent to an xrsession when one of the session's in
put sources has completed a primary action.
... bubbles yes cancelable no interface xrin
putsourceevent event handler property onselect for details on how the selectstart, select, and selectend events work, and how you should react to them, see primary actions in in
puts and in
put sources.
...the handler fetches the pose representing the target ray for tracked-pointer in
puts and sends the pose's transform to a function called myhandleselectwithray().
... xrsession.addeventlistener("select", event => { if (event.in
putsource.targetraymode == "tracked-pointer") { let targetraypose = event.frame.getpose(event.in
putsource.targetrayspace, myrefspace); if (targetraypose) { myhandleselectwithray(targetraypose.transform); } } }); you can of course also set up a handler for select events by setting the xrsession object's onselect event handler property to a function that handles the event: xrsession.onselect = event => { if (event.in
putsource.targetraymode == "tracked-pointer") { let targetraypose = event.frame.getpose(event.in
putsource.targetrayspace, myrefspace); if (targetraypose) { myhandleselectwithray(targetraypose.transform); } } }; spec...
XRSession: selectend event - Web APIs
the webxr event selectend is sent to an xrsession when one of its in
put sources ends its primary action or when an in
put source that's in the process of handling an ongoing primary action is disconnected without successfully completing the action.
... bubbles yes cancelable no interface xrin
putsourceevent event handler property onselectend for details on how the selectstart, select, and selectend events work, and how you should react to them, see primary actions in in
puts and in
put sources.
... upon receiving a select event, the mydropobject() function is called with the target object and the current target ray pose transform as in
puts.
... xrsession.addeventlistener("selectstart", onselectionevent); xrsession.addeventlistener("select", onselectionevent); xrsession.addeventlistener("selectend", onselectionevent); function onselectionevent(event) { let source = event.in
putsource; let targetobj = null; if (source.targetraymode != "tracked-pointer") { return; } let targetraypose = event.frame.getpose(source.targetrayspace, myrefspace); if (!targetraypose) { return; } switch(event.type) { case "selectstart": targetobj = mybegintracking(targetraypose.matrix); break; case "select": mydropobject(targetobj, targetraypose.
XRSession: selectstart event - Web APIs
the webxr event selectstart is sent to an xrsession when the user begins a primary action on one of its in
put sources.
... bubbles yes cancelable no interface xrin
putsourceevent event handler property onselectstart for details on how the selectstart, select, and selectend events work, and how you should react to them, see primary actions in in
puts and in
put sources.
... upon receiving a select event, the mydropobject() function is called with the target object and the current target ray pose transform as in
puts.
... xrsession.addeventlistener("selectstart", onselectionevent); xrsession.addeventlistener("select", onselectionevent); xrsession.addeventlistener("selectend", onselectionevent); function onselectionevent(event) { let source = event.in
putsource; let targetobj = null; if (source.targetraymode != "tracked-pointer") { return; } let targetraypose = event.frame.getpose(source.targetrayspace, myrefspace); if (!targetraypose) { return; } switch(event.type) { case "selectstart": targetobj = mybegintracking(targetraypose.matrix); break; case "select": mydropobject(targetobj, targetraypose.
XRSession: squeezeend event - Web APIs
the webxr event squeezeend is sent to an xrsession when one of its in
put sources ends its primary action or when an in
put source that's in the process of handling an ongoing primary action is disconnected without successfully completing the action.
... bubbles yes cancelable no interface xrin
putsourceevent event handler property onsqueezeend for details on how the squeezestart, squeeze, and squeezeend events work, and how you should react to them, see primary squeeze actions in in
puts and in
put sources.
... upon receiving a squeeze event, the mydropobject() function is called with the target object and the current target ray pose transform as in
puts.
... xrsession.addeventlistener("squeezestart", onsqueezeevent); xrsession.addeventlistener("squeeze", onsqueezeevent); xrsession.addeventlistener("squeezeend", onsqueezeevent); function onsqueezeevent(event) { let source = event.in
putsource; let targetobj = null; if (source.targetraymode != "tracked-pointer") { return; } let targetraypose = event.frame.getpose(source.targetrayspace, myrefspace); if (!targetraypose) { return; } switch(event.type) { case "squeezestart": targetobj = mybegintracking(targetraypose.matrix); break; case "squeeze": mydropobject(targetobj, targetraypos...
XRSession: squeezestart event - Web APIs
the webxr event squeezestart is sent to an xrsession when the user begins a primary squeeze action on one of its in
put sources.
... bubbles yes cancelable no interface xrin
putsourceevent event handler property onsqueezestart for details on how the squeezestart, squeeze, and squeezeend events work, and how you should react to them, see primary squeeze actions in in
puts and in
put sources.
... upon receiving a squeeze event, the mydropobject() function is called with the target object and the current target ray pose transform as in
puts.
... xrsession.addeventlistener("squeezestart", onsqueezeevent); xrsession.addeventlistener("squeeze", onsqueezeevent); xrsession.addeventlistener("squeezeend", onsqueezeevent); function onsqueezeevent(event) { let source = event.in
putsource; let targetobj = null; if (source.targetraymode != "tracked-pointer") { return; } let targetraypose = event.frame.getpose(source.targetrayspace, myrefspace); if (!targetraypose) { return; } switch(event.type) { case "squeezestart": targetobj = mybegintracking(targetraypose.matrix); break; case "squeeze": mydropobject(targetobj, targetraypos...
XRSession.visibilityState - Web APIs
in
put controllers are not being handled for the session.
...to that end, the session's requestanimationframe() callbacks are being processed at the xr device's native refresh rate and in
put controllers are being processed as normal.
...in
put controllers are not being processed for the session.
...for instance, if the viewer is using a headset tethered to a com
puter and the immersive scene is obscured by a configuration ui, the user could peek out from behind the headset and still be able to see the document itself on their com
puter's monitor.
Web APIs
tentelement htmldlistelement htmldataelement htmldatalistelement htmldetailselement htmldialogelement htmldivelement htmldocument htmlelement htmlembedelement htmlfieldsetelement htmlfontelement htmlformcontrolscollection htmlformelement htmlframesetelement htmlhrelement htmlheadelement htmlheadingelement htmlhtmlelement htmlhyperlinkelementutils htmliframeelement htmlimageelement htmlin
putelement htmlisindexelement htmlkeygenelement htmllielement htmllabelelement htmllegendelement htmllinkelement htmlmapelement htmlmarqueeelement htmlmediaelement htmlmenuelement htmlmenuitemelement htmlmetaelement htmlmeterelement htmlmodelement htmlolistelement htmlobjectelement htmloptgroupelement htmloptionelement htmloptionscollection htmlorforeignelement htmlout
putelement htmlparagraph...
...idbenvironment idbenvironmentsync idbfactory idbfactorysync idbindex idbindexsync idbkeyrange idblocaleawarekeyrange idbmutablefile idbobjectstore idbobjectstoresync idbopendbrequest idbrequest idbtransaction idbtransactionsync idbversionchangeevent idbversionchangerequest iirfilternode idledeadline imagebitmap imagebitmaprenderingcontext imagecapture imagedata index in
putdevicecapabilities in
putevent installevent installtrigger intersectionobserver intersectionobserverentry interventionreportbody k keyboard keyboardevent keyboardlayoutmap keyframeeffect keyframeeffectoptions l largestcontentfulpaint layoutshift layoutshiftattribution linearaccelerationsensor linkstyle localfilesystem localfilesystemsync localmediastream location lock lockmana...
...ger lockedfile m midiaccess midiconnectionevent midiin
put midiin
putmap midimessageevent midiout
putmap mscandidatewindowhide mscandidatewindowshow mscandidatewindowupdate msgestureevent msgraphicstrust msmanipulationevent msrangecollection mssitemodeevent magnetometer mathmlelement mediacapabilities mediacapabilitiesinfo mediaconfiguration mediadecodingconfiguration mediadeviceinfo mediadevices mediaelementaudiosourcenode mediaencodingconfiguration mediaerror mediaimage mediakeymessageevent mediakeysession mediakeystatusmap mediakeysystemaccess mediakeysystemconfiguration mediakeys medialist mediametadata mediapositionstate mediaquerylist mediaquerylistevent mediaquerylistlistener mediarecorder mediarecordererrorevent mediasession mediasessionactiondetails mediasettingsrange m...
...ion workernavigator worklet writablestream writablestreamdefaultcontroller writablestreamdefaultwriter x xdomainrequest xmldocument xmlhttprequest xmlhttprequesteventtarget xmlhttprequestresponsetype xmlserializer xpathevaluator xpathexception xpathexpression xpathnsresolver xpathresult xrboundedreferencespace xrenvironmentblendmode xreye xrframe xrframerequestcallback xrhandedness xrin
putsource xrin
putsourcearray xrin
putsourceevent xrin
putsourceeventinit xrin
putsourceschangeevent xrin
putsourceschangeeventinit xrpermissiondescriptor xrpermissionstatus xrpose xrreferencespace xrreferencespaceevent xrreferencespaceeventinit xrreferencespacetype xrrenderstate xrrenderstateinit xrrigidtransform xrsession xrsessionevent xrsessioneventinit xrsessioninit xrsessionmode xrspace xrsyst...
ARIA: button role - Accessibility
<div id="savechanges" tabindex="0" role="button" aria-pressed="false">save</div> the above example creates a simple button which is first in the focus order, though <button> or <in
put> with type="button" should be used for buttons: <button id="savechanges">save</button> note: if using role="button" instead of the semantic <button> or <in
put type="button"> elements, you will need to make the element focusable and have to define event handlers for click and keydown events, including the enter and space keys, in order to process the user's in
put.
... html <h1>aria button example</h1> <ul id="namelist"></ul> <label for="newname">enter your name: </label> <in
put type="text" id="newname"> <span role="button" tabindex="0" onclick="handlecommand()" onkeydown="handlecommand()">add name</span> css [role="button"] { padding: 2px; background-color: navy; color: white; cursor: default; } [role="button"]:hover, [role="button"]:focus, [role="button"]:active { background-color: white; color: navy; } ul { list-style: none; } javascript f...
...unction handlecommand(event) { // handles both mouse clicks and keyboard // activate with enter or space // get the new name value from the in
put element let newnamein
put = document.getelementbyid('newname'); let name = newnamein
put.value; newnamein
put.value = ''; // clear the text field newnamein
put.focus(); // give the text field focus to enable entering and additional name.
... where possible, it is recommended to use native html buttons (<button>, <in
put type="button">, <in
put type="submit">, <in
put type="reset"> and <in
put type="image">) rather than the button role, as native html buttons are supported by all user agents and assistive technology and provide keyboard and focus requirements by default, without need for additional customization.
WAI-ARIA Roles - Accessibility
a figure is generally considered to be one or more images, code snippets, or other content that
puts across information in a different way to a regular flow of text.aria: form rolethe form landmark role can be used to identify a group of elements on a page that provide equivalent functionality to an html form.aria: grid rolethe grid role is for a widget that contains one or more rows of cells.
... the position of each cell is significant and can be focused using keyboard in
put.aria: gridcell rolethe gridcell role is used to make a cell in a grid or treegrid.
...plays its associated tabpanel.aria: table rolethe table value of the aria role attribute identifies the element containing the role as having a non-interactive table structure containing data arranged in rows and columns, similar to the native <table> html element.aria: tabpanel rolethe aria tabpanel role indicatesaria: textbox rolethe textbox role is used to identify an element that allows the in
put of free-form text.
... alertdialog banner combobox command columnheader (estelle) complementary composite definition directory feed gridcell (eric e) group in
put landmark link - old page listbox log - old page marquee math menu menubar menuitem menuitemcheckbox menuitemradio none note option presentation progressbar - old page radio - old page radiogroup range region roletype rowheader(estelle) scrollbar searchbox section sectionhead select separator slider - old page spinbutton status - old page structure tab tablist (m...
An overview of accessible web applications and widgets - Accessibility
html for a tooltip <div class="text"> <label id="tp1-label" for="first">first name:</label> <in
put type="text" id="first" name="first" size="20" aria-labelledby="tp1-label" aria-describedby="tp1" aria-required="false" /> <div id="tp1" class="tooltip" role="tooltip" aria-hidden="true">your first name is optional</div> </div> the css for this markup is shown in example 2b.
...a developer might be tempted to implement the "view" mode using a read-only text <in
put> element and setting its aria role to button, then switching to "edit" mode by making the element writable and removing the role attribute in "edit" mode (since <in
put> elements have their own role semantics).
...instead, implement the "view" mode using a different element altogether, such as a <div> or <span> with a role of button, and the « edit » mode using a text <in
put> element.
...for example, tabbing to a menu bar should not
put focus on the menu's first element.
HTML To MSAA - Accessibility
for example, if name column has n/a value then it means specific elements doesn't provide own rules to calculate name but name can be com
puted from aria markup or @title attribute.
..._ default if @type attribute has value "submit" n/a "press" n/a caption bstr role n/a n/a n/a description_for (0x100f), points to table element div bstr role n/a n/a n/a n/a n/a n/a fieldset role_system_ grouping text equivalent from child legend element n/a n/a labelled_by (1003), points to legend element n/a n/a hr role_system_ separator n/a n/a n/a n/a n/a n/a img, in
put @type=image role_system_ graphic from @alt attribute, empty @alt attribute means name can't be calculated at all n/a state_system_ animated if image has more than one frame n/a "showlongdesc" if @longdesc attribute is presented n/a if @usemap attribute is used then image accessible has children for each map item in
put @type=button, submit, reset role_system_ pushbutton from @value attribute, @a...
...lt attribute, default label, @src attribute, @data attribute n/a state_system_ default if @type attribute has value "submit" n/a "press" n/a in
put @type=text, textarea role_system_ text n/a value property of in
put dom element state_system_ readonly if @readonly attribute is used n/a "activate" n/a in
put @type=password role_system_ text n/a n/a state_system_ readonly if @readonly attribute is used state_system_ protected n/a "activate" n/a in
put type="checkbox" role_system_ checkbutton n/a n/a state_system_ marqueed used as state checkable state_system_ mixed for html 5 if intermediate property of dom element returns true state_system_ checked if checked property of dom element returns true n/a "check"/"uncheck"/"cycle" depending on state event_object_ statechange when state i...
...s changed in
put type="radio" role_system_ radiobutton n/a n/a state_system_ marqueed used as state checkable state_system_ checked if checked property of dom element returns true n/a "select" event_object_ statechange when state is changed label role_system_ statictext from child nodes n/a n/a n/a n/a n/a legend role_system_ statictext n/a n/a n/a label_for (0x1002), points to caption element n/a n/a li and others role_system_ listitem n/a n/a state_system_ readonly n/a n/a n/a contains child accessible for list bullet ol, ul and others role_system_ list n/a n/a state_system_ readonly n/a n/a n/a optgroup bstr role n/a n/a n/a n/a n/a n/a option role_system_ listitem from @label attribute, from child text nodes n/a state_system_ selected if option is selected n/a "...
Text labels and names - Accessibility
examples <form> <fieldset> <legend>choose your favorite monster</legend> <in
put type="radio" id="kraken" name="monster"> <label for="kraken">kraken</label><br/> <in
put type="radio" id="sasquatch" name="monster"> <label for="sasquatch">sasquatch</label><br/> <in
put type="radio" id="mothman" name="monster"> <label for="mothman">mothman</label> </fieldset> </form> you can see a live, interactive version of this example on the <fieldset> reference page.
...this applies to all types of <in
put> items, as well as <button>, <out
put>, <select>, <textarea>, <progress> and <meter> elements, as well as any element with the switch aria role.
... <in
put type="checkbox" id="terms"> </label> <in
put type="checkbox" id="emailoptin"> <label for="emailoptin">yes, please send me news about this product.</label> form elements should have a visible text label in addition to having a <label> for every form element, those labels should be visible, not hidden.
...this includes svg images, <img>, <canvas>, <map>, and <area> elements, as well as <in
put> elements where type=image and <object> elements where the type starts with image/.
::-moz-range-thumb - CSS: Cascading Style Sheets
the ::-moz-range-thumb css pseudo-element is a mozilla extension that represents the thumb (i.e., virtual knob) of an <in
put> of type="range".
... the user can move the thumb along the in
put's track to alter its numerical value.
... note: using ::-moz-range-thumb with anything but an <in
put type="range"> doesn't match anything and has no effect.
... syntax ::-moz-range-thumb examples html <in
put type="range" min="0" max="100" step="5" value="50"/> css in
put[type=range]::-moz-range-thumb { background-color: green; } result a progress bar using this style might look something like this: specifications not part of any standard.
:checked - CSS: Cascading Style Sheets
the :checked css pseudo-class selector represents any radio (<in
put type="radio">), checkbox (<in
put type="checkbox">), or option (<option> in a <select>) element that is checked or toggled to an on state.
... syntax :checked examples basic example html <div> <in
put type="radio" name="my-in
put" id="yes"> <label for="yes">yes</label> <in
put type="radio" name="my-in
put" id="no"> <label for="no">no</label> </div> <div> <in
put type="checkbox" name="my-checkbox" id="opt-in"> <label for="opt-in">check me!</label> </div> <select name="my-select" id="fruit"> <option value="opt1">apples</option> <option value="opt2">grapes</option> <option value="o...
...pt3">pears</option> </select> css div, select { margin: 8px; } /* labels for checked in
puts */ in
put:checked + label { color: red; } /* radio element, when checked */ in
put[type="radio"]:checked { box-shadow: 0 0 0 3px orange; } /* checkbox element, when checked */ in
put[type="checkbox"]:checked { box-shadow: 0 0 0 3px hotpink; } /* option elements, when selected */ option:checked { box-shadow: 0 0 0 3px lime; color: red; } result toggling elements with a hidden checkbox this example utilizes the :checked pseudo-class to let the user toggle content based on the state of a checkbox, all without using javascript.
... html <in
put type="checkbox" id="expand-toggle" /> <table> <thead> <tr><th>column #1</th><th>column #2</th><th>column #3</th></tr> </thead> <tbody> <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr> <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr> <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr> <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr> <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr> </tbody> </table> <label for="expand-toggle" id="expand-btn">toggle hidden rows</label> css /* hide the toggle checkbox */ #expand-toggle { display: none; } /* hide expandable content by default */ .expanda...
:default - CSS: Cascading Style Sheets
what this selector matches is defined in html standard §4.16.3 pseudo-classes — it may match the <button>, <in
put type="checkbox">, <in
put type="radio">, and <option> elements: a default option element is the first one with the selected attribute, or the first enabled option in dom order.
... <in
put type="checkbox"> and <in
put type="radio"> match if they have the checked attribute.
...this also applies to <in
put> types that submit forms, like image or submit.
... syntax :default examples html <fieldset> <legend>favorite season</legend> <in
put type="radio" name="season" id="spring"> <label for="spring">spring</label> <in
put type="radio" name="season" id="summer" checked> <label for="summer">summer</label> <in
put type="radio" name="season" id="fall"> <label for="fall">fall</label> <in
put type="radio" name="season" id="winter"> <label for="winter">winter</label> </fieldset> css in
put:default { box-shadow: 0 0 2px 1px coral; } in
put:default + label { color: coral; } result specifications specification status comment html living standardthe definition of ':default' in that specification.
:out-of-range - CSS: Cascading Style Sheets
the :out-of-range css pseudo-class represents an <in
put> element whose current value is outside the range limits specified by the min and max attributes.
... /* selects any <in
put>, but only when it has a range specified, and its value is outside that range */ in
put:out-of-range { background-color: rgba(255, 0, 0, 0.25); } this pseudo-class is useful for giving the user a visual indication that a field's current value is outside the permitted limits.
...in the absence of such a limitation, the element can neither be "in-range" nor "out-of-range." syntax :out-of-range examples html <form action="" id="form1"> <p>values between 1 and 10 are valid.</p> <ul> <li> <in
put id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12"> <label for="value1">your value is </label> </li> </ul> </form> css li { list-style: none; margin-bottom: 1em; } in
put { border: 1px solid black; } in
put:in-range { background-color: rgba(0, 255, 0, 0.25); } in
put:out-of-range { background-color: rgba(255, 0, 0, 0.25); border: 2px solid red; } in
put:in-range + label::after { content: 'okay.'; } i...
...n
put:out-of-range + label::after { content: 'out of range!'; } result specifications specification status comment html living standardthe definition of ':out-of-range' in that specification.
:placeholder-shown - CSS: Cascading Style Sheets
the :placeholder-shown css pseudo-class represents any <in
put> or <textarea> element that is currently displaying placeholder text.
... html <in
put placeholder="type something here!"> css in
put { border: 1px solid black; padding: 3px; } in
put:placeholder-shown { border-color: teal; color: purple; font-style: italic; } result overflowing text when form fields are too small, placeholder text can get cropped in an undesirable way.
... html <in
put id="in
put1" placeholder="name, rank, and serial number"> <br><br> <in
put id="in
put2" placeholder="name, rank, and serial number"> css #in
put2:placeholder-shown { text-overflow: ellipsis; } result customized in
put field the following example highlights the branch and id code fields with a custom style.
... html <form id="test"> <p> <label for="name">enter student name:</label> <in
put id="name" placeholder="student name"/> </p> <p> <label for="branch">enter student branch:</label> <in
put id="branch" placeholder="student branch"/> </p> <p> <label for="sid">enter student id:</label> <in
put type="number" pattern="[0-9]{8}" title="8 digit id" id="sid" class="studentid" placeholder="8 digit id"/> </p> <in
put type="submit"/> </form> css in
put { background-color: #e8e8e8; color: black; } in
put.studentid:placeholder-shown { background-color: yellow; color: red; font-style: italic; } result specifications specification status comment selectors level 4the definition of ':placeholder-shown' in that specification.
:read-only - CSS: Cascading Style Sheets
the :read-only css pseudo-class represents an element (such as in
put or textarea) that is not editable by the user.
... in
put:read-only, textarea:read-only { background-color: #ccc; } p:read-only { background-color: #ccc; } syntax :read-only examples confirming form information in read-only/read-write controls one use of readonly form controls is to allow the user to check and verify information that they may have entered in an earlier form (for example, shipping details), while still being able to submit the information along with the rest of the form.
... the :read-only pseudo-class is used to remove all the styling that makes the in
puts look like clickable fields, making them look more like read-only paragraphs.the :read-write pseudo-class on the other hand is used to provide some nicer styling to the editable <textarea>.
... in
put:-moz-read-only, textarea:-moz-read-only, in
put:read-only, textarea:read-only { border: 0; box-shadow: none; background-color: white; } textarea:-moz-read-write, textarea:read-write { box-shadow: inset 1px 1px 3px #ccc; border-radius: 5px; } you can find the full source code at readonly-confirmation.html; this renders like so: styling read-only non-form controls this selector doesn't just select <in
put>/<textarea> elements — it will select any element that cannot be edited by the user.
:read-write - CSS: Cascading Style Sheets
the :read-write css pseudo-class represents an element (such as in
put or textarea) that is editable by the user.
... in
put:read-write, textarea:read-write { background-color: #bbf; } p:read-write { background-color: #bbf; } syntax :read-write examples confirming form information in read-only/read-write controls one use of readonly form controls is to allow the user to check and verify information that they may have entered in an earlier form (for example, shipping details), while still being able to submit the information along with the rest of the form.
... the :read-only pseudo-class is used to remove all the styling that makes the in
puts look like clickable fields, making them look more like read-only paragraphs.the :read-write pseudo-class on the other hand is used to provide some nicer styling to the editable <textarea>.
... in
put:-moz-read-only, textarea:-moz-read-only, in
put:read-only, textarea:read-only { border: 0; box-shadow: none; background-color: white; } textarea:-moz-read-write, textarea:read-write { box-shadow: inset 1px 1px 3px #ccc; border-radius: 5px; } you can find the full source code at readonly-confirmation.html; this renders like so: styling read-write non-form controls this selector doesn't just select <in
put>/<textarea> elements — it will select any element that can be edited by the user, such as a <p> element with contenteditable set on it.
any-hover - CSS: Cascading Style Sheets
the any-hover css media feature can be used to test whether any available in
put mechanism can hover over elements.
... none none of the available in
put mechanism(s) can hover conveniently, or there is no pointing in
put mechanism.
... hover one or more available in
put mechanisms can conveniently hover over elements.
... examples testing whether in
put methods can hover html <a href="#">try hovering over me!</a> css @media (any-hover: hover) { a:hover { background: yellow; } } result specifications specification status comment media queries level 4the definition of 'any-hover' in that specification.
color-gamut - CSS: Cascading Style Sheets
the color-gamut css media feature can be used to test the approximate range of colors that are supported by the user agent and the out
put device.
... srgb the out
put device can support approximately the srgb gamut or more.
... p3 the out
put device can support approximately the gamut specified by the dci p3 color space or more.
... rec2020 the out
put device can support approximately the gamut specified by the itu-r recommendation bt.2020 color space or more.
pointer - CSS: Cascading Style Sheets
none the primary in
put mechanism does not include a pointing device.
... coarse the primary in
put mechanism includes a pointing device of limited accuracy.
... fine the primary in
put mechanism includes an accurate pointing device.
... html <in
put id="test" type="checkbox" /> <label for="test">look at me!</label> css in
put[type="checkbox"] { -moz-appearance: none; -webkit-appearance: none; appearance: none; border: solid; margin: 0; } in
put[type="checkbox"]:checked { background: gray; } @media (pointer: fine) { in
put[type="checkbox"] { width: 15px; height: 15px; border-width: 1px; border-color: blue; } } @media (pointer: coarse) { in
put[type="checkbox"] { width: 30px; height: 30px; border-width: 2px; border-color: red; } } result specifications specification status comment media queries ...
update - CSS: Cascading Style Sheets
the update css media feature can be used to test how frequently (if at all) the out
put device is able to modify the appearance of content.
... slow the layout may change dynamically according to the usual rules of css, but the out
put device is not able to render or display changes quickly enough for them to be perceived as a smooth animation.
... fast the layout may change dynamically according to the usual rules of css, and the out
put device is not unusually constrained in speed, so regularly-updating things like css animations can be used.
... example: com
puter screens.
CSS Animations tips and tricks - CSS: Cascading Style Sheets
that's because the only way to play an animation again is to remove the animation effect, let the document recom
pute styles so that it knows you've done that, then add the animation effect back to the element.
...however, changes to the class list don't take effect until the style recom
putation is complete and a refresh has occurred to reflect the change.
...the problem for us is that because it's before the repaint, the style recom
putation hasn't actually happened yet!
...this time, the callback is run before the next repaint, which is after the style recom
putation has occurred.
Typical use cases of Flexbox - CSS: Cascading Style Sheets
a common pattern is to have an <in
put> element paired with a <button>, perhaps for a search form or where you simply want your visitor to enter an email address.
...i have contained my <button> and <in
put> field in a wrapper which i have given a border and set to display: flex.
... i then use the flex properties to allow the <in
put> field to grow, while the button does not grow.
...the stretchy in
put field now has a little less space to play with but it uses the space left after the two items are accounted for.
Layout and the containing block - CSS: Cascading Style Sheets
percentage values that are applied to the width, height, padding, margin, and offset properties of an absolutely positioned element (i.e., which has its position set to absolute or fixed) are com
puted from the element's containing block.
... calculating percentage values from the containing block as noted above, when certain properties are given a percentage value, the com
puted value depends on the element's containing block.
... the properties that work this way are box model properties and offset properties: the height, top, and bottom properties com
pute percentage values from the height of the containing block.
... the width, left, right, padding, and margin properties com
pute percentage values from the width of the containing block.
attr() - CSS: Cascading Style Sheets
if the given unit is a relative length, attr() com
putes it to an absolute length.
... if the given unit is a relative length, attr() com
putes it to an absolute length.
... if the given value is used as a length, attr() com
putes it to an absolute length.
...property values involving attr() are valid at parse time, and the validation of the attribute value is deferred to com
puted value time.
border-image-slice - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednopercentagesrefer to the size of the border imagecom
puted valueone to four percentage(s) (as specified) or absolute length(s), plus the keyword fill if specifiedanimation typeby com
puted value type formal syntax <number-percentage>{1,4} && fill?where <number-percentage> = <number> | <percentage> examples adjustable border width and slice the folowing example shows a simple <div> with a border image set on it.
... html <div class="wrapper"> <div></div> </div> <ul> <li> <label for="width">slide to adjust <code>border-width</code></label> <in
put type="range" min="10" max="45" id="width"> <out
put id="width-out
put">30px</out
put> </li> <li> <label for="slice">slide to adjust <code>border-image-slice</code></label> <in
put type="range" min="10" max="45" id="slice"> <out
put id="slice-out
put">30</out
put> </li> </ul> css .wrapper { width: 400px; height: 300px; } div > div { width: 300px; height: 200px; border-w...
...idth: 30px; border-style: solid; border-image: url(https://udn.realityripple.com/samples/56/bb98f533ef.png); border-image-slice: 30; border-image-repeat: round; } li { display: flex; place-content: center; } javascript const widthslider = document.getelementbyid('width'); const sliceslider = document.getelementbyid('slice'); const widthout
put = document.getelementbyid('width-out
put'); const sliceout
put = document.getelementbyid('slice-out
put'); const divelem = document.queryselector('div > div'); widthslider.addeventlistener('in
put', () => { const newvalue = widthslider.value + 'px'; divelem.style.borderwidth = newvalue; widthout
put.textcontent = newvalue; }) sliceslider.addeventlistener('in
put', () => { const newvalue = sliceslider.value; divelem.style.borderimages...
...lice = newvalue; sliceout
put.textcontent = newvalue; }) result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-image-slice' in that specification.
border-inline-end - CSS: Cascading Style Sheets
he 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 elementsinheritednocom
puted 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 absolute length or 0 if border-left-style is none or hiddenborder-right-width: the absolute length or 0 if border-right-style is none or hiddenborder-top-width: the absolute length or...
... 0 if border-top-style is none or 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: com
puted 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.
...he 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 elementsinheritednocom
puted 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 absolute length or 0 if border-left-style is none or hiddenborder-right-width: the absolute length or 0 if border-right-style is none or hiddenborder-top-width: the absolute length or...
... 0 if border-top-style is none or 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: com
puted coloranimation typeas each of the properties of the shorthand:border-inline-end-color: a colorborder-inline-end-style: discreteborder-inline-end-width: a length formal syntax <'border-top-width'> | <'border-top-style'> | <'color'>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
border-style - CSS: Cascading Style Sheets
unless a background-image is set, the com
puted value of the same side's border-width will be 0, even if the specified value is something else.
...unless a background-image is set, the com
puted value of the same side's border-width will be 0, even if the specified value is something else.
...the radius of the dots is half the com
puted value of the same side's border-width.
...it also applies to ::first-letter.inheritednocom
puted valueas each of the properties of the shorthand:border-bottom-style: as specifiedborder-left-style: as specifiedborder-right-style: as specifiedborder-top-style: as specifiedanimation typediscrete formal syntax <line-style>{1,4}where <line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset examples table with all property values here is an example o...
bottom - CSS: Cascading Style Sheets
when position is set to sticky, the bottom property is used to com
pute the sticky-constraint rectangle.
... inherit specifies that the value is the same as the com
puted value from its parent element (which might not be its containing block).
... this com
puted value is then handled as if it were a <length>, <percentage>, or the auto keyword.
... formal definition initial valueautoapplies topositioned elementsinheritednopercentagesrefer to the height of the containing blockcom
puted valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length, percentage or calc(); formal syntax <length> | <percentage> | auto examples absolute and fixed positioning this example demonstrates the difference in behavior of the bottom property, when position is absolute versus fixed.
box-shadow - CSS: Cascading Style Sheets
for each shadow, if both in
put shadows are or are not inset, then the interpolated shadow must match the in
put shadows in that regard.
... if any pair of in
put shadows has one inset and the other not inset, the entire shadow list is uninterpolable.
...it also applies to ::first-letter.inheritednocom
puted valueany length made absolute; any specified color com
puted; otherwise as specifiedanimation typea shadow list formal syntax none | <shadow>#where <shadow> = inset?
...had we
put in a border-radius of any other value, the corners would have been rounded.
calc() - CSS: Cascading Style Sheets
you may also use parentheses to establish com
putation order when needed.
... let's look at some css: in
put { padding: 2px; display: block; width: calc(100% - 1em); } #formbox { width: calc(100% / 6); border: 1px solid black; padding: 4px; } here, the form itself is established to use 1/6 of the available window width.
... then, to ensure that in
put fields retain an appropriate size, we use calc() again to establish that they should be the width of their container minus 1em.
... then, the following html makes use of this css: <form> <div id="formbox"> <label>type something:</label> <in
put type="text"> </div> </form> nested calc() with css variables you can also use calc() with css variables.
caret-color - CSS: Cascading Style Sheets
this is sometimes referred to as the text in
put cursor.
... the caret appears in elements such as <in
put> or those with the contenteditable attribute.
... formal definition initial valueautoapplies toall elementsinheritedyescom
puted valueauto is com
puted as specified and <color> values are com
puted as defined for the color property.animation typea color formal syntax auto | <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 setting a custom caret color html <in
put value="this field uses a default caret." size="64"/> <in
put class="custom" value="i have a custom caret color!" size="64"/> <p contenteditable class="custom">this paragraph can be edited, and its caret has a custom color as well!</p> css in
put { caret-color: auto; display: block; margin-bottom: .5em; } in
put.custom { caret-color: red; } p.custom { caret-color: green; } result ...
float - CSS: Cascading Style Sheets
a floating element is one where the com
puted value of float is not none.
... as float implies the use of the block layout, it modifies the com
puted value of the display values, in some cases: specified value com
puted value inline block inline-block block inline-table table table-row block table-row-group block table-column block table-column-group block table-cell block table-caption block table-header-group block table-footer-group block inline-flex flex inline-grid grid other unchanged note: if you're referring to this property from javascript as a member of the htmlelement.style object, modern browsers support float, but in older browsers you have to spell it as cssfloat, wi...
... formal definition initial valuenoneapplies toall elements, but has no effect if the value of display is none.inheritednocom
puted valueas specifiedanimation typediscrete formal syntax left | right | none | inline-start | inline-end examples how floated elements are positioned as mentioned above, when an element is floated, it is taken out of the normal flow of the document (though still remaining part of it).
... morbi tristique sapien ac erat tincidunt, sit amet dignissim lectus vul
putate.
left - CSS: Cascading Style Sheets
inherit specifies that the value is the same as the com
puted value from its parent element (which might not be its containing block).
... this com
puted value is then handled as if it were a <length>, <percentage>, or the auto keyword.
... when position is set to sticky, the left property is used to com
pute the sticky-constraint rectangle.
... formal definition initial valueautoapplies topositioned elementsinheritednopercentagesrefer to the width of the containing blockcom
puted valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length, percentage or calc(); formal syntax <length> | <percentage> | auto examples positioning elements html <div id="wrap"> <div id="example_1"> <pre> position: absolute; left: 20px; top: 20px; </pre> <p>the o...
outline - CSS: Cascading Style Sheets
a notable exception is in
put elements, which are given default styling by browsers.
... how to design useful and usable focus indicators wcag 2.1: understanding success criterion 2.4.7: focus visible formal definition initial valueas each of the properties of the shorthand:outline-color: invert, for browsers supporting it, currentcolor for the otheroutline-style: noneoutline-width: mediumapplies toall elementsinheritednocom
puted valueas each of the properties of the shorthand:outline-color: for the keyword invert, the com
puted value is invert.
... for the color value, if the value is translucent, the com
puted value will be the rgba() corresponding one.
...the transparent keyword maps to rgba(0,0,0,0).outline-width: an absolute length; if the keyword none is specified, the com
puted value is 0outline-style: as specifiedanimation typeas each of the properties of the shorthand:outline-color: a coloroutline-width: a lengthoutline-style: discrete formal syntax [ <'outline-color'> | <'outline-style'> | <'outline-width'> ] examples using outline to set a focus style html <a href="#">this link has a special focus style.</a> css a { border: 1px solid; border-radius: 3px; display: inline-block; margin: 10px; padding: 5px; } a:focus { outline: 4px dotted #e73; outline-offset: 4px; background: #ffa; } result specifications specification status comment ...
right - CSS: Cascading Style Sheets
inherit specifies that the value is the same as the com
puted value from its parent element (which might not be its containing block).
... this com
puted value is then handled as if it were a <length>, <percentage>, or the auto keyword.
... when position is set to sticky, the right property is used to com
pute the sticky-constraint rectangle.
... formal definition initial valueautoapplies topositioned elementsinheritednopercentagesrefer to the width of the containing blockcom
puted valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length, percentage or calc(); formal syntax <length> | <percentage> | auto examples absolute and relative positioning using right html <div id="relative">relatively positioned</div> <div id="absolute">absolutely positioned</div> css #relati...
shape-outside - CSS: Cascading Style Sheets
<shape-box> the float area is com
puted according to the shape of a float element's edges (as defined by the css box model).
... <basic-shape> the float area is com
puted based on the shape created by of one of inset(), circle(), ellipse(), polygon(), or as added in the level 2 specification path().
... <image> the float area is extracted and com
puted based on the alpha channel of the specified <image> as defined by shape-image-threshold.
... formal definition initial valuenoneapplies tofloatsinheritednocom
puted valueas defined for <basic-shape> (with <shape-box> following, if supplied), the <image> with its uri made absolute, otherwise as specified.animation typeyes, as specified for <basic-shape>, otherwise no formal syntax none | <shape-box> | <basic-shape> | <image>where <shape-box> = <box> | margin-box<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()> | <path()><image> = <url> | ...
top - CSS: Cascading Style Sheets
when position is set to sticky, the top property is used to com
pute the sticky-constraint rectangle.
... inherit specifies that the value is the same as the com
puted value from its parent element (which might not be its containing block).
... this com
puted value is then handled as if it were a <length>, <percentage>, or the auto keyword.
... formal definition initial valueautoapplies topositioned elementsinheritednopercentagesrefer to the height of the containing blockcom
puted valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length, percentage or calc(); formal syntax <length> | <percentage> | auto examples body { background: beige; } div { position: absolute; top: 10%; right: 40%; bottom: 20%; left: 15%; background: gold; border: 1px solid blue; } <div>the size of this content is determined by the position of its edges.</div> specifications specification status comment css positioned layout module level 3the definition of 'top' in that specification.
Audio and Video Delivery - Developer guides
you take the stream you receive from getusermedia, pass it to a mediarecorder object, take the resulting out
put and feed it to your audio or video source*.
... video player styling basics with the cross-browser video player
put in place in the previous article, this article now looks at providing some basic, reponsive styling for the player.
... streaming media tutorials live streaming web audio and video live streaming technology is often employed to relay live events such as sports, concerts and more generally tv and radio programmes that are out
put live.
... often shortened to just streaming, live streaming is the process of transmitting media 'live' to com
puters and devices.
Index - Developer guides
reating a cross-browser html5 audio player with all the associated attributes, properties, and events explained a guide to custom controls created using the media api 10 live streaming web audio and video guide, adaptive streaming live streaming technology is often employed to relay live events such as sports, concerts and more generally tv and radio programmes that are out
put live.
... often shortened to just streaming, live streaming is the process of transmitting media 'live' to com
puters and devices.
... 42 user in
put and controls screen orientation, contenteditable, drag and drop, fullscreen, keyboard, mouse, pointer lock, touch, user in
put modern web user in
put goes beyond simple mouse and keyboard: think of touchscreens for example.
... this article provides recommendations for managing user in
put and implementing controls in open web apps, along with faqs, real-world examples, and links to further information for anyone needing more detailed information on the underlying technologies.
HTML attribute: max - HTML: Hypertext Markup Language
the max attribute defines the maximum value that is acceptable and valid for the in
put containing the attribute.
... valid for the numeric in
put types, including the date, month, week, time, datetime-local, number and range types, and both the <progress> and <meter> elements, the max attribute is a number that specifies the most positive value a form control to be considered valid.
... syntax syntax for max values by in
put type in
put type syntax example date yyyy-mm-dd <in
put type="date" max="2019-12-25" step="1"> month yyyy-mm <in
put type="month" max="2019-12" step="12"> week yyyy-w## <in
put type="week" max="2019-w23" step=""> time hh:mm <in
put type="time" max="17:00" step="900"> datetime-local yyyy-mm-ddthh:mm <in
put type="datetime-local" min="2019-12-25t23:59"> number <number> <in
put type="number" min="0" step="5" max="100"> range <number> <in
put type="range" min="60" ste...
... syntax for max values for other elements in
put type syntax example <progress> <number> <progress id="file" max="100" value="70"> 70% </progress> <meter> <number> <meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="40"> at 40/100</meter> ...
HTML attribute: maxlength - HTML: Hypertext Markup Language
the maxlength attribute defines the maximum number of characters (as utf-16 code units) the user can enter into an <in
put> or <textarea>.
...if no maxlength is specified, or an invalid value is specified, the in
put or textarea has no maximum length.
...the in
put will fail constraint validation if the length of the text value of the field is greater than maxlength utf-16 code units long.
... examples <in
put type="password" maxlength="4"/> specifications specification status html living standardthe definition of 'maxlength attribute' in that specification.
<isindex> - HTML: Hypertext Markup Language
summary <isindex> was an obsolete html element that
put a text field in a page for querying the document.
... <isindex> provided a single line text in
put for entering a query string.
... <in
put name="isindex"> </label> <hr> </form> history on june 1992, dan connolly would prefer a different anchor type instead of isindex.
...he proposed to have instead an in
put element (idea supported by steve
putz).
<tbody>: The Table Body element - HTML: Hypertext Markup Language
possible values for this attribute are: baseline, which will
put the text as close to the bottom of the cell as it is possible, but align it on the baseline of the characters instead of the bottom of them.
... bottom, which will
put the text as close to the bottom of the cell as it is possible; middle, which will center the text in the cell; and top, which will
put the text as close to the top of the cell as it is possible.
... <table> <thead> <tr> <th>student id</th> <th>name</th> <th>major</th> </tr> </thead> <tbody> <tr> <td>3741255</td> <td>jones, martha</td> <td>com
puter science</td> </tr> <tr> <td>3971244</td> <td>nim, victor</td> <td>russian literature</td> </tr> <tr> <td>4100332</td> <td>petrov, alexandra</td> <td>astrophysics</td> </tr> </tbody> </table> css the css to style our table is shown next.
... result first, the resulting table, so you know what we're building: html the revised html looks like this: <table> <thead> <tr> <th>student id</th> <th>name</th> </tr> </thead> <tbody> <tr> <th colspan="2">com
puter science</th> </tr> <tr> <td>3741255</td> <td>jones, martha</td> </tr> <tr> <td>4077830</td> <td>pierce, benjamin</td> </tr> <tr> <td>5151701</td> <td>kirk, james</td> </tr> </tbody> <tbody> <tr> <th colspan="2">russian literature</th> </tr> <tr> <td>3971244</td> <td>nim, victor</td> </tr> </t...
PATCH - HTTP
contrast this with
put; which is a complete representation of a resource.
...contrast this with
put; which is always idempotent.
...for example if an auto-incrementing counter field is an integral part of the resource, then a
put will naturally overwrite it (since it overwrites everything), but not necessarily so for patch.
... patch (like
put) may have side-effects on other resources.
A re-introduction to JavaScript (JS tutorial) - JavaScript
unlike most programming languages, the javascript language has no concept of in
put or out
put.
...the most common host environment is the browser, but javascript interpreters can also be found in a huge list of other places, including adobe acrobat, adobe photoshop, svg images, yahoo's widget engine, server-side environments such as node.js, nosql databases like the open source apache couchdb, embedded com
puters, complete desktop environments like gnome (one of the most popular guis for gnu/linux operating systems), and others.
...} var in
put; do { in
put = get_in
put(); } while (in
putisnotvalid(in
put)); javascript's for loop is the same as that in c and java: it lets you provide the control information for your loop on a single line.
...it's extremely powerful, as it lets you
put a full function definition anywhere that you would normally
put an expression.
Control flow and error handling - JavaScript
for example: var x = 1; { var x = 2; } console.log(x); // out
puts 2 this out
puts 2 because the var x statement within the block is in the same scope as the var x statement before the block.
... (in c or java, the equivalent code would have out
putted 1.) since ecmascript2015, the let and const variable declarations are block-scoped.
... for example, do not write code like this: // prone to being misread as "x == y" if (x = y) { /* statements here */ } if you need to use an assignment in a conditional expression, a common practice is to
put additional parentheses around the assignment, like this: if ((x = y)) { /* statements here */ } falsy values the following values evaluate to false (also known as falsy values): false undefined null 0 nan the empty string ("") all other values—including all objects—evaluate to true when passed to a conditional statement.
... // while f() executes, the `finally` block returns false, // which overwrites the `throw` inside the above `catch` console.log('caught outer "bogus"'); } // out
put // caught inner "bogus" // false nesting try...catch statements you can nest one or more try...catch statements.
Working with objects - JavaScript
// animal properties and method encapsulation var animal = { type: 'invertebrates', // default value of properties displaytype: function() { // method which will display type of animal console.log(this.type); } }; // create new animal type called animal1 var animal1 = object.create(animal); animal1.displaytype(); // out
put:invertebrates // create new animal type called fishes var fish = object.create(animal); fish.type = 'fishes'; fish.displaytype(); // out
put:fishes inheritance all objects in javascript inherit from at least one other object.
... defining methods a method is a function associated with an object, or, simply
put, a method is a property of an object that is a function.
...delete myobj.a; console.log ('a' in myobj); // out
put: "false" you can also use delete to delete a global variable if the var keyword was not used to declare the variable: g = 17; delete g; comparing objects in javascript, objects are a reference type.
... 'apple'}; fruit == fruitbear; // return false fruit === fruitbear; // return false // two variables, a single object var fruit = {name: 'apple'}; var fruitbear = fruit; // assign fruit object reference to fruitbear // here fruit and fruitbear are pointing to same object fruit == fruitbear; // return true fruit === fruitbear; // return true fruit.name = 'grape'; console.log(fruitbear); // out
put: { name: "grape" }, instead of { name: "apple" } for more information about comparison operators, see comparison operators.
SyntaxError: missing name after . operator - JavaScript
for com
puted property access, you might need to change your property access from using a dot to using square brackets.
... these will allow you to com
pute an expression.
...square brackets allow com
puted property access.
...operator to fix this code, you need to access the object like this: obj.foo.bar; // "baz" // or alternatively obj["foo"]["bar"]; // "baz" // com
puted properties require square brackets obj.foo["bar" + i]; // "baz2" property access vs.
Intl.DateTimeFormat.prototype.resolvedOptions() - JavaScript
the intl.datetimeformat.prototype.resolvedoptions() method returns a new object with properties reflecting the locale and date and time formatting options com
puted during initialization of this datetimeformat object.
... syntax datetimeformat.resolvedoptions() return value a new object with properties reflecting the locale and date and time formatting options com
puted during the initialization of the given datetimeformat object.
...if any unicode extension values were requested in the in
put bcp 47 language tag that led to this locale, the key-value pairs that were requested and are supported for this locale are included in locale.
...some of these properties may not be present, indicating that the corresponding components will not be represented in formatted out
put.
Codecs used by WebRTC - Web media technologies
avc implementations for webrtc are required to support the special "filler payload" and "full frame freeze" sei messages; these are used to support switching among multiple in
put streams seamlessly.
...the most efficient way is to use the static method rtcrtpsender.getcapabilities() (or the equivalent rtcrtpreceiver.getcapabilities() for a receiver), specifying the type of media as the in
put parameter.
... note: the two methods for obtaining lists of codecs shown here use different out
put types in their codec lists.
...der.getcapabilities(kind).codecs; let recvcodecs = rtcrtpreceiver.getcapabilities(kind).codecs; if (kind === "video") { sendcodecs = prefercodec(mimetype); recvcodecs = prefercodec(mimetype); transceiver.setcodecpreferences([...sendcodecs, ...recvcodecs]); } }); peerconnection.onnegotiationneeded(); } in this sample, the function changevideocodec() takes as in
put the mime type of the codec you wish to use.
Understanding latency - Web Performance
however server performance has improved as com
puter memory, or cpu, has improved.
... measuring latency network latency is the time it takes for a data request to get from the com
puter making the request, to the com
puter responding.
... including the time it takes for a byte of data to make it from the responding com
puter back to the requesting com
puter.
... disk latency is the time it takes from the moment a com
puter, usually a server, receives a request, to the time the com
puter returns the response.
in2 - SVG: Scalable Vector Graphics
the in2 attribute identifies the second in
put for the given filter primitive.
... feblend for <feblend>, in2 defines the second in
put image to the blending operation.
... value sourcegraphic | sourcealpha | backgroundimage | backgroundalpha | fillpaint | strokepaint | <filter-primitive-reference> default value sourcegraphic for first filter primitive, otherwise result of previous filter primitive animatable yes fecomposite for <fecomposite>, in2 defines the second in
put image to the compositing operation.
... value sourcegraphic | sourcealpha | backgroundimage | backgroundalpha | fillpaint | strokepaint | <filter-primitive-reference> default value sourcegraphic for first filter primitive, otherwise result of previous filter primitive animatable yes fedisplacementmap for <fedisplacementmap>, in2 defines the second in
put image, which is used to displace the pixels in the image defined in the in attribute.
textLength - SVG: Scalable Vector Graphics
example let's create a simple example that presents text you can resize using an <in
put> element of type "range".
... html the html is also simple, with only two displayed elements contained inside a grouping <div>: <div class="controls"> <in
put type="range" id="widthslider" min="80" max="978"> <span id="widthdisplay"></span> </div> the <in
put> element, of type "range", is used to create the slider control the user will manipulate to change the width of the text.
...ing references to the elements it will need to access, using document.getelementbyid(): const widthslider = document.getelementbyid("widthslider"); const widthdisplay = document.getelementbyid("widthdisplay"); const textelement = document.getelementbyid("hello"); const baselength = math.floor(textelement.textlength.baseval.value); widthslider.value = baselength; widthslider.addeventlistener("in
put", function(event) { textelement.textlength.baseval.newvaluespecifiedunits( svglength.svg_lengthtype_px, widthslider.valueasnumber); widthdisplay.innertext = widthslider.value; }, false); widthslider.dispatchevent(new event("in
put")); after fetching the element references, an eventlistener is established by calling addeventlistener() on the slider control, to receive any in
put events...
... when an "in
put" event occurs, we call svglength.newvaluespecifiedunits() to set the value of textlength to the slider's new value, using the svglength interface's svg_lengthtype_px unit type to indicate that the value represents pixels.
xChannelSelector - SVG: Scalable Vector Graphics
ilter> <text x="10" y="60" font-size="50" filter="url(#displacementfilter)">some displaced text</text> <text x="10" y="120" font-size="50" filter="url(#displacementfilter2)">some displaced text</text> </svg> usage notes value r | g | b | a default value a animatable yes r this keyword specifies that the red color channel of the in
put image defined in in2 will be used to displace the pixels of the in
put image defined in in along the x-axis.
... g this keyword specifies that the green color channel of the in
put image defined in in2 will be used to displace the pixels of the in
put image defined in in along the x-axis.
... b this keyword specifies that the blue color channel of the in
put image defined in in2 will be used to displace the pixels of the in
put image defined in in along the x-axis.
... a this keyword specifies that the alpha channel of the in
put image defined in in2 will be used to displace the pixels of the in
put image defined in in along the x-axis.
yChannelSelector - SVG: Scalable Vector Graphics
ilter> <text x="10" y="60" font-size="50" filter="url(#displacementfilter)">some displaced text</text> <text x="10" y="120" font-size="50" filter="url(#displacementfilter2)">some displaced text</text> </svg> usage notes value r | g | b | a default value a animatable yes r this keyword specifies that the red color channel of the in
put image defined in in2 will be used to displace the pixels of the in
put image defined in in along the y-axis.
... g this keyword specifies that the green color channel of the in
put image defined in in2 will be used to displace the pixels of the in
put image defined in in along the y-axis.
... b this keyword specifies that the blue color channel of the in
put image defined in in2 will be used to displace the pixels of the in
put image defined in in along the y-axis.
... a this keyword specifies that the alpha channel of the in
put image defined in in2 will be used to displace the pixels of the in
put image defined in in along the y-axis.
Example - SVG: Scalable Vector Graphics
view the example <?xml version='1.0'?> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg"> <head> <title>a swarm of motes</title> <style type='text/css'> <![cdata[ label, in
put { width: 150px; display: block; float: left; margin-bottom: 10px; } label { text-align: right; width: 75px; padding-right: 20px; } br { clear: left; } ]]> </style> </head> <body onload='update()'> <svg:svg id='display' width='400' height='300'> <svg:circle id='cursor' cx='200' cy='150' r='7' fill='#0000ff' fill-opacity='0.5'/> </svg:svg> <p>a ...
... </div> <form action="" onsubmit="return false;"> <p> <label>number of motes:</label> <in
put id='num_motes' value='5'/> <br/> <label>max.
... velocity:</label> <in
put id='max_velocity' value='15'/> <br/> <label>attraction to cursor:</label> <in
put id='attract_cursor' value='6'/> <br/> <label>repulsion from peers:</label> <in
put id='repel_peer' value='5'/> <br/> </p> </form> <script type='text/javascript'> <![cdata[ // array of motes var motes; // get the display element.
... this.vx += rand(3)-1; this.vy += rand(3)-1; //
put an upper limit on velocity.
Types of attacks - Web security
xss attacks can be
put into three categories: stored (also called persistent), reflected (also called non-persistent), or dom-based.
...for endpoints that require a post request, it's possible to programmatically trigger a <form> submit (perhaps in an invisible <iframe>) when the page is loaded: <form action="https://bank.example.com/withdraw" method="post"> <in
put type="hidden" name="account" value="bob"> <in
put type="hidden" name="amount" value="1000000"> <in
put type="hidden" name="for" value="mallory"> </form> <script>window.addeventlistener('domcontentloaded', (e) => { document.queryselector('form').submit(); }</script> there are a few techniques that should be used to prevent this from happening: get endpoints should be idempotent—actions t...
... a csrf token should be included in <form> elements via a hidden in
put field.
...for all non-get requests that have the potential to perform an action, this in
put field should be compared against the expected value.
<xsl:element> - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the <xsl:element> element creates an element in the out
put document.
... syntax <xsl:element name=name namespace=uri use-attribute-sets=list-of-names > template </xsl:element> required attributes name specifies the desired name of the out
put element.
... optional attributes namespace specifies the namespace of the out
put element.
... use-attribute-sets a whitespace‐separated list of attribute-set element names to be applied to the element element’s out
put element.
<xsl:value-of> - XSLT: Extensible Stylesheet Language Transformations
syntax <xsl:value-of select=expression disable-out
put-escaping="yes" | "no" /> required attributes select specifies the xpath expression to be evaluated and written to the out
put tree.
... optional attributes disable-out
put-escaping (netscape does not serialize the result of transformation - the "out
put" below - so this attribute is essentially irrelevant in context.
... to out
put html-entities, use numerical values instead, eg   for  ) specifies whether special characters are escaped when written to the out
put.
...if "yes" is set, for example, the character > is out
put as >, not as ">".
Using the Mozilla JavaScript interface to XSL Transformations - XSLT: Extensible Stylesheet Language Transformations
transformtodocument xsltprocessor.transformtodocument() takes one argument, the source node to transform, and returns a new document with the results of the transformation: var newdocument = processor.transformtodocument(domtobetransformed); the resultant object depends on the out
put method of the stylesheet: html - htmldocument xml - xmldocument text - xmldocument with a single root element <transformiix:result> with the text as a child transformtofragment you can also use xsltprocessor.transformtofragment() which will return a documentfragment node.
... var ownerdocument = document.implementation.createdocument("", "test", null); var newfragment = processor.transformtofragment(domtobetransformed, ownerdocument); xsltprocessor.transformtofragment() will only produce html dom objects if the owner document is itself an htmldocument, or if the out
put method of the stylesheet is html.
...if you want to override this, you can set the out
put method normally in the standard way.
... resetting the xsltprocessor object also implements a xsltprocessor.reset() method, which can be used to remove all stylesheets and parameters then
put the processor back into its initial state.
Compiling from Rust to WebAssembly - WebAssembly
let's write some rust let's
put this code into src/lib.rs instead: use wasm_bindgen::prelude::*; #[wasm_bindgen] extern { pub fn alert(s: &str); } #[wasm_bindgen] pub fn greet(name: &str) { alert(&format!("hello, {}!", name)); } this is the contents of our rust project.
...macro takes two arguments in this case, a format string, and a variable to
put in it.
...$ mkdir site $ cd site $ npm link hello-wasm create a new file, package.json, and
put the following code in it: { "scripts": { "serve": "webpack-dev-server" }, "dependencies": { "hello-wasm": "^0.1.0" }, "devdependencies": { "webpack": "^4.25.1", "webpack-cli": "^3.1.2", "webpack-dev-server": "^3.1.10" } } note that you need to fill in your own username, after the @, in the dependencies section.
...create webpack.config.js and
put the following in it: const path = require('path'); module.exports = { entry: "./index.js", out
put: { path: path.resolve(__dirname, "dist"), filename: "index.js", }, mode: "development" }; now we need an html file; create index.html and give it the following contents: <!doctype html> <html> <head> <meta charset="utf-8"> <title>hello-wasm example</title> </head> <body> <script src="./index.js"></script> </body> </html> finally, create the index.js referenced in the html file and give it these contents: const js = import("./node_modules/hello-wasm/hello_wasm.js"); js.then(js => { js.greet("webassembly"); }); note that you need to fill in your npm username again.
context-menu - Archive of obsolete content
this includes non-in
put elements with the contenteditable attribute set to true.
...if the menu was invoked in an in
put text box or area, this is the selection of that element, otherwise the selection in the contents of the window.
... value the current contents of a in
put text box or area if the menu was invoked in one, null otherwise.
Unit Testing - Archive of obsolete content
if we run the add-on and click the button, we should see the following logging out
put: info: agvsbg8= info: hello testing the base64 module navigate to the add-on's test directory and delete the test-index.js file.
... the first two functions call atob() and btoa() and use assert.ok() to check that the out
put is as expected.
... obviously, you don't have to pass the --verbose option to jpm if you don't want to; doing so just makes the out
put easier to read.
Finding window handles - Archive of obsolete content
mozilla developers have
put the reference to the gtkwindow* into the gdkwindow* "user data", as a back reference.
...n.html#gdk-x11-get-server-time var gdk_x11_get_server_time = gdk.declare('gdk_x11_get_server_time', ctypes.default_abi, guint32, gdkwindow.ptr); var browserwindow_madeintogdkwinptr = gdkwindow.ptr(ctypes.uint64(gdkwindowptrstring)); var rez_gst = gdk_x11_get_server_time(browserwindow_madeintogdkwinptr); console.info('rez_gst:', rez_gst, uneval(rez_gst)); // return is a number of ms since the com
puter (xserver) was on var rez_gwf = gdk_window_focus(browserwindow_madeintogdkwinptr, rez_gst); console.info('rez_gwf:', rez_gwf, uneval(rez_gwf)); // return is void so this will be undefined gdk.close(); gtk+ components.utils.import('resource://gre/modules/services.jsm'); var browserwindow = services.wm.getmostrecentwindow('navigator:browser'); if (!browserwindow) { throw new error('no bro...
... it var browserwindow_madeintogtkwindowptr = ctypes.cast(gptr, gtkwindow.ptr); // focusing window this way is better, so it maintains proper history in case you or some other app want to focus "most recent window" by timestamp // var rez_gst = gdk_x11_get_server_time(browserwindow_madeintogdkwinptr); // console.info('rez_gst:', rez_gst, uneval(rez_gst)); // return is a number of ms since the com
puter (xserver) was on // var rez_gwpwt = gtk_window_present_with_time(browserwindow_madeintogtkwindowptr, rez_gst); // console.info('rez_gwaf:', rez_gwpwt, uneval(rez_gwpwt)); var rez_gwp = gtk_window_present(browserwindow_madeintogtkwindowptr); console.info('rez_gwaf:', rez_gwaf, uneval(rez_gwaf)); gdk.close(); gtk.close(); x11 warning this example below does not focus a window yet, it does co...
Extension Versioning, Update and Compatibility - Archive of obsolete content
to do this, just provide new em:id in install.rdf within new xpi file, and
put its url in em:updatelink in update.rdf.
...the hashing algorithm used is
put at the start of the string and separated from the hash by a :.
...to enable the log: set the value of extensions.logging.enabled to true (using url about:config) run firefox from command with option -console if you encounter problems, search the out
put in console for your extension id, and see if failures were logged.
Appendix: What you should know about open-source software licenses - Archive of obsolete content
about copyright to
put it very broadly, copyright is a creator’s right to decide how a work is published and how it is used.
...the software that microsoft sells, such as windows, comes with a license that permits only limited duplication in exchange for a fee, so, although customers can install it on their com
puters, they cannot modify it.
...but the com
puter ecosystem is changing in fundamental ways, with software patents, drm, internationally applied licenses, and other new challenges coming into focus.
Adding Events and Commands - Archive of obsolete content
it's very useful because it represents the most common action for in
put controls such as menu items, buttons and checkboxes.
...you shouldn't normally use this event to trigger actions on in
put controls such as buttons.
... <broadcasterset id="xulschoolhello-broadcasterset"> <broadcaster id="xulschoolhello-online-broadcaster" /> </broadcasterset> these elements are completely invisible, so you can
put them anywhere.
Appendix C: Avoiding using eval in Add-ons - Archive of obsolete content
settimeout("alert('" + xhr.responsetext + "');", 100); // attacker manipulated responsetext to contain "attack!'); format_com
puter(); alert('done" settimeout("alert('attack!'); format_com
puter(); alert('done');", 100); as a general rule of thumb, just don't pass code around as strings and execute it by calling eval, settimeout and friends.
... accessing properties via com
puted names not that common anymore, but still existing, are add-ons or other javascript programs that access object properties using eval when the property name is not a literal, but com
puted on the fly.
...eval("myaddon.phrases.word" + word + " = '" + phrase + "';"); again, this is not only unnecessarily hard to parse for a human, but may also contain security vulnerabilities if you com
pute the names using external data.
Local Storage - Archive of obsolete content
let appender; logfile.append("log.txt"); // loggers are hierarchical, lowering this log level will affect all // out
put.
...n the kind of message being logged: this._logger.fatal("this is a fatal message."); this._logger.error("this is an error message."); this._logger.warn("this is a warning message."); this._logger.info("this is an info message."); this._logger.config("this is a config message."); this._logger.debug("this is a debug message."); this._logger.trace("this is a trace message."); you can filter the out
put of the global logger or any specific logger instance by setting the level property.
...it's also used for storing cookies, form in
puts, and others.
The Box Model - Archive of obsolete content
the description element is used for the rest of the cases, where the text is only meant as additional information and is not related to in
put elements.
...and look into the box model, css style rules and com
puted style views.
... look into the com
puted width and height values, and how the paddings and margins affect the dimensions of xul nodes.
XUL user interfaces - Archive of obsolete content
margin-bottom: 1em; } .demo-group column { margin-right: .5em; } .demo-group row { margin-bottom: .5em; } .demo-group .buttons { -moz-box-pack: end; } /* the day-of-week labels */ .day { margin-left: 1em; } .day[disabled] { color: #777; } .day:first-child { margin-left: 4px; } /* the left column labels */ .text-prompt { padding-top: .25em; } /* the date in
put box */ #date-text { max-width: 8em; } /* the status bar */ statusbar { width: 100%; border: 1px inset -moz-dialog; margin: 4px; padding: 0px 4px; } #status { padding: 4px; } #status[warning] { color: red; } make a new text file, script7.js.
... discover the class of its html:in
put element.
... this is the element that actually receives user in
put.
Creating a Web based tone generator - Archive of obsolete content
<!doctype html> <html> <head> <title>javascript audio write example</title> </head> <body> <in
put type="text" size="4" id="freq" value="440"><label for="hz">hz</label> <button onclick="start()">play</button> <button onclick="stop()">stop</button> <script type="text/javascript"> function audiodatadestination(samplerate, readfn) { // initialize the audio out
put.
... var audio = new audio(); audio.mozsetup(1, samplerate); var currentwriteposition = 0; var prebuffersize = samplerate / 2; // buffer 500ms var tail = null; // the function called with regular interval to populate // the audio out
put buffer.
... } tail = null; } // check if we need add some data to the audio out
put.
Using XML Data Islands in Mozilla - Archive of obsolete content
when
putting xml in a data block, you need to make sure that the xml content you are embedding does not have an end tag that case-insensitively matches "</script>".
...ad> <title>xml data block demo</title> <script> function rundemo() { var doc = document.getelementbyid("purchase-order").contentdocument; var lineitems = doc.getelementsbytagnamens("http://example.mozilla.org/purchaseorderml", "lineitem"); var firstprice = lineitems[0].getelementsbytagnamens("http://example.mozilla.org/purchaseorderml", "price")[0].textcontent; document.getelementbyid("out
put-box").textcontent = "the purchase order contains " + lineitems.length + " line items.
... the price of the first line item is " + firstprice + "."; } </script> </head> <body onload="rundemo()";> <object id="purchase-order" data="purchase_order.xml" type="text/xml" style="display: none;"></object> <div id="out
put-box">demo did not run</div> </body> </html> ...
Creating regular expressions for a microsummary generator - Archive of obsolete content
matching an ebay url to match this url with a regular expression, we need to
put characters into the regular expression that match the characters in the url.
... most of the time, we can match a character in the url by
putting the same character into the regular expression.
... note that since generators are xml, we have to escape the special characters less-than-sign (<), greater-than-sign (>), and ampersand (&) by replacing them with their equivalent entity references (<, >, and &, respectively) in the regular expressions when we
put them in generators.
Dehydra Function Reference - Archive of obsolete content
decl is a variable type in
put_end() called once at the end of the c++ source file before the compiler quits.
...builtin functions the following functions are provided by dehydra and may be called by the user: print(msg) print a string to stdout (or stderr if the compiler is piping out
put).
... msg is a string to out
put to customize the location info printed set this._loc before calling print() include(file [, namespace]) include a javascript file into a namespace.
Document Loading - From Load Start to Finding a Handler - Archive of obsolete content
nsiexternalhelperappservice if we can't do anything else with a load, we give it to the nsiexternalhelperappservice and let it look for a helper app,
put up the "what do i do now?" dialog, and so forth.
...if that is the case, dispatchcontent tries to convert the data to some other content type by looking for a stream converter (implementing nsistreamconverter) that takes our content type as in
put and out
puts the magic type "*/*" (which just means we'll take anything it can give us).
...this creates a new nsdocumentopeninfo object and sets it as the out
put streamlistener of the converter.
Helper Apps (and a bit of Save As) - Archive of obsolete content
puts the data in the file as ondataavailable notifications come in.
... calls show() on the nsihelperapplauncherdialog, which asynchronously
puts up the helper app dialog.
...if an error occurs while we do this we delete the temp file and
put up an error dialog.
Windows Install - Archive of obsolete content
nsufficient disk space: " + dirpath); logcomment(" required : " + spacerequired + " k"); logcomment(" available: " + spaceavailable + " k"); return(false); } return(true); } function updatewinreg4ren8dot3() { var fprogram = getfolder("program"); var ftemp = getfolder("temporary"); //notes: // can't use a double backslash before subkey // - windows already
puts it in.
... // subkeys have to exist before values can be
put in.
... srdest; var err; var fprogram; srdest = 449; err = initinstall(prettyname, regname, "6.0.0.2000110801"); logcomment("initinstall: " + err); fprogram = getfolder("program"); logcomment("fprogram: " + fprogram); if(verifydiskspace(fprogram, srdest)) { setpackagefolder(fprogram); err = adddirectory("", "6.0.0.2000110801", "bin", // dir name in jar to extract fprogram, // where to
put this file // (returned from getfolder) "", // subdir name to create relative to fprogram true); // force flag logcomment("adddirectory() returned: " + err); // check return value if(err == success) { err = performinstall(); logcomment("performinstall() returned: " + err); } else cancelinstall(err); } else cancelinstall(insufficient_disk_space); // ...
addDirectory - Archive of obsolete content
a relative pathname is appended to the registry name of the package as specified by the package parameter to the initinstall method.this parameter can also be null, in which case the xpisourcepath parameter is used as a relative pathname.note that the registry pathname is not the location of the software on the com
puter; it is the location of information about the software inside the client version registry.
...the file is installed under this directory on the user's com
puter.
...description the adddirectory method
puts the files in the specified directory in a temporary location.
Sorting and filtering a custom tree view - Archive of obsolete content
l-stylesheet href="chrome://global/skin/" type="text/css"?> <!doctype window> <window title="sorting a custom tree view example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" onload="init()"> <script type="application/javascript" src="sort.js"/> <hbox align="center" id="search-box"> <label accesskey="f" control="filter">filter</label> <textbox id="filter" onin
put="in
putfilter(event)" flex="1"/> <button id="clearfilter" oncommand="clearfilter()" label="clear" accesskey="c" disabled="true"/> </hbox> <tree id="tree" flex="1" persist="sortdirection sortresource" sortdirection="ascending" sortresource="description"> <treecols> <treecol id="name" label="name" flex="1" persist="width ordinal hidden" onclick="sort(this)" class="sortdirectionindicator" s...
...this is useful if this is an editable table //to prevent the user from losing the row they edited var topvisiblerow = null; if (table) { topvisiblerow = gettopvisiblerow(); } if (data == null) { //
put object loading code here.
...for strings, lowercases them function prepareforcomparison(o) { if (typeof o == "string") { return o.tolowercase(); } return o; } function gettopvisiblerow() { return tree.treeboxobject.getfirstvisiblerow(); } function settopvisiblerow(topvisiblerow) { return tree.treeboxobject.scrolltorow(topvisiblerow); } function in
putfilter(event) { //do this now rather than doing it at every comparison var value = prepareforcomparison(event.target.value); setfilter(value); document.getelementbyid("clearfilter").disabled = value.length == 0; } function clearfilter() { document.getelementbyid("clearfilter").disabled = true; var filterelement = document.getelementbyid("filter"); filterelement.focus(); filterelement.valu...
Building Menus With Templates - Archive of obsolete content
the query generates a list of the person tags within the datasource and out
puts the action body for each one.
...note that the generated content does not get removed again when the menu is closed again; this extra feature of menus is only intended to be a performance enhancement to speed up the time it takes to display a window by avoiding extra generation that can be
put off until later.
... you might be wondering why we couldn't just
put the datasources attribute on the menupopup instead and not have a menupopup inside the action body.
Sorting Results - Archive of obsolete content
for an xml datasource, generated content will be out
put in the order corresponding to the results of the xpath query expression.
...sorting occurs when out
put is first generated as well as when a result is added as a result of a datasource change.
...when sorting, the predicate specified in the sort attribute for the result is used to determine where in the content the generated out
put should be inserted.
Template Logging - Archive of obsolete content
enabling logging will out
put details to the error console for each result.
...this will have no effect so an error is out
put indicating this.
...note that this error does not occur simply because, for example, a particular container has no children; it means that a logic error in the query implies that a variable could never be com
puted properly.
Document Object Model - Archive of obsolete content
we'll need to get the text in the in
put field for example.
...we'll
put scripts in a separate file findfile.js.
...however, for various reasons, including better performance, you should always
put scripts in separate files, except for short fragments which can be
put directly in the event handler.
RDF Datasources - Archive of obsolete content
put the url values below where you want the value of the resource to be used.
...to use them, just
put the url values above in the label attributes of the buttons or treecells.
...just
put the url of the rdf file in the datasources attribute.
Toolbars - Archive of obsolete content
of course you wouldn't normally
put a textbox in a vertical toolbar.
...you can
put them all inside a toolbox.
... you do not have to
put toolbar elements inside a toolbox.
Trees and Templates - Archive of obsolete content
we need to
put this attribute on only those elements that we want repeated for each resource.
... because we don't want multiple treechildren elements, we don't
put it there.
... instead we
put the uri attributes on the treeitem elements.
Using Remote XUL - Archive of obsolete content
if you build a xul file along with this tutorial and
put it onto a web server, you need to configure your web server to specify the content type of xul files as application/vnd.mozilla.xul+xml.
... <?php header('content-type: application/vnd.mozilla.xul+xml'); ?> <!-- xul markup starts here --> note that you don't need a web server for this tutorial; you can load the document you create on your com
puter via a "file" url or the "open file" function of your browser.
...to add items to a menu, we need to first add a menupopup element and then
put menuitem elements within it for each item we want to appear on the menu.
The Implementation of the Application Object Model - Archive of obsolete content
this gives you a feature called aggregation, the ability to
put completely different kinds of data into the same place.
...in html or xul, when you
put one tag inside another tag, a relationship of containment can safely be assumed.
...if we ship a browser that does not have 100% support for css2, for example, but we've extended html by adding 20-30 new tags, people are going to
put down their blinders and see only the fact that we were off adding a whole slew of new stuff to html when we could have been firming up our standards story.
prefpane - Archive of obsolete content
both may be specified directly as children of the prefpane element, or the src attribute may be used to
put a pane in a separate file.
...after the overlay is merged.) you can
put the handler for this event in the onpaneload attribute on the element.
... using multiple prefpanes note that when using multiple prefpanes in the same prefwindow, you must not
put the <script> elements above the prefpane elements, but instead below them.
prefwindow - Archive of obsolete content
for animatefadein to work properly, contents of prefpanes should be
put into overlays.
...therefore, an example call to opensubdialog() would look like this: document.documentelement.opensubdialog("chrome://myextension/content/options-sub.xul", "", null) issues when using prefpanes in prefwindow when you wish to
put non-<prefpane> elements to prefwindow, you should place them after all of <prefpane>s.
... if you
put other elements before the first <prefpane>, you possibly see strange behaviors about switching panes.
Building XULRunner with Python - Archive of obsolete content
you should also read the the developer documentation on source code and building as wells as pyxpcom xulrunner with python promises to be a good platform for accessibility projects and both jambu alternative in
put and the iaccessible2 test tool are using it.
...one solution is to
puttry ....
... except: print_exc() round any event handler to print tracebacks to stdout and use a python console to catch that out
put.
Dialogs in XULRunner - Archive of obsolete content
xul has a wide range of in
put controls you can use in a dialog.
... in the future, i will try to go into more detail on some of the existing and planned xul in
put controls.
... future articles in this series will look at in
put controls, printing, the clipboard, and xpcom.
Archived Mozilla and build documentation - Archive of obsolete content
this information is used by block layout to correctly com
pute where other floated elements should be placed, and how much space is available to normal in-flow elements that flow around the floated bits.
...if tracemonkey is built with tracevis, and run with tracevis enabled, then tracemonkey will out
put a log of all its activity transitions.
...when you have only a few uncommitted patches, you can get by using cvs diff, and just editing the out
put to remove other patches before submitting.
Gecko Compatibility Handbook - Archive of obsolete content
example -
putting forms in tables invalid html to eliminate line break in <form>.
... in older browsers, this results in the td cell tightly wrapping around the in
put element.
... <table border="1"> <tr> <form name="form2"> <td> <in
put type="text"> </td> </form> </tr> <table> this approach is commonly used to get around the fact that <form> is a block level element in html and will naturally begin on a new line in the page.
Extentsions FAQ - Archive of obsolete content
option #3 install status buttons 1.0 <https://addons.mozilla.org/firefox/1272/> "lets you
put toolbar buttons at either end of the status-bar.
... how can i backup some of the files before upgrade an extension and
put them back afterward?
... could someone make an addressbook enhancer extension that has the ability to
put pictures on a contact and other features the thunderbird address book lacks.
2006-09-29 - Archive of obsolete content
details can be located at layout confusion refactoring the nshtmlreflowstate(com
puteblockboxdata, initconstraints) and nsimageframe::getdesiredsize which uses ns_inrinsicsize, into the following method: /** * com
pute the size that a frame will occupy.
... called while * constructing the nshtmlreflowstate to be used to reflow the frame, * in order to fill its mcom
putedwidth and mcom
putedheight member * variables.
... */ virtual nssize com
putesize(nscoord aavailwidth, nscoord amargin, nscoord aborder, nscoord apadding, prbool ashrinkwrap) = 0; details can be located at refactoring some of nshtmlreflowstate.
NPAPI plugin reference - Archive of obsolete content
npstring npstring is a struct that holds a pointer to a sequence of 8-bit units (n
putf8) making up a utf-8 string, and the number of 8-bit units in the utf-8 string.
... n
putf8 n
putf8 is a byte representing an 8-bit unit of a utf-8 character.
... this is not the same thing as an entire utf-8 character, which may be comprised of multiple n
putf8 bytes.
SAX - Archive of obsolete content
nsisaxerrorhandler receive notification of errors in the in
put stream.
...e }, endprefixmapping: function(prefix) { // don't care }, // nsisupports queryinterface: function(iid) { if(!iid.equals(components.interfaces.nsisupports) && !iid.equals(components.interfaces.nsisaxcontenthandler)) throw components.results.ns_error_no_interface; return this; } }; start parsing the xml reader component can parse xml from a string, an nsiin
putstream, or asynchronously via the nsistreamlistener interface.
... below is an example of parsing from a string: xmlreader.parsefromstring("<f:a xmlns:f='g' d='1'><bbq/></f:a>", "text/xml"); this call results in the following out
put (assuming the content handler from the example above is used): startdocument startelement: namespace='g', localname='a', qname='f:a', attributes={d='1'} startelement: namespace='', localname='bbq', qname='bbq', attributes={} endelement: namespace='', localname='bbq', qname='bbq' endelement: namespace='g', localname='a', qname='f:a' enddocument ...
Using the W3C DOM - Archive of obsolete content
ted dom-related properties the following ie proprietary document object properties are not supported in the w3c document object model: document.layers[] id_attribute_value document.all document.all.id_attribute_value document.all[id_attribute_value] the following form related properties (originally from internet explorer) are not supported in the w3c document object model: formname.in
putname.value in
putname.value formctrlname document.forms(0) (note: document.forms[0] (using square brackets) uses the dom standard forms collection) scripts that use these properties will throw errors in most standards-compliant browsers.
... ie-specific ways to access elements w3c web standards replacements id_attribute_value document.getelementbyid() document.all.id_attribute_value document.getelementbyid() document.all[id_attribute_value] document.getelementbyid() formname.in
putname.value document.forms["formname"].in
putname.value or document.forms["formname"].elements["in
putname"].value in
putname.value document.forms["formname"].in
putname.value or document.forms["formname"].elements["in
putname"].value formctrlname document.forms["formname"].formctrlname or document.forms["formname"].elements["formctrlname"] document.forms(...
...+: elemref.style.pixelleft = x; elemref.style.pixeltop = y; dom level 2: elemref.style.left = x + "px"; elemref.style.top = y + "px"; w3c dom2 reflection of an element's css properties keep in mind that according to the w3c recommendation, the values returned by the style property of an element reflect static settings in the element's style attribute only, not the total "com
puted style" that includes any inherited style settings from parent elements.
-ms-scroll-chaining - Archive of obsolete content
initial valuechainedapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocom
puted valueas specifiedanimation typediscrete syntax values chained initial value.
... remarks this property only applies to touch and touchpad in
put.
... for keyboard in
put the scroll does not chain regardless of the –ms-scroll-chaining value, and for mouse in
put the scroll will always chain up to the nearest scrollable ancestor element.
-ms-wrap-flow - Archive of obsolete content
initial valueautoapplies toblock-level elementsinheritednocom
puted valueas specifiedanimation typediscrete syntax values auto for floated elements, an exclusion is created; for all other elements, an exclusion is not created.
... remarks the -ms-wrap-flow property makes an element an exclusion element when it has a com
puted value other than auto.
... when the -ms-wrap-flow property's com
puted value is auto, the element does not become an exclusion element unless its float property's com
puted value is not none.
:-moz-system-metric() - Archive of obsolete content
syntax values -moz-windows-compositormedia: media/visual accepts min/max prefixes: no:-moz-system-metric(images-in-menus)the :-moz-system-metric(images-in-menus) css pseudo-class matches an element if the com
puter's user interface supports images in menus.:-moz-system-metric(mac-graphite-theme):-moz-system-metric(mac-graphite-theme) will match an element if the user has chosen the "graphite" appearance in the "appearance" prefpane of the mac os x system preferences.:-moz-system-metric(scrollbar-end-backward)the :-moz-system-metric(scrollbar-end-backward) css pseudo-class will match an element if the comp...
...uter's user interface includes a backward arrow button at the end of scrollbars.:-moz-system-metric(scrollbar-end-forward)the :-moz-system-metric(scrollbar-end-forward) css pseudo-class will match an element if the com
puter's user interface includes a forward arrow button at the end of scrollbars.:-moz-system-metric(scrollbar-start-backward)the :-moz-system-metric(scrollbar-start-backward) css pseudo-class will match an element if the com
puter's user interface includes a backward arrow button at the start of scrollbars.:-moz-system-metric(scrollbar-start-forward)the :-moz-system-metric(scrollbar-start-forward) css pseudo-class will match an element if the com
puter's user interface includes a forward arrow button at the start of scrollbars.:-moz-system-metric(scrollbar-thumb-proportional)the :...
...-moz-system-metric(scrollbar-thumb-proportional) css pseudo-class will match an element if the com
puter's user interface uses proportional scrollbar thumbs; that is, the draggable thumb on the scrollbar resizes to indicate the relative size of the visible area of the document.:-moz-system-metric(touch-enabled)the :-moz-system-metric(touch-enabled) css pseudo-class will match an element if the device on which the content is being rendered offers a supported touch-screen interface.:-moz-system-metric(windows-default-theme)the :-moz-system-metric(windows-default-theme) css pseudo-class matches an element if the user is currently using one of the following themes in windows: luna, royale, zune, or aero (i.e., vista basic, vista standard, or aero glass).
::-ms-check - Archive of obsolete content
the ::-ms-check css pseudo-element is a microsoft extension that represents checkboxes and radio button groups created by <in
put type="checkbox"> and <in
put type="radio">.
...isplay (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-check example html <form> <label for="redbutton">red</label> <in
put type="radio" id="redbutton"><br> <label for="greencheckbox">green</label> <in
put type="checkbox" id="greencheckbox"> </form> css in
put, label { display: inline; } in
put[type=radio]::-ms-check { border-color: red; /* this will make the border red when the button is checked.
...*/ } in
put[type=checkbox]::-ms-check { border-color: green; /* this will make the box green when the button is checked.
display-inside - Archive of obsolete content
values auto if the element's com
puted <display-outside> value is inline-level, the element is an inline element, and lays out its contents using inline layout.
... if the element's com
puted <display-outside> value is an layout-specific internal type, this elements acts as normal for its given <display-outside> value.
... otherwise, this value com
putes to block.
Reference - Archive of obsolete content
we could also
put in layman definitions there for js constructs like functions and variables.
...there are still valid needs for this: com
puters on slow links, com
puters behind insane firewalls, as well as com
puters not connected to internet.
...but there is no other place to
put javascript 1.6 features at the moment.
Troubleshooting XForms Forms - Archive of obsolete content
if your binding expression contains a /, look for any containing xf:group, xf:repeat, xf:in
put or other elements that set the context node.
...so with an instance like this: <xf:instance id="ins2" xmlns=""> <data> <value>42</value> </data> </xf:instance> you should use <out
put ref="instance('ins2')/value"/> to show the contents of the value element.
... conflicts with other plug-ins if you are using the noscript plugin you may notice that your
put and/or post requests are being converted to get requests.
XForms Alert Element - Archive of obsolete content
examples <xforms:model> <xforms:instance> <data xmlns=""> <x>10</x> </data> </xforms:instance> <xforms:bind id="x" nodeset="x" type="xsd:integer"/> </xforms:model> <style> @namespace xforms url("http://www.w3.org/2002/xforms"); xforms|in
put:invalid xforms|alert.inline { display: inline; font-style: italic; width: 40%; } } </style> <xforms:in
put bind="x"> <xforms:label>you can type only numbers (validation happens on blur): </xforms:label> <xforms:alert>wrong value!
... you should type only numbers!</xforms:alert> </xforms:in
put> <xforms:in
put bind="x"> <xforms:label>you can type only numbers (validation happens on blur): </xforms:label> <xforms:alert class="inline">wrong value!
... you should type only numbers!</xforms:alert> </xforms:in
put> ...
XForms Repeat Element - Archive of obsolete content
example <model> <instance> <my:lines> <my:line name="a"> <my:price>3.00</my:price> </my:line> <my:line name="b"> <my:price>32.25</my:price> </my:line> </my:lines> </instance> </model> <repeat id="lineset" nodeset="/my:lines/my:line"> <in
put ref="my:price"> <label>line item</label> </in
put> <in
put ref="@name"> <label>name</label> </in
put> </repeat> <trigger> <label>insert a new item after the current one</label> <action ev:event="domactivate"> <insert nodeset="/my:lines/my:line" at="index('lineset')" position="after"/> <setvalue ref="/my:lines/my:line[index('lineset')]/@name"/> <setvalue ref="/my:...
...here comes the out
put: <br/> <xf:out
put ref="@id"><xf:label>out
put: </xf:label></xf:out
put> <div xf:repeat-nodeset="nest"><xf:out
put ref="."><xf:label>nested out
put: </xf:label></xf:out
put></div> </div> repeat in anonymous content (usage in xbl) you can use repeat elements inside anonymous content to create powerful new widgets.
...te ev:event="domactivate" at="index('anonidgridrepeat')" xbl:inherits="model, bind, nodeset"/> </xf:trigger> </xf:repeat> </xbl:content> </xbl:binding> </xbl:bindings> <style> div.grid { -moz-binding: url('#grid'); } </style> <xf:model> <xf:instance> <data xmlns=""> <repeat> <item> <in
put>in
put1</in
put> </item> <item> <in
put>in
put2</in
put> </item> <item> <in
put>in
put3</in
put> </item> </repeat> </data> </xf:instance> </xf:model> </head> <body> <xf:repeat nodeset="/data/repeat/item" id="gridrepeat"> <xf:in
put ref="in
put"/> </xf:repeat> <br/> <div class="grid" nodeset="/data/re...
Introduction to game development for the Web - Game development
as we like to say, "the web is the platform." let's take a look at the core of the web platform: function technology audio web audio api graphics webgl (opengl es 2.0) in
put touch events, gamepad api, device sensors, webrtc, full screen api, pointer lock api language javascript (or c/c++ using emscripten to compile to javascript) networking webrtc and/or websockets storage indexeddb or the "cloud" web html, css, svg (and much more!) the business case as a game developer, whether you're an individual or a larg...
... indexeddb a powerful data storage api for maintaining user data on their own com
puter or device.
... pointer lock api the pointer lock api lets you lock the mouse or other pointing device within your game's interface so that instead of absolute cursor positioning you receive coordinate deltas that give you more precise measurements of what the user is doing, and prevent the user from accidentally sending their in
put somewhere else, thereby missing important action.
Game distribution - Game development
this can range from low-end smartphones or tablets, through laptops and desktop com
puters, to smart tvs, watches or even a fridge if it can handle a modern enough browser.
...you can
put your html5 games into the same arena (see native desktop, later on) and you should because it's good to diversify the platforms you support, but you have to remember that developers creating desktop games have years of experience, great tools and stable distribution channels.
... tizen is also
putting a high value on supporting apps written in javascript.
Implementing game control mechanisms - Game development
if(this.game.in
put.mousepointer.isdown) { // do something } // ...
... } this will be executed whenever the mouse button is pressed, and it will be checked against the in
put's isdown boolean variable on every frame of the game.
... desktop mouse and keyboard controls — when playing on a desktop/laptop com
puter, providing keyboard and mouse controls is essential to provide an acceptable level of accessibility for the game.
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 com
puter operation.
...unlike low-level programming languages, it may use natural language elements, or may automate (or even entirely hide) significant areas of com
puting systems, making the process of developing simpler and more understandable relative to a lower-level language.
... the idea of a language automatically translatable into machine code, but nearer to human logic, was introduced in com
puter 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.
MVC - MDN Web Docs Glossary: Definitions of Web-related terms
the controller the controller contains logic that updates the model and/or view in response to in
put from the users of the app.
... so for example, our shopping list could have in
put forms and buttons that allow us to add or delete items.
... these actions require the model to be updated, so the in
put is sent to the controller, which then manipulates the model as appropriate, which then sends updated data to the view.
Parameter - MDN Web Docs Glossary: Definitions of Web-related terms
two kinds of parameters: in
put parameters the most common kind; they pass values into functions.
... depending on programming language, in
put parameters can be passed several ways (e.g., call-by-value, call-by-address, call-by-reference).
... out
put/return parameters primarily return multiple values from a function, but not recommended since they cause confusion learn more general knowledge difference between parameter and argument on wikipedia technical reference function declaration function expression ...
Transmission Control Protocol (TCP) - MDN Web Docs Glossary: Definitions of Web-related terms
tcp (transmission control protocol) is a transport layer host-to-host protocol for connection-oriented communication between two com
puters on an ip network.
... tcp uses virtual ports to create a virtual end-to-end connection that can reuse the physical connections between two com
puters.
...the three message mechanism is designed for the two com
puters that want to pass information back and forth and can negotiate the parameters of the connection before transmitting data such as http browser requests.
caret - MDN Web Docs Glossary: Definitions of Web-related terms
a caret (sometimes called a "text cursor") is an indicator displayed on the screen to indicate where text in
put will be inserted.
... on the web, a caret is used to represent the insertion point in <in
put> and <textarea> elements, as well as any elements whose contenteditable attribute is set, thereby allowing the contents of the element to be edited by the user.
... <in
put type="text"> <in
put type="password"> <in
put type="search"> <in
put type="date">, <in
put type="time">, <in
put type="datetime">, and <in
put type="datetime-local"> <in
put type="number">, <in
put type="range"> <in
put type="email">, <in
put type="tel">, and <in
put type="url"> <textarea> any element with its contenteditable attribute set ...
MDN Web Docs Glossary: Definitions of Web-related terms
certificate authority certified challenge-response authentication character character encoding character set chrome cia cipher cipher suite ciphertext class client hints closure cms code splitting codec compile compile time com
puter programming conditional constant constructor continuous media control flow cookie copyleft cors cors-safelisted request header cors-safelisted response header crawler crlf cross axis cross-site scripting crud cryptanalysis cryptographic hash fu...
... encryption endianness engine entity entity header event exception expando f fallback alignment falsy favicon fetch directive fetch metadata request header firefox os firewall first contentful paint first cpu idle first in
put delay first interactive first meaningful paint first paint first-class function flex flex container flex item flexbox forbidden header name forbidden response header name fork fragmentainer frame rate (fps) ftp ftu function fuzz testing ...
... http header http/2 http/3 https hyperlink hypertext i i18n iana icann ice ide idempotent identifier idl ietf iife imap immutable index indexeddb information architecture inheritance in
put method editor instance internationalization internet intrinsic size ip address ipv4 ipv6 irc iso isp itu j jank java javascript jpeg jquery json k key keyword l latency ...
A cool-looking box - Learn web development
if the online editor you are using doesn't have a separate css panel, feel free to
put it in a <style> element in the head of the document.
... a slight increase in font size, to around 17-18 pixel com
puted style.
... example the following screenshot shows an example of what the finished design could look like: assessment or further help if you would like your work assessed, or are stuck and want to ask for help:
put your work into an online shareable editor such as codepen, jsfiddle, or glitch.
Debugging CSS - Learn web development
prerequisites: basic com
puter literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to learn the basics of what browser devtools are, and how to do simple inspection and editing of css.
... the dom versus view source something that can trip up newcomers to devtools is the difference between what you see when you view the source of a webpage, or look at the html file you
put on the server, and what you can see in the html pane of the devtools.
... to create a reduced test case: if your markup is dynamically generated — for example via a cms — make a static version of the out
put that shows the problem.
Organizing your CSS - Learn web development
prerequisites: basic com
puter literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to learn some tips and best practices for organizing stylesheets, and find out about some of the naming conventions and tools in common usage to help with css organization and team working.
...some developers
put all of the rules onto a single line, like so: .box { background-color: #567895; } h2 { background-color: black; color: white; } other developers prefer to break everything onto a new line: .box { background-color: #567895; } h2 { background-color: black; color: white; } css doesn't mind which one you use.
...for example, look at the classes applied to this html from the page about bem naming conventions: <form class="form form--theme-xmas form--simple"> <in
put class="form__in
put" type="text" /> <in
put class="form__submit form__submit--disabled" type="submit" /> </form> the additional classes are similar to those used in the oocss example, however they use the strict naming conventions of bem.
CSS building blocks - Learn web development
we have
put together a course that includes all the essential information you need to work towards your goal.
... get started prerequisites before starting this module, you should have: basic familiarity with using com
puters, and using the web passively (i.e.
... note: if you are working on a com
puter/tablet/another device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as jsbin or glitch.
Beginner's guide to media queries - Learn web development
if you want to follow on and implement this example as we go, make a local copy of step1.html on your com
puter.
...we have also used flexbox to
put the navigation into a row.
... there are a number of other options you can
put inside the content attribute of the viewport meta tag — see using the viewport meta tag to control layout on mobile browsers for more details.
Supporting older browsers - Learn web development
understanding the technology your users have, and the support for things you might want to use
puts you in a good place to make all of your decisions and to know how best to support all of your users.
... you can also download and install virtual machines, and run older versions of browsers in a contained environment on your own com
puter.
...these are available for mac, windows and linux operating systems and so are a great way to test in old and modern windows browsers even if you are not using a windows com
puter.
Getting started with CSS - Learn web development
prerequisites: basic com
puter literacy, basic software installed, basic knowledge of working with files, and html basics (study introduction to html.) objective: to understand the basics of linking a css document to an html file, and be able to do simple text formatting with css.
...you can copy the code from below if you want to work on your own com
puter.
... your visitor may well be on a com
puter with a mouse or trackpad, or a phone with a touchscreen.
CSS first steps - Learn web development
we have
put together a course that includes all the essential information you need to work towards your goal.
... get started prerequisites before starting this module, you should have: basic familiarity with using com
puters, and using the web passively (i.e.
... note: if you are working on a com
puter/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as jsbin or glitch.
Typesetting a community school homepage - Learn web development
make a copy of them on your local com
puter.
...if the online editor you are using doesn't have a separate css panel, feel free to
put it in a <style> element in the head of the document.
... example the following screenshot shows an example of what the finished design could look like: assessment or further help if you would like your work assessed, or are stuck and want to ask for help:
put your work into an online shareable editor such as codepen, jsfiddle, or glitch.
How much does it cost to do something on the Web? - Learn web development
web access com
puter / modem you need a com
puter.
...to publish a barebones website, you only need a basic com
puter capable of launching an editor, and a web browser, so the entry level can be quite low.
... of course, you'll need a more serious com
puter if you want to produce complicated designs, touch up photos, or produce audio and video files.
Test your skills: Basic controls - Learn web development
basic controls 1 this task starts you off nice and gently by asking you to create two <in
put> elements, for a user's id and password, along with a submit button.
... create appropriate in
puts for user id and password.
... if you would like your work assessed, or are stuck and want to ask for help:
put your work into an online shareable editor such as codepen, jsfiddle, or glitch.
Front-end web developer - Learn web development
all you need is a com
puter that can run modern web browsers, an internet connection, and a willingness to learn.
... the learning pathway getting started time to complete: 1.5–2 hours prerequisites nothing except basic com
puter literacy.
... guides installing basic software — basic tool setup (15 min read) background on the web and web standards (45 min read) learning and getting help (45 min read) semantics and structure with html time to complete: 35–50 hours prerequisites nothing except basic com
puter literacy, and a basic web development environment.
CSS basics - Learn web development
first, find the out
put from google fonts that you previously saved from what will your website look like?.
... html { font-size: 10px; /* px means "pixels": the base font size is now 10 pixels high */ font-family: "open sans", sans-serif; /* this should be the rest of the out
put you got from google fonts */ } note: anything in css between /* and */ is a css comment.
...the goal is to
put some space around the content.
Marking up a letter - Learn web development
put the two addresses inside <address> elements.
... you just need to
put the provided css inside an html element.
... assessment or further help if you would like your work assessed, or if you get stuck and want to ask for help:
put your work in an online shareable editor such as codepen, jsfiddle, or glitch.
What’s in the head? Metadata in HTML - Learn web development
our aim here is not to show you how to use everything that can possibly be
put in the head, but rather to teach you how to use the major elements that you'll want to include in the head, and give you some familiarity.
...instead of pointing to an external script file, you can also choose to
put your script inside the <script> element.
... active learning: applying css and javascript to a page to start this active learning, grab a copy of our meta-example.html, script.js and style.css files, and save them on your local com
puter in the same directory.
Video and audio content - Learn web development
prerequisites: basic com
puter literacy, basic software installed, basic knowledge of working with files, familiarity with html fundamentals (as covered in getting started with html) and images in html.
... active learning: embedding your own audio and video for this active learning, we'd (ideally) like you to go out into the world and record some of your own video and audio — most phones these days allow you to record audio and video very easily, and provided you can transfer it on to your com
puter, you can use it.
... we would like you to: save your audio and video files in a new directory on your com
puter.
Assessment: Structuring planet data - Learn web development
starting point to start the assessment, make local copies of blank-template.html, minimal-table.css, and planets-data.txt in a new directory in your local com
puter.
...if the online editor you are using doesn't have separate javascript/css panels, feel free to
put them inline <script>/<style> elements inside the html page.
... assessment or further help if you would like your work assessed, or are stuck and want to ask for help:
put your work into an online shareable editor such as codepen, jsfiddle, or glitch.
Structuring the web with HTML - Learn web development
we have
put together a course that includes all the essential information you need to work towards your goal.
... get started prerequisites before starting this topic, you should have at least basic familiarity with using com
puters and using the web passively (i.e.
...to style html (for example alter your text size and fonts used, add borders and drop shadows, layout your page with multiple columns, add animations and other visual effects.) javascript, and how to use it to add dynamic functionality to web pages (for example find your location and plot it on a map, make ui elements appear/disappear when you toggle a button, save users' data locally on their com
puters, and much much more.) modules this topic contains the following modules, in a suggested order for working through them.
Making asynchronous programming easier with async and await - Learn web development
prerequisites: basic com
puter literacy, a reasonable understanding of javascript fundamentals, an understanding of async code in general and promises.
... the async keyword first of all we have the async keyword, which you
put in front of a function declaration to turn it into an async function.
...this can be
put in front of any async promise-based function to pause your code on that line until the promise fulfills, then return the resulting value.
Graceful asynchronous programming with Promises - Learn web development
prerequisites: basic com
puter literacy, a reasonable understanding of javascript fundamentals.
...this takes an array of promises as an in
put parameter and returns a new promise object that will fulfil only if and when all promises in the array fulfil.
... download a fresh copy of our page template, and again
put a <script> element just before the closing </body> tag.
Test your skills: Events - Learn web development
note: in the examples below, if there is an error in your code it will be out
putted into the results panel on the page, to help you try to figure out the answer (or into the browser's javascript console, in the case of the downloadable version).
...the circle is drawn with the function drawcircle(), which takes the folllowing parameters as in
puts: x — the x coordinate of the circle.
... if you would like your work assessed, or are stuck and want to ask for help:
put your work into an online shareable editor such as codepen, jsfiddle, or glitch.
Test your skills: Functions - Learn web development
note: in the examples below, if there is an error in your code it will be out
putted into the results panel on the page, to help you try to figure out the answer (or into the browser's javascript console, in the case of the downloadable version).
... functions 2 for our second functions-related task, you need to create a function that draws a rectangle on the provided <canvas> (reference variable canvas, context available in ctx), based on the five provided in
put variables: x — the x coordinate of the rectangle.
... if you would like your work assessed, or are stuck and want to ask for help:
put your work into an online shareable editor such as codepen, jsfiddle, or glitch.
Test your skills: Loops - Learn web development
note: you can try out solutions for the tasks below by downloading the code,
putting it in an online tool such as codepen, jsfiddle, or glitch, then working on the tasks.
... loops 2 in this next task, we want you to write a simple program that, given a name, searches an array of objects containing names and phone numbers (phonebook) and, if it finds the name, out
puts the name and phone number into the paragraph (para) and then exits the loop before it has run its course.
... if you would like your work assessed, or are stuck and want to ask for help:
put your work into an online shareable editor such as codepen, jsfiddle, or glitch.
JavaScript building blocks - Learn web development
we have
put together a course that includes all the essential information you need to work towards your goal.
... note: if you are working on a com
puter/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as jsbin or glitch.
... guides making decisions in your code — conditionals in any programming language, code needs to make decisions and carry out actions accordingly depending on different in
puts.
Third-party APIs - Learn web development
now, to start the example off, make copies of nytimes_start.html and nytimes.css in a new directory on your com
puter.
... the search term, which has to be specified in the q url parameter (the value is taken from the value of the searchterm text <in
put>).
... next, we use a couple of if() statements to check whether the startdate and enddate <in
put>s have had values filled in on them.
Test your skills: Math - Learn web development
note: in the examples below, if there is an error in your code it will be out
putted into the results panel on the page, to help you try to figure out the answer (or into the browser's javascript console, in the case of the downloadable version).
...if it isn't, you'll have to adjust some of the initial in
put values.
... if you would like your work assessed, or are stuck and want to ask for help:
put your work into an online shareable editor such as codepen, jsfiddle, or glitch.
Working with JSON - Learn web development
prerequisites: basic com
puter literacy, a basic understanding of html and css, familiarity with javascript basics (see first steps and building blocks) and oojs basics (see introduction to objects).
...you should be careful to validate any data you are attempting to use (although com
puter-generated json is less likely to include errors, as long as the generator program is working correctly).
... use another for loop to loop through the current hero's superpowers — for each one we create an <li> element,
put the superpower inside it, then
put the listitem inside the <ul> element (mylist) using appendchild().
Object prototypes - Learn web development
you can check out existing prototype properties for yourself — go back to our previous example and try entering the following into the javascript console: person.prototype the out
put won't show you very much because we haven't defined anything on our custom constructor's prototype!
... a clever trick is that you can
put parentheses onto the end of the constructor property (containing any required parameters) to create another object instance from that constructor.
...bye for now!'); }; save the code and load the page in the browser, and try entering the following into the text in
put: person1.farewell(); you should get an alert message displayed, featuring the person's name as defined inside the constructor.
Perceived performance - Learn web development
prerequisites: basic com
puter literacy, basic software installed, and basic knowledge of client-side web technologies.
...if in
put elements are visible, the user should be able to interact with them without a lag.
... make things like type-ahead a progressive enhancement: use css to display in
put modal, js to add typeahead/autocomplete as it is available make task initiators appear more interactive making a content request on keydown rather than waiting for keyup can shave 200ms off the perceived load of the content.
What is web performance? - Learn web development
prerequisites: basic com
puter literacy, basic software installed, and basic knowledge of client-side web technologies.
...this includes the following major areas: reducing overall load time: how long does it take the files required to render the web site to download on to the user's com
puter?
...we mention this briefly earlier on, but in brief, latency is the time it takes for your website assets to travel from the server to a user's com
puter.
The "why" of web performance - Learn web development
prerequisites: basic com
puter literacy, basic software installed, and basic knowledge of client-side web technologies.
...bad performing sites are slow to display and slow to respond to in
put.
... imagine loading this on a desktop com
puter connected to a fibre optic network.
Working with Svelte stores - Learn web development
this is a perfect example of how svelte
puts the compiler in charge of better developer ergonomics, not only saving us from typing boiler plate, but also generating less error-prone code.
...
put the following import statement below the existing ones: import { fly } from 'svelte/transition' to use it, update your opening <div> tag like so: <div role="alert" on:click={() => visible = false} transition:fly > transitions can also receive parameters, like this: <div role="alert" on:click={() => visible = false} transition:fly="{{delay: 250, duration: 300, x: 0, y: -100, ...
... ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue com
puted properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript ...
Client-side tooling overview - Learn web development
from a high-level perspective, you can
put client-side tools into the following three broad categories of problems to solve: safety net — tools that are useful during your code development.
... bundlers/packagers these are tools that get your code ready for production, for example by “tree-shaking” to make sure only the parts of your code libraries that you are actually using are
put into your final production code, or "minifying" to remove all the whitespace in your production code, making it as small as possible before it is uploaded to a server.
...one of the best known tools, webpack, has a re
putation for being overly complicated to work with, but in the latest major release there was a huge push to simplify common usage so the configuration required is reduced down to an absolute minimum.
Learn web development
we have
put together a course that includes all the essential information you need to work towards your goal.
...if you want to copy them all to your com
puter, the easiest way is to download a zip of the latest master code branch.
... open your com
puter's command prompt (windows) or terminal (linux, macos).
Accessibility Features in Firefox
tabbed browsing helps keyboard users by
putting all of the browsed documents in one firefox application window rather than cluttering the alt+tab order which makes keyboard navigation within the entire windows os much simpler.
...it also assists users of in
put aids because there are far fewer keys to type to get the desired location.
...finally, bookmarks.html contains all your bookmarks, and is easy to move around from com
puter to com
puter.
Debugging OpenGL
if an opengl error occurred when executing the call, an error message is out
put.
... if you need more verbose debug out
put, you can enable the verbose debug mode by defining the environment variable moz_gl_debug_verbose.
...this can help make it much easier to debug crashes and hangs that make the com
puter unusable (thereby stymieing attempts to debug).
Debugging on Windows
you can also redirect the console out
put to a file (by adding "> filename.txt" for example, without the quotes).
...} >debug.evaluatestatement ((nsgenericelement*)0x03f0e710)->list((file*)0x10311dc0, 1) <void> >debug.evaluatestatement {,,msvcr80d}fclose((file*)0x10311dc0) 0x00000000 note that you may not see the debugging out
put until you flush or close the file handle.
... for example, to print curent javascript stack to stdout, evaluate this in quickwatch window: {,,xul}dumpjsstack() note: visual c++ will show you something in the quick watch window, but not the stack, you have to look in the os console for the out
put.
The Firefox codebase: CSS Guidelines
do this: border-color: red; not this: border: red;
put multiple selectors on different lines do this: h1, h2, h3 { font-family: sans-serif; text-align: center; } not this: h1, h2, h3 { font-family: sans-serif; text-align: center; } naming standards for class names lower-case-with-dashes is the most common.
... once the two things above have been checked, check if the other rule you are overriding contains !important, if that is case, try
putting it in question, because it might have become obsolete.
... writing media queries boolean media queries do this: @media (-moz-mac-yosemite-theme: 0) { not this: @media not all and (-moz-mac-yosemite-theme) { privilege css for most common configuration it is better to
put the most common configuration (latest version of an os, or default theme for example) outside of the media query.
Creating Custom Events That Can Pass Data
however, here you want to
put the other part of the name (e.g.
...a good place to
put this .idl is in mozilla/dom/public/idl/events/.
... #include "nsidomevent.idl" [scriptable, uuid(08bea243-8a7b-4554-9ee9-70d7785d741b)] interface nsidommyevent: nsidomevent { //
put members here!
Reviewer Checklist
make sure the patch doesn't create any unused code (e.g., remove strings when removing a feature) all caught exceptions should be logged at the appropriate level, bearing in mind personally identifiable information, but also considering the expense of com
puting and recording log out
put.
... be careful when reading user in
put, network in
put, or files on disk.
... assume that in
puts will be too big, too short, empty, malformed, or malicious.
Performance
performance best practices declaring stateless functions once per process bad: // addon.js services.mm.loadframescript("framescript.js", true) // framescript.js const precom
putedconstants = // ...
...and since frame scripts get evaluated for each tab this means new function objects get instantiated, new constants get com
puted, block scopes must be set up etc.
... better: addon.js as above // framescript.js components.utils.import("resource://my-addon/processmodule.jsm", {}).addframe(this) // processmodule.jsm const exported_symbols = ['addframe']; const precom
putedconstants = // ...
Using the Browser API
{ browser.getcangoback().then(function(result) { if (result) { back.disabled = false; console.log("it's possible to navigate the history backward."); } else { back.disabled = true; console.log("it's not possible to navigate the history backward."); } }); } implementing the url bar the url bar for our simple browser is a <form> containing a single text <in
put>.
...when this fires, we set the value inside the url bar in
put to be equal to the event object detail property — this is so that the url displayed continues to match the website being shown when the user navigates back and forth through the history.
... var searchactive = false; prev.disabled = true; next.disabled = true; next, we add an event listener to the searchform so that when it is submitted, the htmliframeelement.findall() method is used to do a search for the string entered into the search in
put element (searchbar) within the text of the current page (the second parameter can be changed to 'case-insensitive' if you want a case-insensitive search.) we then enable the previous and next buttons, set searchactive to true, and blur() the search bar to make the keyboard disappear and stop taking up our screen once the search is submitted.
overflow-clip-box
/* keyword values */ overflow-clip-box: padding-box; overflow-clip-box: content-box; /* two values */ overflow-clip-box: padding-box content-box; overflow-clip-box: content-box content-box; /* global values */ overflow-clip-box: inherit; overflow-clip-box: initial; overflow-clip-box: unset; note: on gecko, by default, padding-box is used everywhere, but <in
put type="text"> and similar use the value content-box.
... initial valuepadding-boxapplies toall elementsinheritednomediavisualcom
puted valueas specifiedanimation typediscretecanonical orderthe unique non-ambiguous order defined by the formal grammar syntax values padding-box this keyword makes the clipping be related to the padding box.
... formal syntax padding-box | content-box examples padding-box html <div class="things"> <in
put value="abcdefghijklmnopqrstuvwxyzÅÄÖ" class="scroll padding-box"> <div class="scroll padding-box"><span>abcdefghijklmnopqrstuvwxyzÅÄÖ</span></div> </div> css .scroll { overflow: auto; padding: 0 30px; width: 6em; border: 1px solid black; background: lime content-box; } .padding-box { overflow-clip-box: padding-box; } js function scrollsomeelements() { var elms = document.queryselectorall('.scroll'); for (i=0; i < elms.length; ++i) { elms[i].scrollleft=80; } } var elt = document.queryelementsbytagname('body')[0]; elt.addeventlistener("load", scrollsomeelements, false); result ...
Script security
like any web browser, gecko can load javascript from untrusted and potentially hostile web pages and run it on the user's com
puter.
...if the code is compromised, the attacker can take over the user's com
puter.
... (a is the start of the arrow, and b is the end.) com
puting a wrapper the following diagram shows the factors that determine the kind of wrapper that compartment a would get when trying to access an object in compartment b.
How to get a stacktrace with WinDbg
you should now see a "command" text window with debug out
put at the top and an in
put box at the bottom.
... before debugging can start, several commands must be entered into the one-line in
put box at the bottom of the command window.
... .logopen /t c:\temp\firefox-debug.log .childdbg 1 .tlist sxn gp lm if you see firefox.exe listed in the out
put from .tlist more than once, then you are already running the application and need to close the running instance first before you start debugging, otherwise you won't get useful results.
Introduction to Layout in Mozilla
overview basic data flow key data structures detailed walk-through incrementalism future tech-talks wrap-up, q&a basic data flow source document arrives via network apis incrementally “pumped” through the single-threaded layout engine parse, com
pute style, render; repeat css used for rendering all content content theoretically separate from “presentation” key data structures content node elements, attributes, leaves dom frame rectangular formatting primitive geometric information [0..n] per content node 2nd thru nth are “continuations” style context non-geometric information may be shared by adjacent frames reference counted, owned by frame ...
...notifications passes these to the style set object, who in turn passes to the frame constructor frame constructor creates frames constructframeinternal recursively walks content tree, resolves style and creates frames either created by tag (<select>) or by display type (<p>) frame manager maintains mapping from content to frame style resolution com
pute stylistic information based on the style rules that apply for the frame’s content node style data broken into different structures display, visibility, font, color, background, … inherit vs.
... reset style context object is a placeholder for partially com
puted stylistic data style data is com
puted lazily, as it is asked for reflow recursively com
pute geometry (x, y, w, h) for frames, views, and widgets given w & h constraints of “root frame” com
pute (x, y, w, h) for all children constraints propagated “down” via nshtmlreflowstate desired size returned “up” via nshtmlreflowmetrics basic pattern parent frame initializes child reflow state (available w, h); places child frame (x, y); invokes child’s reflow method child frame com
putes desired (w, h), returns via reflow metrics parent frame sizes child frame and view based on child’s metrics n.b.
Using JavaScript code modules
if you're writing an extension for firefox 4 and already have a chrome.manifest with a content instruction in it, you can
put the code module in your content folder and reference it like your other content files via chrome://<yourextension>/content/<yourmodule>.jsm.
...always
put variables in a wrapper class and export the wrapper (such as bar in the above example).
... packaging notes it's important to note that you should not typically
put your javascript code modules in a jar file in your add-on.
Localizing with Koala
rmdir 3.6 c:\mozilla\l10n\application\firefox> hg clone http://hg.mozilla.org/releases/mozilla-1.9.2 3.6 requesting all changes adding changesets adding manifests adding file changes added 33099 changesets with 158636 changes to 50664 files (+9 heads) updating working directory 40357 files updated, 0 files merged, 0 files removed, 0 files unresolved configure the locale locale id: x-testing (
put your locale's code) version: 3.6 location: choose the folder where you want to keep the localized files or leave empty for now check "mercurial" if you wish to use mercurial to keep the revision history of your files (very recommended) existing localizations: url: if you're editing an existing localization or you already have a repository set up (either on hg.mozilla.org or bitbucket), type the ...
... here's a quick summary of what the out
put of the comparison means: files: "unmodified" - the file is completely translated.
...committing your work hopefully by now, you have translated 3 strings in the following 2 files: searchbar.dtd: cmd_enginemanager.label searchendcap.label search.properties: cmd_addfoundengine it's time to
put these files under mercurial's version control system.
Localizing with Mozilla Translator
if you are starting a new localization, all strings will be marked as new or updated.mt
puts a fuzzy flag on each flag and saves it in its database.
... recipes introduction we aim to
put here some recipes that may be useful at a certain moment for mt users, but that, due to its temporary nature, don't fit in the user manual.
... when mozilla l10n switched to ''source l10n'', one of the many problems that mt had to solve was how to fit a directory structure in what had been designed for five jars, and the ''patch'' consisted of providing a ''read from dir instead of jar'' and ''
put everything inside platform neutral''.
Initial setup
as a pre-requisite to contributing to the l10n program, you need to have access to code, tools, and a properly configured local environment (i.e., your personal com
puter).
... local environment tools similar to accounts, there is a number of environment tools that you should install on your personal com
puter.
...not only will you need a localization repository to store your localizations, but you need to have it installed and configured on your personal com
puter as well.
MathML Accessibility in Mozilla
the table gives the out
put in mode "utterance" and description spoken last.
... a base 0 subscript scripted + 1 numerator a base 1 subscript scripted + 1 numerator a base 2 subscript scripted + 1 numerator a base 3 subscript scripted + 1 numerator a base 3 subscript scripted + 1 numerator a base 4 subscript scripted denominator fraction denominator fraction denominator fraction denominator fraction torture test 8: ( n k / 2 ) no out
put ( fraction start, n over k / 2, end of fraction, ) see webkit's bug 146454 left paren fraction without bar, start.
...right paren ( open-fence n numerator k / 2 denominator fraction without bar ) close-fence torture test 9: ( p 2 ) x 2 y p - 2 - 1 1 - x 1 1 - x 2 no out
put ( fraction start, p over 2, end of fraction, ), x squared y, superscript p - 2, - fraction start, 1 over 1 - x, end of fraction, fraction start, 1 over 1 - x, squared, end of fraction see webkit's bug 146454 left paren fraction without bar, start.
Mozilla Quirks Mode Behavior
use box-sizing:border-box for most in
put types and textarea.
... maybe (firefox 3) when com
puting the minimum intrinsic width of an inline flow directly in a table cell (no blocks in between), it is assumed that it is not possible to break before and after an image (when otherwise it would be).
... to correspond, their width is com
puted as though only the remaining available space is the containing block width (bug 99461).
Refcount tracing and balancing
if you set this environment variable to the name of a file, the log will be out
put to that file.
... the scripts out
put looks like the following.
...specifically, any call stack that contains that call site will not contribute to the com
putation of balance factors in the tree.
PRExplodedTime
on in
put to nspr functions, only the essential members of prexplodedtime must be specified.
... the two nonessential members (day of week and day of year) are ignored by nspr functions as in
put.
... when an nspr function returns a prexplodedtime object or sets a prexplodedtime object as out
put, all of the prexplodedtime members are set, including the nonessential members.
PR EnumerateAddrInfo
result on in
put, a pointer to a prnetaddr structure.
... on out
put, this structure is filled in by the runtime if the result of the call is not null.
...the principle in
put, the praddrinfo structure, is not modified.
PR_EnumerateHostEnt
address on in
put, a pointer to a prnetaddr structure.
... on out
put, this structure is filled in by the runtime if the result of the call is greater than 0.
...the principle in
put, the prhostent structure, is not modified.
PR_GetSpecialFD
gets the file descriptor that represents the standard in
put, out
put, or error stream.
... syntax #include <prio.h> prfiledesc* pr_getspecialfd(prspecialfd id); parameter the function has the following parameter: id a pointer to an enumerator of type prspecialfd, indicating the type of i/o stream desired: pr_standardin
put, pr_standardout
put, or pr_standarderror.
... description type prspecialfd is defined as follows: typedef enum prspecialfd{ pr_standardin
put, pr_standardout
put, pr_standarderror } prspecialfd; #define pr_stdin pr_getspecialfd(pr_standardin
put) #define pr_stdout pr_getspecialfd(pr_standardout
put) #define pr_stderr pr_getspecialfd(pr_standarderror) file descriptors returned by pr_getspecialfd are owned by the runtime and should not be closed by the caller.
Building NSS
ideally, also install gyp and ninja and
put them on your path.
... test out
put is stored in tests_results/security/$host.$number/.
... the file results.html summarizes the results, out
put.log captures all the test out
put.
FIPS Mode - an explanation
(fips sounds plural, but is singular; one fips document is a fips, not a fip.) fips documents define rules, regulations, and standards for many aspects of handling of information by com
puters and by people.
... generally speaking, any use of a com
puter by us government personnel must conform to all the relevant fips regulations.
... how do i
put firefox into fips mode?
nss tech note6
it must be
put in the same directory as the nss libraries.
...when in fips 140 mode, the softoken is required to com
pute its checksum and compare it with the value in libsoftokn3.chk/softokn3.chk.
...pu_3.sl for cpus that do multiply operations faster in floating point, with a corresponding libfreebl_32fpu_3.chk libfreebl_32int_3.sl for other pa-risc cpus, with a corresponding libfreebl_32int_3.chk on the 64-bit hp-ux pa-risc architecture, there is only one freebl library, called libfreebl3.sl, with a corresponding libfreebl3.chk applications should always use nss binaries that are the out
put of the regular nss build process.
FC_InitPIN
syntax ck_rv fc_initpin( ck_session_handle hsession, ck_char_ptr ppin, ck_ulong ulpinlen ); parameters fc_initpin() takes three parameters: hsession[in
put] session handle.
... ppin[in
put] pointer to the pin being set.
... ulpinlen [in
put] length of the pin.
NSS tools : pk12util
patch error o 23 - get default cert db error o 24 - find cert by nickname error o 25 - create export context error o 26 - pkcs12 add password itegrity error o 27 - cert and key safes creation error o 28 - pkcs12 add cert and key error o 29 - pkcs12 encode error examples importing keys and certificates the most basic usage of pk12util for importing a certificate or key is the pkcs#12 in
put file (-i) and some way to specify the security database being accessed (either -d for a directory or -h for a token).
... enter new password: re-enter password: enter password for pkcs12 file: pk12util: pkcs12 import successful exporting keys and certificates using the pk12util command to export certificates and keys requires both the name of the certificate to extract from the database (-n) and the pkcs#12-formatted out
put file to write to.
... pk12util -l p12file [-h tokenname] [-r] [-d [sql:]directory] [-p dbprefix] [-k slotpasswordfile|-k slotpassword] [-w p12filepasswordfile|-w p12filepassword] for example, this prints the default ascii out
put: # pk12util -l certs.p12 enter password for pkcs12 file: key(shrouded): friendly name: thawte freemail member's thawte consulting (pty) ltd.
NSS tools : pk12util
db error o 24 - find cert by nickname error o 25 - create export context error o 26 - pkcs12 add password itegrity error o 27 - cert and key safes creation error o 28 - pkcs12 add cert and key error o 29 - pkcs12 encode error examples importing keys and certificates the most basic usage of pk12util for importing a certificate or key is the pkcs#12 in
put file (-i) and some way to specify the security database being accessed (either -d for a directory or -h for a token).
... enter new password: re-enter password: enter password for pkcs12 file: pk12util: pkcs12 import successful exporting keys and certificates using the pk12util command to export certificates and keys requires both the name of the certificate to extract from the database (-n) and the pkcs#12-formatted out
put file to write to.
... pk12util -l p12file [-h tokenname] [-r] [-d [sql:]directory] [-p dbprefix] [-k slotpasswordfile|-k slotpassword] [-w p12filepasswordfile|-w p12filepassword] for example, this prints the default ascii out
put: # pk12util -l certs.p12 enter password for pkcs12 file: key(shrouded): friendly name: thawte freemail member's thawte consulting (pty) ltd.
Multithreading in Necko
in the future, necko may be made thread safe to support changes to gecko that would
put some other processing work on background threads (eg.
...it simply promises to read from a nsiin
putstream (or write to a nsiout
putstream) on a background thread.
...the jar protocol handler, for rexample, passes a special nsiin
putstream impl that does gzip decoding on the fly.
Tutorial: Embedding Rhino
to make sure that it is called even if an exception is thrown, it is
put into the finally block corresponding to the try block starting after context.enter().
...this is the same as runscript, but with the addition of two extra lines of code: object wrappedout = context.javatojs(system.out, scope); scriptableobject.
putproperty(scope, "out", wrappedout); these lines add a global variable out that is a javascript reflection of the system.out variable: $ java runscript2 "out.println(42)" 42.0 undefined using javascript objects from java after evaluating a script it's possible to query the scope for variables and functions, extracting values and calling javascript functions.
...r.class); now we can reference the counter object from our script: $ java runscript4 "c = new counter(3); c.count; c.count;" it also creates a new instance of the counter object from within our java code, constructing it with the value 7, and assigning it to the top-level variable mycounter: object[] arg = { new integer(7) }; scriptable mycounter = cx.newobject(scope, "counter", arg); scope.
put("mycounter", scope, mycounter); now we can reference the mycounter object from our script: $ java runscript3 'runscript4 'mycounter.count; mycounter.count' 8 ...
Scripting Java
if we just view the method object by itself we can see the various overloaded forms of the method: js> f.listfiles function listfiles() {/* java.io.file[] listfiles() java.io.file[] listfiles(java.io.filenamefilter) java.io.file[] listfiles(java.io.filefilter) */} this out
put shows that the file class defines three overloaded methods listfiles: one that takes no arguments, another with a filenamefilter argument, and a third with a filefilter argument.
..."g(string,int)"; } public string g(int i, string s) { return "g(int,string)"; } public static void main(string[] args) { overload o = new overload(); object[] a = new object[] { new integer(3), "hi", overload.class }; for (int i = 0; i != a.length; ++i) system.out.println(o.f(a[i])); } } when we compile and execute the program, it produces the out
put f(object) f(object) f(object) however, if we write a similar script var o = new packages.overload(); var a = [ 3, "hi", packages.overload ]; for (var i = 0; i != a.length; ++i) print(o.f(a[i])); and execute it, we get the out
put f(int) f(string) f(object) because rhino selects an overloaded method at runtime, it calls the more specific type that matches the argument.
... js> t = new java.lang.thread(r) thread[thread-2,5,main] js> t.start() js> running the final js prompt and the out
put from the new thread may appear in either order, depending on thread scheduling.
Creating JavaScript tests
please
put tests of functionality into jstests even if related tests are in jit-tests, since jstests are closer to (and more easily converted to) test262 tests.
... (in fact, the test262 test suite is run as part of jstests.) practical differences between the two test suites: jstest new jstest files should be
put the code in the appropriate subdirectory of js/src/tests/non262/, or, under some scenarios, contributed directly to the test262 repository.
... jit-test new jit-test files should be
put in js/src/jit-test/tests/basic or one of the other appropriate subdirectories of jit-test/tests.
Tracing JIT
nanojit/lir.* the nanojit/lir.cpp and nanojit/lir.h files define the intermediate representation lir, which is used as in
put to nanojit.
... an assembler runs in a single pass over its in
put, transforming one lins value to zero or more nins values.
... it is important to keep in mind that this pass runs backwards from the last lins in the in
put lir code to the first, generating native code in reverse.
JS_ClearRegExpStatics
clear the pending regexp in
put and flags.
... description js_clearregexpstatics clears the pending in
put string and flags of the built-in regexp object.
... see also mxr id search for js_clearregexpstatics js_newregexpobject js_newucregexpobject js_setregexpin
put regexp ...
JS_ExecuteRegExp
execute a new regexp object to given in
put string.
... chars const char16_t * a pointer to the string contains a in
put string.
... description js_executeregexp and js_newregexpobjectnostatics execute the regexp object, reobj, to the specified in
put string, chars, from *indexp index.
TPS Tests
note: be prepared not to use your com
puter for 15 or so minutes after starting a full run of tps, as it will open and close a fairly large number of firefox windows.
...one alternative is to
put underscores before the "disabled" preferences, e.g.
...it will include log out
put written by the python driver, which includes information about where the temporary profiles it uses are stored.
Signing Mozilla apps for Mac OS X
mac os x's gatekeeper functionality prevents users from launching applications that haven't been code-signed, in order to help keep their com
puters secure.
... -v increases the verbosity of the codesign tool's out
put.
...you can find it by running this command in the terminal: openssl x509 -text -noout -inform der -in devloperid_application.cer | grep subject
putting it all together, you'll wind up using a command similar to the one below to sign your app.
Gecko object attributes
event-from-in
put was the root cause of this event explicit user in
put?
... applied to: any widget that accepts in
put exposed via aria: aria-datatype exposed in xforms: from boud instance node datatype draggable true when the accessible object can be grabbed.
...the line number is relative to the top of the currently focused area (the document, a rich text editable area, or an in
put control).
Building the WebLock UI
in this tutorial, focusing as it is on the weblock functionality (rather than the ui), we'll assume the strings we get from the ui itself are urls we actually want to write to the white list: function addthissite() { var tf = document.getelementbyid("dialog.in
put"); // weblock is global and declared above weblock.addsite(tf.value); } this javascript function can be called directly from the xul widget, where the in
put string is retrieved as the value property of the textbox element.
... <separator class="thin"/> <hbox align="center"> <textbox id="url.in
put" flex="1"/> <button label="add this url" oncommand="addthissite();"/> </hbox> this snippet introduces a couple of new general layout widgets in xul.
....mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="web lock manager" style="width: 30em;" persist="screenx screeny" screenx="24" screeny="24"> <script src="chrome://weblock/content/weblock.js"/> <hbox> <separator orient="vertical" class="thin"/> <vbox flex="1"> <separator class="thin"/> <hbox align="center"> <textbox id="dialog.in
put" flex="1"/> <button label="add this url" oncommand="addthissite();"/> </hbox> <hbox align="center"> <radiogroup onchange="togglelock();"> <radio label="lock"/> <radio label="unlock"/> </radiogroup> <spacer flex="1"/> </hbox> </vbox> </hbox> </dialog> overlaying new user interface into mozilla you've go...
Profiling XPCShell
to use it, you need to enable it in your mozconfig: ac_add_options --enable-xpctools now you can profile an entire script by setting the environment variable <tt>mozilla_js_profiler_out
put</tt> to a filename where you want the out
put file.
... for example, on linux or macosx you do: export mozilla_js_profiler_out
put=/tmp/profile.txt now, run the script using xpcshell.
... after running has finished, the out
put file will contain a profile.
Observer Notifications
com
puter sleep and wake this topic indicates when actions related to the com
puter going to sleep or waking up occur.
... see bug 758848.) topic data description sleep_notification null sent when the com
puter is going to sleep.
... wake_notification null sent when the com
puter is waking up.
inIDOMUtils
nsigned long aselectorindex); nsidomfontfacelist getusedfontfaces(in nsidomrange arange); bool haspseudoclasslock(in nsidomelement aelement, in domstring apseudoclass); boolean isignorablewhitespace(in nsidomcharacterdata adatanode); bool isinheritedproperty(in astring apropertyname); void parsestylesheet(in nsidomcssstylesheet asheet, in domstring ain
put); void removepseudoclasslock(in nsidomelement aelement, in domstring apseudoclass); astring rgbtocolorname(in octet ar, in octet ag, in octet ab); bool selectormatcheselement(in nsidomelement aelement, in nsidomcssstylerule arule, in unsigned long aselectorindex, [optional] in domstring apseudo); void setcontentstate(in nsidomelement aelement, in unsigned long...
... void parsestylesheet( in nsidomcssstylesheet asheet, in domstring ain
put ); parameters asheet a domcssstylesheet.
... ain
put a domstring.
nsIChannel
method overview void asyncopen(in nsistreamlistener alistener, in nsisupports acontext); nsiin
putstream open(); attributes attribute type description contentcharset acstring the character set of the channel's content if available and if applicable.
... nsiin
putstream open(); parameters none.
... return value blocking in
put stream to the channel's data.
nsICompositionStringSynthesizer
you need to use nsitextin
putprocessor instead of this.
...dcompositionevent("compositioncommit", "foo-bar-buzz", ""); method overview void appendclause(in unsigned long alength, in unsigned long aattribute); boolean dispatchevent(); void setcaret(in unsigned long aoffset, in unsigned long alength); void setstring(in astring astring); constants constant value description attr_raw_in
put 0x02 a clause attribute.
...i.e., raw text of user in
put.
nsIDOMSimpleGestureEvent
the following events are generated: mozswipegesture - generated when the user completes a swipe across across the in
put device.
... moztapgesture - generated when the user executes a two finger tap gesture on the in
put device.
...(xxx not implemented on mac) mozpresstapgesture - generated when the user executes a press and tap two finger gesture (first finger down, second finger down, second finger up, first finger up) on the in
put device.
nsIDOMWindow
method overview nsidomcssstyledeclaration getcom
putedstyle(in nsidomelement elt, [optional] in domstring pseudoelt); nsiselection getselection(); void scrollby(in long xscrolldif, in long yscrolldif); void scrollbylines(in long numlines); void scrollbypages(in long numpages); void scrollto(in long xscroll, in long yscroll); void sizetocontent(); attributes attribute type ...
... methods getcom
putedstyle() see dom-window-getcom
putedstyle for details.
... nsidomcssstyledeclaration getcom
putedstyle( in nsidomelement elt, in domstring pseudoelt optional ); parameters elt pseudoelt optional return value getselection() returns the nsiselection object indicating what if any content is currently selected in the window.
nsIEditor
arent, in long aposition); void splitnode(in nsidomnode existingrightnode, in long offset, out nsidomnode newleftnode); void joinnodes(in nsidomnode leftnode, in nsidomnode rightnode, in nsidomnode parent); void deletenode(in nsidomnode child); void marknodedirty(in nsidomnode node); direction controller void switchtextdirection(); out
put methods astring out
puttostring(in astring formattype, in unsigned long flags); example: // flags are declared in base/public/nsidocumentencoder.idl // out
putselectiononly = 1, out
putformatted = 2, // out
putraw = 4, out
putbodyonly = 8, // out
putpreformatted = 16, out
putwrap = 32, // out
putformatflowed = 64, out
putabsolutelinks = 258, //...
... out
putencodew3centities = 256, out
putcrlinebreak = 512, // out
putlflinebreak = 1024, out
putnoscriptcontent = 2048, // out
putnoframescontent = 4096, out
putnoformattinginpre = 8192, // out
putencodebasicentities=16384, out
putencodelatin1entities=32768, // out
putencodehtmlentities=65536, out
putpersistnbsp=131072 editorapi.out
puttostring('text/html', 2); editorapi.out
puttostring('text/plain', 4); // out
put the body tag, body children and the html end tag (</html>).
...editorapi.out
puttostring('text/html', 8); // xml: all in xml with _moz_dirty="" in new tags, html tags are in upper case // application/xhtml+xml format do the same editorapi.out
puttostring('text/xml', 2); // the body is not recognized, everything is printed void out
puttostream(in nsiout
putstream astream, in astring formattype, in acstring charsetoverride, in unsigned long flags); listener methods void addeditorobserver(in nsieditorobserver observer);obsolete since gecko 18 void seteditorobserver(in editactionlistener observer); void removeeditorobserver(in nsieditorobserver observer obsolete since gecko 18); void addeditactionlistener(in nsieditactionlistener listener); void remove...
nsIEditorIMESupport
handles the start of inline in
put composition.
... void begincomposition( in nstexteventreplyptr areply ); parameters areply endcomposition() obsolete since gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) handles the end of inline in
put composition.
...sets the inline in
put composition string.
nsIEditorSpellCheck
if the word is misspelled, it will com
pute the suggestions which you can get from getsuggestedword().
...this is faster than checkcurrentword() because it does not com
pute any suggestions.
...this also com
putes the suggestions which you can get by calling getsuggestedword().
nsIFeedProcessor
to create an instance, use: var feedprocessor = components.classes["@mozilla.org/feed-processor;1"] .createinstance(components.interfaces.nsifeedprocessor); method overview void parseasync(in nsirequestobserver requestobserver, in nsiuri uri); void parsefromstream(in nsiin
putstream stream, in nsiuri uri); void parsefromstring(in astring str, in nsiuri uri); attributes attribute type description listener nsifeedresultlistener the feed result listener that will respond to feed events.
... parsefromstream() parses a feed from an nsiin
putstream.
... void parsefromstream( in nsiin
putstream stream, in nsiuri uri ); parameters stream pointer to the nsiin
putstream from which to read and parse the feed.
nsIMsgDatabase
simsgdbhdr getmsghdrforkey(in nsmsgkey key); nsimsgdbhdr getmsghdrformessageid(in string messageid); boolean containskey(in nsmsgkey key); nsimsgdbhdr createnewhdr(in nsmsgkey key); void addnewhdrtodb(in nsimsgdbhdr newhdr, in boolean notify); nsimsgdbhdr copyhdrfromexistinghdr(in nsmsgkey key, in nsimsgdbhdr existinghdr, in boolean addhdrtodb); void listallkeys(in nsmsgkeyarrayref out
putkeys); native code only!
... defaultviewflags nsmsgviewflagstypevalue readonly: defaultsorttype nsmsgviewsorttypevalue readonly: defaultsortorder nsmsgviewsortordervalue readonly: msghdrcachesize unsigned long folderstream nsiout
putstream summaryvalid boolean methods open() opens a database folder.
... nsimsgdbhdr createnewhdr(in nsmsgkey key); addnewhdrtodb() void addnewhdrtodb(in nsimsgdbhdr newhdr, in boolean notify); copyhdrfromexistinghdr() nsimsgdbhdr copyhdrfromexistinghdr(in nsmsgkey key, in nsimsgdbhdr existinghdr, in boolean addhdrtodb); listallkeys() [noscript] void listallkeys(in nsmsgkeyarrayref out
putkeys); enumeratemessages() nsisimpleenumerator enumeratemessages(); enumeratethreads() nsisimpleenumerator enumeratethreads(); synccounts() count the total and unread msgs, and adjust global count if needed.
nsIMsgFilterList
ders readonly attribute acstring nsimsgfilterlist::arbitraryheaders shoulddownloadallheaders readonly attribute boolean nsimsgfilterlist::shoulddownloadallheaders filtercount readonly attribute unsigned long nsimsgfilterlist::filtercount loggingenabled attribute boolean nsimsgfilterlist::loggingenabled defaultfile attribute nsilocalfile nsimsgfilterlist::defaultfile logstream attribute nsiout
putstream nsimsgfilterlist::logstream logurl readonly attribute acstring nsimsgfilterlist::logurl methods getfilterat() nsimsgfilter nsimsgfilterlist::getfilterat (in unsigned long filterindex ) getfilternamed() nsimsgfilter nsimsgfilterlist::getfilternamed (in astring filtername) setfilterat() nsimsgfilter nsimsgfilterlist::setfilterat ( in unsigned long filterindex, in nsims...
...rtfilterat() void nsimsgfilterlist::insertfilterat ( in unsigned long filterindex, in nsimsgfilter filter ) movefilter() void nsimsgfilterlist::movefilter ( in nsimsgfilter filter, in nsmsgfiltermotionvalue motion ) createfilter() nsimsgfilter nsimsgfilterlist::createfilter ( in astring name ) savetofile() void nsimsgfilterlist::savetofile ( in nsiout
putstream stream ) parsecondition() void nsimsgfilterlist::parsecondition ( in nsimsgfilter afilter, in string condition ) savetodefaultfile() void nsimsgfilterlist::savetodefaultfile ( ) applyfilterstohdr() void nsimsgfilterlist::applyfilterstohdr ( in nsmsgfiltertypetype filtertype, in nsimsgdbhdr msghdr, in nsimsgfolder folder, in nsimsg...
...database db, in string headers, in unsigned long headersize, in nsimsgfilterhitnotify listener, in nsimsgwindow msgwindow, in nsilocalfile amessagefile ) writeinattr() void nsimsgfilterlist::writeintattr ( in nsmsgfilterfileattribvalue attrib, in long value, in nsiout
putstream stream ) writestrattr() void nsimsgfilterlist::writestrattr ( in nsmsgfilterfileattribvalue attrib, in string value, in nsiout
putstream stream ) writewstrattr() void nsimsgfilterlist::writewstrattr ( in nsmsgfilterfileattribvalue attrib, in string value, in nsiout
putstream stream ) mat...
nsIPluginHost
void newpluginnativewindow( out nspluginnativewindowptr apluginnativewindow ); parameters apluginnativewindow native code only!parsepostbuffertofixheaders this method parses post buffer to find out case insensitive "content-length" string and cr or lf some where after that, then it assumes there is http headers in the in
put buffer and continue to search for end of headers (crlfcrlf or lflf).
... it will *always malloc()* out
put buffer (caller is responsible to free it) if in
put buffer starts with lf, which comes from 4.x spec http://developer.netscape.com/docs/manuals/communicator/plugin/pgfn2.htm#1007754 "if no custom headers are required, simply add a blank line ('\n') to the beginning of the file or buffer.", it skips that '\n' and considers rest of the in
put buffer as data.
... if "content-length" string and end of headers is found it substitutes single lf with crlf in the headers, so the end of headers always will be crlfcrlf (single cr in headers, if any, remain untouched) else it
puts "content-length: "+size_of_data+crlfcrlf at the beginning of the out
put buffer and memcpy data to the out
put buffer.
nsIPromptService
return value true for ok, false for cancel confirmex()
puts up a dialog with up to 3 buttons and an optional, labeled checkbox.
...var prompts = components.classes["@mozilla.org/embedcomp/prompt-service;1"] .getservice(components.interfaces.nsipromptservice); var check = {value: false}; // default the checkbox to false var in
put = {value: "bob"}; // default the edit field to bob var result = prompts.prompt(null, "title", "what is your name?", in
put, null, check); // result is true if ok is pressed, false if cancel.
... in
put.value holds the value of the edit field if "ok" was pressed.
nsISHEntry
instance, use: var shentry = components.classes["@mozilla.org/browser/session-history-entry;1"] .createinstance(components.interfaces.nsishentry); method overview void addchildshell(in nsidocshelltreeitem shell); nsidocshelltreeitem childshellat(in long index); void clearchildshells(); nsishentry clone(); void create(in nsiuri uri, in astring title, in nsiin
putstream in
putstream, in nsilayouthistorystate layouthistorystate, in nsisupports cachekey, in acstring contenttype, in nsisupports owner, in unsigned long long docshellid, in boolean dynamiccreation); native code only!
... postdata nsiin
putstream post data for the document.
...void create( in nsiuri uri, in astring title, in nsiin
putstream in
putstream, in nsilayouthistorystate layouthistorystate, in nsisupports cachekey, in acstring contenttype, in nsisupports owner, in unsigned long long docshellid, in boolean dynamiccreation ); parameters uri title in
putstream layouthistorystate cachekey contenttype owner docshellid dynamiccreation violates the xpcom interface guidelines forgeteditordata() ...
nsIStackFrame
file parsers may
put the location of the file they were parsing, and so forth.
... example to out
put the stack at a particular location: var s = components.stack; while(s) { console.log(s.name); s = s.caller; } methods tostring() a generic formatter - make it suitable to print, and so forth.
...return value a string suitable for out
put.
nsITraceableChannel
/////// start - do not edit var {classes: cc, interfaces: ci, results: cr, constructor: cc, utils: cu} = components; cu.import('resource://gre/modules/services.jsm'); var binaryin
putstream = cc('@mozilla.org/binaryin
putstream;1', 'nsibinaryin
putstream', 'setin
putstream'); var binaryout
putstream = cc('@mozilla.org/binaryout
putstream;1', 'nsibinaryout
putstream', 'setout
putstream'); var storagestream = cc('@mozilla.org/storagestream;1', 'nsistoragestream', 'init'); function tracinglistener() { this.receivedchunks = []; // array for incoming data.
...tatuscode; this.deferreddone = { promise: null, resolve: null, reject: null }; this.deferreddone.promise = new promise(function(resolve, reject) { this.resolve = resolve; this.reject = reject; }.bind(this.deferreddone)); object.freeze(this.deferreddone); this.promisedone = this.deferreddone.promise; } tracinglistener.prototype = { ondataavailable: function(arequest, acontext, ain
putstream, aoffset, acount) { var istream = new binaryin
putstream(ain
putstream) // binaryain
putstream var sstream = new storagestream(8192, acount, null); // storagestream // not sure why its 8192 but thats how eveyrone is doing it, we should ask why var ostream = new binaryout
putstream(sstream.getout
putstream(0)); // binaryout
putstream // copy received data as they come.
... var data = istream.readbytes(acount); this.receivedchunks.push(data); ostream.writebytes(data, acount); this.originallistener.ondataavailable(arequest, acontext, sstream.newin
putstream(0), aoffset, acount); }, onstartrequest: function(arequest, acontext) { this.originallistener.onstartrequest(arequest, acontext); }, onstoprequest: function(arequest, acontext, astatuscode) { this.responsebody = this.receivedchunks.join(""); delete this.receivedchunks; this.responsestatus = astatuscode; this.originallistener.onstoprequest(arequest, acontext, astatuscode); this.deferreddone.resolve(); }, queryinterface: function(aiid) { if (aiid.equals(ci.nsistreamlistener) || aiid.equals(ci.nsisupports)) { return this; } throw cr.ns_nointerface; } }; var httpresponseobse...
nsIUTF8ConverterService
the most common case is the in
put is in 7bit non-ascii character sets like iso-2022-jp, hz or utf-7 (in its original form or a modified form used in imap folder names).
... aallowsubstitution when true, allow the decoder to substitute invalid in
put sequences by replacement characters.
...make sure that all characters outside us-ascii in your in
put spec are url-escaped if your spec is not in utf-8 (before url-escaping) because the presence of non-ascii characters is blindly regarded as an indication that your in
put spec is in unescaped utf-8 and it will be returned without further processing.
nsIUploadChannel
inherits from: nsisupports last changed in gecko 1.7 method overview void setuploadstream(in nsiin
putstream astream, in acstring acontenttype, in long acontentlength); attributes attribute type description uploadstream nsiin
putstream get the stream (to be) uploaded by this channel.
...most implementations of this interface require that the stream: implement threadsafe addref and release implement nsiin
putstream.readsegments() implement nsiseekablestream.seek().
...void setuploadstream( in nsiin
putstream astream, in acstring acontenttype, in long acontentlength ); parameters astream the stream to be uploaded by this channel.
nsIUploadChannel2
1.0 66 introduced gecko 1.9.2 inherits from: nsisupports last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) method overview void explicitsetuploadstream(in nsiin
putstream astream, in acstring acontenttype, in long long acontentlength, in acstring amethod, in boolean astreamhasheaders); methods explicitsetuploadstream() sets a stream to be uploaded by this channel with the specified content-type and content-length header values.
... most implementations of this interface require that the stream: implement threadsafe addref and release implement nsiin
putstream.readsegments() implement nsiseekablestream.seek().
... void explicitsetuploadstream( in nsiin
putstream astream, in acstring acontenttype, in long long acontentlength, in acstring amethod, in boolean astreamhasheaders ); parameters astream the stream to be uploaded by this channel.
nsIXULTemplateQueryProcessor
the reference point is important when generating out
put recursively, as the query will be the same for each iteration, however, the reference point will differ.
...the initializeforbuilding(), compilequery() and addbinding() methods may not be called after generateresults() has been called until the builder indicates that the generated out
put is being removed by calling the done() method.
...aexpr expression used to com
pute the value to assign.
nsIXULTemplateResult
the template builder will reprocess the template using this result as the reference point and generate out
put content that is expected to be inserted as children of the out
put generated for this result.
...hasbeenremoved() indicate that the out
put for a result has been removed and that the result is no longer being used by the builder.
...rulematched() indicate that a particular rule of a query has matched and that out
put will be generated for it.
XPCOM Interface Reference by grouping
browser autocomplete nsiautocompletecontroller nsiautocompletein
put nsiautocompletesearch console nsiconsolelistener nsiconsolemessage nsiconsoleservice document nsidocshell dom device nsidomgeogeolocation nsidomgeoposition nsidomgeopositionaddress nsidomgeopositioncallback nsidomgeopositioncoords nsidomgeopositionerror nsidomgeopositionerrorcallback nsidomgeopositionoptions nsidomg...
... filesystem nsidirectoryenumerator nsidirectoryiterator nsidirectoryservice nsidirectoryserviceprovider nsidirectoryserviceprovider2 nsidirindex nsidirindexlistener nsidirindexparser nsifile nsilocalfile stream nsiasyncin
putstream nsiasyncout
putstream nsiasyncstreamcopier nsibinaryin
putstream nsibinaryout
putstream nsicontentsniffer nsiconverterin
putstream nsifilein
putstream nsifileout
putstream nsiin
putstream nsiin
putstreamcallback nsiout
putstream nsiout
putstreamcallback ...
... nsiscriptablein
putstream nsistreamlistener url nsiioservice nsistandardurl user nsiprompt nsipromptservice zipfile nsizipentry nsizipreader nsizipreadercache nsizipwriter file nsifilepicker nsifileprotocolhandler nsifilespec nsifilestreams nsifileutilities nsifileview memory nsimemory network channel nsichannel nsichanneleventsink nsirequest ...
Storage
do not
put the :boundparametername within apostrophes, because that the binding mechanism does that for you.
...both of these methods have similar signatures that accept an object as in
put that receives notifications the execution of the statement(s).
... sqlite manager extension helps manage sqlite database files on your com
puter.
pyxpidl
generating c++ headers to generate c++ headers, use the header.py utility: sdkdir/sdk/bin/header.py --cachedir=<path> -o <out
putfilename.h> <filename.idl> generating typelibs generating typelib files is done using the typelib.py utility: sdkdir/sdk/bin/typelib.py --cachedir=<path> -o <out
putfilename.xpt> <filename.idl> comparing pyxpidl to xpidl this table provides a mapping of old xpidl options to pyxpidl.
... turn on warnings n/a (this is now the default and can't be turned off) -v verbose mode (nyi) n/a (feature removed) -t creates a typelib of a specific version number n/a (feature removed, and probably never actually worked) -i add an entry to start of include path for #include "nsifoo.idl" -i (unchanged) -o specify the base name for out
put (-o /tmp/nsifoo for example) -o out
putfile (this isn't just the base name, but needs to include the extension; for example -o /tmp/nsifoo.idl) -e specify an explicit out
put file name (-e /tmp/nsifoo.idl for example) n/a (this is subsumed by -o now) -d write dependencies (requires -e) -d (unchanged) -m specify out
put mode n/a (feature removed; use he...
...ader.py or typelib.py specifically) it's worth noting that the old out
put mode options for generating documentation and java interfaces (-m doc and -m java) have no equivalents in pyxpidl.
Address Book examples
for example, in order to register a load listener for a contact, the following should take place within the scope of the contact editor dialog: /* an example load listener for a contact * acard the nsiabcard being loaded * adocument a reference to the contact editor document */ function foo(acard, adocument) { // do something useful, like disabling // in
put fields that cards for this // address book type do not support.
...each photo handler must implement the following interface: /* * onload: function(acard, adocument): * called when the editor wants to populate the contact editor * in
put fields with information about acard's photo.
... * the onshow method should take the in
put fields in the document, * and render the requested photo in the img tag with id * atargetid.
Filelink Providers
example: <form id="provider-form" onsubmit="return false;"> <label for="username">username:</label> <in
put id="username" type="text" required="true" /> <label for="server">server:</label> <in
put id="server" type="text" required="true" /> <label for="port">port:</label> <in
put id="port" pattern="[0-9]+" required="true" /> </form> the form is expected to use html5 form validation.
... for each in
put event, the checkvalidity method of the form is automatically called.
... for example, the hightail implementation provides the following function: function extraargs() { var usernamevalue = document.getelementbyid("username").value; return { "username": {type: "char", value: usernamevalue}, }; } in this example, the username value is read from the in
put, and then the specially-crafted object is returned.
Declaring and Calling Functions
example: no in
put parameters in this example, we declare the libc clock() function, which returns the elapsed time since system startup, then fetch and out
put that value.
... const clock = lib.declare("clock", ctypes.default_abi, ctypes.unsigned_long); console.log("clocks since startup: " + clock()); the clock() function requires no in
put parameters; it simply returns an unsigned long.
... example: multiple in
put parameters this example declares the libc asctime() function, which converts a time structure into a string.
Streams - Plugins
the plug-in can set the out
put parameter type to one of these transmission modes: np_normal: (default): the plug-in can process the data progressively as it arrives from the network or file system through a series of calls to npp_writeready and npp_write.
... for streams that are not inherently seekable: the stream must be
put in np_seek mode initially, because the browser must cache all the stream data on disk in order to access it randomly.
...the browser creates a new npstream object and returns it to the plug-in as an out
put parameter.
Set event listener breakpoints - Firefox Developer Tools
now when a keydown, keyup, keypress, or in
put event occurs, execution will pause as soon as it enters the listener code.
...text in
put, which can also be found at the top of the event listener breakpoints list.
... when you click in this in
put and type a search term, the list of event listener types will filter by that term allowing you to find the events you want to break on more easily.
Tutorial: Show Allocations Per Call Path - Firefox Developer Tools
plot(log); } function handleuncaughtexception(ex) { console.log('debugger hook threw:'); console.log(ex.tostring()); console.log('stack:'); console.log(ex.stack); }; function plot(log) { // given the log, com
pute a map from allocation sites to // allocation counts.
... site = components.utils.waivexrays(site.frame); if (!counts.has(site)) counts.set(site, 0); counts.set(site, counts.get(site) + 1); } // walk from each site that allocated something up to the // root, com
puting allocation totals that include // children.
... var totals = new map; for (let [site, count] of counts) { for(;;) { if (!totals.has(site)) totals.set(site, 0); totals.set(site, totals.get(site) + count); if (!site) break; site = site.parent; } } // com
pute parent-to-child links, since saved stack frames // have only parent links.
Index - Firefox Developer Tools
81 paint flashing tool web performance the paint flashing tool, when activated, highlights the part of a page that the browser needs to repaint in response to some in
put: for example, the user moving the mouse or scrolling.
... 149 rich out
put when the web console prints objects, it includes a richer set of information than just the object's name.
... 151 the javascript in
put interpreter debugging, web development, web console you can interpret javascript expressions in real time using the interpreter provided by the web console.
All keyboard shortcuts - Firefox Developer Tools
show/hide more information about current property (com
puted view only, when a property is selected) enter or space return or space enter or space open mdn reference page about current property (com
puted view only, when a property is selected) f1 f1 f1 open current css file in style editor (com
puted view only, when more information is shown for a property and a css file reference is focused).
...ole ctrl + shift + k cmd + opt + k ctrl + shift + k search in the message display pane ctrl + f cmd + f ctrl + f open the object inspector pane ctrl + click ctrl + click ctrl + click clear the object inspector pane esc esc esc focus on the command line ctrl + shift + k cmd + opt + k ctrl + shift + k clear out
put ctrl + shift + l ctrl + l from firefox 67: cmd + k ctrl + shift + l command line interpreter these shortcuts apply when you're in the command line interpreter.
... command windows macos linux scroll to start of console out
put (only if the command line is empty) home home home scroll to end of console out
put (only if the command line is empty) end end end page up through console out
put page up page up page up page down through console out
put page down page down page down go backward through command history up arrow up arrow up arrow go forward through command history down arrow down arrow down arrow initiate reverse search through command history/step backwards through matching commands f9 ctrl + r f9 step forward through matching command history (after initiating reverse search) shift + f9 ctrl ...
Edit fonts - Firefox Developer Tools
changing the unit of measure converts the numerical value to its equivalent in the new unit, so the same com
puted value is maintained.
... the url to the font file in the case of web fonts not available on your system, or "system" in the case of fonts loaded from your com
puter (either default system fonts, or web fonts that you've also got installed on your system).
...the default text for the sample is "abc" but the preview text can be edited by clicking on the in
put field at the top of the section and entering a new value.
Paint Flashing Tool - Firefox Developer Tools
the paint flashing tool, when activated, highlights the part of a page that the browser needs to repaint in response to some in
put: for example, the user moving the mouse or scrolling.
...this can then cause a site to be slow responding to user in
put (also known as "janky").
...but if the style were com
putationally expensive to paint, they might.
Settings - Firefox Developer Tools
it makes visible the command line and one or two lines of the console out
put.
...there's just one of these: enable persistent logs a setting to control whether or not the web console and network monitor clear their out
put when you navigate to a new page.
...note that this setting is independent of the "browser styles" checkbox in the inspector's com
puted view.
AudioParamDescriptor - Web APIs
there we've created a simple node which out
puts white noise.
... here, additionally, we'll create a custom gain parameter, so we can directly change volume of the out
put (although you could use gainnode to achieve this as well).
... // white-noise-processor.js class whitenoiseprocessor extends audioworkletprocessor { static get parameterdescriptors () { return [{ name: 'customgain', defaultvalue: 1, minvalue: 0, maxvalue: 1, automationrate: 'a-rate' }] } process (in
puts, out
puts, parameters) { const out
put = out
puts[0] out
put.foreach(channel => { for (let i = 0; i < channel.length; i++) { channel[i] = (math.random() * 2 - 1) * (parameters['customgain'].length > 1 ?
AudioWorkletGlobalScope - Web APIs
examples in this example we out
put all global properties into the console in the constructor of a custom audioworkletprocessor.
... // test-processor.js class testprocessor extends audioworkletprocessor { constructor () { super() // current sample-frame and time at the moment of instantiation // to see values change, you can
put these two lines in process method console.log(currentframe) console.log(currenttime) } // the process method is required - simply out
put silence, // which the out
puts are already filled with process (in
puts, out
puts, parameters) { return true } } // the sample rate is not going to change ever, // because it's a read-only property of a baseaudiocontext // and is set only during its instantiation console.log(samplerate) // you can declare any variables an...
...we should see the out
put of console.log calls in the console: const audiocontext = new audiocontext() await audiocontext.audioworklet.addmodule('test-processor.js') const testnode = new audioworkletnode(audiocontext, 'test-processor') testnode.connect(audiocontext.destination) specifications specification status comment web audio apithe definition of 'audioworkletglobalscope' in that specifica...
AudioWorkletNode.parameters - Web APIs
there we've created a simple node which out
puts white noise.
... here, additionally, we'll create a custom gain parameter, so we can directly change volume of the out
put (although you could use gainnode to achieve this as well).
... // white-noise-processor.js class whitenoiseprocessor extends audioworkletprocessor { static get parameterdescriptors () { return [{ name: 'customgain', defaultvalue: 1, minvalue: 0, maxvalue: 1, automationrate: 'a-rate' }] } process (in
puts, out
puts, parameters) { const out
put = out
puts[0] out
put.foreach(channel => { for (let i = 0; i < channel.length; i++) { channel[i] = (math.random() * 2 - 1) * (parameters['customgain'].length > 1 ?
AudioWorkletNode.port - Web APIs
examples to demonstrate bidirectional communication capabilities, we'll create an audioworkletprocessor, which will out
put silence and respond to ping requests from its audioworkletnode.
... // ping-pong-processor.js class pingpongprocessor extends audioworkletprocessor { constructor (...args) { super(...args) this.port.onmessage = (e) => { console.log(e.data) this.port.postmessage('pong') } } process (in
puts, out
puts, parameters) { return true } } registerprocessor('ping-pong-processor', pingpongprocessor) now in our main scripts file we'll load the processor, create an instance of audioworkletnode passing the name of the processor, and connect the node to an audio graph.
...ng-pong-processor.js') const pingpongnode = new audioworkletnode(audiocontext, 'ping-pong-processor') // send the message containing 'ping' string // to the audioworkletprocessor from the audioworkletnode every second setinterval(() => pingpongnode.port.postmessage('ping'), 1000) pingpongnode.port.onmessage = (e) => console.log(e.data) pingpongnode.connect(audiocontext.destination) this will out
put "ping" and "pong" strings to the console every second.
AudioWorkletProcessor.parameterDescriptors (static getter) - Web APIs
there we've created a simple node which out
puts white noise.
... here, additionally, we'll create a custom gain parameter, so we can directly change volume of the out
put (although you could use gainnode to achieve this as well).
... // white-noise-processor.js class whitenoiseprocessor extends audioworkletprocessor { static get parameterdescriptors () { return [{ name: 'customgain', defaultvalue: 1, minvalue: 0, maxvalue: 1, automationrate: 'a-rate' }] } process (in
puts, out
puts, parameters) { const out
put = out
puts[0] out
put.foreach(channel => { for (let i = 0; i < channel.length; i++) { channel[i] = (math.random() * 2 - 1) * (parameters['customgain'].length > 1 ?
AudioWorkletProcessor.port - Web APIs
examples to demonstrate bidirectional communication capabilities, we'll create an audioworkletprocessor, which will out
put silence and respond to ping requests from its audioworkletnode.
... // ping-pong-processor.js class pingpongprocessor extends audioworkletprocessor { constructor (...args) { super(...args) this.port.onmessage = (e) => { console.log(e.data) this.port.postmessage('pong') } } process (in
puts, out
puts, parameters) { return true } } registerprocessor('ping-pong-processor', pingpongprocessor) now in our main scripts file we'll load the processor, create an instance of audioworkletnode passing the name of the processor, and connect the node to an audio graph.
...ng-pong-processor.js') const pingpongnode = new audioworkletnode(audiocontext, 'ping-pong-processor') // send the message containing 'ping' string // to the audioworkletprocessor from the audioworkletnode every second setinterval(() => pingpongnode.port.postmessage('ping'), 1000) pingpongnode.port.onmessage = (e) => console.log(e.data) pingpongnode.connect(audiocontext.destination) this will out
put "ping" and "pong" strings to the console every second.
BaseAudioContext.decodeAudioData() - Web APIs
usually you'll want to
put the decoded data into an audiobuffersourcenode, from which it can be played and manipulated how you want.
...we then pass this buffer into a decodeaudiodata() function; the success callback takes the successfully decoded pcm data,
puts it into an audiobuffersourcenode created using audiocontext.createbuffersource(), connects the source to the audiocontext.destination and sets it to loop.
...// then we
put the buffer into the source function getdata() { source = audioctx.createbuffersource(); var request = new xmlhttprequest(); request.open('get', 'viper.ogg', true); request.responsetype = 'arraybuffer'; request.onload = function() { var audiodata = request.response; audioctx.decodeaudiodata(audiodata, function(buffer) { source.buffer = buffer; source.connec...
CacheStorage.match() - Web APIs
if not, open the v1 cache using open(),
put the default network request in the cache using cache.
put() and return a clone of the default network request using return response.clone().
... the last is necessary because
put() consumes the response body.
...tch', function(event) { event.respondwith(caches.match(event.request).then(function(response) { // caches.match() always resolves // but in case of success response will have value if (response !== undefined) { return response; } else { return fetch(event.request).then(function (response) { // response may be used only once // we need to save clone to
put one copy in cache // and serve second one let responseclone = response.clone(); caches.open('v1').then(function (cache) { cache.
put(event.request, responseclone); }); return response; }).catch(function () { return caches.match('/sw-test/gallery/mylittlevader.jpg'); }); } })); }); specifications specification ...
CanvasPattern.setTransform() - Web APIs
matrix = svg1.createsvgmatrix(); var img = new image(); img.src = 'https://mdn.mozillademos.org/files/222/canvas_createpattern.png'; img.onload = function() { var pattern = ctx.createpattern(img, 'repeat'); pattern.settransform(matrix.rotate(-45).scale(1.5)); ctx.fillstyle = pattern; ctx.fillrect(0, 0, 400, 400); }; note that newer browser versions started to support dommatrix as an in
put to settransform(), so for example you could replace the svgmatrix in the above example with the following: const matrix = new dommatrix([1, .2, .8, 1, 0, 0]); edit the code below and see your changes update live in the canvas: playable code <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <svg id="svg1" style="display:none"></svg> <div class="playable-buttons"> ...
... <in
put id="edit" type="button" value="edit" /> <in
put id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code" style="height:120px"> var img = new image(); img.src = 'https://mdn.mozillademos.org/files/222/canvas_createpattern.png'; img.onload = function() { var pattern = ctx.createpattern(img, 'repeat'); pattern.settransform(matrix.rotate(-45).scale(1.5)); ctx.fillstyle = pattern; ctx.fillrect(0, 0, 400, 400); };</textarea> var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var textarea = document.getelementbyid('code'); var reset = document.getelementbyid('reset'); var edit = document.getelementbyid('edit'); var code = textarea.value; var svg1 = document.getelementbyid('svg1'); var matrix = svg1.createsvgmatrix...
...(); function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener('click', function() { textarea.focus(); }) textarea.addeventlistener('in
put', drawcanvas); window.addeventlistener('load', drawcanvas); specifications specification status comment html living standardthe definition of 'canvaspattern.settransform' in that specification.
CanvasRenderingContext2D.filter - Web APIs
a value of 0 leaves the in
put unchanged.
...a value of 0% will create an image that is completely black, while a value of 100% leaves the in
put unchanged.
...a value of 0deg leaves the in
put unchanged.
ChannelSplitterNode.ChannelSplitterNode() - Web APIs
the channelsplitternode() constructor of the web audio api creates a new channelsplitternode object instance, representing a node that splits the in
put into a separate out
put for each of the source node's audio channels.
... options optional a channelsplitteroptions dictionary object defining the properties you want the channelsplitternode to have (it also inherits the options defined in the audionodeoptions dictionary): numberofout
puts: a number defining the number of in
puts the channelsplitternode should have.
... example var ac = new audiocontext(); var options = { numberofout
puts : 2 } var mysplitter = new channelsplitternode(ac, options); specifications specification status comment web audio apithe definition of 'channelsplitternode' in that specification.
console.count() - Web APIs
if supplied, count() out
puts the number of times it has been called with that label.
... examples for example, given code like this: let user = ""; function greet() { console.count(); return "hi " + user; } user = "bob"; greet(); user = "alice"; greet(); greet(); console.count(); console out
put will look something like this: "default: 1" "default: 2" "default: 3" "default: 4" the label is displayed as default because no explicit label was supplied.
... if we pass the user variable as the label argument to the first invocation of count(), and the string "alice" to the second: let user = ""; function greet() { console.count(user); return "hi " + user; } user = "bob"; greet(); user = "alice"; greet(); greet(); console.count("alice"); we will see out
put like this: "bob: 1" "alice: 1" "alice: 2" "alice: 3" we're now maintaining separate counts based only on the value of label.
DOMTokenList - Web APIs
such a set is returned by element.classlist, htmllinkelement.rellist, htmlanchorelement.rellist, htmlareaelement.rellist, htmliframeelement.sandbox, or htmlout
putelement.htmlfor.
... first, the html: <p class="a b c"></p> now the javascript: let para = document.queryselector("p"); let classes = para.classlist; para.classlist.add("d"); para.textcontent = `paragraph classlist is "${classes}"`; the out
put looks like this: trimming of whitespace and removal of duplicates methods that modify the domtokenlist (such as domtokenlist.add()) automatically trim any excess whitespace and remove duplicate values from the list.
... for example: <span class=" d d e f"></span> let span = document.queryselector("span"); let classes = span.classlist; span.classlist.add("x"); span.textcontent = `span classlist is "${classes}"`; the out
put looks like this: specifications specification status comment domthe definition of 'domtokenlist' in that specification.
DataTransferItem.webkitGetAsEntry() - Web APIs
example in this example, a drop zone is created, which responds to the drop event by scanning through the dropped files and directories, out
putting a hierarchical directory listing.
...this function takes as in
put a filesystementry representing an entry in the file system to be scanned and processed (the item parameter), and an element into which to insert the list of contents (the container parameter).
...find some files and directories and drag them in, and take a look at the resulting out
put.
Document.forms - Web APIs
note: similarly, you can access a list of a form's component user in
put elements using the htmlformelement.elements property.
... examples getting form information <!doctype html> <html lang="en"> <head> <title>document.forms example</title> </head> <body> <form id="robby"> <in
put type="button" onclick="alert(document.forms[0].id);" value="robby's form" /> </form> <form id="dave"> <in
put type="button" onclick="alert(document.forms[1].id);" value="dave's form" /> </form> <form id="paul"> <in
put type="button" onclick="alert(document.forms[2].id);" value="paul's form" /> </form> </body> </html> getting an element from within a form var selectform = document.forms[in...
...dex]; var selectformelement = document.forms[index].elements[index]; named form access <!doctype html> <html lang="en"> <head> <title>document.forms example</title> </head> <body> <form name="login"> <in
put name="email" type="email"> <in
put name="password" type="password"> <button type="submit">log in</button> </form> <script> var loginform = document.forms.login; // or document.forms['login'] loginform.elements.email.placeholder = 'test@example.com'; loginform.elements.password.placeholder = 'password'; </script> </body> </html> specifications specification status comment html living standardthe definition of 'document.forms' in that specification.
Document - Web APIs
globaleventhandlers.onauxclick an eventhandler called when an auxclick event is sent, indicating that a non-primary button has been pressed on an in
put device (e.g.
... globaleventhandlers.onin
put is an eventhandler representing the code to be called when the in
put event is raised.
... document.in
putencoding read only alias of document.characterset.
Traversing an HTML table with JavaScript and DOM Interfaces - Web APIs
example: creating an html table dynamically (sample1.html) html <in
put type="button" value="generate a table." onclick="generate_table()"> javascript function generate_table() { // get the reference for the body var body = document.getelementsbytagname("body")[0]; // creates a <table> element and a <tbody> element var tbl = document.createelement("table"); var tblbody = document.createelement("tbody"); // creating all cells for (var i = 0; i < 2; ...
...i++) { // creates a table row var row = document.createelement("tr"); for (var j = 0; j < 2; j++) { // create a <td> element and a text node, make the text // node the contents of the <td>, and
put the <td> at // the end of the table row var cell = document.createelement("td"); var celltext = document.createtextnode("cell in row "+i+", column "+j); cell.appendchild(celltext); row.appendchild(cell); } // add the row to the end of the table body tblbody.appendchild(row); } //
put the <tbody> in the <table> tbl.appendchild(tblbody); // appends <table> into <body> body.appendchild(tbl); // sets the border attribute of tbl to 2; tbl.setattribute("border", "2"); } note the order in which we created the elements an...
... html <body> <in
put type="button" value="set paragraph background color" onclick="set_background()"> <p>hi</p> <p>hello</p> </body> javascript function set_background() { // get a list of all the body elements (there will only be one), // and then select the zeroth (or first) such element mybody = document.getelementsbytagname("body")[0]; // now, get all the p elements that are descendants of the body...
DynamicsCompressorNode - Web APIs
dynamicscompressornode is an audionode that has exactly one in
put and one out
put; it is created using the audiocontext.createdynamicscompressor() method.
... number of in
puts 1 number of out
puts 1 channel count mode "clamped-max" channel count 2 channel interpretation "speakers" constructor dynamicscompressornode() creates a new instance of an dynamicscompressornode object.
... dynamicscompressornode.ratio read only is a k-rate audioparam representing the amount of change, in db, needed in the in
put for a 1 db change in the out
put.
Element: keydown event - Web APIs
keyboard events are only generated by <in
puts>, <textarea> and anything with the contenteditable attribute or with tabindex="-1".
...o something like this (229 is a special value set for a keycode relating to an event that has been processed by an ime): eventtarget.addeventlistener("keydown", event => { if (event.iscomposing || event.keycode === 229) { return; } // do something }); examples addeventlistener keydown example this example logs the keyboardevent.code value whenever you press down a key inside the <in
put> element.
... <in
put placeholder="click here, then press down a key." size="40"> <p id="log"></p> const in
put = document.queryselector('in
put'); const log = document.getelementbyid('log'); in
put.addeventlistener('keydown', logkey); function logkey(e) { log.textcontent += ` ${e.code}`; } onkeydown equivalent in
put.onkeydown = logkey; specifications specification status ui events working draft ...
Element: keypress event - Web APIs
since this event has been deprecated, you should look to use beforein
put or keydown instead.
... interface keyboardevent bubbles yes cancelable yes default action varies: keypress event; launch text composition system; blur and focus events; domactivate event; other event examples addeventlistener keypress example this example logs the keyboardevent.code value whenever you press a key after focussing the <in
put> element.
... <div> <label for="sample">focus the in
put and type something:</label> <in
put type="text" name="text" id="sample"> </div> <p id="log"></p> const log = document.getelementbyid('log'); const in
put = document.queryselector('in
put'); in
put.addeventlistener('keypress', logkey); function logkey(e) { log.textcontent += ` ${e.code}`; } onkeypress equivalent in
put.onkeypress = logkey; specifications specification status ui events working draft ...
Element.scrollHeight - Web APIs
element.scrollheight - element.scrolltop === element.clientheight when the container does not scroll, but has overflowing children, these checks determine if the container can scroll: window.getcom
putedstyle(element).overflowy === 'visible' window.getcom
putedstyle(element).overflowy !== 'hidden' scrollheight demo associated with the onscroll event, this equivalence can be useful to determine whether a user has read a text or not (see also the element.scrolltop and element.clientheight properties).
...cras vul
putate libero sed arcu iaculis nec lobortis orci fermentum.
... </textarea> </p> <p> <in
put type="checkbox" id="agree" name="accept" /> <label for="agree">i agree</label> <in
put type="submit" id="nextstep" value="next" /> </p> </form> css #notice { display: inline-block; margin-bottom: 12px; border-radius: 5px; width: 600px; padding: 5px; border: 2px #7fdf55 solid; } #rules { width: 600px; height: 130px; padding: 5px; border: #2a9f00 solid 2px; border-radius: 5px; } javascript function checkreading () { if (checkreading.read) { return; } checkreading.read = this.scrollheight - this.scrolltop === this.clientheight; document.registration.accept.disabled = document.getelementbyid("nextstep").disabled = !checkreading.read; checkreading.noticebox.innerhtml = checkreading.read ?
ElementCSSInlineStyle.style - Web APIs
to get the values of all css properties for an element you should use window.getcom
putedstyle() instead.
... the following code snippet demonstrates the difference between the values obtained using the element's style property and that obtained using the getcom
putedstyle() method: <!doctype html> <html> <body style="font-weight:bold;"> <div style="color:red" id="myelement">..</div> </body> </html> var element = document.getelementbyid("myelement"); var out = ""; var elementstyle = element.style; var com
putedstyle = window.getcom
putedstyle(element, null); for (prop in elementstyle) { if (elementstyle.hasownproperty(prop)) { out += " " + prop + " = '" + elementstyle[prop] + "' > '" + com
putedstyle[prop] + "'\n"; } } console.log(out) the out
put would be something like: ...
... note the presence of the value bold for font-weight in the com
puted style and the absence of it in the element's style property specifications specification status comment css object model (cssom)the definition of 'the elementcssinlinestyle.style property' in that specification.
Event.preventDefault() - Web APIs
this example demonstrates how to prevent that from happening: javascript document.queryselector("#id-checkbox").addeventlistener("click", function(event) { document.getelementbyid("out
put-box").innerhtml += "sorry!
... <code>preventdefault()</code> won't let you check this!<br>"; event.preventdefault(); }, false); html <p>please click on the checkbox control.</p> <form> <label for="id-checkbox">checkbox:</label> <in
put type="checkbox" id="id-checkbox"/> </form> <div id="out
put-box"></div> result stopping keystrokes from reaching an edit field the following example demonstrates how invalid text in
put can be stopped from reaching the in
put field with preventdefault().
... html here's the form: <div class="container"> <p>please enter your name using lowercase letters only.</p> <form> <in
put type="text" id="my-textbox"> </form> </div> css we use a little bit of css for the warning box we'll draw when the user presses an invalid key: .warning { border: 2px solid #f39389; border-radius: 2px; padding: 10px; position: absolute; background-color: #fbd8d4; color: #3b3c40; } javascript and here's the javascript code that does the job.
File.webkitRelativePath - Web APIs
the file.webkitrelativepath is a read-only property that contains a usvstring which specifies the file's path relative to the directory selected by the user in an <in
put> element with its webkitdirectory attribute set.
... html content <in
put type="file" id="filepicker" name="filelist" webkitdirectory multiple /> <ul id="listing"></ul> javascript content document.getelementbyid("filepicker").addeventlistener("change", function(event) { let out
put = document.getelementbyid("listing"); let files = event.target.files; for (let i=0; i<files.length; i++) { let item = document.createelement("li"); item.innerhtml = files[i].
...webkitrelativepath; out
put.appendchild(item); }; }, false); result specifications specification status comment file and directory entries apithe definition of 'webkitrelativepath' in that specification.
FileReader: abort event - Web APIs
bubbles no cancelable no interface progressevent event handler property filereader.onabort examples live example html <div class="example"> <div class="file-select"> <label for="avatar">choose a profile picture:</label> <in
put type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </div> <img src="" class="preview" height="200" alt="image preview..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css img.preview { margin: 1rem 0; } .event-log-contents { wi...
... height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid-area: select; } .preview { grid-area: preview; } .event-log { grid-area: log; } .event-log>label { display: block; } .event-log-contents { resize: none; } js const filein
put = document.queryselector('in
put[type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") { preview.src = reader.r...
...er.addeventlistener('loadstart', handleevent); reader.addeventlistener('load', handleevent); reader.addeventlistener('loadend', handleevent); reader.addeventlistener('progress', handleevent); reader.addeventlistener('error', handleevent); reader.addeventlistener('abort', handleevent); } function handleselected(e) { eventlog.textcontent = ''; const selectedfile = filein
put.files[0]; if (selectedfile) { addlisteners(reader); reader.readasdataurl(selectedfile); } reader.abort(); } filein
put.addeventlistener('change', handleselected); result specifications specification status file api working draft ...
FileReader: load event - Web APIs
bubbles no cancelable no interface progressevent event handler property filereader.onload examples live example html <div class="example"> <div class="file-select"> <label for="avatar">choose a profile picture:</label> <in
put type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </div> <img src="" class="preview" height="200" alt="image preview..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5rem; bor...
...der: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid-area: select; } .preview { grid-area: preview; } .event-log { grid-area: log; } .event-log>label { display: block; } .event-log-contents { resize: none; } js const filein
put = document.queryselector('in
put[type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") { preview.src = reader.result; } } functi...
...er.addeventlistener('loadstart', handleevent); reader.addeventlistener('load', handleevent); reader.addeventlistener('loadend', handleevent); reader.addeventlistener('progress', handleevent); reader.addeventlistener('error', handleevent); reader.addeventlistener('abort', handleevent); } function handleselected(e) { eventlog.textcontent = ''; const selectedfile = filein
put.files[0]; if (selectedfile) { addlisteners(reader); reader.readasdataurl(selectedfile); } } filein
put.addeventlistener('change', handleselected); result specifications specification status file api working draft ...
FileReader: loadend event - Web APIs
bubbles no cancelable no interface progressevent event handler property filereader.onloadend examples live example html <div class="example"> <div class="file-select"> <label for="avatar">choose a profile picture:</label> <in
put type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </div> <img src="" class="preview" height="200" alt="image preview..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; ...
...height: 5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid-area: select; } .preview { grid-area: preview; } .event-log { grid-area: log; } .event-log>label { display: block; } .event-log-contents { resize: none; } js const filein
put = document.queryselector('in
put[type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") { preview.src = reader.resu...
...er.addeventlistener('loadstart', handleevent); reader.addeventlistener('load', handleevent); reader.addeventlistener('loadend', handleevent); reader.addeventlistener('progress', handleevent); reader.addeventlistener('error', handleevent); reader.addeventlistener('abort', handleevent); } function handleselected(e) { eventlog.textcontent = ''; const selectedfile = filein
put.files[0]; if (selectedfile) { addlisteners(reader); reader.readasdataurl(selectedfile); } } filein
put.addeventlistener('change', handleselected); result specifications specification status file api working draft ...
FileReader: loadstart event - Web APIs
bubbles no cancelable no interface progressevent event handler property filereader.onloadstart examples live example html <div class="example"> <div class="file-select"> <label for="avatar">choose a profile picture:</label> <in
put type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </div> <img src="" class="preview" height="200" alt="image preview..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; height: 5re...
...m; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid-area: select; } .preview { grid-area: preview; } .event-log { grid-area: log; } .event-log>label { display: block; } .event-log-contents { resize: none; } js const filein
put = document.queryselector('in
put[type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") { preview.src = reader.result; } }...
...er.addeventlistener('loadstart', handleevent); reader.addeventlistener('load', handleevent); reader.addeventlistener('loadend', handleevent); reader.addeventlistener('progress', handleevent); reader.addeventlistener('error', handleevent); reader.addeventlistener('abort', handleevent); } function handleselected(e) { eventlog.textcontent = ''; const selectedfile = filein
put.files[0]; if (selectedfile) { addlisteners(reader); reader.readasdataurl(selectedfile); } } filein
put.addeventlistener('change', handleselected); result specifications specification status file api working draft ...
FileReader: progress event - Web APIs
bubbles no cancelable no interface progressevent event handler property filereader.onprogress examples live example html <div class="example"> <div class="file-select"> <label for="avatar">choose a profile picture:</label> <in
put type="file" id="avatar" name="avatar" accept="image/png, image/jpeg"> </div> <img src="" class="preview" height="200" alt="image preview..."> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents"></textarea> </div> </div> css img.preview { margin: 1rem 0; } .event-log-contents { width: 18rem; height: ...
...5rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .example { display: grid; grid-template-areas: "select log" "preview log"; } .file-select { grid-area: select; } .preview { grid-area: preview; } .event-log { grid-area: log; } .event-log>label { display: block; } .event-log-contents { resize: none; } js const filein
put = document.queryselector('in
put[type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") { preview.src = reader.result; ...
...er.addeventlistener('loadstart', handleevent); reader.addeventlistener('load', handleevent); reader.addeventlistener('loadend', handleevent); reader.addeventlistener('progress', handleevent); reader.addeventlistener('error', handleevent); reader.addeventlistener('abort', handleevent); } function handleselected(e) { eventlog.textcontent = ''; const selectedfile = filein
put.files[0]; if (selectedfile) { addlisteners(reader); reader.readasdataurl(selectedfile); } } filein
put.addeventlistener('change', handleselected); result specifications specification status file api working draft ...
FileSystemDirectoryEntry.getDirectory() - Web APIs
receives as its sole in
put parameter a fileerror object describing the error which occurred.
...refox for androidopera for androidsafari on iossamsung internetgetdirectory experimentalchrome full support 8edge full support 79firefox full support 50notes full support 50notes notes in firefox, the errorcallback's in
put parameter is a domexception rather than a fileerror object.ie no support noopera no support nosafari full support 11.1webview android full support ≤37chrome android full support ...
... 18firefox android full support 50notes full support 50notes notes in firefox, the errorcallback's in
put parameter is a domexception rather than a fileerror object.opera android no support nosafari ios full support 11.3samsung internet android full support yeslegend full support full support no support no supportexperimental.
FileSystemDirectoryEntry.getFile() - Web APIs
receives as its sole in
put parameter a fileerror object describing the error which occurred.
...oidfirefox for androidopera for androidsafari on iossamsung internetgetfile experimentalchrome full support 8edge full support 79firefox full support 50notes full support 50notes notes in firefox, the errorcallback's in
put parameter is a domexception rather than a fileerror object.ie no support noopera no support nosafari full support 11.1webview android full support ≤37chrome android full support ...
... 18firefox android full support 50notes full support 50notes notes in firefox, the errorcallback's in
put parameter is a domexception rather than a fileerror object.opera android no support nosafari ios full support 11.3samsung internet android full support yeslegend full support full support no support no supportexperimental.
FileSystemDirectoryEntry - Web APIs
d full support yesgetdirectory experimentalchrome full support 8edge full support 79firefox full support 50notes full support 50notes notes in firefox, the errorcallback's in
put parameter is a domexception rather than a fileerror object.ie no support noopera no support nosafari full support 11.1webview android full support ≤37chrome android full support ...
... 18firefox android full support 50notes full support 50notes notes in firefox, the errorcallback's in
put parameter is a domexception rather than a fileerror object.opera android no support nosafari ios full support 11.3samsung internet android full support yesgetfile experimentalchrome full support 8edge full support 79firefox full support 50notes full support 50notes notes in firefox, th...
...e errorcallback's in
put parameter is a domexception rather than a fileerror object.ie no support noopera no support nosafari full support 11.1webview android full support ≤37chrome android full support 18firefox android full support 50notes full support 50notes notes in firefox, the errorcallback's in
put parameter is a domexception rather than a fileerror object.opera android no support nosafari ios full support ...
FileSystemFileEntry.createWriter() - Web APIs
this callback receives as in
put a fileerror object describing the error.
... example this example establishes a method, writetofileentry(), which out
puts a text string to the file corresponding to the passed-in directory entry.
...this blob is then out
put to the filewriter object to be written to the file.
File and Directory Entries API - Web APIs
only for accessing files which are selected by the user in a file <in
put> element (see htmlin
putelement as well) or when a file or directory is provided to the web site or app using drag and drop.
... the htmlin
putelement.webkitentries property lets you access the filesystemfileentry objects for the currently selected files, but only if they are dragged-and-dropped onto the file chooser (bug 1326031).
... if htmlin
putelement.webkitdirectory is true, the <in
put> element is instead a directory picker, and you get filesystemdirectoryentry objects for each selected directory.
GlobalEventHandlers.onchange - Web APIs
note: unlike onin
put, the onchange event handler is not necessarily called for each alteration to an element's value.
... example this example logs the number of characters in an <in
put> element, every time you modify its contents and then change focus away from it.
... html <in
put type="text" placeholder="type something here, then click outside of the field." size="50"> <p id="log"></p> javascript let in
put = document.queryselector('in
put'); let log = document.getelementbyid('log'); in
put.onchange = handlechange; function handlechange(e) { log.textcontent = `the field's value is ${e.target.value.length} character(s) long.`; } result specification specification status comment html living standardthe definition of 'onchange' in that specification.
GlobalEventHandlers.onfocus - Web APIs
for onfocus to fire on non-in
put elements, they must be given the tabindex attribute (see building keyboard accessibility back in for more details).
... example this example uses onblur and onfocus to change the text within an <in
put> element.
... html <in
put type="text" value="click here"> javascript let in
put = document.queryselector('in
put'); in
put.onblur = in
putblur; in
put.onfocus = in
putfocus; function in
putblur() { in
put.value = 'focus has been lost'; } function in
putfocus() { in
put.value = 'focus is here'; } result try clicking in and out of the form field, and watch its contents change accordingly.
HTMLCanvasElement.mozFetchAsStream() - Web APIs
the htmlcanvaselement.mozfetchasstream() internal method used to create a new in
put stream that, when ready, would provide the contents of the canvas as image data.
... syntax void canvas.mozfetchasstream(callback, type); parameters callback an nsiin
putstreamcallback.
...lcallback = function() { return function(result) { if (!components.issuccesscode(result)) { alert('failed to create icon'); } else { alert('succesfully made'); } }; } var mfascallback = function(iconname) { return function(instream) { var file = fileutils.getfile('desk', [iconname + '.ico']); var outstream = fileutils.openfileout
putstream(file); cu.import('resource://gre/modules/netutil.jsm'); netutil.asynccopy(instream, outstream, netutilcallback()); } } canvas.mozfetchasstream(mfascallback('myicon'), 'image/vnd.microsoft.icon'); specifications not part of any specification.
HTMLFormElement.elements - Web APIs
the elements included by htmlformelement.elements and htmlformelement.length are the following: <button> <fieldset> <in
put> (with the exception that any whose type is "image" are omitted for historical reasons) <object> <out
put> <select> <textarea> no other elements are included in the list returned by elements, which makes it an excellent way to get at the elements most important when processing forms.
... <form id="my-form"> <in
put type="text" name="username"> <in
put type="text" name="full-name"> <in
put type="password" name="password"> </form> var in
puts = document.getelementbyid("my-form").elements; var in
putbyindex = in
puts[0]; var in
putbyname = in
puts["username"]; accessing form controls this example gets the form's element list, then iterates over the list, looking for <in
put> elements of type "text" so that some form of processing can be performed on them.
... var in
puts = document.getelementbyid("my-form").elements; // iterate over the form controls for (i = 0; i < in
puts.length; i++) { if (in
puts[i].nodename === "in
put" && in
puts[i].type === "text") { // update text in
put in
puts[i].value.tolocaleuppercase(); } } disabling form controls var in
puts = document.getelementbyid("my-form").elements; // iterate over the form controls for (i = 0; i < in
puts.length; i++) { // disable all form controls in
puts[i].setattribute("disabled", ""); } specifications specification status comment html living standardthe definition of 'htmlformelement.elements' in that specification.
HTMLImageElement.naturalHeight - Web APIs
html <div class="box"> <img src="/files/16797/clock-demo-400px.png" class="image"> </div> <div class="out
put"> </div> the html features a 400x398 pixel image which is placed inside a <div>.
... css .box { width: 200px; height: 200px; } .image { width: 100%; } .out
put { padding-top: 2em; } the main thing of note in the css above is that the style used for the container the image will be drawn in is 200px wide, and the image will be drawn to fill its width (100%).
... javascript let out
put = document.queryselector(".out
put"); let image = document.queryselector("img"); window.addeventlistener("load", event => { out
put.innerhtml += `natural size: ${image.naturalwidth} x ` + `${image.naturalheight} pixels<br>`; out
put.innerhtml += `displayed size: ${image.width} x ` + `${image.height} pixels`; }); the javascript code simply dumps the natural and as-displayed sizes into the <div> with the class out
put.
HTMLImageElement.naturalWidth - Web APIs
html <div class="box"> <img src="/files/16797/clock-demo-400px.png" class="image"> </div> <div class="out
put"> </div> the html features a 400x398 pixel image which is placed inside a <div>.
... css .box { width: 200px; height: 200px; } .image { width: 100%; } .out
put { padding-top: 2em; } the main thing of note in the css above is that the style used for the container the image will be drawn in is 200px wide, and the image will be drawn to fill its width (100%).
... javascript let out
put = document.queryselector(".out
put"); let image = document.queryselector("img"); window.addeventlistener("load", event => { out
put.innerhtml += `natural size: ${image.naturalwidth} x ` + `${image.naturalheight} pixels<br>`; out
put.innerhtml += `displayed size: ${image.width} x ` + `${image.height} pixels`; }); the javascript code simply dumps the natural and as-displayed sizes into the <div> with the class out
put.
HTMLMediaElement.defaultMuted - Web APIs
the htmlmediaelement.defaultmuted property reflects the muted html attribute, which indicates whether the media element's audio out
put should be muted by default.
...to mute and unmute the audio out
put, use the muted property.
...a value of true means that the audio out
put will be muted by default.
HTMLMediaElement.sinkId - Web APIs
the htmlmediaelement.sinkid read-only property returns a domstring that is the unique id of the audio device delivering out
put.
... syntax var sinkid = htmlmediaelement.sinkid specifications specification status comment audio out
put devices apithe definition of 'sinkid' in that specification.
...older versions of this spec were called "media capture out
put".
HTMLMediaElement - Web APIs
htmlmediaelement.defaultmuted a boolean that reflects the muted html attribute, which indicates whether the media element's audio out
put should be muted by default.
... htmlmediaelement.sinkid read only returns a domstring that is the unique id of the audio device delivering out
put, or an empty string if it is using the user agent default.
... htmlmediaelement.setsinkid() sets the id of the audio device to use for out
put and returns a promise.
HTMLSelectElement.selectedOptions - Web APIs
abel for="foods">what do you want to eat?</label><br> <select id="foods" name="foods" size="7" multiple> <option value="1">burrito</option> <option value="2">cheeseburger</option> <option value="3">double bacon burger supreme</option> <option value="4">pepperoni pizza</option> <option value="5">taco</option> </select> <br> <button name="order" id="order"> order now </button> <p id="out
put"> </p> the <select> element is set to allow multiple items to be selected, and it is 7 rows tall.
... javascript the javascript code that establishes the event handler for the button, as well as the event handler itself, looks like this: let orderbutton = document.getelementbyid("order"); let itemlist = document.getelementbyid("foods"); let out
putbox = document.getelementbyid("out
put"); orderbutton.addeventlistener("click", function() { let collection = itemlist.selectedoptions; let out
put = ""; for (let i=0; i<collection.length; i++) { if (out
put === "") { out
put = "your order for the following items has been placed: "; } out
put += collection[i].label; if (i === (collection.length - 2) && (collection.length < 3)) { out
put +...
...= " and "; } else if (i < (collection.length - 2)) { out
put += ", "; } else if (i === (collection.length - 2)) { out
put += ", and "; } } if (out
put === "") { out
put = "you didn't order anything!"; } out
putbox.innerhtml = out
put; }, false); this script sets up a click event listener on the "order now" button.
IDBIndexSync - Web APIs
any get (in any key) raises (idbdatabaseexception); any getobject (in any key) raises (idbdatabaseexception); void opencursor (in optional idbkeyrange range, in optional unsigned short direction) raises (idbdatabaseexception); void openobjectcursor (in optional idbkeyrange range, in optional unsigned short direction) raises (idbdatabaseexception); any
put (in any value, in optional any key) raises (idbdatabaseexception); void remove (in any key) raises (idbdatabaseexception); attributes attribute type description keypath readonly domstring the key path of this index.
...
put() stores the given value in this index and returns the key for the stored record.
... any
put ( in any value, in optional any key) raises (idbdatabaseexception); parameters value the value to be stored in the record.
IDBObjectStoreSync - Web APIs
reateindex (in domstring name, in domstring storename, in domstring keypath, in optional boolean unique); any get (in any key) raises (idbdatabaseexception); idbcursorsync opencursor (in optional idbkeyrange range, in optional unsigned short direction) raises (idbdatabaseexception); idbindexsync openindex (in domstring name) raises (idbdatabaseexception); any
put (in any value, in optional any key) raises (idbdatabaseexception); void remove (in any key) raises (idbdatabaseexception); void removeindex (in domstring indexname) raises (idbdatabaseexception); attributes attribute type description indexnames readonly domstringlist a list of the names of the indexes on this object store.
...
put() stores the given value in this object store and returns the key for the stored record.
... any
put ( in any value, in optional any key ) raises (idbdatabaseexception); parameters value the value to be stored in the record.
IDBTransaction - Web APIs
</svg></div> a:hover text { fill: #0095dd; pointer-events: all;} transactions are started when the transaction is created, not when the first request is placed; for example consider this: var trans1 = db.transaction("foo", "readwrite"); var trans2 = db.transaction("foo", "readwrite"); var objectstore2 = trans2.objectstore("foo") var objectstore1 = trans1.objectstore("foo") objectstore2.
put("2", "key"); objectstore1.
put("1", "key"); after the code is executed the object store should contain the value "2", since trans2 should run after trans1.
...trying to add() the same key twice, or
put() with the same index key with a uniqueness constraint.
...you're storing critical data that cannot be recom
puted later) you can force a transaction to flush to disk before delivering the complete event by creating a transaction using the experimental (non-standard) readwriteflush mode (see idbdatabase.transaction.
IIRFilterNode - Web APIs
number of in
puts 1 number of out
puts 1 channel count mode "max" channel count same as on the in
put channel interpretation "speakers" typically, it's best to use the biquadfilternode interface to implement higher-order filters.
... iirfilternodes have a tail-time reference; they continue to out
put non-silent audio with zero in
put.
... as an iir filter, the non-zero in
put continues forever, but this can be limited after some finite time in practice, when the out
put has approached zero closely enough.
KeyboardEvent - Web APIs
when you need to handle text in
put, use the in
put event instead.
... keyboardevent.location read only returns a number representing the location of the key on the keyboard or other in
put device.
...for example, manually firing a key event does not cause that letter to appear in a focused text in
put.
KeyframeEffect.getKeyframes() - Web APIs
the getkeyframes() method of a keyframeeffect returns an array of the com
puted keyframes that make up this animation along with their com
puted offsets.
... com
putedoffset the com
puted offset for this keyframe, calculated when the list of com
puted keyframes was produced according to keyframeeffect.spacing.
... unlike offset, above, the com
putedoffset is never null.
MIDIMessageEvent - Web APIs
the midimessageevent interface of the web midi api represents the event passed to the onmidimessage event handler of the midiin
put interface.
... a midimessage event is fired every time a midi message is sent from a device represented by a midiin
put, for example when a midi keyboard key is pressed, a knob is tweaked, or a slider is moved.
... examples // printing all messages to console navigator.requestmidiaccess().then(midiaccess => { array.from(midiaccess.in
puts).foreach(in
put => { in
put[1].onmidimessage = console.log; }) }); specifications specification status comment web midi apithe definition of 'midimessageevent' in that specification.
MediaElementAudioSourceNode - Web APIs
a mediaelementsourcenode has no in
puts and exactly one out
put, and is created using the audiocontext.createmediaelementsource() method.
... the amount of channels in the out
put equals the number of channels of the audio referenced by the htmlmediaelement used in the creation of the node, or is 1 if the htmlmediaelement has no audio.
... number of in
puts 0 number of out
puts 1 channel count defined by the media in the htmlmediaelement passed to the audiocontext.createmediaelementsource method that created it.
MediaStreamTrack.readyState - Web APIs
syntax const state = track.readystate value it takes one of the following values: "live" which indicates that an in
put is connected and does its best-effort in providing real-time data.
... in that case, the out
put of data can be switched on or off using the mediastreamtrack.enabled property.
... "ended" which indicates that the in
put is not giving any more data and will never provide new data.
MediaStreamTrack - Web APIs
this will be one of the following values: "live" which indicates that an in
put is connected and does its best-effort in providing real-time data.
... in that case, the out
put of data can be switched on or off using the enabled attribute.
... "ended" which indicates that the in
put is not giving any more data and will never provide new data.
Transcoding assets for Media Source Extensions - Web APIs
put the contents of the bin directory in the same place as ffmpeg.
... run the following commands (shown with sample out
put): $ python mp4-dash-encode.py -b 5 -v bunny_fragmented.mp4 encoding 5 bitrates, min bitrate = 500.0 max bitrate = 2000.0 media source: video: resolution=640x360 encoding bitrate: 500, resolution: 256x144 encoding bitrate: 875, resolution: 384x216 encoding bitrate: 1250, resolution: 480x270 encoding bitrate: 1625, resolution: 560x316 encoding bitrate: 2000, resolution: 640x360 $ python mp4-dash.
...parsing media file 3: video_01250.mp4 parsing media file 4: video_01625.mp4 parsing media file 5: video_02000.mp4 splitting media file (audio) video_00500.mp4 splitting media file (video) video_00500.mp4 splitting media file (video) video_00875.mp4 splitting media file (video) video_01250.mp4 splitting media file (video) video_01625.mp4 splitting media file (video) video_02000.mp4 $ tree -l 2 out
put out
put ├── audio │ └── und ├── stream.mpd └── video ├── 1 ├── 2 ├── 3 ├── 4 └── 5 8 directories, 1 file note: mp4-dash-encode.py does not display ffmpeg error messages.
Navigator - Web APIs
navigator.locks read only returns a lockmanager object which provides methods for requesting a new lock object and querying for an existing lock object navigator.mediacapabilities read only returns a mediacapabilities object that can expose information about the decoding and encoding capabilities for a given format and out
put capabilities.
... navigator.mediadevices returns a reference to a mediadevices object which can then be used to get information about available media devices (mediadevices.enumeratedevices()), find out what constrainable properties are supported for media on the user's com
puter and user agent (mediadevices.getsupportedconstraints()), and to request access to media using mediadevices.getusermedia().
... navigator.getusermedia() after having prompted the user for permission, returns the audio or video stream associated to a camera or microphone on the local com
puter.
NodeList - Web APIs
for example, node.childnodes is live: const parent = document.getelementbyid('parent'); let child_nodes = parent.childnodes; console.log(child_nodes.length); // let's assume "2" parent.appendchild(document.createelement('div')); console.log(child_nodes.length); // out
puts "3" static nodelists in other cases, the nodelist is static, where any changes in the dom does not affect the content of the collection.
... for...of loops will loop over nodelist objects correctly: const list = document.queryselectorall('in
put[type=checkbox]'); for (let checkbox of list) { checkbox.checked = true; } recent browsers also support iterator methods (foreach()) as well as entries(), values(), and keys().
... there is also an internet explorer-compatible way to use array.prototype.foreach for iteration: const list = document.queryselectorall('in
put[type=checkbox]'); array.prototype.foreach.call(list, function (checkbox) { checkbox.checked = true; }); specifications specification status comment domthe definition of 'nodelist' in that specification.
PasswordCredential - Web APIs
htmlformelement a reference to an htmlformelement with appropriate in
put fields.
... examples this example shows how to set up an htmlformelement to ca
puture data which we'll use to create a passwordcredential object.
... <form id="form" method="post"> <in
put type="text" name="id" autocomplete="username" /> <in
put type="password" name="password" autocomplete="current-password" /> <in
put type="hidden" name="csrf_token" value="*****" /> </form> then, a reference to this form element, using it to create a passwordcredential object, and storing it in the browser's password system.
PointerEvent - Web APIs
a pointer is a hardware agnostic representation of in
put devices (such as a mouse, pen or contact point on a touch-enable surface).
... pointerevent.pressure read only the normalized pressure of the pointer in
put in the range 0 to 1, where 0 and 1 represent the minimum and maximum pressure the hardware is capable of detecting, respectively.
... pointerevent.tangentialpressure read only the normalized tangential pressure of the pointer in
put (also known as barrel pressure or cylinder stress) in the range -1 to 1, where 0 is the neutral position of the control.
Multi-touch interaction - Web APIs
pointer events extend dom in
put events to support various pointing in
put devices such as pen/stylus and touch screens as well as mouse.
...dy onload="init();" style="touch-action:none"> <div id="target1"> tap, hold or swipe me 1</div> <div id="target2"> tap, hold or swipe me 2</div> <div id="target3"> tap, hold or swipe me 3</div> <!-- ui for logging/debugging --> <button id="log" onclick="enablelog(event);">start/stop event logging</button> <button id="clearlog" onclick="clearlog(event);">clear the log</button> <p></p> <out
put></out
put> </body> miscellaneous functions these functions support the application but aren't directly involved with the event flow.
...false : true; } function log(name, ev) { var o = document.getelementsbytagname('out
put')[0]; var s = name + ": pointerid = " + ev.pointerid + " ; pointertype = " + ev.pointertype + " ; isprimary = " + ev.isprimary; o.innerhtml += s + " "; } function clearlog(event) { var o = document.getelementsbytagname('out
put')[0]; o.innerhtml = ""; } ...
RTCIceCandidatePairStats.availableOutgoingBitrate - Web APIs
the value is reported in bits per second and is com
puted over a 1-second interval.
... the returned value is undefined in each of the following situations: the underlying implementation doesn't support com
puting a sender-side estimate of the outgoing bit rate.
... note: the returned value is com
puted using a method similar—but not identical—to the transport independent application specific maximum (tias) described in rfc 3890: 6.2.
RTCIceCandidatePairStats - Web APIs
you can com
pute the average round trip time (rtt) by dividing this value by responsesreceived.
... example this example com
putes the average time elapsed between connectivity checks if the rtcstats object rtcstats is an rtcicecandidatepairstats object.
...if so, we com
pute the average time elapsed between stun connectivity checks and log that information.
RTCIceCandidateStats.deleted - Web APIs
only candidates which have not been deleted are included in the out
put.
... window.setinterval(function() { mypeerconnection.getstats(null).then(stats => { let statsout
put = ""; stats.foreach(report => { if ((stats.type === "local-candidate" || stats.type === "remote.candidate") && !stats.deleted) { statsout
put += `<h2>report: ${report.type}</h3>\n<strong>id:</strong> ${report.id}<br>\n` + `<strong>timestamp:</strong> ${report.timestamp}<br>\n`; // now the statistics for this report; we intentially drop the ones we // sorted to the top above object.keys(report).foreach(statname => { if (statname !== "id" && statname !== "timestamp" && statname !== "type") { statsout
put += `<strong>${statname}:</strong> ${report[statname]}<br>\n`; } }); } }); ...
... document.queryselector(".stats-box").innerhtml = statsout
put; }); }, 1000); specifications specification status comment identifiers for webrtc's statistics apithe definition of 'rtcicecandidatestats.deleted' in that specification.
RTCIceCandidateStats.networkType - Web APIs
example this example sets up a periodic function using setinterval() that out
puts statistics reports for candidates that use or would use a cellular data network to a log view.
... window.setinterval(function() { mypeerconnection.getstats(null).then(stats => { let statsout
put = ""; stats.foreach(report => { if ((stats.type === "local-candidate" || stats.type === "remote.candidate") && stats.networktype === "cellular") { statsout
put += `<h2>report: ${report.type}</h3>\n<strong>id:</strong> ${report.id}<br>\n` + `<strong>timestamp:</strong> ${report.timestamp}<br>\n`; // now the statistics for this report; we intentially drop the ones we // sorted to the top above object.keys(report).foreach(statname => { if (statname !== "id" && statname !== "timestamp" && statname !== "type") { statsout
put += `<strong>${statname}:</strong> ${report[statname]}<br>\n`; } });...
... } }); document.queryselector(".stats-box").innerhtml = statsout
put; }); }, 1000); ...
RTCPeerConnection.addIceCandidate() - Web APIs
this function receives no in
put parameters and doesn't return a value.
...receives as in
put a domexception object describing why failure occurred.
...the promise does not receive any in
put parameters.
SVGTextContentElement - Web APIs
svgtextcontentelement.getcom
putedtextlength() returns a float representing the com
puted length for the text within the element.
... svgtextcontentelement.getsubstringlength() returns a float representing the com
puted length of the formatted text advance distance for a substring of text within the element.
... svgtextcontentelement.getextentofchar() returns a domrect representing the com
puted tight bounding box of the glyph cell that corresponds to a given typographic character.
ScriptProcessorNode: audioprocess event - Web APIs
the audioprocess event of the scriptprocessornode interface is fired when an in
put buffer of a script processor is ready to be processed.
... bubbles no cancelable no default action none interface audioprocessingevent event handler property scriptprocessornode.onaudioprocess examples scriptnode.addeventlistener('audioprocess', function(audioprocessingevent) { // the in
put buffer is a song we loaded earlier var in
putbuffer = audioprocessingevent.in
putbuffer; // the out
put buffer contains the samples that will be modified and played var out
putbuffer = audioprocessingevent.out
putbuffer; // loop through the out
put channels (in this case there is only one) for (var channel = 0; channel < out
putbuffer.numberofchannels; channel++) { var in
putdata = in
putbuffer.getchanneldata(channel); var out
putdata = out
putbuffer.getchanneldata(channel); // l...
...oop through the 4096 samples for (var sample = 0; sample < in
putbuffer.length; sample++) { // make out
put equal to the same as the in
put out
putdata[sample] = in
putdata[sample]; // add noise to each out
put sample out
putdata[sample] += ((math.random() * 2) - 1) * 0.2; } } }) you could also set up the event handler using the scriptprocessornode.onaudioprocess property: scriptnode.onaudioprocess = function(audioprocessingevent) { ...
SpeechSynthesisErrorEvent.error - Web APIs
audio-busy the operation couldn't be completed at this time because the user-agent couldn't access the audio out
put device (for example, the user may need to correct this by closing another application.) audio-hardware the operation couldn't be completed at this time because the user-agent couldn't identify an audio out
put device (for example, the user may need to connect a speaker or configure system settings.) network the operation couldn't be completed at this time because some required network communic...
... examples var synth = window.speechsynthesis; var in
putform = document.queryselector('form'); var in
puttxt = document.queryselector('in
put'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
... in
putform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(in
puttxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onerror = function(event) { console.error('an error has occurred with the speech synthesis: ' + event.error); } in
puttxt.blur(); } specifications specification status comment web speech apithe definition of 'error' in that specification.
StylePropertyMapReadOnly - Web APIs
retrieve an instance of this interface using element.com
putedstylemap().
...</p> <dl id="out
put"></dl> we add a touch of css with a custom property to better demonstrate the out
put: p { --somevariable: 1.6em; --someothervariable: translatex(33vw); --anothervariable: 42; line-height: var(--somevariable); } we add javascript to grab our paragraph and return back a definition list of all the default css property values using com
putedstylemap().
... // get the element const myelement = document.queryselector('p'); // get the <dl> we'll be populating const styleslist = document.queryselector('#out
put'); // retrieve all com
puted styles with com
putedstylemap() const stylepropertymap = myelement.com
putedstylemap(); // iterate thru the map of all the properties and values, adding a <dt> and <dd> for each for (const [prop, val] of stylepropertymap) { // properties const cssproperty = document.createelement('dt'); cssproperty.appendchild(document.createtextnode(prop)); styleslist.appendchild(cssproperty); // values const cssvalue = document.createelement('dd'); cssvalue.appendchild(document.createtextnode(val)); styleslist.appendchild(cssvalue); } specifications specification status comment css typed om...
SubtleCrypto.unwrapKey() - Web APIs
this means that it takes as its in
put a key that has been exported and then encrypted (also called "wrapped").
...*/ function bytestoarraybuffer(bytes) { const bytesasarraybuffer = new arraybuffer(bytes.length); const bytesuint8 = new uint8array(bytesasarraybuffer); bytesuint8.set(bytes); return bytesasarraybuffer; } /* get some key material to use as in
put to the derivekey method.
...*/ function bytestoarraybuffer(bytes) { const bytesasarraybuffer = new arraybuffer(bytes.length); const bytesuint8 = new uint8array(bytesasarraybuffer); bytesuint8.set(bytes); return bytesasarraybuffer; } /* get some key material to use as in
put to the derivekey method.
UIEvent - Web APIs
several interfaces are direct or indirect descendants of this one: mouseevent, touchevent, focusevent, keyboardevent, wheelevent, in
putevent, and compositionevent.
... uievent.sourcecapabilities read only returns an instance of the in
putdevicecapabilities interface, which provides information about the physical device responsible for generating a touch event.
... specifications specification status comment in
putdevicecapabilities draft added sourcecapabilities property.
ValidityState - Web APIs
badin
put read only a boolean that is true if the user has provided in
put that the browser is unable to convert.
... toolong read only a boolean that is true if the value exceeds the specified maxlength for htmlin
putelement or htmltextareaelement objects, or false if its length is less than or equal to the maximum length.
... tooshort read only a boolean that is true if the value fails to meet the specified minlength for htmlin
putelement or htmltextareaelement objects, or false if its length is greater than or equal to the minimum length.
WebGL2RenderingContext.drawBuffers() - Web APIs
possible values are: gl.none: fragment shader out
put is not written into any color buffer.
... gl.back: fragment shader out
put is written into the back color buffer.
... gl.color_attachment{0-15}: fragment shader out
put is written in the nth color attachment of the current framebuffer.
WebGLRenderingContext.makeXRCompatible() - Web APIs
javascript the code that handles starting up graphics, switching to vr mode, and so forth looks like this: const out
putcanvas = document.queryselector(".out
put-canvas"); const gl = out
putcanvas.getcontext("webgl"); let xrsession = null; let usingxr = false; let currentscene = "scene1"; let glstartbutton; let xrstartbutton; window.addeventlistener("load", (event) => { loadsceneresources(currentscene); glstartbutton.addeventlistener("click", handlestartbuttonclick); xrstartbutton.addeventlistener("click", ha...
...ndlestartbuttonclick); }); out
putcanvas.addeventlistener("webglcontextlost", (event) => { /* the context has been lost but can be restored */ event.canceled = true; }); /* when the gl context is reconnected, reload the resources for the current scene.
... */ out
putcanvas.addeventlistener("webglcontextrestored", (event) => { loadsceneresources(currentscene); }); async function onstartedxrsession(xrsession) { try { await gl.makexrcompatible(); } catch(err) { switch(err) { case aborterror: showsimplemessagebox("unable to transfer the game to your xr headset.", "cancel"); break; case invalidstateerror: showsimplemessagebox("you don't appear to have a compatible xr headset available.", "cancel"); break; default: handlefatalerror(err); break; } xrsession.end(); } } async function handlestartbuttonclick(event) { if (event.target.classlist.contains("use-webxr") && navigator.xr) { try { xrsession = await navigator.xr.requestsession("immersive-vr"); ...
Lifetime of a WebRTC session - Web APIs
but they realized that it would take longer to complete the transition than 32-bit addresses would last, so other smart people came up with a way to let multiple com
puters share the same 32-bit ip address.
... the problem for users is that each individual com
puter on the internet no longer necessarily has a unique ip address, and, in fact, each device’s ip address may change not only if they move from one network to another, but if their network’s address is changed by nat and/or dhcp.
...one peer can out
put a data object that can be printed out, physically carried (on foot or by carrier pigeon) to another device, entered into that device, and a response then out
put by that device to be returned on foot, and so forth, until the webrtc peer connection is open.
Migrating from webkitAudioContext - Web APIs
(audiobuffersourcenode has yet another way of starting out
put: the notegrainon() method.) the noteon()/notegrainon()/noteoff() methods were the original way to start/stop out
put in these nodes, and in the newer versions of the specification, the noteon() and notegrainon() methods were consolidated into a single start() method, and the noteoff() method was renamed to the stop() method.
... those values have since been changed to use the web idl based enumerated values, which should be familiar because they are similar to things like the the htmlin
putelement property type.
... console.log(context.activesourcecount); could be rewritten like that: // array to track the playing source nodes: var sources = []; // when starting the source,
put it at the end of the array, // and set a handler to make sure it gets removed when the // audiobuffersourcenode reaches its end.
Using IIR filters - Web APIs
// arrays for our frequency response const totalarrayitems = 30; let myfrequencyarray = new float32array(totalarrayitems); let magresponseout
put = new float32array(totalarrayitems); let phaseresponseout
put = new float32array(totalarrayitems); let's fill our first array with frequency values we want data to be returned on: myfrequencyarray = myfrequencyarray.map(function(item, index) { return math.pow(1.4, index); }); we could go for a linear approach, but it's far better when working with frequencies to take a log approach, so le...
... now let's get our response data: iirfilter.getfrequencyresponse(myfrequencyarray, magresponseout
put, phaseresponseout
put); we can use this data to draw a filter frequency plot.
...g+fontsize); canvasctx.filltext('g', spacing-fontsize, (height-spacing+fontsize)/2); canvasctx.filltext('0', spacing-fontsize, height-spacing+fontsize); canvasctx.filltext('hz', width/2, height-spacing+fontsize); canvasctx.filltext('20k', width-spacing, height-spacing+fontsize); // loop over our magnitude response data and plot our filter canvasctx.beginpath(); for(let i = 0; i < magresponseout
put.length; i++) { if (i === 0) { canvasctx.moveto(spacing, height-(magresponseout
put[i]*100)-spacing ); } else { canvasctx.lineto((width/totalarrayitems)*i, height-(magresponseout
put[i]*100)-spacing ); } } canvasctx.stroke(); summary that's it for our iirfilter demo.
Using Web Workers - Web APIs
when you want to send a message to the worker, you post messages to it like this (main.js): first.onchange = function() { myworker.postmessage([first.value,second.value]); console.log('message posted to worker'); } second.onchange = function() { myworker.postmessage([first.value,second.value]); console.log('message posted to worker'); } so here we have two <in
put> elements represented by the variables first and second; when the value of either is changed, myworker.postmessage([first.value,second.value]) is used to send the value inside both to the worker, as an array.
... performing com
putations in the background workers are mainly useful for allowing your code to perform processor-intensive calculations without blocking the user interface thread.
... dividing tasks among multiple workers as multi-core com
puters become increasingly common, it's often useful to divide com
putationally complex tasks among multiple workers, which may then perform those tasks on multiple-processor cores.
Window.pageYOffset - Web APIs
nulla vul
putate nunc sit amet hendrerit faucibus.
... html the html is extremely simple and has just two elements: an <iframe> that contains the document we're going to scroll, and a <div> into which we'll out
put the value of pageyoffset when we've finished the scroll.
...nt.getelementbyid("info"); var target = framedoc.getelementbyid("overview"); framedoc.scrollingelement.scrolltop = target.offsettop; info.innertext = "y offset after scrolling: " + frame.contentwindow.pageyoffset + " pixels"; the javascript code begins by getting into frame and info the <iframe> element that contains our content as well as the <div> element into which we'll out
put the result of our scroll position check.
Window.prompt() - Web APIs
the window.prompt() displays a dialog with an optional message prompting the user to in
put some text.
... default optional a string containing the default value displayed in the text in
put field.
... = window.prompt(); // open the blank prompt window sign = prompt(); // open the blank prompt window sign = window.prompt('are you feeling lucky'); // open the window with text "are you feeling lucky" sign = window.prompt('are you feeling lucky', 'sure'); // open the window with text "are you feeling lucky" and default value "sure" when the user clicks the ok button, text entered in the in
put field is returned.
Window.speechSynthesis - Web APIs
inside the in
putform.onsubmit handler, we stop the form submitting with preventdefault(), create a new speechsynthesisutterance instance containing the text from the text <in
put>, set the utterance's voice to the voice selected in the <select> element, and start the utterance speaking via the speechsynthesis.speak() method.
... var synth = window.speechsynthesis; var in
putform = document.queryselector('form'); var in
puttxt = document.queryselector('in
put'); var voiceselect = document.queryselector('select'); function populatevoicelist() { voices = synth.getvoices(); for(i = 0; i < voices.length ; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; if(voices[i].default) { option.textcontent += ' -- default'; } option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.appendchild(option); } } populatevoicelist(); if (speechsynthesis.onvoiceschanged !== undefined) { speechsynthesis.onvoiceschanged = populatevoicelist; } in
putform.onsubmit = functi...
...on(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(in
puttxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); in
puttxt.blur(); } specifications specification status comment web speech apithe definition of 'speechsynthesis' in that specification.
self.createImageBitmap() - Web APIs
resizewidth: a long integer that indicates the out
put width.
... resizeheight: a long integer that indicates the out
put height.
... resizequality: specifies the algorithm to be used for resizing the in
put to match the out
put dimensions.
WindowOrWorkerGlobalScope.setInterval() - Web APIs
nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.</p> <form> <p>phasellus ac nisl lorem: <in
put type="text" /><br /> <textarea style="width: 400px; height: 200px;">nullam commodo suscipit lacus non aliquet.
...cras sodales eleifend interdum.</textarea></p> <in
put type="submit" value="send" /> </form> <p>duis lobortis sapien quis nisl luctus porttitor.
... example usage your html page: <!doctype html> <html> <head> <meta charset="utf-8" /> <title>minidaemin example - mdn</title> <script type="text/javascript" src="minidaemon.js"></script> <style type="text/css"> #sample_div { visibility: hidden; } </style> </head> <body> <p> <in
put type="button" onclick="fadeinout.start(false /* optional */);" value="fade in" /> <in
put type="button" onclick="fadeinout.start(true);" value="fade out"> <in
put type="button" onclick="fadeinout.pause();" value="pause" /> </p> <div id="sample_div">some text here</div> <script type="text/javascript"> function opacity (nindex, nlength, bbackwards) { this.style.opacity = nin...
Sending and Receiving Binary Data - Web APIs
you can also send binary content by passing an instance of the nsifilein
putstream to send().
...var stream = components.classes["@mozilla.org/network/file-in
put-stream;1"] .createinstance(components.interfaces.nsifilein
putstream); stream.init(file, 0x04 | 0x08, 0644, 0x04); // file is an nsifile instance // try to determine the mime type of the file var mimetype = "text\/plain"; try { var mimeservice = components.classes["@mozilla.org/mime;1"] .getservice(components.interfaces.nsimimeservice); mimetype = mimeservice.gettypefromfile(file); // file is an nsifile instance } catch (oevent) { /* eat it; just use text/plain */ } // send var req = components.classes["@mozilla.org/xmlextras/xml...
...httprequest;1"] .createinstance(components.interfaces.nsixmlhttprequest); req.open('
put', url, false); /* synchronous!
XRReferenceSpace - Web APIs
it's particularly useful when determining the distance between the viewer and an in
put, or when working with offset spaces.
...*/ }); the other situation in which you may need to acquire a new reference space is if you need to move the origin to a new position; this is commonly done, for example, when your project allows the user to move through the environment using in
put devices such as the keyboard, mouse, touchpad, or game controls that are not connected through the xr device.
...ransform({x: 2, y: 0, z: 1}, {x: 0, y: 1, z: 0, w: 1}); xrreferencespace = xrreferencespace.getoffsetreferencespace(offsettransform); this replaces the xrreferencespace with a new one whose origin and orientation are adjusted to place the new origin at (2, 0, 1) relative to the current origin and rotated given a unit quaternion that orients the space to
put the viewer facing straight up relative to the previous world orientation.
XRSession.onselect - Web APIs
to learn more about how webxr actions work, see in
puts and in
put sources.
... example this example handles select event which occur on the user's main hand (as given by a user object's handedness property); if that value matches the value of the xrin
putsource property handedness, we know that the device is held in the user's main hand.
... xrsession.onselect = event => { let source = event.in
putsource; if (source.handedness == user.handedness) { if (source.targetraymode == "tracked-pointer") { let targetraypose = event.frame.getpose(source.targetrayspace, myrefspace); if (targetraypose) { myhandleselectwithray(targetraypose); } } } }; specifications specification status comment webxr device apithe definition of 'xrsession.onselect' in that specification.
XRSession.onsqueezestart - Web APIs
the xrsession interface's onsqueezestart event handler property can be set to a function which is then invoked to handle the squeezestart event that's sent when the user successfully begins a primary squeeze action on a webxr in
put device.
... to learn more about how to use and handle webxr controller in
puts, see in
puts and in
put sources.
... xrsession.onsqueezestart = event => { if (event.in
putsource.handedness == user.handedness) { let targetraypose = event.frame.getpose(event.in
putsource.targetrayspace, myrefspace; if (targetraypose) { user.heldobject = findobjectusingray(targetraypose.transform); } } }; specifications specification status comment webxr device apithe definition of 'xrsession.onsqueezestart' in that specification.
XRSession.requestAnimationFrame() - Web APIs
the callback takes two parameters as in
puts: an xrframe describing the state of all tracked objects for the session, and a time stamp you can use to com
pute any animation updates needed.
... syntax requestid = xrsession.requestanimationframe(animationframecallback); parameters animationframecallback a function which is called before the next repaint in order to allow you to update and render the xr scene based on elapsed time, animation, user in
put changes, and so forth.
... the callback receives as in
put two parameters: time a domhighrestimestamp indicating the time offset at which the updated viewer state was received from the webxr device.
XRViewerPose - Web APIs
by calling viewport() on the webgl context, specifying the xrview as in
put, you can get the viewport to use when rendering in order to draw the frame for that eye into the correct part of the drawing surface.
... the viewer's pose for the animation frame represented by xrframe can be obtained by calling the frame's getviewerpose() method, specifying the reference space in which the origin's position should be com
puted.
...0, 0, 1); gl.cleardepth(1); gl.clear(gl.color_buffer_bit, gl.depth_buffer_bit); for (let view of pose.views) { let viewport = gllayer.getviewport(view); gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height); /* render the scene for the eye view.eye */ } } passing each view to getviewport() returns the webgl viewport to apply in order to cause the rendered out
put to be positioned correctly in the framebuffer for renderijng to the corresponding eye on the out
put device.
XRVisibilityState - Web APIs
in
put controllers are not being handled for the session.
...to that end, the session's requestanimationframe() callbacks are being processed at the xr device's native refresh rate and in
put controllers are being processed as normal.
...in
put controllers are not being processed for the session.
XSLT Basic Example - Web APIs
an xslt stylesheet starts with the xsl:stylesheet element, which contains all the templates used to create the final out
put.
...the template that matches the root node out
puts the article's title and then says to process all templates (via apply-templates) that match author nodes which are children of the authors node.
...bar</author> </authors> <body>this is my article text.</body> </article> xsl stylesheet (example.xsl) : <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/transform"> <xsl:out
put method="text"/> <xsl:template match="/"> article - <xsl:value-of select="/article/title"/> authors: <xsl:apply-templates select="/article/authors/author"/> </xsl:template> <xsl:template match="author"> - <xsl:value-of select="." /> </xsl:template> </xsl:stylesheet> browser out
put : article - my article authors: - mr.
XSL Transformations in Mozilla FAQ - Web APIs
it (afaict) serializes and parses the out
put to generate what it actually renders.
... can i do disable-out
put-escaping?
...disabling out
put escaping requires us to add a parsing step to our out
put generation, which we don't.
msCapsLockWarningOff - Web APIs
the mscapslockwarningoff read/write property turns automatic caps lock warning on or off for validated password in
put fields.
... starting with internet explorer 10, in
put type=password fields will automatically display a warning if the caps lock is on.
...cument.mscapslockwarningoff == false) { document.mscapslockwarningoff = true; document.getelementbyid("caps").innerhtml = "warning off"; } else { document.mscapslockwarningoff = false; document.getelementbyid("caps").innerhtml = "warning on"; } } </script> </head> <body> <label>type a password: <in
put type="password" /></label><br /> <button id="caps" onclick="capsoff();">warning off</button> </body> </html> ...
Using the aria-invalid attribute - Accessibility
the aria-invalid attribute is used to indicate that the value entered into an in
put field does not conform to the format expected by the application.this may include formats such as email addresses or telephone numbers.
...note that since the default value for aria-required is false, it is not strictly necessary to add the attribute to in
put.
... <in
put name="name" id="name" aria-required="true" aria-invalid="false" onblur="checkvalidity('name', ' ', 'invalid name entered (requires both first and last name)');"/> <br /> <in
put name="email" id="email" aria-required="true" aria-invalid="false" onblur="checkvalidity('email', '@', 'invalid e-mail address');"/> note that it is not necessary to validate the fields immediately on blur; the application could wait until the form is submitted (though this is not necessarily recommended).
Using the aria-labelledby attribute - Accessibility
this idea is similar to how the "for" attribute is used to link a label to an in
put.
... value a space-separated list of element ids possible effects on user agents and assistive technology when user agents com
pute the accessible name property of elements that have both an aria-labelledby attribute and an aria-label attribute, the user agents give precedence to aria-labelledby.
... examples example 1: multiple labels in the example below, each in
put field is labelled by both its own individual label and by the label for the group: <div id="mybillingid">billing</div> <div> <div id="mynameid">name</div> <in
put type="text" aria-labelledby="mybillingid mynameid"/> </div> <div> <div id="myaddressid">address</div> <in
put type="text" aria-labelledby="mybillingid myaddressid"/> </div> example 2: associating headings with regions in the example below, header elements are associated with the content they head.
Using the slider role - Accessibility
the application will programmatically update the value of aria-valuenow in response to user in
put.
... <label for="fader">volume</label> <in
put type="range" id="fader" min="1" max="100" value="50" step="1" aria-valuemin="1" aria-valuemax="100" aria-valuenow="50" onin
put="out
putupdate(value)"> <out
put for="fader" id="volume">50</out
put> the following code snippet allows you to return the out
put as it is updated by user in
put: function out
putupdate(vol) { document.queryselector('#volume').value = vol; } example 2: text values sometimes, a slider is used to choose a value that is not, semantically, a number.
... <label id="day-label">days</label> <div class="day-slider"> <div id="day-handle" class="day-slider-handle" role="slider" aria-labelledby="day-label" aria-valuemin="1" aria-valuemax="7" aria-valuenow="2" aria-valuetext="monday"> </div> </div> the code snippet below shows a function that responds to user in
put and updates the aria-valuenow and aria-valuetext attributes: var daynames = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"]; var updateslider = function (newvalue) { var handle = document.getelementbyid("day-handle"); handle.setattribute("aria-valuenow", newvalue.tostring()); handle.setattribute("aria-valuetext", daynames[newvalue]); }; working exampl...
ARIA Test Cases - Accessibility
as focus is moved, out
put should be identical to desktop tree widgets like in e.g.
...there is often a way to determine if a change was caused by user in
put.
...- orca - - - - describedby aria-describedby aria-describedby with display: none aria-describedby with visibility: hidden aria-describedby on img's with role="button" expected at behavior: when the textfield is focused, this description should be spoken after the label "minutes": "allows you to specify the number of minutes of inactivity after which your com
puter should shut down." (al) the describedby text should be spoken whether it is hidden or not.
ARIA annotations - Accessibility
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 in
put in a horizontal nav bar.
... a poll/voting ui widget that shows numbers of votes, but you want to summarize the purpose of the widget in a clear description because the ui does not make it clear: <section aria-description="choose your favourite fruit — the fruit with the highest number of votes will be added to the lunch options next week."> <p>pick your favourite fruit:</p> <form> <ul> <li><label>apple: <in
put type="radio" name="fruit" value="apple"></label></li> <li><label>orange: <in
put type="radio" name="fruit" value="orange"></label></li> <li><label>banana: <in
put type="radio" name="fruit" value="banana"></label></li> </ul> </form> </section> if the descriptive text does appear in the ui, you can link the description to the widget using aria-describedby, like so: <p id="fruit-de...
...sc">choose your favourite fruit — the fruit with the highest number of votes will be added to the lunch options next week.</p> <section aria-describedby="fruit-desc"> <form> <ul> <li><label>apple: <in
put type="radio" name="fruit" value="apple"></label></li> <li><label>orange: <in
put type="radio" name="fruit" value="orange"></label></li> <li><label>banana: <in
put type="radio" name="fruit" value="banana"></label></li> </ul> </form> </section> insertions and deletions a common wish in online document systems like google docs is to be able to track changes, to see what reviewers or editors have suggested as changes to the text, before the managing editor or author accepts or rejects those changes.
ARIA: form role - Accessibility
even if you are using the form landmark instead of <form>, you are encouraged to use native html form controls like button, in
put, select, and textarea associated wai-aria roles, states, and properties no role specific states or properties.
... examples <div role="form" id="send-comment" aria-label="add a comment"> <label for="username">username</label> <in
put id="username" name="username" autocomplete="nickname" autocorrect="off" type="text"> <label for="email">email</label> <in
put id="email" name="email" autocomplete="email" autocapitalize="off" autocorrect="off" spellcheck="false" type="text"> <label for="comment">comment</label> <textarea id="comment" name="comment"></textarea> <in
put value="comment" type="submit"> </div> it is recom...
... in
puts are not forms you do not need to declare role="form" on every form element (in
puts, text areas, selects, etc.).
Basic form hints - Accessibility
note that each <in
put> element has an id, and each <label> element has a for attribute, indicating the id of the associated <in
put>.
... <form> <ul> <li> <in
put id="wine-1" type="checkbox" value="riesling"/> <label for="wine-1">berg rottland riesling</label> </li> <li> <in
put id="wine-2" type="checkbox" value="pinot-blanc"/> <label for="wine-2">pinot blanc</label> </li> <li> <in
put id="wine-3" type="checkbox" value="pinot-grigio"/> <label for="wine-3">pinot grigio</label> </li> <li> <in
put id="wine-4" type="checkbox" value="gewurztraminer"/> <label for="wine-4">gewürztraminer</label> </li> </ul> </form> labeling with aria the html <label> element is appropriate for form-related elements, but many form controls are implemented as a dynamic javascript widget, using <div>s or <span>s.
... <form> <div> <label for="name">* name:</label> <in
put type="text" value="name" id="name" aria-required="true"/> </div> <div> <label for="phone">phone:</label> <in
put type="text" value="phone" id="phone" aria-required="false"/> </div> <div> <label for="email">* e-mail:</label> <in
put type="text" value="email" id="email" aria-required="true"/> </div> </form> the script that validates the form entry would look something like ...
Multipart labels: Using ARIA for labels with embedded fields inside them - Accessibility
both aria-labelledby and aria-describedby are specified on the form element that is to be labelled, for example an <in
put> in both cases, the label for/label control bindings that may also exist are overridden by aria-labelledby.
... example: shut down com
puter after minutes <in
put aria-labelledby="labelshutdown shutdowntime shutdownunit" type="checkbox" /> <span id="labelshutdown">shut down com
puter after</span> <in
put aria-labelledby="labelshutdown shutdowntime shutdownunit" id="shutdowntime" type="text" value="10" /> <span id="shutdownunit"> minutes</span> a note for jaws 8 users jaws 8.0 has its own logic to find labels, causing it to always override the accessiblename the textbox of an h...
... community member ben millard has pointed out in a blog post that controls can be embedded in labels as shown in the above example using html 4, simply by embedding the in
put into the label.
Accessibility Information for Web Authors - Accessibility
accessible web page authoring ibm has
put together a simple, practical resource for web authors to learn accessibility the fast and painless way.
...the out
put data report is displayed in a clear and well structured table where each and all checkpoints are identified and described (along with an helpful clickable link to the related reference guideline) into logical groups and according to measurable results: passed, warning, failed for automated verification, warning for manual verification, not selected, not available, not related, etc.
... this document tackles such difficulties and shows several interactive desktop-style widgets such as tree views, menu bars and spreadsheets which are accessible both with the keyboard and assistive technologies such as screen readers, screen magnifiers and alternative in
put devices.
Keyboard-navigable JavaScript widgets - Accessibility
elements with a positive tabindex are
put before the default interactive elements on the page, which means page authors will have to set (and maintain) tabindex values for all focusable elements on the page whenever they use one or more positive values for tabindex.
... non-native controls native html elements that are interactive, like <a>, <in
put> and <select>, are already accessible by keyboards, so to use one of them is the fastest path to make components work with keyboards.
... ensure that keyboard and mouse produce the same experience to ensure that the user experience is consistent regardless of in
put device, keyboard and mouse event handlers should share code where appropriate.
Keyboard - Accessibility
this includes users of screen readers, but can also include users who have trouble operating a pointing device such as a mouse or trackball, or whose mouse is not working at the moment, or who simply prefer to use a keyboard for in
put whenever possible.
...a positive value
puts the element ahead of those in the default ordering; elements with positive values are focused in the order of their tabindex values (1, then 2, then 3, etc.).
... standard focusable elements such as links and in
put fields are given special styling by the browser by default, so you might not need to specify focus styling for such elements, unless you want the focus styling to be more distinctive.
-moz-user-focus - CSS: Cascading Style Sheets
initial valuenoneapplies toall elementsinheritednocom
puted valueas specifiedanimation typediscrete note: this property doesn't work for xul <xul:textbox> elements, because the textbox itself never takes focus.
... instead, xbl creates an anonymous html <in
put> element inside the textbox, and that element is what receives focus.
... formal definition initial valuenoneapplies toall elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax ignore | normal | select-after | select-before | select-menu | select-same | select-all | none examples html <in
put class="ignored" value="the user cannot focus on this element."> css .ignored { -moz-user-focus: ignore; } specifications not part of any standard.
-webkit-text-security - CSS: Cascading Style Sheets
-webkit-text-security is a non-standard css property that obfuscates characters in a <form> field (such as <in
put> or <textarea>) by replacing them with a shape.
... examples obscuring a text in
put try typing in the field below.
... html <label for="name">name:</label> <in
put type="text" name="name" id="name" /> css in
put { -webkit-text-security: square; } result specifications not part of any standard.
::-moz-color-swatch - CSS: Cascading Style Sheets
the ::-moz-color-swatch css pseudo-element is a mozilla extension that represents the color selected in an <in
put> of type="color".
... note: using ::-moz-color-swatch with anything but an <in
put type="color"> doesn't match anything and has no effect.
... examples html <in
put type="color" value="#de2020" /> css in
put[type=color]::-moz-color-swatch { border-radius: 10px; border-style: none; } result specifications not part of any standard.
::-moz-range-progress - CSS: Cascading Style Sheets
the ::-moz-range-progress css pseudo-element is a mozilla extension that represents the lower portion of the track (i.e., groove) in which the indicator slides in an <in
put> of type="range".
... note: using ::-moz-range-progress with anything but an <in
put type="range"> doesn't match anything and has no effect.
... syntax ::-moz-range-progress examples html <in
put type="range" min="0" max="100" step="5" value="50"/> css in
put[type=range]::-moz-range-progress { background-color: green; height: 1em; } result a progress bar using this style might look something like this: specifications not part of any standard.
::-moz-range-track - CSS: Cascading Style Sheets
the ::-moz-range-track css pseudo-element is a mozilla extension that represents the track (i.e., groove) in which the indicator slides in an <in
put> of type="range".
... note: using ::-moz-range-track with anything but an <in
put type="range"> doesn't match anything and has no effect.
... syntax ::-moz-range-track examples html <in
put type="range" min="0" max="100" step="5" value="50"/> css in
put[type=range]::-moz-range-track { background-color: green; } result a progress bar using this style might look something like this: specifications not part of any standard.
::-webkit-inner-spin-button - CSS: Cascading Style Sheets
the ::-webkit-inner-spin-button css pseudo-element is used to style the inner part of the spinner button of number picker in
put elements.
... changing the cursor in the spin controls in this example, the css cursor is changed to pointer whenever the cursor is positioned over the inner part of the in
put's spin controls.
... html <in
put type="number"> css in
put[type=number]::-webkit-inner-spin-button { cursor: pointer; } result specifications not part of any standard.
::-webkit-outer-spin-button - CSS: Cascading Style Sheets
the ::-webkit-outer-spin-button css pseudo-element is used to style the outer part of the spinner button of number picker <in
put> elements.
... hiding the spinner this example uses in
put::-webkit-outer-spin-button to find <in
put> elements' spinner widgets and set their -webkit-appearance to none, thus hiding them.
... html <in
put type="number"> css in
put::-webkit-outer-spin-button { -webkit-appearance: none; } result specifications not part of any standard.
:blank - CSS: Cascading Style Sheets
the :blank css pseudo-class selects empty user in
put elements (eg.
... <in
put> or <textarea>).
... syntax :blank examples simple :blank example in eventual supporting browsers, the :blank pseudo-class will enable developers to highlight in some way in
put controls that are not required, but still have no content filled in, perhaps as a reminder to users.
:disabled - CSS: Cascading Style Sheets
/* selects any disabled <in
put> */ in
put:disabled { background: #ccc; } syntax :disabled examples this example shows a basic shipping form.
... html <form action="#"> <fieldset id="shipping"> <legend>shipping address</legend> <in
put type="text" placeholder="name"> <in
put type="text" placeholder="address"> <in
put type="text" placeholder="zip code"> </fieldset> <br> <fieldset id="billing"> <legend>billing address</legend> <label for="billing-checkbox">same as shipping address:</label> <in
put type="checkbox" id="billing-checkbox" checked> <br> <in
put type="text" placeholder="name" disabled> <in
put type="text" placeholder="address" disabled> <in
put type="text" placeholder="zip code" disabled> </fieldset> </form> css in
put[type="text"]:disabled { background: #ccc; } javascript // wait for ...
...the page to finish loading document.addeventlistener('domcontentloaded', function () { // attach `change` event listener to checkbox document.getelementbyid('billing-checkbox').onchange = togglebilling; }, false); function togglebilling() { // select the billing text fields var billingitems = document.queryselectorall('#billing in
put[type="text"]'); // toggle the billing text fields for (var i = 0; i < billingitems.length; i++) { billingitems[i].disabled = !billingitems[i].disabled; } } result specifications specification status comment html living standardthe definition of ':disabled' in that specification.
:focus-visible - CSS: Cascading Style Sheets
(many browsers show a “focus ring” by default in this case.) this selector is useful to provide a different focus indicator based on the user’s in
put modality (mouse vs.
... <in
put value="default styles"><br> <button>default styles</button><br> <in
put class="focus-only" value=":focus only"><br> <button class="focus-only">:focus only</button><br> <in
put class="focus-visible-only" value=":focus-visible only"><br> <button class="focus-visible-only">:focus-visible only</button> in
put, button { margin: 10px; } .focus-only:focus { outline: 2px solid black; } .focus-visible...
...tips for designing useful and usable focus indicators cognition it may not be obvious as to why the focus indicator is appearing and disappearing if a person is using mixed forms of in
put.
:focus-within - CSS: Cascading Style Sheets
(this includes descendants in shadow trees.) /* selects a <div> when one of its descendants is focused */ div:focus-within { background: cyan; } this selector is useful, to take a common example, for highlighting an entire <form> container when the user focuses on one of its <in
put> fields.
... syntax :focus-within examples in this example, the form will receive special coloring styles when either text in
put receives focus.
... html <p>try typing into this form.</p> <form> <label for="given_name">given name:</label> <in
put id="given_name" type="text"> <br> <label for="family_name">family name:</label> <in
put id="family_name" type="text"> </form> css form { border: 1px solid; color: gray; padding: 4px; } form:focus-within { background: #ff8; color: black; } in
put { margin: 4px; } result specifications specification status comment selectors level 4the definition of ':focus-within' in that specification.
:focus - CSS: Cascading Style Sheets
the :focus css pseudo-class represents an element (such as a form in
put) that has received focus.
... /* selects any <in
put> when focused */ in
put:focus { color: red; } note: this pseudo-class applies only to the focused element itself.
... syntax :focus examples html <in
put class="red-in
put" value="i'll be red when focused."><br> <in
put class="blue-in
put" value="i'll be blue when focused."> css .red-in
put:focus { background: yellow; color: red; } .blue-in
put:focus { background: yellow; color: blue; } result accessibility concerns make sure the visual focus indicator can be seen by people with low vision.
:in-range - CSS: Cascading Style Sheets
the :in-range css pseudo-class represents an <in
put> element whose current value is within the range limits specified by the min and max attributes.
... /* selects any <in
put>, but only when it has a range specified, and its value is inside that range */ in
put:in-range { background-color: rgba(0, 255, 0, 0.25); } this pseudo-class is useful for giving the user a visual indication that a field's current value is within the permitted limits.
... <li> <in
put id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12"> <label for="value1">your value is </label> </li> </ul> </form> css li { list-style: none; margin-bottom: 1em; } in
put { border: 1px solid black; } in
put:in-range { background-color: rgba(0, 255, 0, 0.25); } in
put:out-of-range { background-color: rgba(255, 0, 0, 0.25); border: 2px solid red; } in
put:in-range + label::after { content: 'okay.'; } in
put:out-of-r...
@font-face - CSS: Cascading Style Sheets
the @font-face css at-rule specifies a custom font with which to display text; the font can be loaded from either a remote server or a locally-installed font on the user's own com
puter.
...this can be a url to a remote font file location or the name of a font on the user's com
puter.
... description if the local() function is provided, specifying a font name to look for on the user's com
puter, and the user agent finds a match, that local font is used.
any-pointer - CSS: Cascading Style Sheets
coarse at least one in
put mechanism includes a pointing device of limited accuracy.
... fine at least one in
put mechanism includes an accurate pointing device.
... html <in
put id="test" type="checkbox" /> <label for="test">look at me!</label> css in
put[type="checkbox"]:checked { background: gray; } @media (any-pointer: fine) { in
put[type="checkbox"] { -moz-appearance: none; -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border: 1px solid blue; } } @media (any-pointer: coarse) { in
put[type="checkbox"] { -mo...
color-index - CSS: Cascading Style Sheets
the color-index css media feature can be used to test the number of entries in the out
put device's color lookup table.
... syntax the color-index feature is specified as an <integer> value representing the number of entries in the out
put device's color lookup table.
... candidate recommendation the value can now be negative, in which case it com
putes to false.
color - CSS: Cascading Style Sheets
the color css media feature can be used to test the number of bits per color component (red, green, blue) of the out
put device.
... syntax the color feature is specified as an <integer> value that represents the number of bits per color component (red, green, blue) of the out
put device.
... candidate recommendation the value can now be negative, in which case it com
putes to false.
grid - CSS: Cascading Style Sheets
the grid css media feature can be used to test whether the out
put device uses a grid-based screen.
... most modern com
puters and smartphones have bitmap-based screens.
... syntax the grid feature is specified as a <mq-boolean> value (0 or 1) representing whether or not the ou
put device is grid-based.
hover - CSS: Cascading Style Sheets
the hover css media feature can be used to test whether the user's primary in
put mechanism can hover over elements.
... none the primary in
put mechanism cannot hover at all or cannot conveniently hover (e.g., many mobile devices emulate hovering when the user performs an inconvenient long tap), or there is no primary pointing in
put mechanism.
... hover the primary in
put mechanism can conveniently hover over elements.
bleed - CSS: Cascading Style Sheets
syntax /* keyword values */ bleed: auto; /* <length> values */ bleed: 8pt; bleed: 1cm; values auto com
putes to 6pt if the value of marks is crop.
... otherwise it com
putes to zero.
... formal definition related at-rule@pageinitial valueautocom
puted valueas specified formal syntax auto | <length> examples setting a page bleed of 1cm @page { bleed: 1cm; } specifications specification status comment css paged media module level 3the definition of 'bleed' in that specification.
CSS values and units - CSS: Cascading Style Sheets
the inherit keyword represents the com
puted value of the property on the element’s parent, provided it is inherited.
...many of these units are therefore more useful when the out
put is a fixed size media, such as print.
... as an example, if you specify the width of a box as a percentage, it refers to the percentage of the box's parent's com
puted width: .box { width: 50%; } mixing percentages and dimensions some properties accept a dimension that could be either one of two types, for example a <length> or a <percentage>.
Replaced elements - CSS: Cascading Style Sheets
put in simpler terms, they're elements whose contents are not affected by the current document's styles.
... replaced elements typical replaced elements are: <iframe> <video> <embed> <img> some elements are treated as replaced elements only in specific cases: <option> <audio> <canvas> <object> <applet> html spec also says that an <in
put> element can be replaced, because <in
put> elements of the "image" type are replaced elements similar to <img>.
... however, other form controls, including other types of <in
put> elements, are explicitly listed as non-replaced elements (the spec describes their default platform-specific rendering with the term "widgets").
align-self - CSS: Cascading Style Sheets
syntax /* keyword values */ align-self: auto; align-self: normal; /* positional alignment */ /* align-self does not take left and right values */ align-self: center; /*
put the item around the center */ align-self: start; /*
put the item at the start */ align-self: end; /*
put the item at the end */ align-self: self-start; /* align the item flush at the start */ align-self: self-end; /* align the item flush at the end */ align-self: flex-start; /*
put the flex item at the start */ align-self: flex-end; /*
put the flex item at the end */ /* baseline alignment */ ali...
...gn-self: baseline; align-self: first baseline; align-self: last baseline; align-self: stretch; /* stretch 'auto'-sized items to fit the container */ /* overflow alignment */ align-self: safe center; align-self: unsafe center; /* global values */ align-self: inherit; align-self: initial; align-self: unset; values auto com
putes to the parent's align-items value.
... formal definition initial valueautoapplies toflex items, grid items, and absolutely-positioned boxesinheritednocom
puted valueauto com
putes to itself on absolutely-positioned elements, and to the com
puted value of align-items on the parent (minus any legacy keywords) on all other boxes, or start if the box has no parent.
appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
<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 in
put 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>...
... number-in
put div { color: black; -moz-appearance: number-in
put; -webkit-appearance: number-in
put; } <div>lorem</div> firefox progress-bar-value div{ color: black; -webkit-appearance: progress-bar-value; } <div>lorem</div> chrome safari progressbar div { color: black; -moz-appearance: progressbar; -webkit-...
... formal definition initial valueautoapplies toall elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax none | auto | button | textfield | menulist-button | <compat-auto>where <compat-auto> = searchfield | textarea | push-button | slider-horizontal | checkbox | radio | square-button | menulist | listbox | meter | progress-bar examples the following would make an element look like a menulist button: .exampleone { appearance: menulist-but...
background-position - CSS: Cascading Style Sheets
e difference) so that with position percentages of -25%, 0%, 50%, 100%, 125%, we get these image-to-container edge offset values: -200px * -25% = 50px -200px * 0% = 0px -200px * 50% = -100px -200px * 100% = -200px -200px * 125% = -250px so with these resultant values for our example, the left edge of the image is offset from the left edge of the container by: + 50px (
putting the left image edge in the center of the 100-pixel-wide container) 0px (left image edge coincident with the left container edge) -100px (left image edge 100px to the left of the container, in this example that means the middle 100px image area is centered in the container) -200px (left image edge 200px to the left of the container, in this example that means the right image edge is coin...
...cident with the right container edge) -250px (left image edge 250px to the left of the container, in this example that
puts the right edge of the 300px-wide image in the center of the container) it's worth mentioning that if your background-size is equal to the container size for a given axis, then a percentage position for that axis will have no effect because the "container-image difference" will be zero.
...it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer 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 offsetscom
puted valuea list, each item consisting of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentageanimation typerepeatable list of simple list of length, percentage, or calc formal syntax <bg-position>#where <bg-position> = [ [ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top...
<basic-shape> - CSS: Cascading Style Sheets
description com
puted values of basic shapes the values in a <basic-shape> function are com
puted as specified, with these exceptions: omitted values are included and com
pute to their defaults.
... a <position> value in circle() or ellipse() is com
puted as a pair of offsets (horizontal then vertical) from the top left origin, each given as a combination of an absolute length and a percentage.
... a <border-radius> value in inset() is com
puted as an expanded list of all eight <length> or percentage values.
border-image - CSS: Cascading Style Sheets
note: if the com
puted value of border-image-source is none, or if the image cannot be displayed, the border-style will be displayed instead.
...it also applies to ::first-letter.inheritednopercentagesas each of the properties of the shorthand:border-image-slice: refer to the size of the border imageborder-image-width: refer to the width or height of the border image areacom
puted valueas each of the properties of the shorthand:border-image-outset: as specified, but with relative lengths converted into absolute lengthsborder-image-repeat: as specifiedborder-image-slice: one to four percentage(s) (as specified) or absolute length(s), plus the keyword fill if specifiedborder-image-source: none or the image with its uri made absoluteborder-image-width: as specified, but wit...
...it also applies to ::first-letter.inheritednopercentagesas each of the properties of the shorthand:border-image-slice: refer to the size of the border imageborder-image-width: refer to the width or height of the border image areacom
puted valueas each of the properties of the shorthand:border-image-outset: as specified, but with relative lengths converted into absolute lengthsborder-image-repeat: as specifiedborder-image-slice: one to four percentage(s) (as specified) or absolute length(s), plus the keyword fill if specifiedborder-image-source: none or the image with its uri made absoluteborder-image-width: as specified, but wit...
content - CSS: Cascading Style Sheets
normal com
putes to none for the ::before and ::after pseudo-elements.
... accessibility support for css generated content – tink explanation of wcag, guideline 1.3 – mdn understanding success criterion 1.3.1 | w3c understanding wcag 2.0 formal definition initial valuenormalapplies to::before and ::after pseudo-elementsinheritednocom
puted valueon elements, always com
putes to normal.
... on ::before and ::after, if normal is specified, com
putes to none.
font-style - CSS: Cascading Style Sheets
html <header> <in
put type="range" id="slant" name="slant" min="-90" max="90" /> <label for="slant">slant</label> </header> <div class="container"> <p class="sample">...it would not be wonderful to meet a megalosaurus, forty feet long or so, waddling like an elephantine lizard up holborn hill.</p> </div> css /* amstelvaralpha-vf is created by david berlow (https://github.com/typenetwork/amstelvar) and is us...
...mple { font: 2rem 'amstelvaralpha', sans-serif; } html, body { max-height: 100vh; max-width: 100vw; overflow: hidden; } body { display: flex; flex-direction: column; } header { margin-bottom: 1.5rem; } .container { flex-grow: 1; } .container > p { margin-top: 0; margin-bottom: 0; } javascript let slantlabel = document.queryselector('label[for="slant"]'); let slantin
put = document.queryselector('#slant'); let sampletext = document.queryselector('.sample'); function update() { let slant = `oblique ${slantin
put.value}deg`; slantlabel.textcontent = `font-style: ${slant};`; sampletext.style.fontstyle = slant; } slantin
put.addeventlistener('in
put', update); update(); accessibility concerns large sections of text set with a font-style value of italic may ...
...it also applies to ::first-letter and ::first-line.inheritedyescom
puted valueas specifiedanimation typediscrete formal syntax normal | italic | oblique <angle>?
font-weight - CSS: Cascading Style Sheets
html <header> <in
put type="range" id="weight" name="weight" min="1" max="1000" /> <label for="weight">weight</label> </header> <div class="container"> <p class="sample">...it would not be wonderful to meet a megalosaurus, forty feet long or so, waddling like an elephantine lizard up holborn hill.</p> </div> css /* mutator sans is created by letterror (https://github.com/letterror/mutatorsans) and is used h...
...case; font: 1.5rem 'mutatorsans', sans-serif; } html, body { max-height: 100vh; max-width: 100vw; overflow: hidden; } body { display: flex; flex-direction: column; } header { margin-bottom: 1.5rem; } .container { flex-grow: 1; } .container > p { margin-top: 0; margin-bottom: 0; } javascript let weightlabel = document.queryselector('label[for="weight"]'); let weightin
put = document.queryselector('#weight'); let sampletext = document.queryselector('.sample'); function update() { weightlabel.textcontent = `font-weight: ${weightin
put.value};`; sampletext.style.fontweight = weightin
put.value; } weightin
put.addeventlistener('in
put', update); update(); accessibility concerns people experiencing low vision conditions may have difficulty reading text set with ...
...it also applies to ::first-letter and ::first-line.inheritedyescom
puted valuethe keyword or the numerical value as specified, with bolder and lighter transformed to the real valueanimation typea font weight formal syntax <font-weight-absolute> | bolder | lighterwhere <font-weight-absolute> = normal | bold | <number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[1,1000]> e...
image() - CSS: Cascading Style Sheets
unlike declaring a background-color, which is placed under or behind all the background images, this can be used to
put (generally semi-transparent) colors over other images.
...
putting color on top of a background image .quarterlogo {height: 200px; width: 200px; border: 1px solid;} .quarterlogo { background-image: image(rgba(0, 0, 0, 0.25)), url("https://mdn.mozillademos.org/files/12053/firefox.png"); background-size: 25%; background-repeat: no-repeat; } <div class="quarterlogo">if supported, a quarter of this div has a darkened logo</div> the above wil...
...l
put a semi-transparent black mask over the firefox logo background image.
Inheritance - CSS: Cascading Style Sheets
css properties can be categorized in two types: inherited properties, which by default are set to the com
puted value of the parent element non-inherited properties, which by default are set to initial value of the property refer to any css property definition to see whether a specific property inherits by default ("inherited: yes") or not ("inherited: no").
... inherited properties when no value for an inherited property has been specified on an element, the element gets the com
puted value of that property on its parent element.
... see also css values for controlling inheritance: inherit, initial, unset, and revert introducing the css cascade cascade and inheritance css key concepts: css syntax, at-rule, comments, specificity and inheritance, the box, layout modes and visual formatting models, and margin collapsing, or the initial, com
puted, resolved, specified, used, and actual values.
line-height - CSS: Cascading Style Sheets
the com
puted value is the same as the specified <number>.
...the com
puted value is this <percentage> multiplied by the element's com
puted font size.
...it also applies to ::first-letter and ::first-line.inheritedyespercentagesrefer to the font size of the element itselfcom
puted valuefor percentage and length values, the absolute length, otherwise as specifiedanimation typeeither number or length formal syntax normal | <number> | <length> | <percentage> examples basic example /* all rules below have the same resultant line height */ div { line-height: 1.2; font-size: 10pt; } /* number/unitless */ div { line-height: 1.2em; font-size: 10pt; } /* length */ div...
mask-size - CSS: Cascading Style Sheets
the rendered size of the mask image is then com
puted as follows: if both components of mask-size are specified and are not auto: the mask image renders at the specified size.
... if mask-size has one auto component and one non-auto component: if the image has an intrinsic proportion, then render it using the specified dimension and com
pute the other dimension from the specified dimension and the intrinsic proportion.
... formal definition initial valueautoapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocom
puted valueas specified, but with relative lengths converted into absolute lengthsanimation typerepeatable list of simple list of length, percentage, or calc formal syntax <bg-size>#where <bg-size> = [ <length-percentage> | auto ]{1,2} | cover | containwhere <length-percentage> = <length> | <percentage> examples setting mask size as a percentage css #masked { width: 200px; height: 200px; b...
Rich-Text Editing in Mozilla - Developer guides
: 200px; border: 1px #000000 solid; padding: 12px; overflow: scroll; } #textbox #sourcetext { padding: 0; margin: 0; min-width: 498px; min-height: 200px; } #editmode label { cursor: pointer; } </style> </head> <body onload="initdoc();"> <form name="compform" method="post" action="sample.php" onsubmit="if(validatemode()){this.mydoc.value=odoc.innerhtml;return true;}return false;"> <in
put type="hidden" name="mydoc"> <div id="toolbar1"> <select onchange="formatdoc('formatblock',this[this.selectedindex].value);this.selectedindex=0;"> <option selected>- formatting -</option> <option value="h1">title 1 <h1></option> <option value="h2">title 2 <h2></option> <option value="h3">title 3 <h3></option> <option value="h4">title 4 <h4></option> <option value="h5">title...
...a0cb/i1+3yitha7prkiphvbups+/fvrvv8/f///////////////////////////////////////////////yh5baeaab8alaaaaaawabyaaawn4ceozgmeakqubgsuspvbsyfjjvds6njlb0khr4akbcmfscgbqaocwjf5gwquvyksfbwze+awibv0ghfog2ewidchjwriqo9e2fx4xd5r+b0ddaenbxbhbhn2dgwdaqfjjyvhcqyrfgoidgiqjawtcqmriwwmfgicnvcaaamoak+blaortluyt7i5uiuhads=" /> </div> <div id="textbox" contenteditable="true"><p>lorem ipsum</p></div> <p id="editmode"><in
put type="checkbox" name="switchmode" id="switchbox" onchange="setdocmode(this.checked);" /> <label for="switchbox">show html</label></p> <p><in
put type="submit" value="send" /></p> </form> </body> </html> note: if you want to see how to standardize the creation and the insertion of your editor in your page, please see our more complete rich-text editor example.
... firefox 3 and contenteditable original document information author(s): doron rosenberg, netscape communications published: 04 apr 2003 revised: 01 jul 2003 revised: 24 apr 2005, joel coreson revised: 28 nov 2006, ken kuhns, com
putronicsusa revised: 19 dec 2007, mark finkle ...
Date and time formats used in HTML - HTML: Hypertext Markup Language
elements that use such formats include certain forms of the <in
put> element that let the user choose or specify a date, time, or both, as well as the <ins> and <del> elements, whose datetime attribute specifies the date or date and time at which the insertion or deletion of content occurred.
... for <in
put>, 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.
... when you set the value of a datetime-local in
put, the string is normalized into a standard form.
<ol>: The Ordered List element - HTML: Hypertext Markup Language
examples simple example <ol> <li>fee</li> <li>fi</li> <li>fo</li> <li>fum</li> </ol> the above html will out
put: using roman numeral type <ol type="i"> <li>introduction</li> <li>list of greivances</li> <li>conclusion</li> </ol> the above html will out
put: using the start attribute <p>finishing places of contestants not in the winners’ circle:</p> <ol start="4"> <li>speedwalk stu</li> <li>saunterin’ sam</li> <li>slowpoke rodriguez</li> </ol> the above html will out
put: nestin...
...--> <ol> <li>second item first subitem</li> <li>second item second subitem</li> <li>second item third subitem</li> </ol> </li> <!-- here's the closing </li> tag --> <li>third item</li> </ol> the above html will out
put: unordered list inside ordered list <ol> <li>first item</li> <li>second item <!-- closing </li> tag not here!
... --> <ul> <li>second item first subitem</li> <li>second item second subitem</li> <li>second item third subitem</li> </ul> </li> <!-- here's the closing </li> tag --> <li>third item</li> </ol> the above html will out
put: specifications specification status comment html living standardthe definition of '<ol>' in that specification.
<select>: The HTML Select element - HTML: Hypertext Markup Language
it also accepts most of the general form in
put attributes such as required, disabled, autofocus, etc.
... autofocus this boolean attribute lets you specify that a form control should have in
put focus when the page loads.
... usage notes selecting multiple options on a desktop com
puter, there are a number of ways to select multiple options in a <select> element with a multiple attribute: mouse users can hold the ctrl, command, or shift keys (depending on what makes sense for your operating system) and then click multiple options to select/deselect them.
<sub>: The Subscript element - HTML: Hypertext Markup Language
this is a common use case for <sub>: <p>according to the com
putations by nakamura, johnson, and mason<sub>1</sub> this will result in the complete annihilation of both particles.</p> the resulting out
put looks like this: variable subscripts in mathematics, families of variables related to the same concept (such as distances along the same axis) are represented using the same variable name with a subscript following.
...<var>x<sub>n</sub></var>.</p> the resulting out
put: chemical formulas when writing a chemical formula, such as h20, the number of atoms of a given element within the described molecule is represented using a subscripted number; in the case of water, the subscripted "2" indicates that there are two atoms of hydrogen in the molecule.
... another example: <p>almost every developer's favorite molecule is c<sub>8</sub>h<sub>10</sub>n<sub>4</sub>o<sub>2</sub>, which is commonly known as "caffeine."</p> the out
put: specifications specification status comment html living standardthe definition of '<sub> and <sup>' in that specification.
<ul>: The Unordered List element - HTML: Hypertext Markup Language
examples simple example <ul> <li>first item</li> <li>second item</li> <li>third item</li> </ul> the above html will out
put: nesting a list <ul> <li>first item</li> <li>second item <!-- look, the closing </li> tag is not placed here!
... <li>second item second subitem second sub-subitem</li> <li>second item second subitem third sub-subitem</li> </ul> </li> <!-- closing </li> tag for the li that contains the third unordered list --> <li>second item third subitem</li> </ul> <!-- here is the closing </li> tag --> </li> <li>third item</li> </ul> the above html will out
put: ordered list inside unordered list <ul> <li>first item</li> <li>second item <!-- look, the closing </li> tag is not placed here!
... --> <ol> <li>second item first subitem</li> <li>second item second subitem</li> <li>second item third subitem</li> </ol> <!-- here is the closing </li> tag --> </li> <li>third item</li> </ul> the above html will out
put: specifications specification status comment html living standardthe definition of '<ul>' in that specification.
autocapitalize - HTML: Hypertext Markup Language
the autocapitalize global attribute is an enumerated attribute that controls whether and how text in
put is automatically capitalized as it is entered/edited by the user.
...instead, it affects the behavior of other in
put mechanisms, such as virtual keyboards on mobile devices and voice in
put.
... the autocapitalize attribute never causes autocapitalization to be enabled for an <in
put> element with a type attribute whose value is url, email, or password.
dir - HTML: Hypertext Markup Language
the auto value should be used for data with an unknown directionality, like data coming from user in
put, eventually stored in a database.
... browsers might allow users to change the directionality of <in
put> and <textarea>s in order to assist with authoring content.
... chrome and safari provide a directionality option in the contextual menu of in
put fields while internet explorer and edge use the key combinations ctrl + left shift and ctrl + right shift.
tabindex - HTML: Hypertext Markup Language
accessibility concerns avoid using the tabindex attribute in conjunction with non-interactive content to make something intended to be interactive focusable by keyboard in
put.
...the content should be semantically described using interactive elements (<a>, <button>, <details>, <in
put>, <select>, <textarea>, etc.) instead.
... recommendation only supported on <a>, <area>, <button>, <in
put>, <object>, <select>, and <textarea>.
Data URLs - HTTP
echo -n hello|base64 # out
puts to console: agvsbg8= echo -n hello>a.txt base64 a.txt # out
puts to console: agvsbg8= base64 a.txt>b.txt # out
puts to file b.txt: agvsbg8= encoding on microsoft windows encoding on windows can be done through powershell or some dedicated tool.
... [convert]::tobase64string([text.encoding]::utf8.getbytes("hello")) # out
puts to console: agvsbg8= bash -c "echo -n hello`|base64" # out
puts to console: agvsbg8= # the backtick (`) is used to escape the piping (|) character here common problems this section describes problems that commonly occur when creating and using data urls.
... data:text/html,lots of text...<p><a name%3d"bottom">bottom</a>?arg=val this represents an html resource whose contents are: lots of text...<p><a name="bottom">bottom</a>?arg=val syntax the format for data urls is very simple, but it's easy to forget to
put a comma before the "data" segment, or to incorrectly encode the data into base64 format.
Content-Location - HTTP
pointing to a new document (http 201 created) say you're creating a new blog post through a site's api:
put /new/post host: example.com content-type: text/markdown # my first blog post!
... <in
put type="text" name="recipient"> </label> </p> <p> <label>how much?
... <in
put type="number" name="amount"> </label> </p> <button type="submit">send money</button> </form> when the form is submitted, the site generates a receipt for the transaction.
Index - HTTP
65 feature-policy: camera directive, feature policy, feature-policy, http, reference, camera the http feature-policy header camera directive controls whether the current document is allowed to use video in
put devices.
... 69 feature-policy: microphone feature policy, feature-policy, http, header, microphone the http feature-policy header microphone directive controls whether the current document is allowed to use audio in
put devices.
...for
put and other non-safe methods, it will only upload the resource in this case.
Protocol upgrade mechanism - HTTP
the value of the key is com
puted using an algorithm defined in the websocket specification, so this does not provide security.
... the server's response's sec-websocket-accept header will have a value com
puted based upon the specified key.
... sec-websocket-accept: hash hash if a sec-websocket-key header was provided, the value of this header is com
puted by taking the value of the key, concatenating the string "258eafa5-e914-47da-95ca-c5ab0dc85b11" to it, taking the sha-1 hash of that concatenated string, resulting in a 20-byte value.
HTTP response status codes - HTTP
put or post: the resource describing the result of the action is transmitted in the message body.
...this is typically the response sent after post requests, or some
put requests.
...this response is intended to prevent the 'lost update' problem, where a client gets a resource's state, modifies it, and
puts it back to the server, when meanwhile a third party has modified the state on the server, leading to a conflict.
Regular expression syntax cheatsheet - JavaScript
assertions if you are looking to contribute to this document, please also edit the original article boundary-type assertions characters meaning ^ matches the beginning of in
put.
... $ matches the end of in
put.
... the ^ character may also indicate the beginning of in
put.
Using Promises - JavaScript
read the following example: new promise((resolve, reject) => { console.log('initial'); resolve(); }) .then(() => { throw new error('something failed'); console.log('do this'); }) .catch(() => { console.error('do that'); }) .then(() => { console.log('do this, no matter what happened before'); }); this will out
put the following text: initial do that do this, no matter what happened before note: the text do this is not displayed because the something failed error caused a rejection.
...you can capture these for analysis and handling by your code—or just to avoid having them cluttering up your out
put—by adding a handler for the unhandledrejection event, like this: window.addeventlistener("unhandledrejection", event => { /* you might start here by adding code to examine the promise specified by event.promise and the reason in event.reason */ event.preventdefault(); }, false); by calling the event's preventdefault() method, you tell the javascript runtime not to do its defau...
...result3) */ timing to avoid surprises, functions passed to then() will never be called synchronously, even with an already-resolved promise: promise.resolve().then(() => console.log(2)); console.log(1); // 1, 2 instead of running immediately, the passed-in function is
put on a microtask queue, which means it runs later when the queue is emptied at the end of the current run of the javascript event loop, i.e.
getter - JavaScript
expression starting with ecmascript 2015, you can also use expressions for a com
puted property name to bind to the given function.
... description sometimes it is desirable to allow access to a property that returns a dynamically com
puted value, or you may want to reflect the status of an internal variable without requiring the use of explicit method calls.
... const o = {a: 0}; object.defineproperty(o, 'b', { get: function() { return this.a + 1; } }); console.log(o.b) // runs the getter, which yields a + 1 (which is 1) using a com
puted property name const expr = 'foo'; const obj = { get [expr]() { return 'bar'; } }; console.log(obj.foo); // "bar" smart / self-overwriting / lazy getters getters give you a way to define a property of an object, but they do not calculate the property's value until it is accessed.
Array.prototype.flatMap() - JavaScript
let arr1 = ["it's sunny in", "", "california"]; arr1.map(x => x.split(" ")); // [["it's","sunny","in"],[""],["california"]] arr1.flatmap(x => x.split(" ")); // ["it's","sunny","in", "", "california"] notice, the out
put list length can be different from the in
put list length.
...in other words, it allows you to map many items to many items (by handling each in
put item separately), rather than always one-to-one.
...[n] : [n-1, 1] ) // expected out
put: [4, 1, 4, 20, 16, 1, 18] specifications specification ecmascript (ecma-262)the definition of 'array.prototype.flatmap' in that specification.
Array.prototype.includes() - JavaScript
let arr = ['a', 'b', 'c'] arr.includes('c', 3) // false arr.includes('c', 100) // false com
puted index is less than 0 if fromindex is negative, the com
puted index is calculated to be used as a position in the array at which to begin searching for valuetofind.
... if the com
puted index is less or equal than -1 * arr.length, the entire array will be searched.
... // array length is 3 // fromindex is -100 // com
puted index is 3 + (-100) = -97 let arr = ['a', 'b', 'c'] arr.includes('a', -100) // true arr.includes('b', -100) // true arr.includes('c', -100) // true arr.includes('a', -2) // false includes() used as a generic method includes() method is intentionally generic.
Atomics.and() - JavaScript
the static atomics.and() method com
putes a bitwise and with a given value at a given position in the array, and returns the old value at that position.
... index the position in the typedarray to com
pute the bitwise and.
... value the number to com
pute the bitwise and with.
Atomics.or() - JavaScript
the static atomics.or() method com
putes a bitwise or with a given value at a given position in the array, and returns the old value at that position.
... index the position in the typedarray to com
pute the bitwise or.
... value the number to com
pute the bitwise or with.
Atomics.xor() - JavaScript
the static atomics.xor() method com
putes a bitwise xor with a given value at a given position in the array, and returns the old value at that position.
... index the position in the typedarray to com
pute the bitwise xor.
... value the number to com
pute the bitwise xor with.
Atomics - JavaScript
atomics.and() com
putes a bitwise and on the value at the specified index of the array with the provided value.
... atomics.or() com
putes a bitwise or on the value at the specified index of the array with the provided value.
...(most browsers will not allow wait() on the browser's main thread.) atomics.xor() com
putes a bitwise xor on the value at the specified index of the array with the provided value.
Intl.Collator.prototype.resolvedOptions() - JavaScript
the intl.collator.prototype.resolvedoptions() method returns a new object with properties reflecting the locale and collation options com
puted during initialization of this collator object.
... syntax collator.resolvedoptions() return value a new object with properties reflecting the locale and collation options com
puted during the initialization of the given collator object.
...if any unicode extension values were requested in the in
put bcp 47 language tag that led to this locale, the key-value pairs that were requested and are supported for this locale are included in locale.
Intl.DisplayNames.prototype.resolvedOptions() - JavaScript
the intl.displaynames.prototype.resolvedoptions() method returns a new object with properties reflecting the locale and style formatting options com
puted during the construction of the current displaynames object.
... syntax displaynames.resolvedoptions() return value an object with properties reflecting the locale and formatting options com
puted during the construction of the given displaynames object.
...if any unicode extension values were requested in the in
put bcp 47 language tag that led to this locale, the key-value pairs that were requested and are supported for this locale are included in locale.
Intl.ListFormat.prototype.resolvedOptions() - JavaScript
the intl.listformat.prototype.resolvedoptions() method returns a new object with properties reflecting the locale and style formatting options com
puted during the construction of the current listformat object.
... syntax listformat.resolvedoptions() return value an object with properties reflecting the locale and formatting options com
puted during the construction of the given listformat object.
...if any unicode extension values were requested in the in
put bcp 47 language tag that led to this locale, the key-value pairs that were requested and are supported for this locale are included in locale.
Intl.NumberFormat.prototype.resolvedOptions() - JavaScript
the intl.numberformat.prototype.resolvedoptions() method returns a new object with properties reflecting the locale and number formatting options com
puted during initialization of this numberformat object.
... syntax numberformat.resolvedoptions() return value a new object with properties reflecting the locale and number formatting options com
puted during the initialization of the given numberformat object.
...if any unicode extension values were requested in the in
put bcp 47 language tag that led to this locale, the key-value pairs that were requested and are supported for this locale are included in locale.
Intl.PluralRules.prototype.resolvedOptions() - JavaScript
the intl.pluralrules.prototype.resolvedoptions() method returns a new object with properties reflecting the locale and plural formatting options com
puted during initialization of this pluralrules object.
... syntax pluralrule.resolvedoptions() return value a new object with properties reflecting the locale and plural formatting options com
puted during the initialization of the given pluralrules object.
...if any unicode extension values were requested in the in
put bcp 47 language tag that led to this locale, the key-value pairs that were requested and are supported for this locale are included in locale.
JSON.stringify() - JavaScript
space optional a string or number object that's used to insert white space into the out
put json string for readability purposes.
... if you return a function, symbol, or undefined, the property is not included in the out
put.
...before this change json.stringify would out
put lone surrogates if the in
put contained any lone surrogates; such strings could not be encoded in valid utf-8 or utf-16: json.stringify("\ud800"); // '"�"' but with this change json.stringify represents lone surrogates using json escape sequences that can be encoded in valid utf-8 or utf-16: json.stringify("\ud800"); // '"\\ud800"' this change should be backwards-compatible as long as you pa...
Reflect.construct() - JavaScript
function oneclass() { console.log('oneclass') console.log(new.target) } function otherclass() { console.log('otherclass') console.log(new.target) } let obj1 = reflect.construct(oneclass, args) // out
put: // oneclass // function oneclass { ...
... } let obj2 = reflect.construct(oneclass, args, otherclass) // out
put: // oneclass // function otherclass { ...
... } let obj3 = object.create(otherclass.prototype); oneclass.apply(obj3, args) // out
put: // oneclass // undefined examples using reflect.construct() let d = reflect.construct(date, [1776, 6, 4]) d instanceof date // true d.getfullyear() // 1776 specifications specification ecmascript (ecma-262)the definition of 'reflect.construct' in that specification.
RegExp - JavaScript
use the constructor function when you know the regular expression pattern will be changing, or you don't know the pattern and obtain it from another source, such as user in
put.
... examples using a regular expression to change data format the following script uses the replace() method of the string instance to match a name in the format first last and out
put it in the format last, first.
... regex.lastindex // 0 (reset after match failure) the difference between the sticky flag and the global flag with the sticky flag y, the next match has to happen at the lastindex position, while with the global flag g, the match can happen at the lastindex position or later: re = /\d/y; while (r = re.exec("123 456")) console.log(r, "and re.lastindex", re.lastindex); // [ '1', index: 0, in
put: '123 456', groups: undefined ] and re.lastindex 1 // [ '2', index: 1, in
put: '123 456', groups: undefined ] and re.lastindex 2 // [ '3', index: 2, in
put: '123 456', groups: undefined ] and re.lastindex 3 // ...
String.prototype.match() - JavaScript
in
put a copy of the search string.
... const str = 'for more information, see chapter 3.4.5.1'; const re = /see (chapter \d+(\.\d)*)/i; const found = str.match(re); console.log(found); // logs [ 'see chapter 3.4.5.1', // 'chapter 3.4.5.1', // '.1', // index: 22, // in
put: 'for more information, see chapter 3.4.5.1' ] // 'see chapter 3.4.5.1' is the whole match.
...// the 'in
put' property is the original string that was parsed.
String.prototype.matchAll() - JavaScript
prior to the addition of matchall to javascript, it was possible to use calls to regexp.exec (and regexes with the /g flag) in a loop to obtain all the matches: const regexp = regexp('foo[a-z]*','g'); const str = 'table football, foosball'; let match; while ((match = regexp.exec(str)) !== null) { console.log(`found ${match[0]} start=${match.index} end=${regexp.lastindex}.`); // expected out
put: "found football start=6 end=14." // expected out
put: "found foosball start=16 end=24." } with matchall available, you can avoid the while loop and exec with g.
... instead, by using matchall, you get an iterator to use with the more convenient for...of, array spread, or array.from() constructs: const regexp = regexp('foo[a-z]*','g'); const str = 'table football, foosball'; const matches = str.matchall(regexp); for (const match of matches) { console.log(`found ${match[0]} start=${match.index} end=${match.index + match[0].length}.`); } // expected out
put: "found football start=6 end=14." // expected out
put: "found foosball start=16 end=24." // matches iterator is exhausted after the for..of iteration // call matchall again to create a new iterator array.from(str.matchall(regexp), m => m[0]); // array [ "football", "foosball" ] matchall will throw an exception if the g flag is missing.
... capture groups are ignored when using match() with the global /g flag: let regexp = /t(e)(st(\d?))/g; let str = 'test1test2'; str.match(regexp); // array ['test1', 'test2'] using matchall, you can access capture groups easily: let array = [...str.matchall(regexp)]; array[0]; // ['test1', 'e', 'st1', '1', index: 0, in
put: 'test1test2', length: 4] array[1]; // ['test2', 'e', 'st2', '2', index: 5, in
put: 'test1test2', length: 4] specifications specification ecmascript (ecma-262)the definition of 'string.prototype.matchall' in that specification.
String.prototype.split() - JavaScript
the split() method divides a string into an ordered list of substrings,
puts these substrings into an array, and returns the array.
... if separator is a regular expression with capturing parentheses, then each time separator matches, the results (including any undefined results) of the capturing parentheses are spliced into the out
put array.
...'the array has ', arrayofstrings.length, ' elements: ', arrayofstrings.join(' / ')) } const tempeststring = 'oh brave new world that has such people in it.' const monthstring = 'jan,feb,mar,apr,may,jun,jul,aug,sep,oct,nov,dec' const space = ' ' const comma = ',' splitstring(tempeststring, space) splitstring(tempeststring) splitstring(monthstring, comma) this example produces the following out
put: the original string is: "oh brave new world that has such people in it." the separator is: " " the array has 10 elements: oh / brave / new / world / that / has / such / people / in / it.
parseInt() - JavaScript
if radix is undefined, 0, or unspecified, javascript assumes the following: if the in
put string begins with "0x" or "0x" (a zero, followed by lowercase or uppercase x), radix is assumed to be 16 and the rest of the string is parsed as a hexidecimal number.
... if the in
put string begins with "0" (a zero), radix is assumed to be 8 (octal) or 10 (decimal).
... if the in
put string begins with any other value, the radix is 10 (decimal).
Property accessors - JavaScript
this out
puts 'value', since 1 is coerced into '1'.
... let object = {} object['1'] = 'value' console.log(object[1]) this also out
puts 'value', since both foo and bar are converted to the same string.
...
put another way, this does not necessarily refer to the object containing a method.
for...in - JavaScript
it may be most practically used for debugging purposes, being an easy way to check the properties of an object (by out
putting to the console or otherwise).
... var obj = {a: 1, b: 2, c: 3}; for (const prop in obj) { console.log(`obj.${prop} = ${obj[prop]}`); } // out
put: // "obj.a = 1" // "obj.b = 2" // "obj.c = 3" iterating own properties the following function illustrates the use of hasownproperty(): the inherited properties are not displayed.
... var triangle = {a: 1, b: 2, c: 3}; function coloredtriangle() { this.color = 'red'; } coloredtriangle.prototype = triangle; var obj = new coloredtriangle(); for (const prop in obj) { if (obj.hasownproperty(prop)) { console.log(`obj.${prop} = ${obj[prop]}`); } } // out
put: // "obj.color = red" specifications specification ecmascript (ecma-262)the definition of 'for...in statement' in that specification.
try...catch - JavaScript
openmyfile(); try { // tie up a resource writemyfile(thedata); } finally { closemyfile(); // always close the resource } examples nested try-blocks first, let's see what happens with this: try { try { throw new error('oops'); } finally { console.log('finally'); } } catch (ex) { console.error('outer', ex.message); } // out
put: // "finally" // "outer" "oops" now, if we already caught the exception in the inner try-block by adding a catch-block try { try { throw new error('oops'); } catch (ex) { console.error('inner', ex.message); } finally { console.log('finally'); } } catch (ex) { console.error('outer', ex.message); } // out
put: // "inner" "oops" // "finally" and now, let's rethrow the ...
... try { try { throw new error('oops'); } catch (ex) { console.error('inner', ex.message); throw ex; } finally { console.log('finally'); } } catch (ex) { console.error('outer', ex.message); } // out
put: // "inner" "oops" // "finally" // "outer" "oops" any given exception will be caught only once by the nearest enclosing catch-block unless it is rethrown.
...this includes exceptions thrown inside of the catch-block: (function() { try { try { throw new error('oops'); } catch (ex) { console.error('inner', ex.message); throw ex; } finally { console.log('finally'); return; } } catch (ex) { console.error('outer', ex.message); } })(); // out
put: // "inner" "oops" // "finally" the outer "oops" is not thrown because of the return in the finally-block.
Strict mode - JavaScript
strict mode for scripts to invoke strict mode for an entire script,
put the exact statement "use strict"; (or 'use strict';) before any other statements.
... strict mode for functions likewise, to invoke strict mode for a function,
put the exact statement "use strict"; (or 'use strict';) in the function's body before any other statements.
...changes generally fall into these categories: changes converting mistakes into errors (as syntax errors or at runtime), changes simplifying how the particular variable for a given use of a name is com
puted, changes simplifying eval and arguments, changes making it easier to write "secure" javascript, and changes anticipating future ecmascript evolution.
Template literals (Template strings) - JavaScript
in that case, the tag expression (usually a function) gets called with the template literal, which you can then manipulate before out
putting.
... to escape a backtick in a template literal,
put a backslash (\) before the backtick.
... // let str2 = strings[2]; let agestr; if (ageexp > 99){ agestr = 'centenarian'; } else { agestr = 'youngster'; } // we can even return a string built using a template literal return `${str0}${personexp}${str1}${agestr}`; } let out
put = mytag`that ${ person } is a ${ age }`; console.log(out
put); // that mike is a youngster tag functions don't even need to return a string!
JavaScript typed arrays - JavaScript
for example, given the code above, we can continue like this: let int16view = new int16array(buffer); for (let i = 0; i < int16view.length; i++) { console.log('entry ' + i + ': ' + int16view[i]); } here we create a 16-bit integer view that shares the same buffer as the existing 32-bit view and we out
put all the values in the buffer as 16-bit integers.
... now we get the out
put 0, 0, 2, 0, 4, 0, 6, 0.
...consider this: int16view[0] = 32; console.log('entry 0 in the 32-bit array is now ' + int32view[0]); the out
put from this is "entry 0 in the 32-bit array is now 32".
Mapping the width and height attributes of media container elements to their aspect-ratio - Web media technologies
jank problems when loading images in the olden days of web development, it was always seen as a good practice to add width and height attributes to your html <img> elements, so that when browsers first loaded the page, they could
put a correctly-sized placeholder box in the layout for each image to appear in when it finally loads.
...folks from mozilla then expanded on this thinking, working on a proposal in the css box sizing level 4 draft to define an aspect-ratio property and propose the idea of using the width and height attributes to com
pute layout.
...this appears in the browser's internal ua stylesheet, similar to the following: img, in
put[type="image"], video, embed, iframe, marquee, object, table { aspect-ratio: attr(width) / attr(height); } this actually affects any element that acts as a container for complex or mixed visual media — <embed>, <iframe>, <marquee>, <object>, <table>, and <video>, in addition to actual images (<img> and <in
put type="image">).
OpenSearch description format
<opensearchdescription xmlns="http://a9.com/-/spec/opensearch/1.1/" xmlns:moz="http://www.mozilla.org/2006/browser/search/"> <shortname>[snk]</shortname> <description>[search engine full name and summary]</description> <in
putencoding>[utf-8]</in
putencoding> <image width="16" height="16" type="image/x-icon">[https://example.com/favicon.ico]</image> <url type="text/html" template="[searchurl]"> <param name="[key name]" value="{searchterms}"/> <!-- other params if you need them… --> <param name="[other key name]" value="[parameter value]"/> </url> <url type="application/x-suggestions+json" template=...
... in
putencoding the character encoding to use when submitting in
put to the search engine.
...if you want to
put your search plugin on amo, remove the auto-updating feature before submitting it.
pathLength - SVG: Scalable Vector Graphics
this value is then used to calibrate the browser's distance calculations with those of the author, by scaling all distance com
putations using the ratio pathlength/(com
puted value of path length).
...basically, all com
putations that require the length of the path.
...in that case, 100 user units --> <path d="m 0,10 h100"/> <!-- com
pute everything like if the path length was 90 user units long --> <path d="m 0,20 h100" pathlength="90"/> <!-- com
pute everything like if the path length was 50 user units long --> <path d="m 0,30 h100" pathlength="50"/> <!-- com
pute everything like if the path length was 30 user units long --> <path d="m 0,40 h100" pathlength="30"/> <!-- com
pute everything like if the path length ...
patternContentUnits - SVG: Scalable Vector Graphics
only one element is using this attribute: <pattern> html,body,svg { height:100% } <svg viewbox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> <!-- a pattern tile that content coordinates and values are com
puted against the current coordinate user space.
... note that the size of the tile is com
puted against the bounding box of the target element --> <pattern id="p1" width="20%" height="20%" patterncontentunits="userspaceonuse"> <circle cx="10" cy="10" r="10" /> </pattern> <!-- a pattern tile that content coordinates and values are com
puted against the bounding box of the target element.
... note that the size of the tile is also com
puted against the bounding box of the target element --> <pattern id="p2" width="20%" height="20%" patterncontentunits="objectboundingbox"> <circle cx=".1" cy=".1" r=".1" /> </pattern> <!-- left square with user space tiles --> <rect x="10" y="10" width="80" height="80" fill="url(#p1)" /> <!-- right square with bounding box tiles --> <rect x="110" y="10" width="80" height="80" fill="url(#p2)" /> </svg> pattern for <pattern>, patterncontentunits defines the coordinate system in use for the content of the element.
<feComposite> - SVG: Scalable Vector Graphics
the <fecomposite> svg filter primitive performs the combination of two in
put images pixel-wise in image space using one of the porter-duff compositing operations: over, in, atop, out, xor, and lighter.
... the arithmetic operation is useful for combining the out
put from the <fediffuselighting> and <fespecularlighting> filters with texture data.
... if the arithmetic operation is chosen, each result pixel is com
puted using the following formula: result = k1*i1*i2 + k2*i1 + k3*i2 + k4 where: i1 and i2 indicate the corresponding pixel channel values of the in
put image, which map to in and in2 respectively k1, k2, k3 and k4 indicate the values of the attributes with the same name usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes » presentation attributes » filter primitive attributes » class style specific attributes in in2 operator k1 k2 k3 k4 dom interface this element implements the svgfecompositeelement interface.
Specification Deviations - SVG: Scalable Vector Graphics
requiring svg authors to know which elements can and cannot take a 'class' attribute would just
put an extra burden on them.
... extending the 'style' attribute to apply to all svg elements should only really be visible to svg authors if they call viewcss.getcom
putedstyle on the element or one of its descendants.
... since these elements and their descendants are not displayed, it seems unlikely that anyone will either specify 'style' or call getcom
putedstyle on them.
SVG Filters Tutorial - SVG: Scalable Vector Graphics
the keyword sourcealpha identifies the in
put for this primitive, is in this case in
put 'in'.
... svg filter example <defs> <filter id="drop-shadow"> <fegaussianblur in="sourcealpha" stddeviation="3"/> </filter> </defs> <g id="ghost" style="filter: url(#drop-shadow);"/> <!--ghost drawing in here--> </g> this above example will not produced the desired out
put.
...<femerge> primitive contains the nodes <femergenode> taking as in
put the result offsetblur , this will allow it to appear below the sourcegraphic implementation of more primitives <defs> <filter id="drop-shadow"> <fegaussianblur in="sourcealpha" stddeviation="3" result="blur"/> <feoffset in="blur" dx="4" dy="4" result="offsetblur"/> </filter> <femerge> <femergenode in="offsetblur"/> <femergenode in="sourcegraphic"/> </femerge> </defs> ...
Subresource Integrity - Web security
note: an integrity value's "hash" part is, strictly speaking, a cryptographic digest formed by applying a particular hash function to some in
put (for example, a script or stylesheet file).
... tools for generating sri hashes you can generate sri hashes from the command-line with openssl using a command invocation such as this: cat filename.js | openssl dgst -sha384 -binary | openssl base64 -a or with shasum using a command invocation such as this: shasum -b -a 384 filename.js | awk '{ print $1 }' | xxd -r -p | base64 notes: the pipe-through-xxd step takes the hexadecimal out
put from shasum and converts it to binary.
... the pipe-through-awk step is necessary because shasum will pass the hashed filename in its out
put to xxd.
Using templates and slots - Web Components
nism for holding client- side content that is not to be rendered when a page is loaded but may subsequently be instantiated during runtime using javascript.</span> </element-details> about that snippet, notice these points: the snippet has two instances of <element-details> elements which both use the slot attribute to reference the named slots "element-name" and "description" we
put in the <element-details> shadow root .
... 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.
... within the rendered <details> out
put, the content in the <element-details> elements fills the named slots from the shadow root.
<xsl:namespace-alias> - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the <xsl:namespace-alias> element is a rarely used device that maps a namespace in the stylesheet to a different namespace in the out
put tree.
...to prevent a normally xsl:-prefixed literal result element (which should simply be copied as-is to the result tree) from being misunderstood by the processor, it is assigned a temporary namespace which is appropriately re-converted back to the xslt namespace in the out
put tree.
... result-prefix specifies the desired namespace for the out
put tree.
<xsl:stylesheet> - XSLT: Extensible Stylesheet Language Transformations
optional attributes exclude-result-prefixes specifies any namespace used in this document that should not be sent to the out
put document.
... in
put-type-annotations specifies whether type annotations are stripped from the element so the same results are produced whether the source documents have been validated against a schema or not.
... xslt 2.0 added the attributes xpath-default-namespace, default-validation, default-collation, and in
put-type-annotations and made all attributes except version optional.
XSLT elements reference - XSLT: Extensible Stylesheet Language Transformations
use the {{listsubpages}} macro once the bcd for <xsl:fallback>, <xsl:import>, <xsl:namespace-alias>, <xsl:number>, <xsl:out
put>, <xsl:stylesheet>, <xsl:text> and <xsl:value-of> is fully migrated.
... <xsl:apply-imports><xsl:apply-templates><xsl:attribute-set><xsl:attribute><xsl:call-template><xsl:choose><xsl:comment><xsl:copy-of><xsl:copy><xsl:decimal-format><xsl:element><xsl:fallback><xsl:for-each><xsl:if><xsl:import><xsl:include><xsl:key><xsl:message><xsl:namespace-alias><xsl:number><xsl:otherwise><xsl:out
put><xsl:param><xsl:preserve-space><xsl:processing-instruction><xsl:sort><xsl:strip-space><xsl:stylesheet><xsl:template><xsl:text><xsl:transform><xsl:value-of><xsl:variable><xsl:when><xsl:with-param> <xsl:apply-imports> <xsl:apply-templates> <xsl:attribute> <xsl:attribute-set> <xsl:call-template> <xsl:choose> <xsl:comment> <xsl:copy> <xsl:copy-of> <xsl:decimal-format> <xsl:element> <xsl:fallback> (not supported) <xsl:for-each> <xsl:if> <xsl:import> (mostly supported) ...
... <xsl:include> <xsl:key> <xsl:message> <xsl:namespace-alias> (not supported) <xsl:number> (partially supported) <xsl:otherwise> <xsl:out
put> (partially supported) <xsl:param> <xsl:preserve-space> <xsl:processing-instruction> <xsl:sort> <xsl:strip-space> <xsl:stylesheet> (partially supported) <xsl:template> <xsl:text> (partially supported) <xsl:transform> <xsl:value-of> (partially supported) <xsl:variable> <xsl:when> <xsl:with-param> ...
WebAssembly Concepts - WebAssembly
we have run into performance problems, however, when trying to use javascript for more intensive use cases like 3d games, virtual and augmented reality, com
puter vision, image/video editing, and a number of other domains that demand native performance (see webassembly use cases for more ideas).
... writing a rust application and targeting webassembly as its out
put.
...it’s very easy to modify the emscripten out
put and turn it into whatever web app you require.
Converting WebAssembly text format to wasm - WebAssembly
next, execute the wat2wasm program, passing it the path to the in
put file, followed by an -o parameter, followed by the path to the out
put file: wat2wasm simple.wat -o simple.wasm this will convert the wasm into a file called simple.wasm, which contains the .wasm assembly code.
... viewing the assembly out
put because the out
put file is assembly-based, it can’t be viewed in a normal text editor.
...try this: wat2wasm simple.wat -v this will give you an out
put in your terminal in the following way: ...
Understanding WebAssembly text format - WebAssembly
for example, local.get is defined to push the value of the local it read onto the stack, and i32.add pops two i32 values (it implicitly grabs the previous two values pushed onto the stack), com
putes their sum (modulo 2^32) and pushes the resulting i32 value.
...
putting this together with what we have already learned, we can finally define a module containing our own simple function: (module (func (param $lhs i32) (param $rhs i32) (result i32) local.get $lhs local.get $rhs i32.add)) this function gets two parameters, adds them together, and returns the result.
... there are a lot more things that can be
put inside function bodies, but we will start off simple for now, and you’ll see a lot more examples as you go along.
Using the WebAssembly JavaScript API - WebAssembly
these methods are easier than their non-streaming counterparts, because they can turn the byte code directly into module/instance instances, cutting out the need to separately
put the response into an arraybuffer.
...tch, compile, and instantiate your wasm module as before — add the following to the bottom of your script: webassembly.instantiatestreaming(fetch('memory.wasm'), { js: { mem: memory } }) .then(results => { // add code here }); since this module exports its memory, given an instance of this module called instance we can use an exported function accumulate() to create and populate an in
put array directly in the module instance’s linear memory (mem).
... const out
put = document.getelementbyid('out
put'); function asserteq(msg, got, expected) { out
put.innerhtml += `testing ${msg}: `; if (got !== expected) out
put.innerhtml += `fail!<br>got: ${got}<br>expected: ${expected}<br>`; else out
put.innerhtml += `success!
Content Scripts - Archive of obsolete content
jpm doesn't make a "data" directory by default, so you must add it and
put your content scripts in there.
...jpm doesn't make a "data" directory by default, so you must add it and
put your content scripts in there.
ui/sidebar - Archive of obsolete content
you should see console out
put like: console.log: add-on: add-on script got the message console.log: add-on: sidebar script got the reply using ready the ready event is emitted when the dom for the sidebar's content is ready.
...you should see console out
put like: console.log: add-on: sidebar script got the message console.log: add-on: add-on script got the reply globals constructors sidebar(options) creates a sidebar.
jpm - Archive of obsolete content
specify --stop-on-error to stop running tests after the first failure: jpm test --stop-on-error --tbpl print test out
put in treeherder format --times number run tests number of times: jpm test --times 2 -v --verbose verbose operation.
...this means that if you want to see the out
put from console.log() messages, you have to tweak a setting.
Creating annotations - Archive of obsolete content
you should see the highlight appearing when you move the mouse over certain elements: click on the highlight and you should see something like this in the console out
put: info: show info: http://blog.mozilla.com/addons/2011/02/04/overview-amo-review-process/, post-2249,when you submit a new add-on, you will have to choose between 2 review tracks: full review and preliminary review.
...you should see a panel with a text area for a note: enter the note and press the return key: you should see console out
put like this: info: http://blog.mozilla.com/addons/2011/02/04/overview-amo-review-process/, post-2249,when you submit a new add-on, you will have to choose between 2 review tracks: full review and preliminary review.
Getting started (cfx) - Archive of obsolete content
navigate to it, type cfx init, and hit enter: mkdir my-addon cd my-addon cfx init you'll see some out
put like this: * lib directory created * data directory created * test directory created * doc directory created * readme.md written * package.json written * test/test-main.js written * lib/main.js written * doc/main.md written your sample add-on is now ready for testing: try "cfx test" and then "cfx run".
...this means that if you want to see out
put from console.log() messages, you'll have to tweak a setting.
Logging - Archive of obsolete content
the following add-on logs the html content of every tab the user loads, by calling console.log() inside a content script: require("sdk/tabs").on("ready", function(tab) { tab.attach({ contentscript: "console.log(document.body.innerhtml);" }); }); console out
put if you are running your add-on from the command line (for example, executing jpm run or jpm test) then the console's messages appear in the command shell you used.
... but note that by default, calls to console.log() will not result in any out
put in the error console for any installed add-ons: this includes add-ons installed using the add-on builder or using tools like the extension auto-installer.
Canvas code snippets - Archive of obsolete content
ale', 'settransform', 'stroke', 'strokerect', 'stroketext', 'transform', 'translate']; var gettermethods = ['createpattern', 'drawfocusring', 'ispointinpath', 'measuretext', // drawfocusring not currently supported // the following might instead be wrapped to be able to chain their child objects 'createimagedata', 'createlineargradient', 'createradialgradient', 'getimagedata', '
putimagedata' ]; var props = ['canvas', 'fillstyle', 'font', 'globalalpha', 'globalcompositeoperation', 'linecap', 'linejoin', 'linewidth', 'miterlimit', 'shadowoffsetx', 'shadowoffsety', 'shadowblur', 'shadowcolor', 'strokestyle', 'textalign', 'textbaseline']; for (let m of methods) { let method = m; canvas2dcontext.prototype[method] = function() { this.ctx[method].appl...
...; image.onerror = reject; }).then(accept => { canvas.width = this.width; canvas.height = this.height; ctxt.clearrect(0, 0, this.width, this.height); ctxt.drawimage(this, 0, 0); accept(canvas.todataurl()); }); } usage: loadimagefile('myimage.jpg').then(string64 => { alert(string64); }); if you want to get instead the base64 content of a local file using the file <in
put> element, you must use the filereader object.
Dialogs and Prompts - Archive of obsolete content
explicit if you are not satisfied with the layout of predefined buttons in dialog, you can
put explicit button elements in your xul file and add a dlgtype attribute to them.
... be sure to use ondialog* attributes on dialog element instead of
putting oncommand on the button with dlgtype, because button's oncommand is executed only when the button is pressed, and ondialog* handlers are executed for keyboard and other events too.
Rosetta - Archive of obsolete content
nevertheless, the increasing com
putational power of modern browsers together with the introduction of typed arrays in ecmascript allow us, in theory, to build full virtual machines in pure ecmascript.
...first, you should declare a function which will translate an in
put plain-text written in c to an out
put plain-text written in ecmascript.
Appendix D: Loading Scripts - Archive of obsolete content
chromeworkers also have access to ctypes and a limited number of thread safe xpcom classes, but are otherwise limited to simple com
putation based on data passed via messages and xmlhttprequests.
...they may safely perform synchronous xmlhttprequests or other intensive com
putation which would normally need to be broken up into multiple callbacks.
Appendix E: DOM Building and Insertion (HTML & XUL) - Archive of obsolete content
the demo of this is seen at jsfiddle :: jsontodom example var json = ['html:div', {style:'background-color:springgreen'}, ['html:form', {id:'myfirstform'}, ['html:in
put', {type:'text', value:'my field'}], ['html:button', {id:'mybtn'}, 'button text content'] ], ['html:form', {id:'mysecondform'}, ['html:in
put', {type:'text', value:'my field for second form'}], ['html:div', {}, 'sub div with textcontent and siblings', ['html:br', {}], ['html:in
put', {type:'checkbox', id:'myc...
... for webextensions the most simple way is sanitize the out
put about javascript inline declaration and other wrong content.
Creating a dynamic status bar extension - Archive of obsolete content
function inforeceived() { var samplepanel = document.getelementbyid('stockwatcher'); var out
put = httprequest.responsetext; if (out
put.length) { // remove whitespace from the end of the string; // this gets rid of the end-of-line characters out
put = out
put.replace(/\w*$/, ''); // build the tooltip string var fieldarray = out
put.split(','); // assert that fieldarray[0] == 'goog' samplepanel.label = 'goog: ' + fieldarray[1]; samplepanel.tooltiptext = 'chg: ...
...we then fetch the result returned by the web server into the variable out
put from the xmlhttprequest.responsetext property.
Images, Tables, and Mysterious Gaps - Archive of obsolete content
now consider what happens when we
put that line in a table cell (figure 6).
...getting rid of this space could be as easy as
putting each image in its own cell and making them all block-level, but let's leave them all together in a single cell so we can illustrate another approach.
Installing plugins to Gecko embedding browsers on Windows - Archive of obsolete content
netscape 6.1 and onwards, however, will write these keys, and so creating a plugin installer that
puts the shared object (dll) in the right place becomes much easier, since the relevant meta-information is present in the win32 system registry.
...in addition, if you have made your plugin scriptable and accessible from javascript, you ought to
put the associated xpt file in the components directory.
No Proxy For configuration - Archive of obsolete content
put this into "no proxy for" ...for example use...
...so use this- dogwood.state.mo.us .intra.state.mo.us dor.intranet or dogwood.state.mo.us, .intra.state.mo.us, dor.intranet note that you don't need to (read shouldn't)
put a * for all hosts with that domain ending.
Source code directories overview - Archive of obsolete content
if files can be grouped into submodules, they are usually
put in their own third level directory and given a unique name (e.g.
...document.goofy = 1), this code will create the "goofy" node,
put it on the "document" node and manipulate it according to any later javascript commands.
Locked config settings - Archive of obsolete content
putting into place locked configuration settings this feature exists for mozilla and firefox, but not for thunderbird locked settings can be
put into a mozilla.cfg file in the c:\program files\mozilla.org\mozilla directory.
...the lockpref command
puts into place a locked preference, whereas the defaultpref command merely
puts into a place a default value (which the user may override in his prefs.js file).
Bookmark Keywords - Archive of obsolete content
in figure 2, we can see the bookmark has been filed into a folder called "widgets." you can create a folder with another name, or not
put your keymarks into a folder at all.
... the %s is a little flag that means "insert user in
put here." it doesn't have to go at the end of the location field-- it can be anywhere inside the field.
Enabling the behavior - updating the status periodically - Archive of obsolete content
to enable its functionality, we have to add a reference to our javascript code into navigator.xul, just as we
put a reference to our css code into that file back in specifying the appearance.
...
put the javascript code into a file called tinderstatus.js in the same directory as navigator.xul and reference it in navigator.xul where other javascript scripts are referenced: ...
Using Dehydra - Archive of obsolete content
example: printing the location of type declarations save the following c++ code dumptypes.cc: typedef int myint; struct foo { int i; char *c; }; save the following analysis script dumptypes.js: function process_type(t) { print("type found: " + t.name + " location: " + t.loc); } function in
put_end() { print("hello, world!"); } compile using the following command: $ g++ -fplugin=~/dehydra/gcc_dehydra.so -fplugin-arg=~/dumptypes.js -o/dev/null -c dumptypes.cc note:for g++4.5 and up use -fplugin-arg-gcc_dehydra-script= rather than -fplugin-arg it should print the following results: type found: foo location: test.cc:2:12 type found: myint location: test.cc:1:13 hello, world!
... see documentation for: process_type, in
put_end, print, .loc property example: using attributes to mark a class as "final" save the following code as final.cc: // this class should not be subclassed!
Repackaging Firefox - Archive of obsolete content
the following diagram represents an overview of the process and the pieces involved: you will need the following to get started: a macintosh com
puter (even for repackaging windows or linux only); it may be either powerpc or intel based.
...
put together your extension that customizes firefox.
JavaScript crypto - Archive of obsolete content
s identity of user ca/ra sends wrapped encryption private key to kra kra sends escrow verification back to ca ca creates and signs certificates ca sends certificates back to the user (importusercertificates) typical use the ca's enrollment page could look something like this: <!doctype html> <h2>request a cert</h2> <form name="reqform" method="post" action="http://your.ra.site.org"> <p><in
put type=hidden name=cert_request value=""> <p>name: <in
put type=text name=name value=""> <p>password: <in
put type=password name="password" value=""> <p><in
put type=submit name="send" value="submit"> </form> <script> /* the following values could be filled in by the server cgi */ var authenticator = "server_magic"; var keytransportcert = null; var crmfobject = null; var form = document.forms[0]; fun...
...ull, "rsa-dual-use"); } return false; } function setcrmfrequest() { form.cert_request.value = crmfobject.request; form.submit(); } form.onsubmit = validate; </script> on completion of the request, the ca may submit a page that looks something like this: <!doctype html> <h2>certificate request successful</h2> <p>hit 'load' to load your certificate</p> <form name="reqform"> <p><in
put type=submit name="load" value="submit"></p> </form> <script> /* the following values could be filled in by the server cgi */ var nickname= "mycertnickname"; var cert = "mkjflakdjfiwjflaksufklasf ..."; var forcebackup = false; function loadcertificate() { window.crypto.importusercertificates(nickname, cert, forcebackup); return false; } document.forms[0].onsubmit = loadcertificate; </script>...
NSC_SetPIN - Archive of obsolete content
syntax ck_rv nsc_setpin( ck_session_handle hsession, ck_char_ptr poldpin, ck_ulong uloldlen, ck_char_ptr pnewpin, ck_ulong ulnewlen ); parameters nsc_setpin takes five parameters: hsession [in
put] poldpin [in
put] .
... uloldlen [in
put] .; pnewpin [in
put] .; ulnewlen [in
put] .
Priority Content - Archive of obsolete content
started: scripting plugins: macromedia flash original: scripting plugins: macromedia flash wiki location: scripting plugins: macromedia flash migrators: dependant on (these parts need to be done,
put your name down) completed: soap in netscape gecko-based browsers original: soap in netscape gecko-based browsers wiki location: soap in gecko-based browsers migrators: doron rosenberg in progress: css support charts original: css support charts and archive.org mirror wiki location: css support charts migrators: serge k.
... migrators: joel coreson note: the article links some external example files, not sure how to migrate them (perhaps via "upload file" function that's normally used for images?) also check if any extra files live in the article's directory --jens.b 14:07, 26 apr 2005 (pdt) dependant on: mostly completed*: class xbdesignmode / devedge - joel coreson please
put completed articles on the devedge page instead.
New Skin Notes - Archive of obsolete content
--beltzner
put these back in.
...--mmondor 11:54, 26 aug 2005 (pdt) for all that it is worth, i am against setting the 'base' font-size to anything other than 100%, let the user figure out which font-setting is best for him/her on his/her com
puter, rather than tweak it to what the designer feels is the right size for the designers eye(s).
Actionscript Acceptance Tests - Archive of obsolete content
in this example the .as test runs out of memory and so the expected exitcode is: 128 testname.out file that specifies expected out
put.
... when this file is defined, the out
put from the testcase is matched line by line to the .out file and any difference is considered a failure.
Cmdline tests - Archive of obsolete content
the testsuite allows more flexibility by coding scripts in python allowing any executable to run, sending commands to stdin, and asserting out
put using regular expressions.
... two use cases for the cmdline testsuite: use case 1: test the interactive cmdline debugger test contents: start avmshell -d test.abc, set breakpoint on a line, show local variable value, quit from cmdutils import * def run(): r=runtestlib() r.run_test( 'debugger locals', '%s -d testdata/debug.abc'%r.avmrd, in
put='break 53\ncontinue\nnext\ninfo locals\nnext\ninfo locals\nquit\n', expectedout=['local1 = undefined','local2 = 10','local2 = 15'] ) use case 2: test -memstats returns memory logs to stdout test contents: start avmshell -memstats test.abc, assert stdout contains 'gross stats', 'sweep m reclaimed n pages.' from cmdutils import * def run(): r=runtestlib() r.run_test(name='memstats', ...
Running Tamarin acceptance tests - Archive of obsolete content
reason: inconsistencies in different debug out
put, need to implement regex matching of diffs 2527 running abcasm/branchtocommon.abs 2530 running abcasm/arithmetic.abs 2529 running abcasm/bkpt.abs 2528 running abcasm/bkptline.abs 2526 running abcasm/bug_476556.abs 2524 running abcasm/bug_491056.abs ...
...c:/python26/python.exe ./runtests.py --threads=3 other flags of interest (for a list of all flags, run runtests.py with -h/--help) --nohtml : will suppress the creation of an html out
put file --rebuildtests : will only rebuild test .abc's, will not attempt to run them.
Tamarin build documentation - Archive of obsolete content
download ftp://ftp.mozilla.org/pub/js/tamarin/builds/asc/latest/asc.jar
put it in utils/ building tamarin for android 2.3.3 on mac public sdk/ndk setup to build tamarin for android you will need an sdk/ndk.
...unzip the file and
put the /openssl main folder under your sdk/ndk top folder.
TraceVis - Archive of obsolete content
if tracemonkey is built with tracevis, and run with tracevis enabled, then tracemonkey will out
put a log of all its activity transitions.
...the blog post linked above has examples of this out
put and how to analyze it.
Using Breakpoints in Venkman - Archive of obsolete content
once you've created a script that will be executed when the associated breakpoint is hit, you can select a number of different options from the future breakpoint properties dialog that determine how venkman will deal with the out
put of the associated script.
...meta comments are specially formatted comments that pull in the script named after the comment and specify how to treat the out
put of that script.
Anonymous Content - Archive of obsolete content
a sample xbl binding for the file widget might look as follows: <binding id="fileupload"> <content> <html:in
put type="text"/> <html:in
put type="button"/> </content> </binding> because this content is not visible to its parent element, it is said to be anonymous content.
... <xbl:binding id="fileuploadcontrol"> <xbl:content> <html:in
put type="text" xbl:inherits="value"/> <html:in
put type="button" value="browse..."/> </xbl:content> </xbl:binding> each entry in the inherits list can either simply list an attribute (such as value in the example above), or it can specify an = separated pair consisting of the attribute on the anonymous content that should be tied to the attribute on the bound element.
spellcheck - Archive of obsolete content
--> <in
put type="text" spellcheck="true" /><br /> <textarea spellcheck="true"></textarea> <div contenteditable="true" spellcheck="true">i am some content</div> <!-- spellcheck nothing!
... --> <in
put type="text" spellcheck="false" /><br /> <textarea spellcheck="false"></textarea> <div contenteditable="true" spellcheck="false">i am some content</div> you can use spellcheck on in
put, textarea, and contenteditable elements.
textbox.onblur - Archive of obsolete content
prior to gecko 1.9 (firefox 3), the script code would execute in the context of the anonymous html <in
put> element inside the textbox binding.
... from gecko 1.9 to gecko 12.0 (firefox 12.0 / thunderbird 12.0 / seamonkey 2.9), the script code would actually execute twice, once in the context of the anonymous html <in
put> element and once in the context of the <textbox> element itself.
textbox.onfocus - Archive of obsolete content
prior to gecko 1.9 (firefox 3), the script code would execute in the context of the anonymous html <in
put> element inside the textbox binding.
... from gecko 1.9 to gecko 12.0 (firefox 12.0 / thunderbird 12.0 / seamonkey 2.9), the script code would actually execute twice, once in the context of the anonymous html <in
put> element and once in the context of the <textbox> element itself.
Attribute (XUL) - Archive of obsolete content
dayofweek firstpage first-tab fixed flags flex focused forcecomplete grippyhidden grippytooltiptext group handlectrltab height helpuri hidden hidechrome hidecolumnpicker hideheader hideseconds hidespinbuttons highlightnonmatches homepage href icon id ignoreblurwhilesearching ignorecase ignoreincolumnpicker ignorekeys image inactivetitlebarcolor increment index in
puttooltiptext insertafter insertbefore instantapply inverted iscontainer isempty key keycode keytext label lastpage lastselected last-tab left linkedpanel max maxheight maxlength maxpos maxrows maxwidth member menu menuactive min minheight minresultsforpopup minwidth mode modifiers mousethrough movetoclick multiline multiple name negate newlines next noautofocu...
...s noautohide noinitialfocus nomatch norestorefocus object observes onbeforeaccept onbookmarkgroup onchange onclick onclosetab oncommand oncommandupdate ondialogaccept ondialogcancel ondialogclosure ondialogextra1 ondialogextra2 ondialoghelp onerror onerrorcommand onextra1 onextra2 onin
put onload onnewtab onpageadvanced onpagehide onpagerewound onpageshow onpaneload onpopuphidden onpopuphiding onpopupshowing onpopupshown onsearchcomplete onselect ontextcommand ontextentered ontextrevert ontextreverted onunload onwizardback onwizardcancel onwizardfinish onwizardnext open ordinal orient pack pageid pageincrement pagestep parent parsetype persist persistence phase pickertooltiptext placeholder popup position predicate preference p...
XUL Events - Archive of obsolete content
attribute: ondragover in
put this event is sent when a user enters text in a textbox.
... attribute: onin
put overflow this event is only sent to a box or other layout element with a css overflow property set to a value other than 'visible'.
How to implement a custom XUL query processor component - Archive of obsolete content
rulematched: function(aquery, arulenode) { }, // the out
put for a result has been removed and the result is no longer being used by the builder hasbeenremoved: function() { } }; // basic wrapper for nsisimpleenumerator function templateresultset(aarrayofdata) { this._index = 0; this._array = aarrayofdata; } templateresultset.prototype = { queryinterface: xpcomutils.generateqi([components.interfaces.nsisimpleenumerator]), hasmoreelements: fun...
...ve data return this._data; }, initializeforbuilding: function(adatasource, abuilder, arootnode) { // perform any initialization that can be delayed until the content builder // is ready for us to start }, done: function() { // called when the builder is destroyed to clean up state }, compilequery: function(abuilder, aquery, arefvariable, amembervariable) { // out
puts a query object.
Introduction to XUL - Archive of obsolete content
conceptually, the xul language will allow someone with a text editor, given a package of components which can work together, the ability to
put together an application by specifying something like this (for an application on an os using menubars across the top of its applications' windows): main window containing menubar area at top across width of window containing menubar (and its contents) toolbar area below menubar across width of window containing main toolbar (and its contents) application-specific content area below...
...a window can just as easily contain html form elements (using the html namespace) like any html content (though there is no need to
put them within a form element).
maxWidth - Archive of obsolete content
note: prior to gecko 6.0, you could use this on <in
put> elements; this was never intended, was a violation of the html specification, and has been fixed.
... use the size to set the maximum width of in
put fields.
Actions - Archive of obsolete content
this action contains only one element, but you can
put as many or as few elements as you need.
...in fact, any ids you
put inside a template action will be ignored.
Attribute Substitution - Archive of obsolete content
this can be done simply by
putting two variables next to each other in an attribute value separated by a caret (^).
... <label value="?name" class="?gender^?nationality"/> the caret is considered a separator between variables, however it will not appear in the out
put.
Multiple Queries - Archive of obsolete content
the results from the first query are generated first and out
put generated for it, followed by the results and out
put for the second query, and so forth for all of the queries.
...the builder hasn't
put all the matches for the first query before the matches for the second query.
Result Generation - Archive of obsolete content
« previousnext » rdf in this section, we'll look at generating template out
put using rdf datasources.
...you could navigate to b, c and d and generate three blocks of out
put by following the arrows forward.
Creating toolbar buttons (Customize Toolbar Window) - Archive of obsolete content
ette id="browsertoolbarpalette"> <toolbarbutton id="myextension-button" class="toolbarbutton-1" label="&toolbarbutton.label;" tooltiptext="&toolbarbutton.tooltip;" onclick="myextension.onclick(event);"/> </toolbarpalette> onclick: function(event) { switch(event.button) { case 0: // left click break; case 1: // middle click break; case 2: // right click break; } } to add more buttons,
put more <toolbarbutton> elements inside the <toolbarpalette> element.
...to attach it to the overlay,
put this processing instruction (pi) at the top of the overlay file: <?xml-stylesheet href="chrome://myextension/skin/toolbar-button.css" type="text/css"?> note: the css file with your toolbar styles needs to be included in the overlay file, as you would expect, but also in the chrome.manifest file.
Complete - Archive of obsolete content
for more information about version checks, see: extension versioning, update and compatibility the installed jar to use disk space efficiently on the end user's com
puter, the three directories (content, locale, skin) are packed in a jar file.
...this jar file will be installed as-is on the end user's com
puter, and unpacked at run-time by the application.
Additional Install Features - Archive of obsolete content
the following code will make a copy of the file "/bin/grep" and
put it in the directory "/main".
...for example, you might
put the following as the last section of your script: if (getlasterror() == success) { performinstall(); } else { cancelinstall(); } error codes that could be returned by getlasterror() are listed in the mozilla source file nsinstall.h.
Anonymous Content - Archive of obsolete content
filename in
put field example another example, this time for a field for entering a filename: <binding id="fileentry"> <content> <textbox/> <button label="browse..."/> </content> </binding> attaching this binding to an element will cause it to contain a field for entering text, followed by a browse button.
..."dropbox"> <menupopup> <menuitem label="1000"/> <menuitem label="2000"/> </menupopup> </menu> css: menu.dropbox { -moz-binding: url('chrome://example/skin/example.xml#dropbox'); } xbl: <binding id="dropbox"> <content> <children/> <xul:textbox flex="1"/> <xul:button src="chrome://global/skin/images/dropbox.jpg"/> </content> </binding> this example creates an in
put field with a button beside it.
Commands - Archive of obsolete content
it is normal to
put a group of commands inside a commandset element, together near the top of the xul file, as in the following: <commandset> <command id="cmd_open" oncommand="alert('open!');"/> <command id="cmd_help" oncommand="alert('help!');"/> </commandset> a command is invoked when the user activates the button or other element attached to the command.
...this is where you would
put the code to handle the command.
Creating a Wizard - Archive of obsolete content
if it returns false, then the wizard does not close, which might occur if the function savedoginfo() encountered invalid in
put, for example.
...this allows you to validate the in
put entered on each page before the user continues.
Localization - Archive of obsolete content
for non-installed chrome files, you can just
put the dtd file in the same directory as the xul file.
... changing the find files example let's take a look at how we would
put all of this together by modifying the find files dialog so that it uses a dtd file for all of its text strings.
Property Files - Archive of obsolete content
although the word order is not the same in all the languages, by using getformattedstring() the specification of the order can be
put out the property files.
...for example, to
put a space at the beginning or end of a string (which would normally be stripped by the properties file parser), use \u0020 .
The Box Model - Archive of obsolete content
the horizontal box is needed as we want the labels vbox and the in
puts vbox to be placed horizontally with each other.
...as you see in the image below, the label and text in
put are placed side by side.
XUL FAQ - Archive of obsolete content
(
putting any elements there triggers bug 296418.) are prefpanes nested correctly?
...if you want to access elements inside <prefpane>, you should
put script in the <prefpane> or write script into "onpaneload" of the <prefpane>.) note, that prefwindow only works in chrome xul.
XUL Questions and Answers - Archive of obsolete content
overlaying elements without ids the original developers only tend to
put ids where they need them.
... support for non-rdf datasources for xul template is planned (bug 321170): xml datasources (bug 321171) storage (sqlite) datasources (bug 321172) when loading an xslt stylesheet into an xml i get the error: "error loading stylesheet: an xslt stylesheet load was blocked for security reasons." that error is from a security check that has been
put up to safeguard against cross-site-scripting attacks.
XUL Template Primer - Bindings - Archive of obsolete content
the subject may refer to any variable that has been com
puted in the <conditions>, or it may refer to another <binding>'s object variable.[1] in our example, the second <binding>'s subject does this: the value for the ?addr variable is com
puted by the first <binding> the predicate must name the uri of an rdf property, in this case, nc:address.
...the value of the object's variable will be com
puted by invoking the gettarget() method using the object's value as the asource argument, and the predicate's resource as the aproperty argument.
menuitem - Archive of obsolete content
name type: string name radio menuitems with the same name as
put into a group.
...be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to
put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable).
radio - Archive of obsolete content
group type: string group name buttons with type="radio" and the same value for their group attribute are
put into the same group.
...be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to
put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable).
tree - Archive of obsolete content
attributes disablekeynavigation, disabled, editable, enablecolumndrag, flags, hidecolumnpicker, onselect, rows, seltype, statedatasource, tabindex, treelines properties accessibletype, builderview, columns, contentview, currentindex, disablekeynavigation, disabled, editingcolumn, editingrow, enablecolumndrag, firstordinalcolumn, in
putfield, seltype, selstyle, tabindex, treeboxobject, view examples a tree with several columns <tree flex="1" rows="2"> <treecols> <treecol id="sender" label="sender" flex="1"/> <treecol id="subject" label="subject" flex="2"/> </treecols> <treechildren> <treeitem> <treerow> <treecell label="joe@somewhere.com"/> <treecell label="top secret plans"/> ...
... in
putfield type: textbox element read-only property that holds the textbox that is used for editing.
nsIContentPolicy - Archive of obsolete content
query any dom properties that depend on style (e.g., com
puted style).
... return value accept or reject_* example you can implement this interface easily by including the nsicontentpolicy.h header file and implementing public nsicontentpolicy into your class, like this: //
put this into your header file #include "_path_to_sdk/include/content/nsicontentpolicy.h" class myclass: public nsisupports, public nsicontentpolicy { ...
2006-12- 08 - Archive of obsolete content
discussions [further com
putesize changes l.
... david baron is planning to make an additional change to the com
putesize api onthe reflow branch to resolve a number of float-related bugs (359135,360093), and some others.
NPN_UTF8FromIdentifier - Archive of obsolete content
syntax #include <npruntime.h> n
putf8 *npn_utf8fromidentifier(npidentifier identifier); parameters the function has the following parameter: <tt>identifier</tt> the string identifier whose corresponding string should be returned.
... returns a utf-8 string as a sequence of n
putf8 bytes, or null if the specified <tt>identifier</tt> isn't a string identifier.
NPString - Archive of obsolete content
« gecko plugin api reference « scripting plugins summary npstring is a struct that holds a pointer to a sequence of 8-bit units (n
putf8) making up a utf-8 string, and the number of 8-bit units in the utf-8 string.
...syntax typedef struct _npstring { const n
putf8 *utf8characters; uint32_t utf8length; } npstring; fields the data structure has the following fields: utf8characters an array of the utf-8 characters comprising the string.
Adobe Flash - Archive of obsolete content
performance and flash as is the case with any plug-in content, flash content has the potential to slow down or even completely stall not just the tab it's running in, but the entire browser and even the entire com
puter it's being used on.
... accessing flash from javascript the simple example below shows how in
put into an html text box in a form field can be transferred to a flash animation (the grey text box below).
What is RSS - Archive of obsolete content
they can
put it on their website.
... if you don't want any of that done, then don't
put it in a non-password-protected rss feed, and, of course, don't make the password public.
title - Archive of obsolete content
it is used to specify thetitle of a <channel>, an <image>, an <item>, or a <textin
put>.
...>?</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> </tr> <tr> <td>rss image element</td> <td><image></td> <td>✔</td> <td>✔</td> <td>✔</td> <td>✔</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> </tr> <tr> <td>rss item element</td> <td><item></td> <td>✔</td> <td>✔</td> <td>✔</td> <td>✔</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> </tr> <tr> <td>rss text in
put element</td> <td><textin
put></td> <td>✔</td> <td>✔</td> <td>✔</td> <td>✔</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> <td>?</td> </tr> </table> </center> see also none rss element</td> <th colspan="9" style="text-align:center">rss version ...
Threats - Archive of obsolete content
network traffic typically passes through intermediate com
puters, such as routers, or is carried over unsecured networks, such as wireless hotspots.
...for example, a person can pretend to have the email address jdoe@example.net, or a com
puter can identify itself as a site called www.example.net when it is not.
Building a Theme - Archive of obsolete content
create the install manifest open the file called install.rdf that you created at the top of your extension's folder hierarchy and
put this inside: <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <description about="urn:mozilla:install-manifest"> <em:id>sample@example.net</em:id> <em:version>1.0</em:version> <em:type>4</em:type> <!-- target application this theme can install into, with minimum and maximum supported ...
... create a new text file and
put the full path to your development folder inside (e.g.
Scratchpad - Archive of obsolete content
as an alternative, starting in firefox 71, you can use the multi-line mode of the javascript console in
put.
... unlike the web console, which is designed for interpreting a single line of code at a time, scratchpad lets you edit larger chunks of javascript code, then execute it in various ways depending on how you want to use the out
put.
Using SSH to connect to CVS - Archive of obsolete content
if you don't already run ssh-agent on your com
puter, it's probably easiest to start it up whenever you set up your environment to checkout and build mozilla.
...first ssh-agent is called and its out
put is evaluated in the current environment.
Developing cross-browser and cross-platform pages - Archive of obsolete content
opera 6+ allows users to set the browser identification string via a menu internet explorer uses the windows registry safari, konqueror and icab browsers can mask their browser identity under internet explorer or netscape labels a user or browser distributor can
put what they want in the navigator.useragent string and this may trick your code into executing a "wrong" block of code.
... moreover, there are many cases where even the accurately-identified browser does not perform as it is re
puted/expected to.
::-ms-browse - Archive of obsolete content
the ::-ms-browse css pseudo-element is a microsoft extension that represents the button that opens the file picker of <in
put type="file">.
...izing 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-browse example html <label>select image: <in
put type="file"></label> css in
put[type="file"]::-ms-browse { color: red; background-color: yellow; } result out
put example specifications not part of any specification.
::-ms-fill-upper - Archive of obsolete content
a slider control is one possible representation of <in
put type="range">.
... see also ::-ms-fill-lower ::-ms-track ::-ms-thumb ::-moz-range-progress css-tricks: styling cross-browser compatible range in
puts with css quirksmode: styling and scripting sliders ...
::-ms-thumb - Archive of obsolete content
a slider control is one possible representation of <in
put type="range">.
... see also ::-ms-track ::-ms-fill-upper ::-ms-fill-lower ::-webkit-slider-thumb ::-moz-range-thumb css-tricks: styling cross-browser compatible range in
puts with css quirksmode: styling and scripting sliders ...
::-ms-track - Archive of obsolete content
a slider control is one possible representation of <in
put type="range">.
...ackground-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-track see also ::-ms-thumb ::-ms-fill-upper ::-ms-fill-lower ::-webkit-slider-runnable-track ::-moz-range-track css-tricks: styling cross-browser compatible range in
puts with css quirksmode: styling and scripting sliders ...
::-ms-value - Archive of obsolete content
the ::-ms-value css pseudo-element is a microsoft extension that applies rules to the value of a text or password <in
put> control or the content of a <select> control.
...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 syntax ::-ms-value example in
put::-ms-value { color: lime; font-style: italic; } to disable the default styling: select::-ms-value { background-color: transparent; color: inherit; } specifications not part of any specification.
azimuth - Archive of obsolete content
stereo out
put produce a lateral sound stage, while binaural headphones and multi-speaker setups allow for a fully three-dimensional stage.
... initial valuecenterapplies toall elementsinheritedyescom
puted 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.
E4X for templating - Archive of obsolete content
security and escaping function e (str) { if (typeof str === 'xml') {str = str.tostring();} return str; } function quot (s) { // useful for placing user in
put within inline javascript; may be combined with escape function above as well if (typeof s === 'string') { return s.replace(/"/g, '"').replace(/'/g, '''); } if (typeof s === 'xml') { return s.tostring().replace(/"/g, '"').replace(/'/g, '''); } return string(s).replace(/"/g, '"').replace(/'/g, '''); } localization e4x works nicely w...
... if (typeof item === 'string') { ret += new xml(item); } else { var ser = (new xmlserializer()).serializetostring(item); ret += new xml(ser); } }); return ret; } example: var fruits = <fruits> <item>pear</item> <item>banana</item> <item>grapes</item> </fruits>; alert( // using a javascript 1.8 expression closure <out
put> {sort(fruits.*, function (a, b) a.text() > b.text() /* text() call may not be necessary */ )} </out
put>.toxmlstring() ); /* <out
put> <item>banana</item> <item>grapes</item> <item>pear</item> </out
put> */ the above utility also works if the in
put is an htmlcollection, an array of strings, an array of dom objects, or an array of e4x objects (assuming the comparison function is changed...
Array comprehensions - Archive of obsolete content
the in
put to an array comprehension does not itself need to be an array; iterators and generators can also be used.
... even strings may be used as in
put; to achieve the filter and map actions (under array-like objects) above: var str = 'abcdef'; var consonantsonlystr = [for (c of str) if (!(/[aeiouaeiou]/).test(c)) c].join(''); // 'bcdf' var interpolatedzeros = [for (c of str) c + '0' ].join(''); // 'a0b0c0d0e0f0' again, the in
put form is not preserved, so we have to use join() to revert back to a string.
Generator comprehensions - Archive of obsolete content
when the in
put to the comprehension is itself a small array the overhead involved is insignificant — but when the in
put is a large array or an expensive (or indeed infinite) generator the creation of a new array can be problematic.
... generators enable lazy com
putation of sequences, with items calculated on-demand as they are needed.
Debug - Archive of obsolete content
the debug object is an instrinsic global object that sends out
put to a debugger.
...in windows 8.x store apps, the write and writeln functions of the debug object display strings in the visual studio out
put window at run time.
XForms Custom Controls Examples - Archive of obsolete content
out
put showing images <binding id="out
put-image" extends="chrome://xforms/content/xforms.xml#xformswidget-base"> <content> <html:div> <html:img anonid="content"/> </html:div> </content> <implementation implements="nsixformsuiwidget"> <method name="refresh"> <body> var img = document.getanonymouselementbyattribute(this, "anonid", "content"); img.setattribute("src", this.stringvalue); return true; </body> </method> </implementation> </binding> out
put showing xhtml <binding id="out
put-xhtml" extends="chrome://xforms/content/xforms-xhtml.xml#xformswidg...
...et-out
put"> <content> <children includes="label"/> <xhtml:div class="xf-value" anonid="content"></xhtml:div> <children/> </content> <implementation implements="nsixformsuiwidget"> <field name="_domparser">null</field> <property name="domparser" readonly="true"> <getter> if (!this._domparser) this._domparser = new domparser(); return this._domparser; </getter> </property> <method name="refresh"> <body> // get new value, parse, and import it.
XForms Textarea Element - Archive of obsolete content
single-node binding special in
putmode - isn't supported.
...characteristics analogous widgets are <xhtml:textarea/> and <xul:textbox multiline="true"/> if the incremental attribute has the value true, then the bound instance node is updated on every user in
put.
Using XForms and PHP - Archive of obsolete content
?> but remember this (quote from php documentation): remember that header() must be called before any actual out
put is sent, either by normal html tags, blank lines in a file, or from php.
... it is a very common error to read code with include(), or require(), functions, or another file access function, and have spaces or empty lines that are out
put before header() is called.
Fixing Incorrectly Sized List Item Markers - Archive of obsolete content
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 com
puted 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.
Windows Media in Netscape - Archive of obsolete content
this is the example: needs to be embedded in wiki page (can it just be
put here?) <object id="playerex2" classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6" height="200" width="200"> <param name="uimode" value="full"> <param name="autostart" value="true"> <param name="url" value="media/preludesteel.wma"> your browser does not support the activex windows media player </object> the same markup (used above and shown below) will work in both ie and netscape 7...
...here, for example, is a code snippet that works equally well on both netscape 7.1 and ie: <object id="player" height="0" width="0" classid="clsid:6bf52a52-394a-11d3-b153-00c04f79faa6"> <param name="autostart" value="true"> </object> <in
put type="button" name="playmedia" value="play" onclick="startmediaup()"> <in
put type="button" name="stopmedia" value="stop" onclick="shutmediadown()"> <p>this example shows a minimally-functional player <script> <!-- function startmediaup () { document.player.url = "preludesteel.wma"; document.player.controls.play(); } function shutmediadown () { document.player.controls.stop(); } --> </s...
Index - Game development
found 74 pages: # page tags and summary 1 game development apps, game development, gamedev, games, html5 games, javascript games, web gaming is one of the most popular com
puter activities.
...fragment shaders com
pute the renderings of a shape's colors and other attributes.
Building up a basic demo with the PlayCanvas engine - Game development
built for modern browsers, playcanvas is a fully-featured 3d game engine with resource loading, an entity and component system, advanced graphics manipulation, collision and physics engine (built with ammo.js), audio, and facilities to handle control in
puts from various devices (including gamepads).
... we will try
putting together a simple demo first — a cube rendered on the screen.
Implementing controls using the Gamepad API - Game development
the gamepad api achieves this by providing an interface exposing button presses and axis changes that can be used inside javascript code to handle the in
put.
...the discussion is still ongoing as to whether they should be
put back, and in what form.
Extra lives - Game development
add the ballleavescreen() function definition at the end of our code: function ballleavescreen() { lives--; if(lives) { livestext.settext('lives: '+lives); lifelosttext.visible = true; ball.reset(game.world.width*0.5, game.world.height-25); paddle.reset(game.world.width*0.5, game.world.height-5); game.in
put.ondown.addonce(function(){ lifelosttext.visible = false; ball.body.velocity.set(150, -150); }, this); } else { alert('you lost, game over!'); location.reload(); } } instead of instantly printing out the alert when you lose a life, we first subtract one life from the current number and check if it's a non-zero value.
... if yes, then the player still has some lives left and can continue to play — they will see the life lost message, the ball and paddle positions will be reset on screen and on the next in
put (click or touch) the message will be hidden and the ball will start to move again.
Visual-js game engine - Game development
1) click create application 2) enter new application name in in
put prompt 3) select folder for server part of application (important : www is not secure place) 4) select folder for client part of application ( any path in www) 5) new app name will appear in project list , select and click open application 6) open your server folder : install node.js modules one way - use windows bat-s file (in server root folder with prefix install_ ) second way - open ...
...path object can be saved intro localhost , you can collect object and
put it direct source code .
Accessibility tree (AOM) - MDN Web Docs Glossary: Definitions of Web-related terms
for instance, a link with the text ‘read more’ will have ‘read more’ as its name (more on how names are com
puted in the accessible name and description com
putation spec).
... additionally, the accessibility tree often contains information on what can be done with an element: a link can be followed, a text in
put can be typed into, etc.
Block - MDN Web Docs Glossary: Definitions of Web-related terms
for example, <p> is by default a block-level element, whereas <a> is an inline element — you can
put several links next to one another in your html source and they will sit on the same line as one another in the rendered out
put.
...for example, you can
put a block of statements after an if (condition) block, indicating that the interpreter should run the code inside the block if the condition is true, or skip the whole block if the condition is false.
Control flow - MDN Web Docs Glossary: Definitions of Web-related terms
the control flow is the order in which the com
puter executes statements in a script.
... code is run in order from the first line in the file to the last line, unless the com
puter runs across the (extremely frequent) structures that change the control flow, such as conditionals and loops.
First CPU idle - MDN Web Docs Glossary: Definitions of Web-related terms
first cpu idle measures when a page is minimally interactive, or when the window is quiet enough to handle user in
put.
...generally, it occurs when most, but not necessarily all visible ui elements are interactive, and the user interface responds, on average, to most user in
put within 50ms.
First interactive - MDN Web Docs Glossary: Definitions of Web-related terms
first interactive, also known as first cpu idle, is a non-standard web performance metric that measures when the user's window is quiet enough to handle user in
put, or what is termed as minimally interactive.
... minimally interactive is defined as when some, but not necessarily all, ui elements on the page have loaded and are interactive, and, on average, respond to user in
put in a reasonable amount of time.
Hoisting - MDN Web Docs Glossary: Definitions of Web-related terms
instead, the variable and function declarations are
put into memory during the compile phase, but stay exactly where you typed them in your code.
... learn more technical example one of the advantages of javascript
putting function declarations into memory before it executes any code segment is that it allows you to use a function before you declare it in your code.
Idempotent - MDN Web Docs Glossary: Definitions of Web-related terms
implemented correctly, the get, head,
put, and delete method are idempotent, but not the post method.
... technical knowledge description of common idempotent methods: get, head,
put, delete, options, trace description of common non-idempotent methods: post,patch, connect ...
NAT - MDN Web Docs Glossary: Definitions of Web-related terms
nat (network address translation) is a technique for letting multiple com
puters share an ip address.
... nat assigns unique addresses to each com
puter on the local network and adjusts incoming/outgoing network traffic to send data to the right place.
NaN - MDN Web Docs Glossary: Definitions of Web-related terms
now, if this com
putation was a small part of a much larger algorithm, it would be really painful to figure out where the error actually occurs.
... fortunately, since the result will be nan and i know my divisor may turn out to be 0, i can set up testing conditions that prevent any such com
putations in the first place or notify me of where they happen.
Plaintext - MDN Web Docs Glossary: Definitions of Web-related terms
plaintext refers to information that is being used as an in
put to an encryption algorithm, or to ciphertext that has been decrypted.
... it is frequently used interchangeably with the term cleartext, which more loosely refers to any information, such as a text document, image, etc., that has not been encrypted and can be read by a human or com
puter without additional processing.
RAIL - MDN Web Docs Glossary: Definitions of Web-related terms
the performance mantra of rail is "focus on the user; the end goal isn't to make your site perform fast on any specific device, it's to make users happy." there are 4 stages of interaction: page load, idle, response to in
put, and scrolling and animation.
... in acronym order, the main tenets are: response respond to users immediately, acknowledging any user in
put in 100ms or less.
Random Number Generator - MDN Web Docs Glossary: Definitions of Web-related terms
a prng (pseudorandom number generator) is an algorithm that out
puts numbers in a complex, seemingly unpredictable pattern.
...these include: that it's com
putationally unfeasible for an attacker (without knowledge of the seed) to predict its out
put that if an attacker can work out its current state, this should not enable the attacker to work out previously emitted numbers.
Recursion - MDN Web Docs Glossary: Definitions of Web-related terms
a recursive function can receive two in
puts: a base case (ends recursion) or a recursive case (resumes recursion).
... def recurse(x): if x > 0: print(x) recurse(x - 1) recurse(10) the out
put will look like this: 10 9 8 7 6 5 4 3 2 1 0 learn more general knowledge recursion (com
puter science) on wikipedia more details about recursion in javascript ...
SQL Injection - MDN Web Docs Glossary: Definitions of Web-related terms
sql injection takes advantage of web apps that fail to validate user in
put.
... how to prevent before executing the queries for the user credentials, make some changes like the following: $id = $_get['id'] (1) $id = stripslashes($id) (2) $id = mysql_real_escape_string($id) so due to (1) each single quote (') in the in
put string is replaced with double quotes ("), and due to (2) before every (') it adds (/).
Server - MDN Web Docs Glossary: Definitions of Web-related terms
a hardware server is a shared com
puter on a network, usually powerful and housed in a data center.
... for example: an internet-connected web server is sending a html file to your browser software so that you can read this page local area network server for file, name, mail, print, and fax minicom
puters, mainframes, and super com
puters at data centers learn more general knowledge introduction to servers server (com
puting) on wikipedia ...
TCP handshake - MDN Web Docs Glossary: Definitions of Web-related terms
tcp (transmission control protocol) is a transport layer host-to-host protocol for connection-oriented communication between two com
puters on an ip network.
...the three message mechanism is designed so that two com
puters that want to pass information back and forth to each other can negotiate the parameters of the connection before transmitting data such as http browser requests.
Unicode - MDN Web Docs Glossary: Definitions of Web-related terms
by assigning each character a number, programmers can create character encodings, to let com
puters store, process, and transmit any combination of languages in the same file or program.
...if it was not clearly marked which parts of the data were in which character set, other programs and com
puters would display the text incorrectly, or damage it during processing.
Speculative parsing - MDN Web Docs Glossary: Definitions of Web-related terms
if you use a <base> element to override the base uri of your page,
put the element in the non-scripted part of the document.
... avoiding losing tree builder out
put speculative tree building fails when document.write() changes the tree builder state such that the speculative state after the </script> tag no longer holds when all the content inserted by document.write() has been parsed.
Test your skills: WAI-ARIA - Learn web development
how can you give the search in
put a suitable label, without explicitly adding a visible text label to the dom?
... if you would like your work assessed, or are stuck and want to ask for help:
put your work into an online shareable editor such as codepen, jsfiddle, or glitch.
Accessibility - Learn web development
we have
put together a course that includes all the essential information you need to work towards your goal.
... note: if you are working on a com
puter/tablet/other devices where you don't have the ability to create your own files, you can try out most of the code examples in an online coding program such as jsbin or glitch.
Advanced styling effects - Learn web development
other box shadow features unlike text-shadow, box-shadow has an inset keyword available —
putting this at the start of a shadow declaration causes it to become an inner shadow, rather than an outer shadow.
...instead, the circle function is taking its centre point from the centre of the image file, as if we had
put a compass in the middle of the file and drawn a circle that fits inside the file.
CSS layout - Learn web development
we have
put together a course that includes all the essential information you need to work towards your goal.
... note: if you are working on a com
puter/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as jsbin or glitch.
Using your new knowledge - Learn web development
if you prefer you could move this css to a separate file when you create the example on your local com
puter.
... assessment or further help if you would like your work assessed, or are stuck and want to ask for help:
put your work into an online shareable editor such as codepen, jsfiddle, or glitch.
Using CSS generated content - Learn web development
if you specify content in your stylesheet that requires translation, you have to
put those parts of your stylesheet in different files and arrange for them to be linked with the appropriate language versions of your doucment.
... html a text where i need to <span class="ref">something</span> css .ref::before { font-weight: bold; color: navy; content: "reference "; } out
put the character set of a stylesheet is utf-8 by default, but it can also be specified in the link, in the stylesheet itself, or in other ways.
Styling text - Learn web development
we have
put together a course that includes all the essential information you need to work towards your goal.
... note: if you are working on a com
puter/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as jsbin, codepen or glitch.
Learn to style HTML using CSS - Learn web development
we have
put together a course that includes all the essential information you need to work towards your goal.
... before starting this topic, you should also be familiar with using com
puters and using the web passively (i.e., just looking at it, consuming the content).
What text editors are available? - Learn web development
the sheer number of choices is a bit overwhelming, since a text editor is so basic to com
puter science (yes, web development is com
puter science).
...your com
puter may already be installed with one of the editors suggested above (e.g.
How do I use GitHub Pages? - Learn web development
here's what you'd type if you've
put your website in a directory called test-site on your desktop: cd desktop/test-site when the command line is pointing inside your website directory, type the following command, which tells the git tool to turn the directory into a git repository: git init an aside on command line interfaces the best way to upload your code to github is via the command line — this is a window where y...
...you tell the com
puter to do something in the terminal by typing in a command and hitting enter, as seen above.
What are browser developer tools? - Learn web development
you'll notice a number of clickable tabs at the top of the css viewer: com
puted: this shows the com
puted styles for the currently selected element (the final, normalized values that the browser applies).
...in example.js, a breakpoint has been set on the statement listitems.push(in
putnewitem.value); the final two sections only appear when the code is running.
What is a URL? - Learn web development
a protocol is a set method for exchanging or transferring data around a com
puter network.
... linguistic semantics are of course irrelevant to com
puters.
Common questions - Learn web development
at its most basic, the internet is a massive network of com
puters communicating with each other.
... this article shows how to publish your site online with ftp tools — one of the most common ways to get a website online so others can access it from their com
puters.
Example - Learn web development
a simple form html content <form action="/my-handling-form-page" method="post"> <div> <label for="name">name:</label> <in
put type="text" id="name" name="user_name"> </div> <div> <label for="mail">e-mail:</label> <in
put type="email" id="mail" name="user_email"> </div> <div> <label for="msg">message:</label> <textarea id="msg" name="user_message"></textarea> </div> <div class="button"> <button type="submit">send your message</button> </div> </form> css content form { /* just to center the form on the page */ margin: 0 auto; width: 400px; /* to see the limits of the form */ padding: 1em; border: 1px solid #ccc; border-radius: 1em; } div + div { margin-top:...
... 1em; } label { /* to make sure that all label have the same size and are properly align */ display: inline-block; width: 90px; text-align: right; } in
put, textarea { /* to make sure that all text field have the same font settings by default, textarea are set with a monospace font */ font: 1em sans-serif; /* to give the same size to all text field */ width: 300px; -moz-box-sizing: border-box; box-sizing: border-box; /* to harmonize the look & feel of text field border */ border: 1px solid #999; } in
put:focus, textarea:focus { /* to give a little highligh on active elements */ border-color: #000; } textarea { /* to properly align multiline text field with their label */ vertical-align: top; /* to give enough room to type some text */ height...
JavaScript basics - Learn web development
*/ if your comment contains no line breaks, it's an option to
put it behind two slashes like this: // this is a comment operators an operator is a mathematical symbol which produces a result based on two values (or variables).
...
put this onclick event handler (below) on the button.
Publishing your website - Learn web development
previous overview: getting started with the web next once you finish writing the code and organizing the files that make up your website, you need to
put it all online so people can find it.
...you
put website files on the web server.
The web and web standards - Learn web development
you wouldn't want a single company suddenly deciding to
put the entire web behind a paywall, or releasing a new version of html that everyone has to buy to continue making web sites, or worse still, just deciding they aren't interested any more and just turning it off.
... it isn't all fun and games however — building web sites is a more complicated proposition than it used to be, and you'll have to
put some time in to studying all the different technologies you need to use, all the techniques and best practices you need to know, and all the typical patterns you'll be called upon to implement.
Getting started with the Web - Learn web development
publishing your website once you have finished writing the code and organizing the files that make up your website, you need to
put it all online so people can find it.
...how the web works outlines what happens when you view a webpage on your com
puter.
Tips for authoring fast-loading HTML pages - Learn web development
reducing the use of inline scripts in general, and reducing the use of document.write() to out
put content in particular, can improve overall page loading.
...first, browsers will have no need to perform error-correction when parsing the html (this is aside from the philosophical issue of whether to allow format variation in user in
put and then programmatically "correct" or normalize it; or whether, instead, to enforce a strict, no-tolerance in
put format).
Define terms with HTML - Learn web development
how to mark informal description in textbooks, the first time a keyword occurs, it's common to
put the keyword in bold and define it right away.
... improving the visual out
put here's how a graphical browser displays the foregoing list: if you want the keywords to stand out better, you could try bolding them.
Use HTML to solve common problems - Learn web development
how to create a list of items with html how to stress or emphasize content how to indicate that text is important how to display com
puter code with html how to annotate images and graphics how to mark abbreviations and make them understandable how to add quotations and citations to web pages how to define terms with html hyperlinks one of the main reasons for html is making navigation easy with hyperlinks, which can be used in many different ways: how to create a hyperlink how to create a table of contents with html ...
...it's one of the most complex html structures, and mastering it is not easy: how to create a data table how to make html tables accessible data representation how to represent numeric and code values with html — see superscript and subscript, and representing com
puter code.
Test your skills: HTML images - Learn web development
you should
put some appropriate information into the tooltip.
... if you would like your work assessed, or are stuck and want to ask for help:
put your work into an online shareable editor such as codepen, jsfiddle, or glitch.
Multimedia and Embedding - Learn web development
we have
put together a course that includes all the essential information you need to work towards your goal.
... note: if you are working on a com
puter/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as jsbin or glitch.
HTML table basics - Learn web development
because tables are not the right tool for layout, and the markup is more complex than with css layout techniques, the screenreaders' out
put will be confusing to their users.
... the initial markup looks like this: <table> <tr> <th>animals</th> </tr> <tr> <th>hippopotamus</th> </tr> <tr> <th>horse</th> <td>mare</td> </tr> <tr> <td>stallion</td> </tr> <tr> <th>crocodile</th> </tr> <tr> <th>chicken</th> <td>hen</td> </tr> <tr> <td>rooster</td> </tr> </table> but the out
put doesn't give us quite what we want: animals hippopotamus horse mare stallion crocodile chicken hen rooster we need a way to get "animals", "hippopotamus", and "crocodile" to span across two columns, and "horse" and "chicken" to span downwards over two rows.
HTML Tables - Learn web development
we have
put together a course that includes all the essential information you need to work towards your goal.
... note: if you are working on a com
puter/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as jsbin or glitch.
Asynchronous JavaScript - Learn web development
we have
put together a course that includes all the essential information you need to work towards your goal.
... note: if you are working on a com
puter/tablet/other device where you don't have the ability to create your own files, you can try out (most of) the code examples in an online coding program such as jsbin or glitch.
Test your skills: Arrays - Learn web development
note: in the examples below, if there is an error in your code it will be out
putted into the results panel on the page, to help you try to figure out the answer (or into the browser's javascript console, in the case of the downloadable version).
... if you would like your work assessed, or are stuck and want to ask for help:
put your work into an online shareable editor such as codepen, jsfiddle, or glitch.
Test your skills: Strings - Learn web development
note: in the examples below, if there is an error in your code it will be out
putted into the results panel on the page, to help you try to figure out the answer (or into the browser's javascript console, in the case of the downloadable version).
... if you would like your work assessed, or are stuck and want to ask for help:
put your work into an online shareable editor such as codepen, jsfiddle, or glitch.
Storing the information you need — Variables - Learn web development
prerequisites: basic com
puter literacy, a basic understanding of html and css, an understanding of what javascript is.
... good name examples: age myage init initialcolor finalout
putvalue audio1 audio2 bad name examples: 1 a _12 myage myage var document skjfndskjfnbdskjfb thisisareallylongstupidvariablenameman try creating a few more variables now, with the above guidance in mind.
JavaScript First Steps - Learn web development
we have
put together a course that includes all the essential information you need to work towards your goal.
... note: if you are working on a com
puter/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as jsbin or glitch.
Object building practice - Learn web development
prerequisites: basic com
puter literacy, a basic understanding of html and css, familiarity with javascript basics (see first steps and building blocks) and oojs basics (see introduction to objects).
...depending on how much processing power your com
puter/browser has, specifying several thousand balls might slow down the animation rather a lot!
Test your skills: JSON - Learn web development
note: in the example below, if there is an error in your code it will be out
putted into the results panel on the page, to help you try to figure out the answer (or into the browser's javascript console, in the case of the downloadable version).
...if you
put your code on codepen for example, it would fail because the json it is requesting is not on the same origin.
Test your skills: Object-oriented JavaScript - Learn web development
note: in the examples below, if there is an error in your code it will be out
putted into the results panel on the page, to help you try to figure out the answer (or into the browser's javascript console, in the case of the downloadable version).
... if you would like your work assessed, or are stuck and want to ask for help:
put your work into an online shareable editor such as codepen, jsfiddle, or glitch.
Test your skills: Object basics - Learn web development
note: in the examples below, if there is an error in your code it will be out
putted into the results panel on the page, to help you try to figure out the answer (or into the browser's javascript console, in the case of the downloadable version).
... if you would like your work assessed, or are stuck and want to ask for help:
put your work into an online shareable editor such as codepen, jsfiddle, or glitch.
Introducing JavaScript objects - Learn web development
we have
put together a course that includes all the essential information you need to work towards your goal.
... note: if you are working on a com
puter/tablet/other devices where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as jsbin or glitch.
Multimedia: Images - Learn web development
prerequisites: basic com
puter literacy, basic software installed, and basic knowledge of client-side web technologies.
... pngs can be saved with three different out
put combinations: 24 bit color + 8 bit transparency — offer full color acurracy and smooth transparencies at the expense of size.
Ember Interactivity: Footer functionality, conditional rendering - Learn web development
in todo.hbs, first find the following line: <li> and replace it with this — you'll notice that here we're using some more conditional content to add the class value if appropriate: <li class="{{ if @todo.iscompleted 'completed' }}"> next, find the following line: <in
put aria-label="toggle the completion of this todo" class="toggle" type="checkbox" > and replace it with this: <in
put class="toggle" type="checkbox" aria-label="toggle the completion of this todo" checked={{ @todo.iscompleted }} {{ on 'change' (fn this.todos.togglecompletion @todo) }} > note: the above snippet uses a new ember-specific keyword — fn.
... ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue com
puted properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript ...
Getting started with Ember - Learn web development
starting the development server you may start the app in development mode by typing the following command in your terminal, while inside the todomvc directory: ember server this should give you an out
put similar to the following: build successful (190ms) – serving on http://localhost:4200/ slowest nodes (totaltime >= 5%) | total (avg) -----------------------------------------+----------- broccolimergetrees (17) | 35ms (2 ms) package /assets/vendor.js (1) | 13ms concat: vendor styles/assets/vend...
... ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue com
puted properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript ...
Ember resources and troubleshooting - Learn web development
there have been a coupleof new ideas
put together into the form of addons that use the public apis, ember-set-helper and ember-box.
... ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue com
puted properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript ...
Routing in Ember - Learn web development
the reason for this is that we want the template to have a dynamic reference to the todo list, and if we returned the list directly, the data would never re-com
pute, which would result in the navigations appearing to fail / not actually filter.
... ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue com
puted properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript ...
React resources - Learn web development
routing while routing is traditionally handled by a server and not an application on the user's com
puter, it is possible to configure a web application to read and update the browser's location, and render certain user interfaces.
... ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue com
puted properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript ...
Vue resources - Learn web development
this contains information on customizing and extending the out
put you are generating via the cli.
... ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue com
puted properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript ...
Deploying our app - Learn web development
"build": "parcel build src/index.html" } note: if the scripts property already has a command inside it,
put a comma at the end of it.
... you should now be able to run the following command in the root of your project directory to run the production build step (first quit the running process with ctrl + c if you need to): npm run build this should give you an out
put like the following, showing you the production files that were created, how big they are, and how long they took to build: dist/src.99d8a31a.js.map 446.15 kb 63ms dist/src.99d8a31a.js 172.51 kb 5.55s dist/stars.7f1dd035.svg 6.31 kb 145ms dist/asteriod2.3ead4904.svg 3.51 kb 155ms dist/asteriod1.698d75e9.svg 2.9 kb 153ms dist/src.84f2edd1.css.map 2.57 kb 3ms dist/src.84f2edd1.css 1.25 kb 1.53s dist/bg.084d3fd3.svg 795 b 147ms dist/inde...
CSUN Firefox Materials
it also assists users of in
put aids because there are far fewer keys to type to get the desired location.
... tabbed browsing helps keyboard users by
putting all of the browsed documents in one firefox application window rather than cluttering the alt+tab order which makes keyboard navigation within the entire windows os much simpler.
Creating MozSearch plugins
the following xml is the bundled firefox 2 search plugin for searching using yahoo!: <searchplugin xmlns="http://www.mozilla.org/2006/browser/search/"> <shortname>yahoo</shortname> <description>yahoo search</description> <in
putencoding>utf-8</in
putencoding> <image width="16" height="16">data:image/x-icon;base64,r0lgodlheaaqajecap8aaaaaap///waaach5baeaaaialaaaaaaqabaaaaipli+py+0nogquybdened2khkffwuamezmpzsfmaihphrrguum/ft+uwaaow==</image> <url type="application/x-suggestions+json" method="get" template="http://ff.search.yahoo.com/gossip?out
put=fxjson&command={searchterms}" /> <url type="text/html" method="get" t...
... <searchplugin xmlns="http://www.mozilla.org/2006/browser/search/"> <shortname>mdc</shortname> <description>mozilla developer center search</description> <in
putencoding>utf-8</in
putencoding> <image width="16" height="16">data:image/x-icon;base64,ivborw0kggoaaaansuheugaaabaaaaaqcayaaaaf8%2f9haaaabgdbtueaak%2finwwk6qaaabl0rvh0u29mdhdhcmuaqwrvymugsw1hz2vszwfkexhjztwaaahwsurbvhjayvz%2f%2fz8djqaggjiqoe%2ffv2fv7oz8rays%2fn%2bvkfg%2fiynjfyd%2f1%2brvq7ffu3dpfpsbaaheahibcj85c8bn2nj4vwsdw%2f8zqlwkio8ccroqu0dxqlwrdshuwzbaaigjmtnnpgya9j8uqhfelwpxf2mideirksn9fwsjorka...
Creating a Login Manager storage module
to see some debugging out
put in the console set signon.debug to true using about:config.
...inmanager: " + message); }, // logs function name and arguments for debugging stub: function(arguments) { var args = []; for (let i = 0; i < arguments.length; i++) args.push(arguments[i]) this.log("called " + arguments.callee.name + "(" + args.join(",") + ")"); }, init: function slms_init() { this.stub(arguments); }, initwithfile: function slms_initwithfile(ain
putfile, aout
putfile) { this.stub(arguments); }, addlogin: function slms_addlogin(login) { this.stub(arguments); }, removelogin: function slms_removelogin(login) { this.stub(arguments); }, modifylogin: function slms_modifylogin(oldlogin, newlogin) { this.stub(arguments); }, getalllogins: function slms_getalllogins(count) { this.stub(arguments); }, removealllogi...
Capturing a minidump
for example, if the application is hanging (not responding to in
put, but hasn't crashed) then breakpad is not triggered, and it can be difficult to determine where the problem lies.
... you should now see a "command" text window with debug out
put at the top and an in
put box at the bottom.
Debugging a hang on OS X (Archived)
creating the sample on mac os x 10.5 (xcode < 4.2) when the application is still hung, open up spin control.app (it’s in your <tt>/developer/applications/performance tools/</tt> folder; if it is missing, install the latest com
puter hardware understanding development (chud) tools from apple).
... creating the sample on mac os x 10.4 when the application is still hung, open up sampler.app (it’s in your <tt>/developer/applications/performance tools/</tt> folder; if it is missing, install the latest com
puter hardware understanding development (chud) tools from apple.).
Debugging on Mac OS X
if you don't include the mozilla's .lldbinit, you must at least
put settings set target.inline-breakpoint-strategy always in your $home/.lldbinit as recommended on debugging mozilla with lldb.
...if you don't include the mozilla's .lldbinit, you must at least
put settings set target.inline-breakpoint-strategy always in your $home/.lldbinit as recommended on debugging mozilla with lldb.
Commenting IDL for better documentation
if possible, avoid
putting comments in the middle of the definitions of apis.
...everything in the doxygen comment before a method, attribute, constant, or whatnot will be used as part of its description when the automatic documentation generator tool scans your idl, so if you don't want it in the docs, you probably shouldn't
put it there.
Error codes returned by Mozilla APIs
ns_error_dom_validation_err (0x805300 16) ns_error_dom_type_mismatch_err (0x805300 17) ns_error_dom_svg_wrong_type_err (0x805f0000) ns_error_dom_svg_invalid_value_err (0x805f0001) ns_error_dom_svg_matrix_not_invertable (0x805f0002) a matrix could not be com
puted.
... ns_error_plugins_pluginsnotchanged (0x804c03e8) ns_error_plugin_disabled (0x804c03e9) ns_error_uconv_noconv (0x80500001) ns_error_udec_illegalin
put (0x8050000e) ns_imagelib_error_failure (0x80540005) ns_imagelib_error_no_decoder (0x80540006) ns_imagelib_error_not_finished (0x80540007) ns_imagelib_error_load_aborted (0x80540008) ns_error_wont_handle_content (0x805d0001) moz_error_storage_error (0x80630001) ns_error_schemavalidator_no_schema_loaded (0x80640001) ns_error_schemavalidator_no_dom_node_specified (0x8...
overflow-clip-box-block
/* keyword values */ overflow-clip-box-block: padding-box; overflow-clip-box-block: content-box; /* global values */ overflow-clip-box-block: inherited; overflow-clip-box-block: initial; overflow-clip-box-block: unset; note: on gecko, by default, padding-box is used everywhere, but <in
put type="text"> and similar use the value content-box.
... examples padding-box html <div class="things"> <in
put value="abcdefghijklmnopqrstuvwxyzÅÄÖ" class="scroll padding-box"> <div class="scroll padding-box"><span>abcdefghijklmnopqrstuvwxyzÅÄÖ</span></div> </div> css .scroll { overflow: auto; padding: 0 30px; width: 6em; border: 1px solid black; background: lime content-box; } .padding-box { overflow-clip-box-block: padding-box; } javascript function scrollsomeelements() { var elms = do...
overflow-clip-box-inline
/* keyword values */ overflow-clip-box-inline: padding-box; overflow-clip-box-inline: content-box; /* global values */ overflow-clip-box-inline: inherited; overflow-clip-box-inline: initial; overflow-clip-box-inline: unset; note: on gecko, by default, padding-box is used everywhere, but <in
put type="text"> and similar use the value content-box.
... examples padding-box html <div class="things"> <in
put value="abcdefghijklmnopqrstuvwxyzÅÄÖ" class="scroll padding-box"> <div class="scroll padding-box"><span>abcdefghijklmnopqrstuvwxyzÅÄÖ</span></div> </div> css .scroll { overflow: auto; padding: 0 30px; width: 6em; border: 1px solid black; background: lime content-box; } .padding-box { overflow-clip-box-inline: padding-box; } javascript function scrollsomeelements() { var elms = d...
How to get a stacktrace for a bug report
crash reports files on your com
puter when breakpad initially catches a crash it first writes crash report files (e.g.
... if you want breakpad to leave the .dump and .extra files on your com
puter so that you can examine them locally, then set the moz_crashreporter_no_delete_dump environment variable to 1.
Implementing QueryInterface
a reference implementation of queryinterface ns_imethodimp nsmyimplementation::queryinterface( refnsiid aiid, void** ainstanceptr ) { ns_assertion(ainstanceptr, "queryinterface requires a non-null destination!"); // it's a logic error, not a runtime error, to call me without any place to
put my answer!
... it tests for bad in
put with an ns_assertion, to find logic errors immediately in debug builds.
Webapps.jsm
() doexport: function(amsg, amm) doimport: function(amsg, amm) doextractmanifest: function(amsg, amm) dolaunch: function (adata, amm) launch: function launch(amanifesturl, astartpoint, atimestamp, aonsuccess, aonfailure) close: function close(aapp) canceldownload: function canceldownload(amanifesturl, aerror) startofflinecachedownload: function(amanifest, aapp, aprofiledir, aisupdate) com
putemanifesthash: function(amanifest) updateapphandlers: function(aoldmanifest, anewmanifest, aapp) checkforupdate: function(adata, amm) doinstall: function doinstall(adata, amm) doinstallpackage: function doinstallpackage(adata, amm) pushcontentaction: function(windowid) popcontentaction: function(windowid) actioncancelled: function(windowid) denyinstall: function(adata) _setupapp: function...
...url: function(auri) makeappid: function() _saveapps: function() _readmanifests: function(adata) _ensuresufficientstorage: function(anewapp) _checkdownloadsize: function(afreebytes, anewapp) _getrequestchannel: function(afullpackagepath, aislocalfileinstall, aoldapp,) _senddownloadprogressevent: function(anewapp, aprogress) _getpackage: function(arequestchannel, aid, aoldapp, anewapp) _com
putefilehash: function(afilepath) _sendappliedevent: function(aapp) _openandreadpackage: function(azipfile, aoldapp, anewapp, aislocalfileinstall,) _openpackage: function(azipfile, aapp, aislocalfileinstall) _opensignedpackage: function(ainstallorigin, amanifesturl, azipfile, acertdb) _readpackage: function(aoldapp, anewapp, aislocalfileinstall, aisupdate,) _checksignature: function(aapp, aissi...
source-editor.jsm
focus() makes the editor the focus for user in
put.
... void settext( string astring, [optional] number astart, [optional] number aend ); parameters astring the text to
put into the editor.
Bootstrapping a new locale
we'll first navigate to the directory called "browser" by running the following commands one after the other from your command line: $ cd [ab-cd]/browser/chrome/browser to see what is contained in "browser" type $ ls and, you should see the following out
put from your terminal: aboutcerterror.dtd pageinfo.dtd aboutdialog.dtd pageinfo.properties aboutprivatebrowsing.dtd pagereportfirsttime.dtd aboutrobots.dtd places aboutsessionrestore.dtd preferences aboutsupport.dtd quitdialog.properties basemenuoverlay.dtd safemode.dtd browser.dtd safebrowsing b...
...in the hg repository on your com
puter.
Localization content best practices
the pair should be used to surround statements and references to user in
put.
... avoid unnecessary complexity in strings consider this string: privacy-link = <p>by proceeding you accept the <a href="https://www.mozilla.org/privacy" class="external">privacy terms</a>.</p> in this case, you shouldn't
put the url inside the localization string, unless you need it to be localizable.
Localizing with Pontoon
in-context pontoon's in-context translation mode is what
puts it above others.
... search almost like machinery, but takes provided keyword as in
put parameter instead of the original string.
Localization technical reviews
to
put it simply, when we receive your request, we expect that you have spent time testing your work and making sure all strings have been localized and that your language pack is relatively functional.
...when you update your localization for the next release, you'll need to
put it through a different form of qa review called a sign-off review.
Writing localizable code
in most cases, you can just as well
put the processing into the content code and reference different key-value pairs in l10n.
... use a good source directory structure be sure to
put the localizable files in the right place.
gettext
for english, the above code will produce the following out
put: 1 user likes this.
...$num = 4; printf(n___("%d user likes this.", "%d users like this.", $num, 'another unique context string'), $num); ?> this code produces the following out
put: a simple string.
MathML In Action
mathml in mozilla aims at complying with the mathml specification so that what you see is what you markup, or to
put it another way what you see is what you made, or in short "wysiwym".
...your feedback can be manifested by
putting mathml content on the web, reporting bugs in bugzilla, and, if you can help with code, inspecting/improving the current code, and/or picking up an item in the todo list.
Mozilla Development Strategies
this
puts the bug on the radar of our documentation team to ensure that once the bug is resolved, the documentation will be updated appropriately.
...-name cvs | xargs -l -p10 cvs tag -b -l my_branch_tag > & ../taglog2.txt from your windows box: cvs co -r my_branch_tag mozilla/client.mak cd mozilla edit client.mak,
putting my_branch_tag in the right places.
Gecko Profiler FAQ
in a difference call tree, each node’s weight instead is com
puted as <number of samples under this stack in the “after” profile> minus <number of samples under this stack in the “before” profile>.
... how do we know when profiler out
put is statistically significant (for comparing across runs / across machines)?
Leak Gauge
if there are no leaks, out
put will look like the following.
... results of processing log leak.log : summary: leaked 0 out of 11 dom windows leaked 0 out of 44 documents leaked 0 out of 3 docshells leaked content nodes in 0 out of 0 documents if there are leaks, out
put will look like the following.
dtrace
sudo dtrace -n 'mach_kernel::wakeup { @[ustack()] = count(); }' -p $firefox_pid > $out
put_file let's break that down further.
...dtrace will then print to the out
put file a number of stack traces, along with a wakeup count for each one.
perf
the out
put will look like the following.
... performance counter stats for 'system wide': 51.58 joules power/energy-pkg/ [100.00%] 14.80 joules power/energy-cores/ [100.00%] 9.93 joules power/energy-gpu/ [100.00%] 27.38 joules power/energy-ram/ [100.00%] 5.003049064 seconds time elapsed it's not clear from the out
put, but the following relationship holds.
tools/power/rapl
out
put the following is 10 seconds of out
put from a default invocation of rapl.
..."other" is com
puted as the package power minus the cores power and gpu power.
Productization guide
another example: when the user clicks on a mailto: link, we suggest a couple of possible handlers chosen from the applications installed on their com
puter.
...for example,
putting one sample news feed on the bookmarks toolbar in new profiles in firefox helps in learning about the live bookmarks.
Leak And Bloat Tests
results printed on tinderbox out
put, these consist of: mail rlk reference count leaks mail lk total bytes malloc'ed and not free'd mail mh maximum heap size mail a allocations - number of calls to malloc and friends.
...todo: add more information on processing out
put.
NSPR LOG FILE
if nspr_log_file is not in the environment, then log out
put is written to stdout or stderr, depending on the platform.
...this value causes logging out
put to be written using the windows function out
putdebugstring(), which writes to the debugger window.
PR_GMTParameters
note: since this function requires gmt as in
put, its primary use is as "filler" for cases in which you need a do-nothing callback.
... this is a trivial function; for any in
put, it returns a prtimeparameters structure with both fields set to zero.
PR_GetHostByAddr
buf a pointer to a buffer, allocated by the caller, that is filled in with host data on out
put.
...on out
put, this structure is filled in by the runtime if the function returns pr_success.
PR_GetHostByName
buf a pointer to a buffer, allocated by the caller, that is filled in with host data on out
put.
...on out
put, this structure is filled in by the runtime if the function returns pr_success.
PR_GetProtoByName
result on in
put, a pointer to a prprotoent structure.
... on out
put, this structure is filled in by the runtime if the function returns pr_success.
PR_GetProtoByNumber
result on in
put, a pointer to a prnetaddr structure.
... on out
put, this structure is filled in by the runtime if the function returns pr_success.
PR_GetSocketOption
on in
put, the option field of this structure must be set to indicate which socket option to retrieve for the socket represented by the fd parameter.
... on out
put, this structure contains the requested socket option data.
PR_NormalizeTime
for example, suppose you want to com
pute the day of week for 3 march 1998.
...for example, if the in
put argument time is in time zone a and the in
put argument params represents time zone b, when pr_normalizetime() returns, time will be in time zone b.
PR_StringToNetAddr
addr on out
put, the equivalent network address.
... description for ipv4 addresses, the in
put string represents numbers in the internet standard "." notation.
An overview of NSS Internals
many (if not most) of the operations performed by nss involve the use of x.509 certificates (often abbreviated as “cert”, unfortunately making it easy to confuse with the term “com
puter emergency response team“).
...create a context handle while providing all the parameters required for the operation, then call an “update” function multiple times to pass subsets of the in
put to nss.
JSS FAQ
org/mozilla/jss/pkix/cert/certificate.java org/mozilla/jss/pkix/cmmf/certrepcontent.java org/mozilla/jss/pkix/crmf/certreqmsg.java org/mozilla/jss/pkix/crmf/certtemplate.java org/mozilla/jss/pkix/primitive/name.java org/mozilla/jss/provider/javax/crypto/jsssecretkeyfactoryspi.java org/mozilla/jss/util/utf8converter.java org/mozilla/jss/util/base64in
putstream.java jss/samples/pqggen.java jss/samples/pkcs12.java if i don't call setcipherpolicy, is the domestic policy used by default?
... import java.io.bytearrayin
putstream; [...] certificate cert = (certificate) asn1util.decode( certificate.gettemplate(),x509cert.getencoded() ); how do i convert org.mozilla.jss.pkix.cert to org.mozilla.jss.crypto.x509certificate?
NSS 3.12.4 release notes
multiple encoding/decoding of pkix_pl_oid to and from ascii string bug 405297: problems building nss/lib/ckfw/capi/ with mingw gcc bug 420991: libpkix returns wrong nss error code bug 427135: add super-h (sh3,4) architecture support bug 431958: improve des and sha512 for x86_64 platform bug 433791: win16 support should be deleted from nss bug 449332: secu_parsecommandline does not validate its in
puts bug 453735: when using cert9 (sqlite3) db, set or change master password fails bug 463544: warning: passing enum* for an int* argument in pkix_validate.c bug 469588: coverity errors reported for softoken bug 470055: pkix_httpcertstore_findsocketconnection reuses closed socket bug 470070: multiple object leaks reported by tinderbox bug 470479: io timeout during cert fetching makes libpkix abort v...
...neration bug 491044: remove support for vms (a.k.a., openvms) from nss bug 491174: cert_pkixverifycert reports wrong error code when ee cert is expired bug 491919: cert.h doesn't have valid functions prototypes bug 492131: a failure to import a cert from a p12 file leaves error code set to zero bug 492385: crash freeing named crl entry on shutdown bug 493135: bltest crashes if it can't open the in
put file bug 493364: can't build with --disable-dbm option when not cross-compiling bug 493693: sse2 instructions for bignum are not implemented on os/2 bug 493912: sqlite3_reset should be invoked in sdb_findobjectsinit when error occurs bug 494073: update rsa/dsa powerupself tests to be compliant for 2011 bug 494087: passing null as the value of cert_pi_trustanchors causes a crash in cert_pkixsetpar...
NSS 3.45 release notes
rtificate authority changes the following ca certificates were removed: bug 1552374 - cn = certinomis - root ca sha-256 fingerprint: 2a99f5bc1174b73cbb1d620884e01c34e51ccb3978da125f0e33268883bf4158 bugs fixed in nss 3.45 bug 1540541 - don't unnecessarily strip leading 0's from key material during pkcs11 import (cve-2019-11719) bug 1515342 - more thorough in
put checking (cve-2019-11729) bug 1552208 - prohibit use of rsassa-pkcs1-v1_5 algorithms in tls 1.3 (cve-2019-11727) bug 1227090 - fix a potential divide-by-zero in makepfromqandseed from lib/freebl/pqg.c (static analysis) bug 1227096 - fix a potential divide-by-zero in pqg_verifyparams from lib/freebl/pqg.c (static analysis) bug 1509432 - de-duplicate code between mp_set_long and mp_set_ul...
...only relevant for clients that might have copied the unit test code verbatim bug 1550022 - ensure nssutil3 gets built on android bug 1528174 - chacha20poly1305 should no longer modify out
put length on failure bug 1549382 - don't leak in pkcs#11 modules if c_getslotinfo() returns error bug 1551041 - fix builds using gcc < 4.3 on big-endian architectures bug 1554659 - add versioning to openbsd builds to fix link time errors using nss bug 1553443 - send session ticket only after handshake is marked as finished bug 1550708 - fix gyp scripts on solaris sparc so that libfreebl_64fpu_3.so builds bug 1554336 - optimize away unneeded loop in mpi.c bug 1559906 - fipstest: use ckm_tls12_master_key_...
NSS Tools sslstrength
the letter in the first column of the out
put is used to identify the cipher preferences in the ciphers= command.
...you can tell if you stepped-up, because the out
put will says 'using export policy', and you'll find the secret key size was 128-bits.
PKCS11 module installation
using the firefox preferences to install pkcs #11 modules save the pkcs #11 module to a permanent location on your local com
puter open the firefox preferences dialog.
... choose "browse..." to find the location of the pkcs #11 module on your local com
puter, and choose "ok" when done.
FC_GetMechanismInfo
syntax ck_rv fc_getmechanisminfo( ck_slot_id slotid, ck_mechanism_type type, ck_mechanism_info_ptr pinfo ); parameters fc_getmechanisminfo takes three parameters: slotid [in
put] type [in
put] .
... pinfo [out
put] .
NSS environment variables
3.12.3 nss_out
put_file string (filename) out
put file path name for the pkcs #11 module logger.
... 3.12.8 nsdistmode string on operating systems other than windows, this controls whether copies, absolute symlinks, or relative symlinks of the out
put files should be published to mozilla/dist.
NSS_3.12.3_release_notes.html
bug 464406: fix signtool regressions bug 465270: uninitialised value in devutil.c::create_object() bug 465273: dead assignment in devutil.c::nssslotarray_clone() bug 465926: during import of pkcs #12 files bug 466180: ssl_configmpserversidcache with default parameters fails on {net bug 466194: cert_decodetruststring should take a const char * in
put trusts string.
... bug 485729: remove lib/freebl/mapfile.solaris bug 485837: vc90.pdb files are out
put in source directory instead of objdir bug 486060: sec_asn1d_parse_leaf uses argument uninitialized by caller pbe_pk11algidtoparam documentation for a list of the primary nss documentation pages on mozilla.org, see nss documentation.
NSS Tools sslstrength
the letter in the first column of the out
put is used to identify the cipher preferences in the ciphers= command.
...you can tell if you stepped-up, because the out
put will says 'using export policy', and you'll find the secret key size was 128-bits.
Rhino JavaScript compiler
-o out
putfile writes the class file to out
putfile, which should end in .class and must be a writable filename.
... -d out
putdirectory writes the class file to out
putdirectory.
Creating JavaScript jstest reftests
a different approach is to use the expectexitcode(exitcode) function which out
puts a string: --- note: in this testcase, we expect exit code <exitcode> --- that tells the post-processing scripts jsdriver.pl or post-process-logs.pl that the test passes if the shell or browser terminates with that exit code.
... a modification will soon be made to the javascript tests to allow an arbitrary string to be out
put which will be used to post process the test logs to better determine if a test has passed regardless of its exit code.
How to embed the JavaScript engine
make sure the build com
puter has the prerequisites for building spidermonkey: linux, windows, mac os x, others.
... * args.rval().setint32(args[0].toint32() + args[1].toint32()); */ return true; } then to wire it up to js, you could write: ok = js_definefunction(cx, global, "doit", doit, doit_minargs, 0); or, if you had a bunch of native functions to define, you would probably
put them in a table: static jsfunctionspec my_functions[] = { js_fn("doit", doit, doit_minargs, 0), /* etc...
Exact Stack Rooting
since c++ does not reliably distinguish between storage classes, we have to
put this burden on the user.
...this means it must be manually traced by the object's owner: this is both fragile and more expensive than using an extra reserved slot, or even just
putting a new property on the object.
JIT Optimization Outcomes
this can happen if the operation sees many different types of objects, and so the type of the in
put to the operation cannot be resolved to a single type.
... accessnottypedarray accessnotstring statictypedarrayuint32 statictypedarraycantcom
putemask outofbounds getelemstringnotcached nonnativereceiver indextype setelemnondensenontanotcached nosimdjitsupport optimization failed because simd jit support was not enabled.
JSAPI Cookbook
to query whether a value has a particular type, use a correspondingly named member testing function: // javascript var v = com
putesomevalue(); var isstring = typeof v === "string"; var isnumber = typeof v === "number"; var isnull = v === null; var isboolean = typeof v === "boolean"; var isobject = typeof v === "object" && v !== null; /* jsapi */ js::rootedvalue v(cx, com
putesomevalue()); bool isstring = v.isstring(); bool isnumber = v.isnumber(); bool isint32 = v.isint32(); // note: internal representation, not numeric v...
... actually out
putting errors.
JSAPI User Guide
such a custom object acts as an interface to the application itself, passing values from the application to the user, and receiving and processing user in
put before returning it to the application.
...me = js_getfunctionid((jsfunction*)func); const char *entexit; const char *namestr; /* build a c string for the function's name */ if (!name) { namestr = "unnamed function"; } else { namestr = js_encodestring(cx, name); } /* build a string for whether we're entering or exiting */ if (entering) { entexit = "entering"; } else { entexit = "exiting"; } /* out
put information about the trace */ printf("%s javascript function: %s at time: %ld", entexit, namestr, clock()); } void enabletracing(jscontext *cx) { js_setfunctioncallback(cx, functransition); } void disabletracing(jscontext *cx) { js_setfunctioncallback(cx, nullptr); } ...
JS::Value
the number mutators attempt to use int32_t representation for compatible in
put values, returning true when int32 could be used and false when double representation was required.
...it's like a robot that goes around picking up everything that isn't nailed down and
putting it in the trash.
JS_GetGlobalForObject
description js_getglobalforobject returns the last non-null object on the parent chain of the in
put object.
... for function object in
puts, the result is "the global object" as referred to in the ecmascript specification.
JSAPI reference
js_getlatin1flatstringchars added in spidermonkey 38 js_gettwobyteflatstringchars added in spidermonkey 38 js_getlatin1stringcharsandlength added in spidermonkey 38 js_gettwobytestringcharsandlength added in spidermonkey 38 js::getdeflatedutf8stringlength added in spidermonkey 38 js::deflatestringtoutf8buffer added in spidermonkey 38 js_fileescapedstring added in spidermonkey 1.8.5 js_
putescapedstring added in spidermonkey 1.8.5 js_
putescapedflatstring added in spidermonkey 1.8.5 js_forget_string_flatness added in spidermonkey 1.8.5 js_stringisflat added in spidermonkey 38 js_assert_string_is_flat added in spidermonkey 1.8.5 js_flattenstring added in spidermonkey 1.8.5 typedef jschar obsolete since jsapi 35 js_newstring obsolete since jsapi 1.8.5 js_newgrowablestring...
...elfhostedfunction added in jsapi 31 js::newfunctionfromspec added in jsapi 45 js_newfunctionbyid added in spidermonkey 17 obsolete since jsapi 44 js_clonefunctionobject obsolete since jsapi 36 regexps js_newregexpobject jsreg_fold jsreg_glob jsreg_multiline jsreg_sticky js_newucregexpobject js_newregexpobjectnostatics js_newucregexpobjectnostatics js_setregexpin
put js_clearregexpstatics js_objectisregexp added in spidermonkey 17 js_getregexpflags added in spidermonkey 17 js_getregexpsource added in spidermonkey 17 js_executeregexp js_executeregexpnostatics js_clearregexproots obsolete since javascript 1.8.5 serialization struct jsstructuredclonecallbacks js_setstructuredclonecallbacks js_readstructuredclone js_writestructuredclone js_stru...
Running Automated JavaScript Tests
for a smoke test or if you are not changing language-level functionality, you may wish to use jstests.py path_to_js_shell --exclude=test262 other options allow you to show the test command lines being run, command out
put and return codes, run tests named in a given file, exclude tests named in a given file, hide the progress bar, change the timeout, run skipped tests, print out
put in tinderbox format, run a test in the debugger, or run tests in valgrind.
...see the full list in the -h / --help out
put.
Shell global objects
putstr([exp]) evaluate and print expression without newline.
... disregexp(regexp[, match_only[, in
put]]) dumps regexp bytecode.
compare-locales
options to get a brief list of available options, use the --help flag: $ compare-locales --help the out
put the out
put of compare-locales shows the missing and obsolete strings in a pseudo-diff format.
... the out
put closes with a summary, giving the total counts of missing and obsolete strings and words, and some statistics on how many strings are changed or not, excluding access- and commandkeys.
Redis Tips
lines beginning with redis> are in
put to the redis-cli.
...}); client.watch("foo", function( err ){ if(err) throw err; client.get("foo", function(err, result) { if(err) throw err; // process result // heavy and time consuming operation here client.multi() .set("foo", "some heavy com
putation") .exec(function(err, results) { /** * if err is null, it means redis successfully attempted * the operation.
Exploitable crashes
mark the bug as security-sensitive by
putting it into the "security-sensitive core bug" group.
...
put a security severity rating in the bug's keywords.
A Web PKI x509 certificate primer
your com
puter is not connected to the internet.
... the csr (using sha256) and appends the extensions described in the file "openssl x509 -req -sha256 -days 1096 -in example.csr -cakey intkey.pem -ca int.pem -set_serial $some_large_integer -out www.example.com.pem -extfile openssl.int.cnf" security notes there are several organizations that provide recommendations regarding the security parameters for key/hash sizes given current com
putational power.
Mork
most of the time, however, regular 7-bit ascii data is
put in the cell.
... where integer data is used, the convention is to use and store the hexadecimal value for the out
put.
Querying Places
if there were no query parameters specified but the in
put string was not empty (there were options) you may get one query object returned, containing the default query values.
...there is a built-in view that will
put results in tree controls, and you can also implement your own.
Generating GUIDs
perl jkeiser's mozilla tools include a uuid generator with out
put format of both c++ and idl style.
... bash you can
put the following into your .bashrc file: uuidgen-c++() { local uuid=$(uuidgen) echo "// $uuid" echo "#define ns__iid \\" echo "{ 0x${uuid:0:8}, 0x${uuid:9:4}, 0x${uuid:14:4}, \\" echo -n " { 0x${uuid:19:2}, 0x${uuid:21:2}, 0x${uuid:24:2}, " echo -n "0x${uuid:26:2}, 0x${uuid:28:2}, 0x${uuid:30:2}, " echo "0x${uuid:32:2}, 0x${uuid:34:2} } }" } perl #!/usr/bin/perl $uui...
Finishing the Component
this
puts you in the same situation as many developers using mozilla - you want to use some specific functionality, but the interfaces seem to change on a daily basis.
... the web locking policy that we are going to
put into place is quite simple: for every load request that comes through, we will ensure that the uri is in the list of "good" urls on the white list.
Starting WebLock
for example, addsite is supposed to add the current url to the white list, but is the url an in
put parameter to the method, is it the topmost web page in the gecko application, or is it something more random-a url picked from global history or that's been given context in some other way?
...append adds the in
put string to the path already specified in the nsifile.
XPCOM hashtable guide
owned interface pointers nsisupportshashkey reference-counted concrete classes nsrefptrhashkey there are a number of more esoteric hashkey classes in nshashkeys.h, and you can always roll your own if none of these fit your needs (make sure you're not duplicating an existing hashkey class though!) once you've determined what hashtable and hashkey classes you need, you can
put it all together.
... there are three key methods, get,
put, and remove, which retrieve entries from the hashtable, write entries into the hashtable, and remove entries from the hashtable respectively.
How to build a binary XPCOM component using Visual Studio
i
put this together from some samples i found on the mdc site: #include "nsigenericfactory.h" #include "comp-impl.h" ns_generic_factory_constructor(cspecialthing) static nsmodulecomponentinfo components[] = { { specialthing_classname, specialthing_cid, specialthing_contractid, cspecialthingconstructor, } }; ns_impl_nsgetmodule("specialthingsmodule", components) ...
...you should not
put your component in the xulrunner/components folder.
nsIRegistry
try { st.first(); do { var data = st.currentitem(); if( data instanceof ci.nsiregistrynode ) print("nsiregistrynode: " + data.nameutf8 + " (" + data.key + ")"); st.next(); } while( components.lastresult == 0 ); } catch(e) {} now, the out
put is something like: profiles (344) profiles/default (530) profiles/foo (1046) profiles/bar (1518) the number inside the parenthesis is the "key." you can use this key with the rest of the nsiregistry api (see mxr).
...js> rs.getstringutf8(530, "directory") // 530: key corresponding with profiles/default the out
put is something like: /home/lion/.mozilla/default/awp83kud.slt boo-yah!
HOWTO
put the following at the end of your script: // do async processing // from <https://developer.mozilla.org/en/xpconnect/xpcshell/howto> print("doing async work"); gscriptdone = false; var gthreadmanager = cc["@mozilla.org/thread-manager;1"] .getservice(ci.nsithreadmanager); var mainthread = gthreadmanager.currentthread; while (!gscriptdone) mainthread.processnextevent(true); while (mainthread.haspendingevents()) mainthread.processnextevent(true); 2.
...both success and error callbacks,
put: gscriptdone = true; if you forget some condition where your script should exit but you don't add this statement, your script will hang (busy wait).
XPCShell Reference
for instance, assume that you have a file called test.js with the following contents: for (prop in arguments) { print(prop + "=" + arguments[prop]); } entering the following at the command line should produce the following out
put: $ xpcshell test.js this is a test 0=this 1=is 2=a 3=test xpcshell extensions once you execute xpcshell without a script you'll be at the js> command line.
...it dumps whatever is passed to the screen,
putting spaces between arguments and appending a newline at the end.
mozITXTToHTMLConv
methods scantxt() scans the specified text, applying the requested conversions and out
putting html.
... loglinestart on out
put, this parameter is set to indicate the offset into the string of the first non-cite character.
nsIAccessibleText
it represents the current in
put position and will therefore typically be queried by at more often than other positions.
...it represents the current in
put position and will therefore typically be queried by at more often than other positions.
nsIClipboard
forcedatatoclipboard() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) some platforms support deferred notification for
putting data on the clipboard this method forces the data onto the clipboard in its various formats this may be used if the application going away.
... void setdata( in nsitransferable atransferable, in nsiclipboardowner anowner, in long awhichclipboard ); parameters atransferable the transferable containing the data to
put on the clipboard.
nsICryptoHMAC
1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview acstring finish(in prbool aascii); void init(in unsigned long aalgorithm, in nsikeyobject akeyobject); void reset(); void update([const, array, size_is(alen)] in octet adata, in unsigned long alen); void updatefromstream(in nsiin
putstream astream, in unsigned long alen); constants hashing algorithms.
...void updatefromstream( in nsiin
putstream astream, in unsigned long alen ); parameters astream an in
put stream to read from.
nsIDOMSerializer
to create an instance, use: var domserializer = components.classes["@mozilla.org/xmlextras/xmlserializer;1"] .createinstance(components.interfaces.nsidomserializer); method overview void serializetostream(in nsidomnode root, in nsiout
putstream stream, in autf8string charset); astring serializetostring(in nsidomnode root); methods serializetostream() the subtree rooted by the specified element is serialized to a byte stream using the character set specified.
... void serializetostream( in nsidomnode root, in nsiout
putstream stream, in autf8string charset ); parameters root the root of the subtree to be serialized.
nsIException
file parsers may
put the location of the file they were parsing.
... return value a string suitable for out
put.
nsIFileStreams
the nsifilestreams interface is an in
put stream that allows you to read from a file.
... see also nsifileout
putstream ...
nsIIdleService
the observer will get an 'idle' notification when the user is idle for that interval (or longer), and receive a 'back' (gecko 3 to 15) or 'active' (gecko 16+) notification when the user starts using their com
puter again.
... note: the idle service is for com
puter-wide idle detection, not just application idle detection.
nsILoginInfo
passwordfield astring the name attribute for the password in
put in a form.
... usernamefield astring the name attribute for the username in
put in a form.
nsILoginManager
to create an instance, use: var loginmanager = components.classes["@mozilla.org/login-manager;1"] .getservice(components.interfaces.nsiloginmanager); method overview void addlogin(in nsilogininfo alogin); nsiautocompleteresult autocompletesearch(in astring asearchstring, in nsiautocompleteresult apreviousresult, in nsidomhtmlin
putelement aelement); unsigned long countlogins(in astring ahostname, in astring aactionurl, in astring ahttprealm); boolean fillform(in nsidomhtmlformelement aform); void findlogins(out unsigned long count, in astring ahostname, in astring aactionurl, in astring ahttprealm, [retval, array, size_is(count)] out nsilogininfo logins); void getalldisabledhosts([option...
... nsiautocompleteresult autocompletesearch( in astring asearchstring, in nsiautocompleteresult apreviousresult, in nsidomhtmlin
putelement aelement ); parameters asearchstring missing description apreviousresult missing description aelement missing description return value missing description countlogins() returns the number of logins matching the specified criteria.
nsIMemoryMultiReporter
this will trigger any needed com
putation work.
... note: this differs from the behavior of nsimemoryreporter, which lets all fields except amount be accessed without triggering com
putation.
nsIMsgMessageService
le, the next piece of code shows the selected message code on a dialog: (taken from mozillazine) var content = ""; var messageuri = getfirstselectedmessage(); var msgservice = messenger.messageservicefromuri(messageuri); var msgstream = components.classes["@mozilla.org/network/sync-stream-listener;1"].createinstance(); var consumer = msgstream.queryinterface(components.interfaces.nsiin
putstream); var scriptin
put = components.classes["@mozilla.org/scriptablein
putstream;1"].createinstance(); var scriptin
putstream = scriptin
put.queryinterface(components.interfaces.nsiscriptablein
putstream); scriptin
putstream.init(consumer); try { msgservice.streammessage(messageuri, msgstream, msgwindow, null, false, null); } catch (ex) { alert("error: "+ex) } scriptin
putstream ...
....available(); while (scriptin
putstream .available()) { content = content + scriptin
putstream .read(512); } alert(content streamheaders() this method streams a message's headers to the passed in consumer.
nsIScreenManager
widget/public/nsiscreenmanager.idlscriptable this interface lets you get information about the display screen (or screens) attached to the user's com
puter.
... nsiscreen screenforrect( in long left, in long top, in long width, in long height ); attributes attribute type description numberofscreens unsigned long the number of screens on the user's com
puter.
nsITaskbarPreview
note: changing this value is com
putationally expensive for tab previews, because doing so causes the proxy window to be destroyed and rebuilt, then re-registered with the taskbar.
...for window previews, changing this value is com
putationally trivial.
nsITransferable
flavorstransferablecanexport() returns a list of flavors (mime types as nsisupportscstring) that the transferable can export, either through intrinsic knowledge or out
put data converters.
... return value missing description flavorstransferablecanimport() com
putes a list of flavors (mime types as nsisupportscstring) that the transferable can accept into it, either through intrinsic knowledge or in
put data converters.
nsIUserInfo
the com
puter's domain, or the domain of its hostname.
... the concatenation of the user's login name and the com
puter's domain.
nsIWebNavigation
method overview void goback void goforward void gotoindex( in long index ) void loaduri(in wstring uri , in unsigned long loadflags , in nsiuri referrer , in nsiin
putstream postdata, in nsiin
putstream headers) void reload(in unsigned long reloadflags) void stop(in unsigned long stopflags) constants load flags constant value description load_flags_mask 65535 this flag defines the range of bits that may be specified.
... void loaduri( wstring uri, unsigned long loadflags, nsiuri referrer, nsiin
putstream postdata, nsiin
putstream headers ); parameters uri the uri string to load.
nsIXFormsModelElement
extensions/xforms/nsixformsmodelelement.idlscriptable defines scriptable methods for manipulating instance data and updating com
puted and displayed values.
... rebuild() signals the xforms processor to rebuild any internal data structures used to track com
putational dependencies within the given xforms model.
Setting HTTP request headers
note: if you are making up your own http header, you must
put a x- in front of the name.
...this means that you should
put the observer's implementation in an xpcom component instead of an overlay.
Getting Started Guide
all these cases show that automatically addrefing on `out
put' makes nscomptrs and raw-pointers act differently from the point of view of the clients.
...if you were to use a raw pointer instead, your function couldn't know what ownership relationship the caller had to the in
put value, and hence, couldn't know whether to release it or not before assigning in the new value.
Using nsIPasswordManager
adding a password to the password manager is easy: passwordmanager.adduser('host', 'username', 'password'); since there's no provision to include names of html in
put fields, no password stored by this interface will be used to fill in passwords on web pages.
... nsiloginmanager, available in toolkit 1.9, does let you include in
put field names.
XPCOM ownership guidelines
or
put another way: the ownership graph for any system should be acyclic.
...it's easier to write `getter's and `setter's; and you don't need to
put anything in your destructor.
XUL Overlays
though there is no formal restriction on what kind of xul content is located in "base" xul files and what kind should be
put in overlays, xul overlays generally define items that are not present in the basic versions of the ui, such as additional components.
...the following snippet shows a dialog with custom ui elements at the top and a reference to the overlay's ok and cancel buttons at the bottom: <box align="horizontal" id="bx1" flex="100%" style="margin-bottom: 1em; width: 100%;"> <html:in
put type="checkbox" id="dialog.newwindow"/> <html:label for="dialog.newwindow">&openwin.label;</html:label> <spring flex="100%"/> </box> <box id="okcancelbuttons"/> for more detail, see the ok and cancel button definitions being referenced here in the global component file platformdialogoverlay.xul.
Autoconfiguration in Thunderbird
this is mainly intended for companies who install thunderbird on their employees' com
puters and want to enable easy account setup without having to set up a configuration server.
... small company if you are a small company, you can
put the xml configuration file on your web server, at url <https://example.com/.well-known/autoconfig/mail/config-v1.1.xml> pointing to an xml file.
Index
you can either
put the folder with the extension files directly into thunderbird's extensions folder, or you can
put a file there that tells thunderbird where your extension is located.
...bug 493414), but in the meantime, it would be helpful to be able to get useful out
put on stderr about exceptions, events and pretty-printed objects.
The libmime module
there is a class for each mime type, and each class is responsible for parsing itself, and/or handing the in
put data off to one of its child objects.
... method declarations we will be
putting function pointers into the class object, so we declare them here.
Adding items to the Folder Pane
mbers-main-container", text: "numbers", level: 0, open: false, _children: null, get children() { if (!this._children) { this._children = []; for (var i = 1; i <= this._numbers; i++) this._children.push(new numberrow(i)); } return this._children; }, getproperties: function gne_getprops() { //
put your css attributes here }, command: function gne_command() { // just going to alert, to do something here components.classes["@mozilla.org/embedcomp/prompt-service;1"] .getservice(components.interfaces.nsipromptservice) .alert(window, null, this.text); } }; second, our child items (the numbers 1, 2, and 3) are copies of t...
... open: false, children: [], getproperties: function gne_kid_getprops() {}, // no-op command: function gne_kid_command() { // just going to alert, to do something here components.classes["@mozilla.org/embedcomp/prompt-service;1"] .getservice(components.interfaces.nsipromptservice) .alert(window, null, this.text); } };
putting it all together all that is left at this point is to actually add these newly defined folder-tree-items to the folder pane's _rowmap at the appropriate time.
libmime content type handlers
pizzarro <rhp@netscape.com> contents overview api's plugin location/installation sample content type handler plugin overview the libmime module implements a general-purpose mime parser and one of the primary methods provided by the parser is the ability to emit an html representation of an in
put stream.
... sample content type handler plugin to see an example of a content type handler plugin, the source for the handler of the content type "text/calendar" can be viewed at the following link: calendar plugin note: this plugin simply creates a blue table in the out
put stream to identify the fact that it is operational, but the basic constructs of what is needed to build a functional content type handler can be seen.
WebIDL bindings
the dictionary members and sequence elements are guaranteed to be marked by whomever
puts the sequence or dictionary on the stack, using sequencerooter and dictionaryrooter.
...the dictionary members and sequence elements are guaranteed to be marked by whoever
puts the sequence or dictionary on the stack, using sequencerooter and dictionaryrooter.
Using COM from js-ctypes
void* setnotifycallbackfunction; void* setnotifycallbackinterface; void* setnotifywin32event; void* waitfornotifyevent; void* getnotifyeventhandle; /* end inherit from ispnotifysource */ /* start inherit from ispeventsource */ void* setinterest; void* getevents; void* getinfo; /* end inherit from ispeventsource */ /* start ispvoice */ void* setout
put; void* getout
putobjecttoken; void* getout
putstream; void* pause; void* resume; void* setvoice; void* getvoice; hresult (__stdcall *speak)(struct myispvoice*, lpcwstr pwcs, dword dwflags, ulong* pulstreamnumber); void* speakstream; void* getstatus; void* skip; void* setpriority; void* getpriority; void* setalertboun...
...32event': ctypes.voidptr_t }, { 'waitfornotifyevent': ctypes.voidptr_t }, { 'getnotifyeventhandle': ctypes.voidptr_t }, // end inherit from ispnotifysource // start inherit from ispeventsource { 'setinterest': ctypes.voidptr_t }, { 'getevents': ctypes.voidptr_t }, { 'getinfo': ctypes.voidptr_t }, // end inherit from ispeventsource // start ispvoice { 'setout
put': ctypes.voidptr_t }, { 'getout
putobjecttoken': ctypes.voidptr_t }, { 'getout
putstream': ctypes.voidptr_t }, { 'pause': ctypes.voidptr_t }, { 'resume': ctypes.voidptr_t }, { 'setvoice': ctypes.voidptr_t }, { 'getvoice': ctypes.voidptr_t }, { 'speak': ctypes.functiontype(callback_abi, hresult, // return [ ispvoice.ptr, ...
Using js-ctypes
ctypes.uint32_t, /* alert param */ ctypes.int16_t); /* item hit */ var hit = 0; var msgerr = makestr("carbon says..."); var msgexp = makestr("we just called the standardalert carbon function from javascript!"); var err = stdalert(1, msgerr, msgexp, 0, hit); carbon.close(); the makestr() function is a utility routine that takes as in
put a standard javascript string and returns a carbon-style "pascal" string, which is a length byte followed by the characters of the string itself.
... /* import js-ctypes */ var {cu} = require("chrome"); var {ctypes} = cu.import("resource://gre/modules/ctypes.jsm", null); /* open the library */ try { /* linux */ var libc = ctypes.open("libc.so.6"); } catch (e) { /* most other unixes */ libc = ctypes.open("libc.so"); } /* import a function */ var
puts = libc.declare("
puts", /* function name */ ctypes.default_abi, /* call abi */ ctypes.int, /* return type */ ctypes.char.ptr); /* argument type */ var ret =
puts("hello world from js-ctypes!"); libc.close(); ...
Debugger.Memory - Firefox Developer Tools
it can com
pute a census of items belonging to the debuggee, categorizing items in various ways, and yielding item counts.
...bytecode can be interpreted directly, or used as in
put to a just-in-time compiler.
Page inspector 3-pane mode - Firefox Developer Tools
the other css related features — such as com
puted styles view, animations view, and fonts view — in tabs on the right hand side, as usual.
... having the css rules in their own pane is very useful because it allows you to not only inspect your html and edit the css applied to it, but also see the effect this has on css features such as com
puted styles and grids in real time.
Animating CSS properties - Firefox Developer Tools
the css rendering waterfall the process the browser uses to update the page when a css property has changed can be described as a waterfall consisting of the following steps: recalculate style: every time a css property for an element changes, the browser must recalculate com
puted styles.
... layout: next, the browser uses the com
puted styles to figure out the position and geometry for the elements.
Web console keyboard shortcuts - Firefox Developer Tools
ole ctrl + shift + k cmd + opt + k ctrl + shift + k search in the message display pane ctrl + f cmd + f ctrl + f open the object inspector pane ctrl + click ctrl + click ctrl + click clear the object inspector pane esc esc esc focus on the command line ctrl + shift + k cmd + opt + k ctrl + shift + k clear out
put ctrl + shift + l ctrl + l from firefox 67: cmd + k ctrl + shift + l command line interpreter these shortcuts apply when you're in the command line interpreter.
... command windows macos linux scroll to start of console out
put (only if the command line is empty) home home home scroll to end of console out
put (only if the command line is empty) end end end page up through console out
put page up page up page up page down through console out
put page down page down page down go backward through command history up arrow up arrow up arrow go forward through command history down arrow down arrow down arrow initiate reverse search through command history/step backwards through matching commands f9 ctrl + r f9 step forward through matching command history (after initiating reverse search) shift + f9 ctrl ...
Web Console - Firefox Developer Tools
the javascript in
put interpreter how to interact with a document using the console.
... rich out
put see and interact with objects logged by the console.
AesGcmParams - Web APIs
for details of how to supply appropriate values for this parameter, see the specification for aes-gcm: nist sp800-38d, in particular section 5.2.1.1 on in
put data.
...
put another way: never reuse an iv with the same key.
AnalyserNode.smoothingTimeConstant - Web APIs
if 0 is set, there is no averaging done, whereas a value of 1 means "overlap the previous and current buffer quite a lot while com
puting the value", which essentially smoothes the changes across analysernode.getfloatfrequencydata/analysernode.getbytefrequencydata calls.
... example the following example shows basic usage of an audiocontext to create an analysernode, then requestanimationframe and <canvas> to collect frequency data repeatedly and draw a "winamp bargraph style" out
put of the current audio in
put.
Animation - Web APIs
animation.onremove allows you to set and run an event handler that fires when the animation is removed (i.e.,
put into an active replace state).
... animation.onremove for setting and running an event handler that fires when the animation is removed (i.e.,
put into an active replace state).
Attr - Web APIs
4" stroke-width="2px" /><text x="303.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">attr</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} warning: starting in gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.4), a number of deprecated properties and methods out
put warning messages to the console.
... gecko out
puts a deprecation note starting from gecko 7.0 (firefox 7.0 / thunderbird 7.0 / seamonkey 2.4).
AudioBufferSourceNode.loopEnd - Web APIs
example in this example, the audiocontext.decodeaudiodata() function is used to decode an audio track and
put it into an audiobuffersourcenode.
... loopstartcontrol.onin
put = function() { source.loopstart = loopstartcontrol.value; loopstartvalue.innerhtml = loopstartcontrol.value; } loopendcontrol.onin
put = function() { source.loopend = loopendcontrol.value; loopendvalue.innerhtml = loopendcontrol.value; } specifications specification status comment web audio apithe definition of 'loopend' in that specification.
AudioBufferSourceNode.loopStart - Web APIs
example in this example, the audiocontext.decodeaudiodata() function is used to decode an audio track and
put it into an audiobuffersourcenode.
... loopstartcontrol.onin
put = function() { source.loopstart = loopstartcontrol.value; loopstartvalue.innerhtml = loopstartcontrol.value; } loopendcontrol.onin
put = function() { source.loopend = loopendcontrol.value; loopendvalue.innerhtml = loopendcontrol.value; } specifications specification status comment web audio apithe definition of 'loopstart' in that specification.
AudioContext.createMediaStreamSource() - Web APIs
var pre = document.queryselector('pre'); var video = document.queryselector('video'); var myscript = document.queryselector('script'); var range = document.queryselector('in
put'); // getusermedia block - grab stream //
put it into a mediastreamaudiosourcenode // also out
put the visuals into a video element if (navigator.mediadevices) { console.log('getusermedia supported.'); navigator.mediadevices.getusermedia ({audio: true, video: true}) .then(function(stream) { video.srcobject = stream; video.onloadedmetadata = function(e) { v...
... // connect the audiobuffersourcenode to the gainnode // and the gainnode to the destination, so we can play the // music and adjust the volume using the mouse cursor source.connect(biquadfilter); biquadfilter.connect(audioctx.destination); // get new mouse pointer coordinates when mouse is moved // then set new gain value range.onin
put = function() { biquadfilter.gain.value = range.value; } }) .catch(function(err) { console.log('the following gum error occured: ' + err); }); } else { console.log('getusermedia not supported on your browser!'); } // dump script to pre element pre.innerhtml = myscript.innerhtml; note: as a consequence of calling createmediastreamsource(), audio playba...
AudioContextOptions.sampleRate - Web APIs
this value should typically be between 8,000 hz and 96,000 hz; the default will vary depending on the out
put device, but the sample rate 44,100 hz is the most common.
... if the samplerate property is not included in the options, or the options are not specified when creating the audio context, the new context's out
put device's preferred sample rate is used by default.
AudioContextOptions - Web APIs
if not specified, the preferred sample rate for the context's out
put device is used by default.
... constants standard values for latencyhint the latencyhint property can be number specifying a preferred maximum latency in seconds or a string from the audiocontextlatencycategory enumerated string, which selects a standard value for a given type of audio usage: value description "balanced" the user agent should balance audio out
put latency and power consumption when selecting a latency value.
AudioNodeOptions - Web APIs
syntax var audionodeoptions = { "channelcount" : 2, "channelcountmode" : "max", "channelinterpretation" : "discrete" } properties channelcount optional represents an integer used to determine how many channels are used when up-mixing and down-mixing connections to any in
puts to the node.
... channelcountmode optional represents an enumerated value describing the way channels must be matched between the node's in
puts and out
puts.
AudioParam.value - Web APIs
consider this example: const source = new audiobuffersourcenode(...); const rate = 5.3; source.playbackrate.value = rate; console.log(source.playbackrate.value === rate); the log out
put will be false, because the playback rate parameter, rate, was converted to the 32-bit floating-point number closest to 5.3, which yields 5.300000190734863.
... one solution is to use the math.fround() method, which returns the single-precision value equivalent to the 64-bit javascript value specified—when setting value, like this: const source = new audiobuffersourcenode(...); const rate = math.fround(5.3); source.playbackrate.value = rate; console.log(source.playbackrate.value === rate); in this case, the log out
put will be true.
AudioWorkletGlobalScope.registerProcessor - Web APIs
examples in this example we create a custom audioworkletnode that out
puts silence.
... // test-processor.js class testprocessor extends audioworkletprocessor { process (in
puts, out
puts, parameters) { return true } } registerprocessor('test-processor', testprocessor) next, in our main script file we'll load the processor, create an instance of audioworkletnode — passing it the processor name that we used when calling registerprocessor — and connect it to an audio graph.
BaseAudioContext.createChannelMerger() - Web APIs
syntax baseaudiocontext.createchannelmerger(numberofin
puts); parameters numberofin
puts the number of channels in the in
put audio streams, which the out
put stream will contain; the default is 6 if this parameter is not specified.
...tion(data) { var source = ac.createbuffersource(); source.buffer = data; var splitter = ac.createchannelsplitter(2); source.connect(splitter); var merger = ac.createchannelmerger(2); // reduce the volume of the left channel only var gainnode = ac.creategain(); gainnode.gain.setvalueattime(0.5, ac.currenttime); splitter.connect(gainnode, 0); // connect the splitter back to the second in
put of the merger: we // effectively swap the channels, here, reversing the stereo image.
BaseAudioContext.createChannelSplitter() - Web APIs
syntax baseaudiocontext.createchannelsplitter(numberofout
puts); parameters numberofout
puts the number of channels in the in
put audio stream that you want to out
put separately; the default is 6 if this parameter is not specified.
...tion(data) { var source = ac.createbuffersource(); source.buffer = data; var splitter = ac.createchannelsplitter(2); source.connect(splitter); var merger = ac.createchannelmerger(2); // reduce the volume of the left channel only var gainnode = ac.creategain(); gainnode.gain.setvalueattime(0.5, ac.currenttime); splitter.connect(gainnode, 0); // connect the splitter back to the second in
put of the merger: we // effectively swap the channels, here, reversing the stereo image.
BaseAudioContext.createGain() - Web APIs
syntax var gainnode = audiocontext.creategain(); return value a gainnode which takes as in
put one or more audio sources and out
puts audio whose volume has been adjusted in gain (volume) to a level specified by the node's gainnode.gain a-rate parameter.
...if you still hear something, make sure you haven't // connected your source into the out
put in addition to using the gainnode.
BaseAudioContext - Web APIs
baseaudiocontext.createconstantsource() creates a constantsourcenode object, which is an audio source that continuously out
puts a monaural (one-channel) sound signal whose samples all have the same value.
... baseaudiocontext.createperiodicwave() creates a periodicwave, used to define a periodic waveform that can be used to determine the out
put of an oscillatornode.
BiquadFilterNode - Web APIs
a biquadfilternode always has exactly one in
put and one out
put.
... number of in
puts 1 number of out
puts 1 channel count mode "max" channel count 2 (not used in the default count mode) channel interpretation "speakers" constructor biquadfilternode() creates a new instance of a biquadfilternode object.
Blob.size - Web APIs
example this example uses an <in
put> element of type file to ask the user for a group of files, then iterates over those files out
putting their names and lengths in bytes.
... // filein
put is a htmlin
putelement: <in
put type="file" multiple id="myfilein
put"> var filein
put = document.getelementbyid("myfilein
put"); // files is a filelist object (simliar to nodelist) var files = filein
put.files; for (var i = 0; i < files.length; i++) { console.log(files[i].name + " has a size of " + files[i].size + " bytes"); } specifications specification status comment file apithe definition of 'blob.size' in that specification.
CSSPseudoElement.element - Web APIs
examples the example below demonstrates the relationship between csspseudoelement.element and element.pseudo(): const myelement = document.queryselector('q'); const csspseudoelement = myelement.pseudo('::after'); const originatingelement = csspseudoelement.element; console.log(myelement === originatingelement); // out
puts true console.log(myelement.parentelement === originatingelement); // out
puts false console.log(myelement.lastelementchild === csspseudoelement); // out
puts false console.log(myelement.lastchild === csspseudoelement); // out
puts false console.log(myelement.nextelementsibling === csspseudoelement); // out
puts false console.log(myelement.nextsibling === csspseudoelement); // ou...
...t
puts false specifications specification status comment css pseudo-elements level 4the definition of 'element' in that specification.
CSSStyleDeclaration - Web APIs
via window.getcom
putedstyle(), which exposes the cssstyledeclaration object as a read-only interface.
... cssstyledeclaration.getpropertycssvalue() only supported via getcom
putedstyle in firefox.
Using dynamic styling information - Web APIs
--> <button onclick="resetstyle('p1');">reset background color</button> </body> </html> the getcom
putedstyle() method on the document.defaultview object returns all styles that have actually been com
puted for an element.
... see example 6: getcom
putedstyle in the examples chapter for more information on how to use this method.
CacheStorage - Web APIs
if not, fetch the request from the network, then also open the cache created in the first block and add a clone of the request to it using cache.
put (cache.
put(event.request, response.clone()).) if this fails (e.g.
...tch', function(event) { event.respondwith(caches.match(event.request).then(function(response) { // caches.match() always resolves // but in case of success response will have value if (response !== undefined) { return response; } else { return fetch(event.request).then(function (response) { // response may be used only once // we need to save clone to
put one copy in cache // and serve second one let responseclone = response.clone(); caches.open('v1').then(function (cache) { cache.
put(event.request, responseclone); }); return response; }).catch(function () { return caches.match('/sw-test/gallery/mylittlevader.jpg'); }); } })); }); this snippet shows how the api can be u...
CanvasRenderingContext2D.addHitRegion() - Web APIs
(if you don't see the full smiley, check the browser compatibility table to see if your current browser supports hit regions already; you might need to activate a preference.) playable code <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> <in
put id="edit" type="button" value="edit" /> <in
put id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code" style="height:250px"> ctx.beginpath(); ctx.arc(100, 100, 75, 0, 2 * math.pi, false); ctx.linewidth = 5; ctx.stroke(); // eyes ctx.beginpath(); ctx.arc(70, 80, 10, 0, 2 * math.pi, false); ctx.arc(130, 80, 10, 0, 2 * math.pi, false); ctx.fill(); ctx.addhitregi...
...on drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener("click", function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener("click", function() { textarea.focus(); }); canvas.addeventlistener("mousemove", function(event){ if(event.region) { alert("ouch, my eye :("); } }); textarea.addeventlistener("in
put", drawcanvas); window.addeventlistener("load", drawcanvas); specifications canvas hit regions have been removed from the whatwg living standard, although discussions about future standardization are ongoing.
CanvasRenderingContext2D.arcTo() - Web APIs
you can play around with range in
put to see how arc changes.
... html <div> <label for="radius">radius: </label> <in
put name="radius" type="range" id="radius" min=0 max=100 value=50> <label for="radius" id="radius-out
put">50</label> </div> <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const controlout = document.getelementbyid('radius-out
put'); const control = document.getelementbyid('radius'); control.onin
put = () => { controlout.textcontent = r = control.value; }; const mouse = { x: 0, y: 0 }; let r = 100; // radius const p0 = { x: 0, y: 50 }; const p1 = { x: 100, y: 100 }; const p2 = { x: 150, y: 50 }; const p3 = { x: 200, y: 100 }; const labelpoint = function (p, offset, i = 0){ const {x, y} = offset; ctx.beginpath...
CanvasRenderingContext2D.getImageData() - Web APIs
note: image data can be painted onto a canvas using the
putimagedata() method.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.rect(10, 10, 100, 100); ctx.fill(); let imagedata = ctx.getimagedata(60, 60, 200, 100); ctx.
putimagedata(imagedata, 150, 10); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.getimagedata' in that specification.
CanvasRenderingContext2D.miterLimit - Web APIs
playable code <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> <in
put id="edit" type="button" value="edit" /> <in
put id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code"> ctx.beginpath(); ctx.moveto(0,0); ctx.linewidth = 15; ctx.lineto(100, 100); ctx.stroke();</textarea> var canvas = document.getelementbyid("canvas"); var ctx = canvas.getcontext("2d"); var textarea = document.getelementbyid("code"); var reset = document.get...
...elementbyid("reset"); var edit = document.getelementbyid("edit"); var code = textarea.value; function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener("click", function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener("click", function() { textarea.focus(); }) textarea.addeventlistener("in
put", drawcanvas); window.addeventlistener("load", drawcanvas); screenshotlive sample specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.miterlimit' in that specification.
CanvasRenderingContext2D.scrollPathIntoView() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.fillrect(10, 10, 30, 30); ctx.scrollpathintoview(); edit the code below to see your changes update live in the canvas: playable code <canvas id="canvas" width="400" height="200" class="playable-canvas"> <in
put id="button" type="range" min="1" max="12"> </canvas> <div class="playable-buttons"> <in
put id="edit" type="button" value="edit" /> <in
put id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code"> ctx.beginpath(); ctx.rect(10, 10, 30, 30); ctx.scrollpathintoview();</textarea> var canvas = document.getelementbyid("canvas"); var ctx = canvas.getcontext("2d"); ...
... = document.getelementbyid("reset"); var edit = document.getelementbyid("edit"); var code = textarea.value; function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener("click", function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener("click", function() { textarea.focus(); }) textarea.addeventlistener("in
put", drawcanvas); window.addeventlistener("load", drawcanvas); specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.scrollpathintoview' in that specification.
CanvasRenderingContext2D - Web APIs
canvasrenderingcontext2d.
putimagedata() paints data from the given imagedata object onto the bitmap.
... canvasrenderingcontext2d.webkit
putimagedatahd intended for hd backing stores, but removed from canvas specifications.
A basic ray-caster - Web APIs
the code does attempt to be very efficient, using array look-ups of pre-com
puted values, but i'm no optimization guru, so things could probably be written faster.
... in
put.js | level.js | player.js | raycaster.html | raycaster.js | trace.css | trace.js see also canvas tutorial ...
Drawing text - Web APIs
a textbaseline example edit the code below and see your changes update live in the canvas: ctx.font = '48px serif'; ctx.textbaseline = 'hanging'; ctx.stroketext('hello world', 0, 100); playable code <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <div class="playable-buttons"> <in
put id="edit" type="button" value="edit" /> <in
put id="reset" type="button" value="reset" /> </div> <textarea id="code" class="playable-code"> ctx.font = "48px serif"; ctx.textbaseline = "hanging"; ctx.stroketext("hello world", 0, 100);</textarea> var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); var textarea = document.getelementbyid('code'); var reset = document...
....getelementbyid('reset'); var edit = document.getelementbyid('edit'); var code = textarea.value; function drawcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener('click', function() { textarea.focus(); }) textarea.addeventlistener('in
put', drawcanvas); window.addeventlistener('load', drawcanvas); advanced text measurements in the case you need to obtain more details about the text, the following method allows you to measure it.
ChannelMergerNode() - Web APIs
options optional a channelmergeroptions dictionary object defining the properties you want the channelmergernode to have (also inherits parameters from the audionodeoptions dictionary): numberofin
puts: a number defining the number of in
puts the channelmergernode should have.
... example var ac = new audiocontext(); var options = { numberofin
puts : 2 } var mymerger = new channelmergernode(ac, options); specifications specification status comment web audio apithe definition of 'channelmergernode' in that specification.
CompositionEvent.locale - Web APIs
the locale read-only property of the compositionevent interface returns the locale of current in
put method (for example, the keyboard layout locale if the composition is associated with ime).
... syntax mylocale = compositionevent.locale value a domstring representing the locale of current in
put method.
CompositionEvent - Web APIs
compositionevent.data read only returns the characters generated by the in
put method that raised the event; its varies depending on the type of event that generated the compositionevent object.
... compositionevent.locale read only returns the locale of current in
put method (for example, the keyboard layout locale if the composition is associated with ime).
Console.countReset() - Web APIs
examples for example, given code like this: let user = ""; function greet() { console.count(); return "hi " + user; } user = "bob"; greet(); user = "alice"; greet(); greet(); console.count(); console.countreset(); console out
put will look something like this: "default: 1" "default: 2" "default: 3" "default: 4" "default: 0" note that the call to console.counterreset() resets the value of the default counter to zero.
... if we pass the user variable as the label argument with the string "bob" to the first invocation of count(), and the string "alice" to the second: let user = ""; function greet() { console.count(user); return "hi " + user; } user = "bob"; greet(); user = "alice"; greet(); greet(); console.countreset("bob"); console.count("alice"); we will see out
put like this: "bob: 1" "alice: 1" "alice: 2" "bob: 0" "alice: 3" resetting the value of the counter "bob" only changes the value of that counter.
Console.dir() - Web APIs
the out
put is presented as a hierarchical listing with disclosure triangles that let you see the contents of child objects.
... syntax console.dir(object); parameters object a javascript object whose properties should be out
put.
Console.dirxml() - Web APIs
the out
put is presented as a hierarchical listing of expandable nodes that let you see the contents of child nodes.
... syntax console.dirxml(object); parameters object a javascript object whose properties should be out
put.
Console.group() - Web APIs
using groups in the console requires gecko 9.0(firefox 9.0 / thunderbird 9.0 / seamonkey 2.6) you can use nested groups to help organize your out
put by visually associating related messages.
...for example, given this code: console.log("this is the outer level"); console.group(); console.log("level 2"); console.group(); console.log("level 3"); console.warn("more of level 3"); console.groupend(); console.log("back to level 2"); console.groupend(); console.log("back to the outer level"); the out
put looks like this: see using groups in the console in the documentation of console for more details.
Console.time() - Web APIs
when you call console.timeend() with the same name, the browser will out
put the time, in milliseconds, that elapsed since the timer was started.
...this will identify the timer; use the same name when calling console.timeend() to stop the timer and get the time out
put to the console.
console.trace() - Web APIs
the console interface's trace() method out
puts a stack trace to the web console.
... syntax console.trace( [...any, ...data ]); parameters ...any, ...data optional zero or more objects to be out
put to console along with the trace.
ConvolverNode - Web APIs
a convolvernode always has exactly one in
put and one out
put.
... number of in
puts 1 number of out
puts 1 channel count mode "clamped-max" channel count 1, 2, or 4 channel interpretation "speakers" constructor convolvernode() creates a new convolvernode object instance.
DOMException - Web APIs
new dom exceptions don't use this anymore: they
put this info in the domexception.name attribute.
... notreadableerror the in
put/out
put read operation failed (no legacy code value and constant name).
DOMMatrix - Web APIs
this is equivalent to the dot product a⋅b, where matrix a is the source matrix and b is the matrix given as an in
put to the method.
...this is equivalent to the dot product b⋅a, where matrix a is the source matrix and b is the matrix given as an in
put to the method.
Detecting device orientation - Web APIs
so let's imagine a ball in a garden: <div class="garden"> <div class="ball"></div> </div> <pre class="out
put"></pre> this garden is 200 pixel wide (yes, it's a tiny one), and the ball is in the center: .garden { position: relative; width : 200px; height: 200px; border: 5px solid #ccc; border-radius: 10px; } .ball { position: absolute; top : 90px; left : 90px; width : 20px; height: 20px; background: green; border-radius: 100%; } now, if we move our device, the ball will m...
...ove accordingly: var ball = document.queryselector('.ball'); var garden = document.queryselector('.garden'); var out
put = document.queryselector('.out
put'); var maxx = garden.clientwidth - ball.clientwidth; var maxy = garden.clientheight - ball.clientheight; function handleorientation(event) { var x = event.beta; // in degree in the range [-180,180] var y = event.gamma; // in degree in the range [-90,90] out
put.innerhtml = "beta : " + x + "\n"; out
put.innerhtml += "gamma: " + y + "\n"; // because we don't want to have the device upside down // we constrain the x value to the range [-90,90] if (x > 90) { x = 90}; if (x < -90) { x = -90}; // to make com
putation easier we shift the range of // x and y to [0,180] x += 90; y += 90; // 10 is half the size of ...
Document.execCommand() - Web APIs
when an html document has been switched to designmode, its document object exposes an execcommand method to run commands that manipulate the current editable region, such as form in
puts or contenteditable elements.
... avalueargument for commands which require an in
put argument, is a domstring providing that information.
Document: keyup event - Web APIs
note: if you're looking for a way to react to changes in an in
put's value, you should use the in
put event.
... some changes are not detectable by keyup, for example pasting text from the context menu in a text in
put.
Document.querySelector() - Web APIs
here, the first <in
put> element with the name "login" (<in
put name="login"/>) located inside a <div> whose class is "user-panel main" (<div class="user-panel main">) in the document is returned: var el = document.queryselector("div.user-panel.main in
put[name='login']"); negation as all css selector strings are valid, you can also negate selectors: var el = document.queryselector("div.user-panel:not(.main) in
put[na...
...me='login']"); this will select an in
put with a parent div with the user-panel class but not the main class.
Document: scroll event - Web APIs
examples scroll event throttling since scroll events can fire at a high rate, the event handler shouldn't execute com
putationally expensive operations such as dom modifications.
... note, however, that in
put events and animation frames are fired at about the same rate, and therefore the optimization below is often unnecessary.
DocumentOrShadowRoot.getSelection() - Web APIs
it is worth noting that currently getselection() doesn't work on the content of <in
put> elements in firefox.
... htmlin
putelement.setselectionrange()) could be used to work around this.
Using the W3C DOM Level 1 Core - Web APIs
the following script would do the job: html content <body> <in
put type="button" value="change this document." onclick="change()"> <h2>header</h2> <p>paragraph</p> </body> javascript content function change() { // document.getelementsbytagname("h2") returns a nodelist of the <h2> // elements in the document, and the first is number 0: var header = document.getelementsbytagname("h2").item(0); // the firstchild of the header is a text node: ...
... var para = document.getelementsbytagname("p").item(0); para.firstchild.data = "this is the first paragraph."; // create a new text node for the second paragraph var newtext = document.createtextnode("this is the second paragraph."); // create a new element to be the second paragraph var newelement = document.createelement("p"); //
put the text in the paragraph newelement.appendchild(newtext); // and
put the paragraph on the end of the document by appending it to // the body (which is the parent of para) para.parentnode.appendchild(newelement); } you can see this script as a complete example.
Element: MozMousePixelScroll event - Web APIs
if the platform's native mouse wheel events indicate the scroll distance in terms of lines or pages, the value of detail is com
puted using that value and the line height or page width/height of the nearest ancestor scrollable element that contains the target element.
... note: on macos, the scroll distance (and therefore the value of detail) is com
puted based on the accelerated scroll distance.
Element.attributes - Web APIs
pe html> <html> <head> <title>attributes example</title> <script type="text/javascript"> function listattributes() { var paragraph = document.getelementbyid("paragraph"); var result = document.getelementbyid("result"); // first, let's verify that the paragraph has some attributes if (paragraph.hasattributes()) { var attrs = paragraph.attributes; var out
put = ""; for(var i = attrs.length - 1; i >= 0; i--) { out
put += attrs[i].name + "->" + attrs[i].value; } result.value = out
put; } else { result.value = "no attributes to show"; } } </script> </head> <body> <p id="paragraph" style="color: green;">sample paragraph</p> <form action=""> <p> <in
put type="button" value="show first attribute nam...
...e and value" onclick="listattributes();"> <in
put id="result" type="text" value=""> </p> </form> </body> </html> specifications specification status comment domthe definition of 'element.attributes' in that specification.
Element: blur event - Web APIs
bubbles no cancelable no interface focusevent event handler property onblur sync / async sync composed yes examples simple example html <form id="form"> <in
put type="text" placeholder="text in
put"> <in
put type="password" placeholder="password"> </form> javascript const password = document.queryselector('in
put[type="password"]'); password.addeventlistener('focus', (event) => { event.target.style.background = 'pink'; }); password.addeventlistener('blur', (event) => { event.target.style.background = ''; }); result event delegation there are ...
... html <form id="form"> <in
put type="text" placeholder="text in
put"> <in
put type="password" placeholder="password"> </form> javascript const form = document.getelementbyid('form'); form.addeventlistener('focus', (event) => { event.target.style.background = 'pink'; }, true); form.addeventlistener('blur', (event) => { event.target.style.background = ''; }, true); result specifications specification status comment ui events working draft added info that this event is composed.
Element: click event - Web APIs
internet explorer internet explorer 8 & 9 suffer from a bug where elements with a com
puted background-color of transparent that are overlaid on top of other element(s) won't receive click events.
... safari mobile considers the following elements to be typically interactive (and thus they aren't affected by this bug): <a> (but it must have an href) <area> (but it must have an href) <button> <img> <in
put> <label> (but it must be associated with a form control) <textarea> this list is incomplete; you can help mdn by doing further testing/research and expanding it.
Element.clientTop - Web APIs
this is because the offsettop indicates the location of the top of the border (not the margin) while the client area starts immediately below the border, (client area includes padding.) therefore, the clienttop value will always equal the integer portion of the .getcom
putedstyle() value for "border-top-width".
... (actually might be math.round(parsefloat()).) for example, if the com
puted "border-top-width" is zero, then clienttop is also zero.
Element: focus event - Web APIs
bubbles no cancelable no interface focusevent event handler property onfocus sync / async sync composed yes examples simple example html <form id="form"> <in
put type="text" placeholder="text in
put"> <in
put type="password" placeholder="password"> </form> javascript const password = document.queryselector('in
put[type="password"]'); password.addeventlistener('focus', (event) => { event.target.style.background = 'pink'; }); password.addeventlistener('blur', (event) => { event.target.style.background = ''; }); result event delegation there are ...
... html <form id="form"> <in
put type="text" placeholder="text in
put"> <in
put type="password" placeholder="password"> </form> javascript const form = document.getelementbyid('form'); form.addeventlistener('focus', (event) => { event.target.style.background = 'pink'; }, true); form.addeventlistener('blur', (event) => { event.target.style.background = ''; }, true); result specifications specification status comment ui events working draft added info that this event is composed.
Element.getBoundingClientRect() - Web APIs
the amount of scrolling that has been done of the viewport area (or any other scrollable element) is taken into account when com
puting the bounding rectangle.
... rect = elt.getboundingclientrect() // the result in emptyobj is {} emptyobj = object.assign({}, rect) emptyobj = { ...rect } {width, ...emptyobj} = rect domrect properties top, left, right, and bottom are com
puted using the values of the object's other properties.
Element.innerHTML - Web APIs
javascript function log(msg) { var logelem = document.queryselector(".log"); var time = new date(); var timestr = time.tolocaletimestring(); logelem.innerhtml += timestr + ": " + msg + "<br/>"; } log("logging mouse events inside this container..."); the log() function creates the log out
put by getting the current time from a date object using tolocaletimestring(), and building a string with the timestamp and the message text.
...you can see out
put into the log by moving the mouse in and out of the box, clicking in it, and so forth.
Element: keyup event - Web APIs
tion, do something like this (229 is a special value set for a keycode relating to an event that has been processed by an ime): eventtarget.addeventlistener("keyup", event => { if (event.iscomposing || event.keycode === 229) { return; } // do something }); examples addeventlistener keyup example this example logs the keyboardevent.code value whenever you release a key inside the <in
put> element.
... <in
put placeholder="click here, then press and release a key." size="40"> <p id="log"></p> const in
put = document.queryselector('in
put'); const log = document.getelementbyid('log'); in
put.addeventlistener('keyup', logkey); function logkey(e) { log.textcontent += ` ${e.code}`; } onkeyup equivalent in
put.onkeyup = logkey; specifications specification status ui events working draft ...
Element.name - Web APIs
it only applies to the following elements: <a>, <applet>, <button>, <form>, <frame>, <iframe>, <img>, <in
put>, <map>, <meta>, <object>, <param>, <select>, and <textarea>.
... syntax htmlelement.name = string let elname = htmlelement.name let fcontrol = htmlformelement.elementname let controlcollection = htmlformelement.elements.elementname example <form action="" name="forma"> <in
put type="text" value="foo"> </form> <script type="text/javascript"> // get a reference to the first element in the form let formelement = document.forms['forma'].elements[0] // give it a name formelement.name = 'in
puta' // show the value of the in
put alert(document.forms['forma'].elements['in
puta'].value) </script> notes in internet explorer (ie), the name property of dom objects...
Element.outerHTML - Web APIs
for example: var div = document.createelement("div"); div.outerhtml = "<div class=\"test\">test</div>"; console.log(div.outerhtml); // out
put: "<div></div>" also, while the element will be replaced in the document, the variable whose outerhtml property was set will still hold a reference to the original element: var p = document.getelementsbytagname("p")[0]; console.log(p.nodename); // shows: "p" p.outerhtml = "<div>this div replaced a paragraph.</div>"; console.log(p.nodename); // still "p"; the returned value will contain html es...
...caped attributes: var anc = document.createelement("a"); anc.href = "https://developer.mozilla.org?a=b&c=d"; console.log(anc.outerhtml); // out
put: "<a href='https://developer.mozilla.org?a=b&c=d'></a>" specification specification status comment dom parsing and serializationthe definition of 'element.outerhtml' in that specification.
Element: scroll event - Web APIs
examples scroll event throttling since scroll events can fire at a high rate, the event handler shouldn't execute com
putationally expensive operations such as dom modifications.
... note, however, that in
put events and animation frames are fired at about the same rate, and therefore the optimization below is often unnecessary.
Element: select event - Web APIs
for example, in html, select events can be dispatched only on form <in
put type="text"> and <textarea> elements.
... examples selection logger <in
put value="try selecting some text in this element."> <p id="log"></p> function logselection(event) { const log = document.getelementbyid('log'); const selection = event.target.value.substring(event.target.selectionstart, event.target.selectionend); log.textcontent = `you selected: ${selection}`; } const in
put = document.queryselector('in
put'); in
put.addeventlistener('select', logselection); onselect equivalent you can also set up the event handler using the onselect property: in
put.onselect = logselection; specifications specification status ui eventsthe definition of 'select' in that specification.
Element.setCapture() - Web APIs
x; color: black; padding: 2px; box-shadow: black 2px 2px; } </style> <script type="text/javascript"> function init() { var btn = document.getelementbyid("mybutton"); if (btn.setcapture) { btn.addeventlistener("mousedown", mousedown, false); btn.addeventlistener("mouseup", mouseup, false); } else { document.getelementbyid("out
put").innerhtml = "sorry, there appears to be no setcapture support on this browser"; } } function mousedown(e) { e.target.setcapture(); e.target.addeventlistener("mousemove", mousemoved, false); } function mouseup(e) { e.target.removeeventlistener("mousemove", mousemoved, false); } function mousemoved(e) { var out
put = document.getel...
...ementbyid("out
put"); out
put.innerhtml = "position: " + e.clientx + ", " + e.clienty; } </script> </head> <body onload="init()"> <p>this is an example of how to use mouse capture on elements in gecko 2.0.</p> <p><a id="mybutton" href="#">test me</a></p> <div id="out
put">no events yet</div> </body> </html> view live examples notes the element may not be scrolled completely to the top or bottom, depending on the layout of other elements.
Element.tagName - Web APIs
example html <span id="born">when i was born...</span> javascript var span = document.getelementbyid("born"); console.log(span.tagname); in xhtml (or any other xml format), the original case will be maintained, so "span" would be out
put in case the original tag name was created lowercase.
... in html, "span" would be out
put instead regardless of the case used while creating the original document.
Element.toggleAttribute() - Web APIs
example in the following example, toggleattribute() is used to toggle the readonly attribute of a <in
put>.
... html <in
put value="text"> <button>toggleattribute("readonly")</button> javascript var button = document.queryselector("button"); var in
put = document.queryselector("in
put"); button.addeventlistener("click", function(){ in
put.toggleattribute("readonly"); }); result dom methods dealing with element's attributes: not namespace-aware, most commonly used methods namespace-aware variants (dom level 2) dom level 1 methods for dealing with attr nodes directly (seldom used) dom level 2 namespace-aware methods for dealing with attr nodes directly (seldom used) setattribute (dom 1) setattributens setattributenode setattributenodens getattribute (dom 1) getattributens getattributenode getattributenodens hasattribute (dom 2) hasattributens - - removeattribute (dom 1) removeattrib...
Event.bubbles - Web APIs
example function handlein
put(e) { // checks whether the event bubbles and ...
...passes the event along if does not passiton(e); } // already bubbling doout
put(e); } note: only certain events can bubble.
File.File() - Web APIs
syntax new file(bits, name[, options]); parameters bits an array of arraybuffer, arraybufferview, blob, usvstring objects, or a mix of any of such objects, that will be
put inside the file.
...available options are as follows: type: a domstring representing the mime type of the content that will be
put into the file.
FileReader: error event - Web APIs
bubbles no cancelable no interface progressevent event handler property filereader.onerror examples const filein
put = document.queryselector('in
put[type="file"]'); const reader = new filereader(); function handleselected(e) { const selectedfile = filein
put.files[0]; if (selectedfile) { reader.addeventlistener('error', () => { console.error(`error occurred reading file: ${selectedfile.name}`); }); reader.addeventlistener('load', () => { console.error(`file: ${selectedfile.name} read successfully`); }); reader.readasdataurl(selectedfile); ...
... } } filein
put.addeventlistener('change', handleselected); specifications specification status file api working draft ...
FileReader.readAsDataURL() - Web APIs
example html <in
put type="file" onchange="previewfile()"><br> <img src="" height="200" alt="image preview..."> javascript function previewfile() { const preview = document.queryselector('img'); const file = document.queryselector('in
put[type=file]').files[0]; const reader = new filereader(); reader.addeventlistener("load", function () { // convert image file to base64 string preview.src = reader.r...
...esult; }, false); if (file) { reader.readasdataurl(file); } } live result example reading multiple files html <in
put id="browse" type="file" onchange="previewfiles()" multiple> <div id="preview"></div> javascript function previewfiles() { var preview = document.queryselector('#preview'); var files = document.queryselector('in
put[type=file]').files; function readandpreview(file) { // make sure `file.name` matches our extensions criteria if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) { var reader = new filereader(); reader.addeventlistener("load", function () { var image = new image(); image.height = 100; image.title = file.name; image.src = this.result; preview.appendchild( image ); }, false); ...
FileReader.result - Web APIs
example this example presents a function, read(), which reads a file from a file in
put.
... var filein
put = document.queryselector('in
put[type="file"]'); function read(callback) { var file = filein
put.files.item(0); var reader = new filereader(); reader.onload = function() { callback(reader.result); } reader.readastext(file); } specifications specification status comment file apithe definition of 'result' in that specification.
FileReader - Web APIs
the filereader object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's com
puter, using file or blob objects to specify the file or data to read.
... file objects may be obtained from a filelist object returned as a result of a user selecting files using the <in
put> element, from a drag and drop operation's datatransfer object, or from the mozgetasfile() api on an htmlcanvaselement.
Introduction to the File and Directory Entries API - Web APIs
the app can restart uploads after an interruption, such as the browser being closed or crashing, connectivity getting interrupted, or the com
puter getting shut down.
...for example, you are likely to use one of the following: xmlhttprequest (such as the send() method for file and blob objects) drag and drop api web workers (for the synchronous version of the file and directory entries api) the in
put element (to programmatically obtain a list of files from the element) the file and directory entries api is case sensitive the filesystem api is case-sensitive, and case-preserving.
FormData() - Web APIs
it will also encode file in
put content.
...mdata object: var formdata = new formdata(); // currently empty you could add a key/value pair to this using formdata.append: formdata.append('username', 'chris'); or you can specify the optional form argument when creating the formdata object, to prepopulate it with values from the specified form: <form id="myform" name="myform"> <div> <label for="username">enter name:</label> <in
put type="text" id="username" name="username"> </div> <div> <label for="useracc">enter account number:</label> <in
put type="text" id="useracc" name="useracc"> </div> <div> <label for="userfile">upload file:</label> <in
put type="file" id="userfile" name="userfile"> </div> <in
put type="submit" value="submit!"> </form> note: only successful form controls are included in a ...
FormData.append() - Web APIs
example the following line creates an empty formdata object: var formdata = new formdata(); // currently empty you can add key/value pairs to this using formdata.append: formdata.append('username', 'chris'); formdata.append('userpic', myfilein
put.files[0], 'chris.jpg'); as with regular form data, you can append multiple values with the same name.
... for example (and being compatible with php's naming conventions by adding [] to the name): formdata.append('userpic[]', myfilein
put.files[0], 'chris1.jpg'); formdata.append('userpic[]', myfilein
put.files[1], 'chris2.jpg'); this technique makes it simpler to process multi-file uploads because the resultant data structure is more conducive to looping.
Guide to the Fullscreen API - Web APIs
let's consider this <video> element: <video controls id="myvideo"> <source src="somevideo.webm"></source> <source src="somevideo.mp4"></source> </video> we can
put that video into full-screen mode as follows: var elem = document.getelementbyid("myvideo"); if (elem.requestfullscreen) { elem.requestfullscreen(); } this code checks for the existence of the requestfullscreen() method before calling it.
...attempting to
put an element which can't be displayed in fullscreen mode (or the parent or descendant of such an element) won't work.
Using the Gamepad API - Web APIs
connecting to a gamepad when a new gamepad is connected to the com
puter, the focused page first receives a gamepadconnected event.
...we have done this below using window.setinterval(); once the object is available the gamepad info is out
putted, the game loop is started, and the interval is cleared using window.clearinterval().
Geolocation.getCurrentPosition() - Web APIs
syntax navigator.geolocation.getcurrentposition(success[, error[, [options]]) parameters success a callback function that takes a geolocationposition object as its sole in
put parameter.
... error optional an optional callback function that takes a geolocationpositionerror object as its sole in
put parameter.
Geolocation.watchPosition() - Web APIs
syntax navigator.geolocation.watchposition(success[, error[, options]]) parameters success a callback function that takes a geolocationposition object as an in
put parameter.
... error optional an optional callback function that takes a geolocationpositionerror object as an in
put parameter.
GlobalEventHandlers.onauxclick - Web APIs
the auxclick event is raised when a non-primary button has been pressed on an in
put device (e.g., a middle mouse button).
...historically, click has generally fired for the click of any device in
put button, although with browser behavior being somewhat inconsistent.
GlobalEventHandlers.onblur - Web APIs
example this example uses onblur and onfocus to change the text within an <in
put> element.
... html <in
put type="text" value="click here"> javascript let in
put = document.queryselector('in
put'); in
put.onblur = in
putblur; in
put.onfocus = in
putfocus; function in
putblur() { in
put.value = 'focus has been lost'; } function in
putfocus() { in
put.value = 'focus is here'; } result try clicking in and out of the form field, and watch its contents change accordingly.
GlobalEventHandlers.onkeydown - Web APIs
example this example logs the keyboardevent.code value whenever you press down a key inside the <in
put> element.
... html <in
put> <p id="log"></p> javascript const in
put = document.queryselector('in
put'); const log = document.getelementbyid('log'); in
put.onkeydown = logkey; function logkey(e) { log.textcontent += ` ${e.code}`; } result specifications specification status comment html living standardthe definition of 'onkeydown' in that specification.
GlobalEventHandlers.onkeyup - Web APIs
example this example logs the keyboardevent.code value whenever you release a key inside the <in
put> element.
... html <in
put> <p id="log"></p> javascript const in
put = document.queryselector('in
put'); const log = document.getelementbyid('log'); in
put.onkeyup = logkey; function logkey(e) { log.textcontent += ` ${e.code}`; } result specifications specification status comment html living standardthe definition of 'onkeyup' in that specification.
GlobalEventHandlers.onpointerdown - Web APIs
it receives as in
put the pointerevent describing the pointerdown event.
... #target { width: 400px; height: 30px; text-align: center; font: 16px "open sans", "helvetica", sans-serif; color: white; background-color: blue; border: 2px solid darkblue; cursor: pointer; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } result the resulting out
put is shown below.
GlobalEventHandlers.onreset - Web APIs
the reset event fires when the user clicks a reset button in a form (<in
put type="reset">).
... html <form id="form"> <label>test field: <in
put type="text"></label> <br><br> <button type="reset">reset form</button> </form> <p id="log"></p> javascript function logreset(event) { log.textcontent = `form reset!
GlobalEventHandlers - Web APIs
globaleventhandlers.onauxclick an eventhandler called when an auxclick event is sent, indicating that a non-primary button has been pressed on an in
put device (e.g.
... globaleventhandlers.onin
put is an eventhandler representing the code to be called when the in
put event is raised.
HTMLDialogElement.returnValue - Web APIs
> <script> (function() { var updatebutton = document.getelementbyid('updatedetails'); var dialog = document.getelementbyid('favdialog'); dialog.returnvalue = 'favanimal'; function opencheck(dialog) { if (dialog.open) { console.log('dialog open'); } else { console.log('dialog closed'); } } function handleuserin
put(returnvalue) { if (returnvalue === 'cancel' || returnvalue == null) { // user canceled the dialog, do nothing } else if (returnvalue === 'confirm') { // user chose a favorite animal, do something with it } } // “update details” button opens the <dialog> modally updatebutton.addeventlistener('click', function() { dialog.sho...
...wmodal(); opencheck(dialog); handleuserin
put(dialog.returnvalue); }); })(); </script> note: you can find this example on github as htmldialogelement-basic (see it live also).
HTMLElement.click() - Web APIs
when click() is used with supported elements (such as an <in
put>), it fires the element's click event.
... syntax element.click() example simulate a mouse-click when moving the mouse pointer over a checkbox: html <form> <in
put type="checkbox" id="mycheck" onmouseover="myfunction()" onclick="alert('click event occured')"> </form> javascript // on mouse-over, execute myfunction function myfunction() { document.getelementbyid("mycheck").click(); } specification specification status comment html living standard living standard document object model (dom) level 2 html specification obsolete initial definition.
HTMLElement.dir - Web APIs
browsers might allow users to change the directionality of <in
put> and <textarea>s in order to assist with authoring content.
... chrome and safari provide a directionality option in the contextual menu of in
put fields while internet explorer and edge use the key combinations ctrl + left shift and ctrl + right shift.
HTMLElement.innerText - Web APIs
html <h3>source element:</h3> <p id="source"> <style>#source { color: red; } #text { text-transform: uppercase; }</style> <span id=text>take a look at<br>how this text<br>is interpreted below.</span> <span style="display:none">hidden text</span> </p> <h3>result of textcontent:</h3> <textarea id="textcontentout
put" rows="6" cols="30" readonly>...</textarea> <h3>result of innertext:</h3> <textarea id="innertextout
put" rows="6" cols="30" readonly>...</textarea> javascript const source = document.getelementbyid("source"); const textcontentout
put = document.getelementbyid("textcontentout
put"); const innertextout
put = document.getelementbyid("innertextout
put"); textcontentout
put.value = source.textcontent; i...
...nnertextout
put.value = source.innertext; result specification specification status comment html living standardthe definition of 'innertext' in that specification.
HTMLFormElement.enctype - Web APIs
multipart/form-data: the type that allows file <in
put> element(s) to upload file data.
... this value can be overridden by a formenctype attribute on a <button> or <in
put> element.
HTMLImageElement.crossOrigin - Web APIs
const imageurl = "https://mdn.mozillademos.org/files/16797/clock-demo-400px.png"; const container = document.queryselector(".container"); function loadimage(url) { const image = new image(200, 200); image.addeventlistener("load", () => container.prepend(image) ); image.addeventlistener("error", () => { const errmsg = document.createelement("out
put"); errmsg.value = `error loading image at ${url}`; container.append(errmsg); }); image.crossorigin = "anonymous"; image.alt = ""; image.src = url; } loadimage(imageurl); html <div class="container"> <p>here's a paragraph.
...thanks for reading me.</p> </div> css body { font: 1.125rem/1.5, helvetica, sans-serif; } .container { display: flow-root; width: 37.5em; border: 1px solid #d2d2d2; } img { float: left; padding-right: 1.5em; } out
put { background: rgba(100, 100, 100, 0.1); font-family: courier, monospace; width: 95%; } result specifications specification status comment html living standardthe definition of 'htmlimageelement.crossorigin' in that specification.
HTMLImageElement.x - Web APIs
the x and y properties are only valid for an image if its display property has the com
puted value table-column or table-column-group.
... note: the x property is only valid if the com
puted value of the image's display property is either table-column or table-column-group; in other words, either of those are set directly on the <img> or they're inherited from a containing element or by being located within a column described by either <col> or <colgroup>.
HTMLImageElement.y - Web APIs
the x and y properties are only valid for an image if its display property has the com
puted value table-column or table-column-group.
... note: the y property is only valid if the com
puted value of the image's display property is either table-column or table-column-group; in other words, either of those are set directly on the <img> or they're inherited from a containing element or by being located within a column described by either <col> or <colgroup>.
HTMLObjectElement.setCustomValidity - Web APIs
examples in this example, we pass the id of an in
put element, and set different error messages depending on whether the value is missing, too low or too high.
... function validate(in
putid) { var in
put = document.getelementbyid(in
putid); var validitystate_object = in
put.validity; if (validitystate_object.valuemissing) { in
put.setcustomvalidity('you gotta fill this out, yo!'); in
put.reportvalidity(); } else if (in
put.rangeunderflow) { in
put.setcustomvalidity('we need a higher number!'); in
put.reportvalidity(); } else if (in
put.rangeoverflow) { in
put.setcustomvalidity('thats too high!'); in
put.reportvalidity(); } else { in
put.setcustomvalidity(''); in
put.reportvalidity(); } } it's vital to set the message to an empty string if there are no errors.
Dragging and Dropping Multiple Items - Web APIs
<html> <head> <script> function dodrop(event) { var dt = event.datatransfer; var count = dt.mozitemcount; out
put("items: " + count + "\n"); for (var i = 0; i < count; i++) { out
put(" item " + i + ":\n"); var types = dt.moztypesat(i); for (var t = 0; t < types.length; t++) { out
put(" " + types[t] + ": "); try { var data = dt.mozgetdataat(types[t], i); out
put("(" + (typeof data) + ") : <" + data + " >\n"); } catch (ex) { out
put("<<error>>\n"); ...
...dump(ex); } } } } function out
put(text) { document.getelementbyid("out
put").textcontent += text; dump(text); } </script> </head> <body> <div id="out
put" style="min-height: 100px; white-space: pre; border: 1px solid black;" ondragenter="document.getelementbyid('out
put').textcontent = ''; event.stoppropagation(); event.preventdefault();" ondragover="event.stoppropagation(); event.preventdefault();" ondrop="event.stoppropagation(); event.preventdefault(); dodrop(event);"> <div> fix</div> </div> </body> </html> this example cancels both the dragenter and dragover events by calling the preventdefault().
Recommended Drag Types - Web APIs
the data should be an object which implements the nsiin
putstream interface.
...ation/x-moz-file-promise-dir', dirprimitive, datasize); var dir = dirprimitive.value.queryinterface(components.interfaces.nsilocalfile); console.log("target folder is = " + dir.path); var file = cc['@mozilla.org/file/local;1'].createinstance(components.interfaces.nsilocalfile); file.initwithpath(dir.path); file.appendrelativepath(name); console.log("out
put final path is =" + file.path); // now you can write or copy the file yourself… } } } see also html drag and drop api (overview) drag operations dragging and dropping multiple items html5 living standard: drag and drop ...
IDBObjectStore - Web APIs
idbobjectstore.
put() returns an idbrequest object, and, in a separate thread, creates a structured clone of the value, and stores the cloned value in the object store.
...pera android full support 14safari ios full support 8samsung internet android full support 1.5 full support 1.5 no support 1.5 — 7.0prefixed prefixed implemented with the vendor prefix: webkit
putchrome full support 24 full support 24 no support 23 — 57prefixed prefixed implemented with the vendor prefix: webkitedge full support 12firefox full support 16 full support ...
IDBRequest.error - Web APIs
example the following example requests a given record title, onsuccess gets the associated record from the idbobjectstore (made available as objectstoretitlerequest.result), updates one property of the record, and then
puts the updated record back into the object store.
...tle var objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // update the notified value in the object to "yes" data.notified = "yes"; // create another request that inserts the item // back into the database var updatetitlerequest = objectstore.
put(data); // when this new request succeeds, run the displaydata() // function again to update the display updatetitlerequest.onsuccess = function() { displaydata(); }; }; objectstoretitlerequest.onerror = function() { // if an error occurs with the request, log what it is console.log("there has been an error with retrieving your data: " + objectstoretitlerequest.error); }; specif...
IDBRequest.onerror - Web APIs
}; example the following example requests a given record title, onsuccess gets the associated record from the idbobjectstore (made available as objectstoretitlerequest.result), updates one property of the record, and then
puts the updated record back into the object store.
...tle var objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // update the notified value in the object to "yes" data.notified = "yes"; // create another request that inserts the item back // into the database var updatetitlerequest = objectstore.
put(data); // when this new request succeeds, run the displaydata() // function again to update the display updatetitlerequest.onsuccess = function() { displaydata(); }; }; objectstoretitlerequest.onerror = function() { // if an error occurs with the request, log what it is console.log("there has been an error with retrieving your data: " + objectstoretitlerequest.error); // todo ...
IDBRequest.onsuccess - Web APIs
}; example the following example requests a given record title, onsuccess gets the associated record from the idbobjectstore (made available as objectstoretitlerequest.result), updates one property of the record, and then
puts the updated record back into the object store.
...tle var objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // update the notified value in the object to "yes" data.notified = "yes"; // create another request that inserts the item back // into the database var updatetitlerequest = objectstore.
put(data); // when this new request succeeds, run the displaydata() // function again to update the display updatetitlerequest.onsuccess = function() { displaydata(); }; }; specifications specification status comment indexed database api 2.0the definition of 'onsuccess' in that specification.
IDBRequest.readyState - Web APIs
example the following example requests a given record title, onsuccess gets the associated record from the idbobjectstore (made available as objectstoretitlerequest.result), updates one property of the record, and then
puts the updated record back into the object store in another request.
...tle var objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // update the notified value in the object to "yes" data.notified = "yes"; // create another request that inserts the item // back into the database var updatetitlerequest = objectstore.
put(data); // log the source of this request console.log("the readystate of this request is " + updatetitlerequest.readystate); // when this new request succeeds, run the displaydata() // function again to update the display updatetitlerequest.onsuccess = function() { displaydata(); }; }; specifications specification status comment indexed database api 2.0t...
IDBRequest.result - Web APIs
syntax var myresult = request.result; value any example the following example requests a given record title, onsuccess gets the associated record from the idbobjectstore (made available as objectstoretitlerequest.result), updates one property of the record, and then
puts the updated record back into the object store.
...tle var objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // update the notified value in the object to "yes" data.notified = "yes"; // create another request that inserts the item // back into the database var updatetitlerequest = objectstore.
put(data); // when this new request succeeds, run the displaydata() // function again to update the display updatetitlerequest.onsuccess = function() { displaydata(); }; }; specifications specification status comment indexed database api 2.0the definition of 'result' in that specification.
IDBRequest.source - Web APIs
example the following example requests a given record title, onsuccess gets the associated record from the idbobjectstore (made available as objectstoretitlerequest.result), updates one property of the record, and then
puts the updated record back into the object store in another request.
...tle var objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // update the notified value in the object to "yes" data.notified = "yes"; // create another request that inserts the item // back into the database var updatetitlerequest = objectstore.
put(data); // log the source of this request console.log("the source of this request is " + updatetitlerequest.source); // when this new request succeeds, run the displaydata() // function again to update the display updatetitlerequest.onsuccess = function() { displaydata(); }; }; specifications specification status comment indexed database api 2.0the definition...
IDBRequest.transaction - Web APIs
example the following example requests a given record title, onsuccess gets the associated record from the idbobjectstore (made available as objectstoretitlerequest.result), updates one property of the record, and then
puts the updated record back into the object store in another request.
...tle var objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the result var data = objectstoretitlerequest.result; // update the notified value in the object to "yes" data.notified = "yes"; // create another request that inserts the item back // into the database var updatetitlerequest = objectstore.
put(data); // log the transaction that originated this request console.log("the transaction that originated this request is " + updatetitlerequest.transaction); // when this new request succeeds, run the displaydata() // function again to update the display updatetitlerequest.onsuccess = function() { displaydata(); }; }; this example shows how a the transaction property can be us...
ImageCapture.getPhotoCapabilities() - Web APIs
example the following example, extracted from chrome's image capture / photo resolution sample, uses the results from getphotocapabilities() to modify the size of an in
put range.
... const in
put = document.queryselector('in
put[type="range"]'); var imagecapture; navigator.mediadevices.getusermedia({video: true}) .then(mediastream => { document.queryselector('video').srcobject = mediastream; const track = mediastream.getvideotracks()[0]; imagecapture = new imagecapture(track); return imagecapture.getphotocapabilities(); }) .then(photocapabilities => { const settings = imagecapture.track.getsettings(); in
put.min = photocapabilities.imagewidth.min; in
put.max = photocapabilities.imagewidth.max; in
put.step = photocapabilities.imagewidth.step; return imagecapture.getphotosettings(); }) .then(photosettings => { in
put.value = p...
ImageCapture.getPhotoSettings() - Web APIs
example the following example, extracted from chrome's image capture / photo resolution sample, uses the results from getphotosettings() to modify the size of an in
put range.
... const in
put = document.queryselector('in
put[type="range"]'); var imagecapture; navigator.mediadevices.getusermedia({video: true}) .then(mediastream => { document.queryselector('video').srcobject = mediastream; const track = mediastream.getvideotracks()[0]; imagecapture = new imagecapture(track); return imagecapture.getphotocapabilities(); }) .then(photocapabilities => { const settings = imagecapture.track.getsettings(); in
put.min = photocapabilities.imagewidth.min; in
put.max = photocapabilities.imagewidth.max; in
put.step = photocapabilities.imagewidth.step; return imagecapture.getphotosettings(); }) .then(photosettings => { in
put.value = ph...
firesTouchEvents - Web APIs
the in
putdevicecapabilities.firestouchevents read-only property returns a boolean that indicates whether the device dispatches touch events.
... syntax var boolean = in
putdevicecapabilities.firestouchevents returns a boolean example mybutton.addeventlistener('mousedown', function(e) { if (!e.sourcecapabilities.firestouchevents) mybutton.classlist.add("pressed"); }); specifications specification status comment in
putdevicecapabilitiesthe definition of 'firetouchevents' in that specification.
KeyboardEvent.charCode - Web APIs
example html <p>type anything into the in
put box below to log a <code>charcode</code>.</p> <in
put type="text" /> <p id="log"></p> javascript let in
put = document.queryselector('in
put'); let log = document.queryselector('#log'); in
put.addeventlistener('keypress', function(e) { log.innertext = `key pressed: ${string.fromcharcode(e.charcode)}\ncharcode: ${e.charcode}`; }); result notes in a keypress event, the unicode value of the ...
...actually with the chinese ime i'm using, entering the ime results in a keypress event with keycode = 229 and no other key events fire until the ime exits (which may happen after multiple characters are in
putted).
KeyboardEvent.location - Web APIs
the keyboardevent.location read-only property returns an unsigned long representing the location of the key on the keyboard or other in
put device.
...on the other hand, if the keyboard doesn't have a keypad, such as on a notebook com
puter, some keys become numpad only when numlock is locked.
KeyframeEffect - Web APIs
animationeffect.getcom
putedtiming() returns the calculated, current timing values for this keyframe effect.
... keyframeeffect.getkeyframes() returns the com
puted keyframes that make up this effect along with their com
puted keyframe offsets.
MSCandidateWindowShow - Web APIs
mscandidatewindowshow fires immediately after the in
put method editor (ime) candidate window is set to appear, but before it renders.
... example in ie11, developers can detect the opening of the ime candidate window by listening to mscandidatewindowshow event, then call getcandidatewindowclientrect() function to find out where the candidate window is and position the suggestion ui away from it: var context = document.getelementbyid("mysearchbox").msgetin
putcontext(); context.addeventlistener("mscandidatewindowshow", candidatewindowshowhandler); function candidatewindowshowhandler(e) { var imerect = context.getcandidatewindowclientrect(); var suggestionrect = document.getelementbyid("mysuggestionlist").getboundingclientrect(); // check if the two rects intersect, and position them away from each other.
MediaDeviceInfo.groupId - Web APIs
const getdevicegroup = maindevinfo => { let devlist = []; navigator.mediadevices.enumeratedevices() .then(devices => { devices.foreach(device => { if (device.groupid === maindevinfo.groupid) { devlist.push(device); } }); }); return devlist; }; the getdevicegroup() function takes as in
put the mediadeviceinfo object describing the device for which a group list is to be built.
... this version of the example
puts the passed-in device at the top of the result list, then adds any other members of the group that are found: const getdevicegroup = maindevinfo => { let devlist = [maindevinfo]; navigator.mediadevices.enumeratedevices() .then(devices => { devices.foreach(device => { if ((device.groupid === maindevinfo.groupid) && (device.deviceid !== maindevinfo.deviceid)) { d...
MediaError.message - Web APIs
the error handler simply out
puts a message to a box onscreen describing the error, including both the code and the message.
...then the resulting text is out
put to the log.
MediaRecorder.start() - Web APIs
then, each time that amount of media has been recorded, an event will be delivered to let you act upon the recorded media, while a new blob is created to record the next slice of the media assuming the mediarecorder's state is inactive, start() sets the state to recording, then begins capturing media from the in
put stream.
...this may be the case, for example, with sources obtained using getusermedia() when the user denies permission to use an in
put device.
MediaSession.setActionHandler() - Web APIs
the callback receives no in
put parameters, and should not return a value.
... the action handler receives as in
put a single parameter: an object conforming to the mediasessionactiondetails dictionary, which provides both the action type (so the same function can handle multiple action types), as well as data needed in order to perform the action.
MediaSettingsRange - Web APIs
example the following example, extracted from chrome's image capture / photo resolution sample, uses the results from getphotocapabilities().imagewidth to modify the size of an in
put range.
... const in
put = document.queryselector('in
put[type="range"]'); var imagecapture; navigator.mediadevices.getusermedia({video: true}) .then(mediastream => { document.queryselector('video').srcobject = mediastream; const track = mediastream.getvideotracks()[0]; imagecapture = new imagecapture(track); return imagecapture.getphotocapabilities(); }) .then(photocapabilities => { const settings = imagecapture.track.getsettings(); in
put.min = photocapabilities.imagewidth.min; in
put.max = photocapabilities.imagewidth.max; in
put.step = photocapabilities.imagewidth.step; return imagecapture.getphotosettings(); }) .then(photosettings => { in
put.value = photosettings.imagewidth; }) .catch(error => console.log('argh!', error.name || error)); specifications specificatio...
MediaTrackSettings.aspectRatio - Web APIs
the aspect ratio is com
puted by taking the track's width, dividing by its height, and rounding the result to ten decimal places.
... for example, the standard 16:9 high-definition aspect ratio can be com
puted as 1920/1080, or 1.7777777778.
MediaTrackSettings.echoCancellation - Web APIs
echo cancellation is a feature which attempts to prevent echo effects on a two-way audio connection by attempting to reduce or eliminate crosstalk between the user's out
put device and their in
put device.
... for example, it might apply a filter that negates the sound being produced on the speakers from being included in the in
put track generated from the microphone.
MediaTrackSettings.groupId - Web APIs
for example, a headset has two devices on it: a microphone which can serve as a source for audio tracks and a speaker which can serve as an out
put for audio.
...however, it can be used to ensure that audio in
put and out
put are both being performed on the same headset, for example, or to ensure that the built-in camera and microphone on a phone are being used for video conferencing purposes.
MediaTrackSettings.noiseSuppression - Web APIs
this feature is typically used on microphones, although it is technically possible it could be provided by other in
put sources as well.
... syntax var noisesuppression = mediatracksettings.noisesuppression; value a boolean value which is true if the in
put track has noise suppression enabled or false if agc is disabled.
MediaTrackSettings - Web APIs
for instance, the audio in
put and out
put devices for the speaker and microphone built into a phone would share the same group id, since they're part of the same physical device.
...common values include 1.3333333333 (for the classic television 4:3 "standard" aspect ratio, also used on tablets such as apple's ipad), 1.7777777778 (for the 16:9 high-definition widescreen aspect ratio), and 1.6 (for the 16:10 aspect ratio common among widescreen com
puters and tablets).
Using the Media Capabilities API - Web APIs
handling the response instead of the assigning the promise to a variable, we can out
put the values returned by the promise to the console: navigator.mediacapabilities.decodinginfo(videoconfiguration).then(result => { console.log('this configuration is ' + (result.supported ?
...bel> <select id="framerate"> <option>60</option> <option>50</option> <option>30</option> <option>24</option> <option selected>15</option> </select> </li> <li> <label for="bitrate">select a bitrate</label> <select id="bitrate"> <option>4000</option> <option>2500</option> <option>800</option> </select> </li> </ul> <p><in
put type="button" value="test this video configuration" id="tryit"></p> </form> <ul id="results"></ul> javascript let mc = { videoconfiguration : new object(), tryit: function () { mc.createconfiguration(); mc.testit(); }, createconfiguration: function () { var size = document.getelementbyid('size').value.split('x'); mc.videoconfiguration = { type: 'file', video...
MessageChannel - Web APIs
when a message is received back from the iframe, the onmessage function simply out
puts the message to a paragraph.
... var channel = new messagechannel(); var out
put = document.queryselector('.out
put'); var iframe = document.queryselector('iframe'); // wait for the iframe to load iframe.addeventlistener("load", onload); function onload() { // listen for messages on port1 channel.port1.onmessage = onmessage; // transfer port2 to the iframe iframe.contentwindow.postmessage('hello from the main page!', '*', [channel.port2]); } // handle messages received on port1 function onmessage(e) { out
put.innerhtml = e.data; } for a full working example, see our channel messaging basic demo on github (run it live too).
MessagePort - Web APIs
when a message is received back from the iframe, the onmessage function simply out
puts the message to a paragraph.
... var channel = new messagechannel(); var out
put = document.queryselector('.out
put'); var iframe = document.queryselector('iframe'); // wait for the iframe to load iframe.addeventlistener("load", onload); function onload() { // listen for messages on port1 channel.port1.onmessage = onmessage; // transfer port2 to the iframe iframe.contentwindow.postmessage('hello from the main page!', '*', [channel.port2]); } // handle messages received on port1 function onmessage(e) { out
put.innerhtml = e.data; } for a full working example, see our channel messaging basic demo on github (run it live too).
MouseEvent - Web APIs
mouseevent.mozin
putsource read only the type of device that generated the event (one of the moz_source_* constants listed below).
... html <p><label><in
put type="checkbox" id="checkbox"> checked</label> <p><button id="button">click me</button> javascript function simulateclick() { var evt = new mouseevent("click", { bubbles: true, cancelable: true, view: window }); var cb = document.getelementbyid("checkbox"); //element to click on var canceled = !cb.dispatchevent(evt); if(canceled) { // a handler called preventdefault ...
Navigator.getUserMedia() - Web APIs
the deprecated navigator.getusermedia() method prompts the user for permission to use up to one video in
put device (such as a camera or shared screen) and up to one audio in
put device (such as a microphone) as the source for a mediastream.
... if permission is denied, no compatible in
put devices exist, or any other error condition occurs, the error callback is executed with a mediastreamerror object describing what went wrong.
Navigator.vendor - Web APIs
the value of the navigator vendor property is always either "google inc.", "apple com
puter, inc.", or (in firefox) the empty string.
... syntax venstring = window.navigator.vendor value either "google inc.", "apple com
puter, inc.", or (in firefox) the empty string.
navigator.hardwareConcurrency - Web APIs
the navigator.hardwareconcurrency read-only property returns the number of logical processors available to run threads on the user's com
puter.
... modern com
puters have multiple physical processor cores in their cpu (two or four cores is typical), but each physical core is also usually able to run more than one thread at a time using advanced scheduling techniques.
Node.isEqualNode() - Web APIs
then we run some javascript to compare the nodes using isequalnode() and out
put the results.
... html <div>this is the first element.</div> <div>this is the second element.</div> <div>this is the first element.</div> <p id="out
put"></p> css #out
put { width: 440px; border: 2px solid black; border-radius: 5px; padding: 10px; margin-top: 20px; display: block; } javascript let out
put = document.getelementbyid("out
put"); let divlist = document.getelementsbytagname("div"); out
put.innerhtml += "div 0 equals div 0: " + divlist[0].isequalnode(divlist[0]) + "<br/>"; out
put.innerhtml += "div 0 equals div 1: " + divlist[0].isequalnode(divlist[1]) + "<br/>"; out
put.innerhtml += "div 0 equals div 2: " + divlist[0].isequalnode(divlist[2]) + "<br/>"; results specifications specification status comment domthe definition of 'node.isequalnode' in tha...
Node.isSameNode() - Web APIs
then we run some javascript to compare the nodes using issamenode() and out
put the results.
... html <div>this is the first element.</div> <div>this is the second element.</div> <div>this is the first element.</div> <p id="out
put"></p> css #out
put { width: 440px; border: 2px solid black; border-radius: 5px; padding: 10px; margin-top: 20px; display: block; } javascript let out
put = document.getelementbyid("out
put"); let divlist = document.getelementsbytagname("div"); out
put.innerhtml += "div 0 same as div 0: " + divlist[0].issamenode(divlist[0]) + "<br/>"; out
put.innerhtml += "div 0 same as div 1: " + divlist[0].issamenode(divlist[1]) + "<br/>"; out
put.innerhtml += "div 0 same as div 2: " + divlist[0].issamenode(divlist[2]) + "<br/>"; results specifications specification status comment domthe definition of 'node: issamenode' in th...
Node.textContent - Web APIs
moreover, since innertext takes css styles into account, reading the value of innertext triggers a reflow to ensure up-to-date com
puted styles.
... (reflows can be com
putationally expensive, and thus should be avoided when possible.) unlike textcontent, altering innertext in internet explorer (version 11 and below) removes child nodes from the element and permanently destroys all descendant text nodes.
OfflineAudioContext.OfflineAudioContext() - Web APIs
the offlineaudiocontext() constructor—part of the web audio api—creates and returns a new offlineaudiocontext object instance, which can then be used to render audio to an audiobuffer rather than to an audio out
put device.
... syntax var offlineaudioctx = new offlineaudiocontext(numberofchannels, length, samplerate); var offlineaudioctx = new offlineaudiocontext(options); parameters you can specify the parameters for the offlineaudiocontext() constructor as either the same set of parameters as are in
puts into the audiocontext.createbuffer() method, or by passing those parameters in an options object.
OfflineAudioContext.startRendering() - Web APIs
syntax event-based version: offlineaudioctx.startrendering(); offlineaudioctx.oncomplete = function(e) { // e.renderedbuffer contains the out
put buffer } promise-based version: offlineaudioctx.startrendering().then(function(buffer) { // buffer contains the out
put buffer }); parameters none.
... when the startrendering() promise resolves, rendering has completed and the out
put audiobuffer is returned out of the promise.
OfflineAudioContext - Web APIs
in contrast with a standard audiocontext, an offlineaudiocontext doesn't render the audio to the device hardware; instead, it generates it, as fast as it can, and out
puts the result to an audiobuffer.
... when the startrendering() promise resolves, rendering has completed and the out
put audiobuffer is returned out of the promise.
OscillatorNode.setPeriodicWave() - Web APIs
the setperiodicwave() method of the oscillatornode interface is used to point to a periodicwave defining a periodic waveform that can be used to shape the oscillator's out
put, when type is custom.
... syntax oscillatornode.setperiodicwave(wave); parameters wave a periodicwave object representing the waveform to use as the shape of the oscillator's out
put.
OscillatorNode - Web APIs
it always has exactly one out
put and no in
puts.
... its basic property defaults (see audionode for definitions) are: number of in
puts 0 number of out
puts 1 channel count mode max channel count 2 (not used in the default count mode) channel interpretation speakers constructor oscillatornode() creates a new instance of an oscillatornode object, optionally providing an object specifying default values for the node's properties.
PannerNode - Web APIs
a pannernode always has exactly one in
put and one out
put: the in
put can be mono or stereo but the out
put is always stereo (2 channels); you can't have panning effects without at least two audio channels!
... number of in
puts 1 number of out
puts 1 channel count mode "clamped-max" channel count 2 channel interpretation "speakers" constructor pannernode.pannernode creates a new pannernode object instance.
PaymentMethodChangeEvent.methodDetails - Web APIs
example this example uses the paymentmethodchange event to watch for changes to the payment method selected for apple pay, in order to com
pute a discount if the user chooses to use a visa card as their payment method.
... ev.updatewith(newstuff); }; const response = await request.show(); note that the methoddetails property is being used by the calculatediscount() function to com
pute any payment discount, then updatewith() is called to update the event with the com
puted update.
Payment Request API - Web APIs
accessibility: as the browser controls the in
put elements of the payment sheet, it can assure consistent keyboard and screen reader accessibility on every website without developers needing to do anything.
...the paymentrequest allows the web page to exchange information with the user agent while the user provides in
put to complete the transaction.
Pbkdf2Params - Web APIs
unlike the in
put key material passed into derivekey(), salt does not need to be kept secret.
...this determines how com
putationally expensive (that is, slow) the derivekey() operation will be.
PeriodicWave - Web APIs
the periodicwave interface defines a periodic waveform that can be used to shape the out
put of an oscillatornode.
... periodicwave has no in
puts or out
puts; it is used to define custom oscillators when calling oscillatornode.setperiodicwave().
PhotoCapabilities - Web APIs
example the following example, extracted from chrome's image capture / photo resolution sample, uses the results from getphotocapabilities() to modify the size of an in
put range.
... const in
put = document.queryselector('in
put[type="range"]'); var imagecapture; navigator.mediadevices.getusermedia({video: true}) .then(mediastream => { document.queryselector('video').srcobject = mediastream; const track = mediastream.getvideotracks()[0]; imagecapture = new imagecapture(track); return imagecapture.getphotocapabilities(); }) .then(photocapabilities => { const settings = imagecapture.track.getsettings(); in
put.min = photocapabilities.imagewidth.min; in
put.max = photocapabilities.imagewidth.max; in
put.step = photocapabilities.imagewidth.step; return imagecapture.getphotosettings(); }) .then(photosettings => { in
put.value = p...
PointerEvent.isPrimary - Web APIs
a pointer representing pen in
put is considered the primary pen in
put if its pointerdown event was dispatched when no other active pointers representing pen in
put existed.
... a pointer representing touch in
put is considered the primary touch in
put if its pointerdown event was dispatched when no other active pointers representing touch in
put existed.
PointerEvent.pressure - Web APIs
the pressure read-only property of the pointerevent interface indicates the normalized pressure of the pointer in
put.
... syntax var pressure = pointerevent.pressure; return value pressure the normalized pressure of the pointer in
put in the range of 0 to 1, inclusive, where 0 and 1 represent the minimum and maximum pressure the hardware is capable of detecting, respectively.
PointerEvent.tangentialPressure - Web APIs
the tangentialpressure read-only property of the pointerevent interface represents the normalized tangential pressure of the pointer in
put (also known as barrel pressure or cylinder stress).
... syntax var tanpressure = pointerevent.tangentialpressure; return value a float representing the normalized tangential pressure of the pointer in
put in the range -1 to 1, inclusive, where 0 is the neutral position of the control.
Pointer Lock API - Web APIs
the pointer lock api (formerly called mouse lock api) provides in
put methods based on the movement of the mouse over time (i.e., deltas), not just the absolute position of the mouse cursor in the viewport.
... more than that, the api is useful for any applications that require significant mouse in
put to control movements, rotate objects, and change entries, for example allowing users to control the viewing angle simply by moving the mouse around without any button clicking.
Pinch zoom gestures - Web APIs
hold with 2 pointers, then pinch in or out.<br/> the background color will change to pink if the pinch is opening (zoom in) or changes to lightblue if the pinch is closing (zoom out).</div> <!-- ui for logging/debugging --> <button id="log" onclick="enablelog(event);">start/stop event logging</button> <button id="clearlog" onclick="clearlog(event);">clear the log</button> <p></p> <out
put></out
put> </body> miscellaneous functions these functions support the application but aren't directly involved in the event flow.
...false : true; } function log(prefix, ev) { if (!logevents) return; var o = document.getelementsbytagname('out
put')[0]; var s = prefix + ": pointerid = " + ev.pointerid + " ; pointertype = " + ev.pointertype + " ; isprimary = " + ev.isprimary; o.innerhtml += s + " "; } function clearlog(event) { var o = document.getelementsbytagname('out
put')[0]; o.innerhtml = ""; } ...
Using Pointer Events - Web APIs
this example is based on the one in the touch events overview, except it uses the pointer events in
put event model.
... another difference is that because pointer events are pointer device agnostic, the application accepts coordinate-based in
puts from a mouse, a pen, or a fingertip using the same code.
ProgressEvent() - Web APIs
syntax progressevent = new progressevent(type, {lengthcom
putable: abooleanvalue, loaded: anumber, total: anumber}); arguments the progressevent() constructor also inherits arguments from event().
... lengthcom
putable optional is a boolean flag indicating if the total work to be done, and the amount of work already done, by the underlying process is calculable.
ProgressEvent.initProgressEvent() - Web APIs
do not use it anymore, use the standard constructor, progressevent(), to create a synthetic progressevent syntax progress.initprogressevent(typearg, canbubblearg, cancelablearg, lengthcom
putable, loaded, total); parameters typearg is a domstring identifying the specific type of animation event that occurred.
... lengthcom
putable is a boolean flag indicating if the total work to be done, and the amount of work already done, by the underlying process is calculable.
ProgressEvent - Web APIs
progressevent.lengthcom
putable read only is a boolean flag indicating if the total work to be done, and the amount of work already done, by the underlying process is calculable.
... var progressbar = document.getelementbyid("p"), client = new xmlhttprequest() client.open("get", "magical-unicorns") client.onprogress = function(pe) { if(pe.lengthcom
putable) { progressbar.max = pe.total progressbar.value = pe.loaded } } client.onloadend = function(pe) { progressbar.value = pe.loaded } client.send() specifications specification status comment xmlhttprequestthe definition of 'progressevent' in that specification.
PublicKeyCredentialCreationOptions - Web APIs
publickeycredentialcreationoptions.extensions optional an object with several client extensions' in
puts.
... { type: "public-key", // the id for john-doe@example.com id : new uint8array(26) /* another id */ } ] } }; // create the new credential with the options above navigator.credentials.create(createcredentialoptions) .then(function (newcredentialinfo) { var attestationresponse = newcredentialinfo.response; var clientextensionsout
puts = newcredentialinfo.getclientextensionsresults(); // send the response to the relying party server // it will verify the content and integrity before // creating a new credential }).catch(function (err) { // deal with any error properly console.error(err); });; specifications specification status comment web authentication: an api for acce...
RTCDataChannel: close event - Web APIs
dc.addeventlistener("close", ev => { messagein
putbox.disabled = true; sendbutton.disabled = true; connectbutton.disabled = false; disconnectbutton.disabled = true; }, false); all this code does in response to receiving the close event is to disable an in
put box and its "send" button, and to enable the button used to start a call (while disabling the one that ends a call).
... you can also use the onclose event handler property to set a handler for close events: dc.onclose = ev => { messagein
putbox.disabled = true; sendbutton.disabled = true; connectbutton.disabled = false; disconnectbutton.disabled = true; } specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'close' in that specification.
RTCDataChannel.onerror - Web APIs
when an error occurs on the data channel, the function receives as in
put an errorevent object describing the error which occurred.
...this function receives as its only in
put an errorevent object describing the event which was received.
RTCIceCandidatePairStats.availableIncomingBitrate - Web APIs
the value is reported in bits per second and is com
puted over a 1-second interval.
... note: the returned value is com
puted using a method similar—but not identical—to the transport independent application specific maximum (tias) described in rfc 3890: 6.2.
RTCIceCandidateStats.localCandidateId - Web APIs
the rtcicecandidatepairstats property localcandidateid is a string that uniquely identifies the local ice candidate which was analyzed to generate the rtcicecandidatestats used to com
pute the statistics for this pair of candidates.
... this candidate is the source of one of the two rtcicecandidatestats objects that were used to com
pute the contents of this rtcicecandidatepairstats object.
RTCInboundRtpStreamStats.averageRtcpInterval - Web APIs
this interval is com
puted following the formula outlined in rfc 1889: a.7.
... the sending endpoint com
putes this value when sending compound rtcp packets, which must contain at least an rtcp rr or sr packet and an sdes packet with the cname item.
RTCInboundRtpStreamStats.qpSum - Web APIs
you can, for example, use the value of rtcreceivedrtpstreamstats.framesdecoded if receiving the media or rtcsentrtpstreamstats.framesencoded if sending it to get the number of frames handled so far, and com
pute an average from there.
... example calculating average quantization the calculateaverageqp() function shown below com
putes the average qp for the given rtcstats object that contains rtp stream statistics, returning 0 if the object doesn't describe an rtp stream.
RTCOutboundRtpStreamStats.averageRtcpInterval - Web APIs
this interval is com
puted following the formula outlined in rfc 1889: a.7.
... the sending endpoint com
putes this value when sending compound rtcp packets, which must contain at least an rtcp rr or sr packet and an sdes packet with the cname item.
RTCOutboundRtpStreamStats.qpSum - Web APIs
you can use the value of rtcsentrtpstreamstats.framesencoded to get the number of frames that have been encoded so far, and com
pute an average from there.
... example calculating average quantization the calculateaverageqp() function shown below com
putes the average qp for the given rtcstats object that contains rtp stream statistics, returning 0 if the object doesn't describe an rtp stream.
RTCPeerConnection.addTrack() - Web APIs
for example, consider this function that an application might use to begin streaming a device's camera and microphone in
put over an rtcpeerconnection to a remote peer: async opencall(pc) { const gumstream = await navigator.mediadevices.getusermedia( {video: true, audio: true}); for (const track of gumstream.gettracks()) { pc.addtrack(track, gumstream); } } the remote peer might then use a track event handler that looks like this: pc.ontrack = ({streams: [stream]} => videoelem.src...
...this track's kind is set to match the kind of the track provided as an in
put parameter.
RTCPeerConnection.onsignalingstatechange - Web APIs
the function receives as in
put the event object of type event; this event is sent when the peer connection's signalingstate changes, which may happen either because of a call to setlocaldescription() or to setremotedescription().
... syntax rtcpeerconnection.onsignalingstatechange = errorhandler; value set this to a function which you provide that receives an event object as in
put; this contains the signalingstatechange event.
RTCPeerConnection.ontrack - Web APIs
the function receives as in
put the event object, of type rtctrackevent; this event is sent when a new incoming mediastreamtrack has been created and associated with an rtcrtpreceiver object which has been added to the set of receivers on connection.
... syntax rtcpeerconnection.ontrack = eventhandler; value set ontrack to be a function you provide that accepts as in
put a rtctrackevent object describing the new track and how it's being used.
RTCPeerConnection.setLocalDescription() - Web APIs
the promise's fulfillment handler receives no in
put parameters.
... successcallback a javascript function which accepts no in
put parameters to be be called once the description has been successfully set.
RTCPeerConnection.setRemoteDescription() - Web APIs
the promise fulfillment handler receives no in
put parameters.
... pc.setremotedescription(sessiondescription, successcallback, errorcallback); parameters successcallback a javascript function which accepts no in
put parameters to be be called once the description has been successfully set.
RTCRtpStreamStats.qpSum - Web APIs
you can, for example, use the value of rtcreceivedrtpstreamstats.framesdecoded if receiving the media or rtcsentrtpstreamstats.framesencoded if sending it to get the number of frames handled so far, and com
pute an average from there.
... example calculating average quantization the calculateaverageqp() function shown below com
putes the average qp for the given rtcrtpstreamstats object, returning 0 if the object doesn't describe an rtp stream.
RTCSessionDescription() - Web APIs
this constructor has been deprecated because rtcpeerconnection.setlocaldescription() and other methods which take sdp as in
put now directly accept an object conforming to the rtcsessiondescriptioninit dictionary, so you don't have to instantiate an rtcsessiondescription yourself.
... this is no longer necessary, however; rtcpeerconnection.setlocaldescription() and other methods which take sdp as in
put now directly accept an object conforming to the rtcsessiondescriptioninit dictionary, so you don't have to instantiate an rtcsessiondescription yourself.
RTCStatsReport - Web APIs
local-candidate an rtcicecandidatestats object giving statistics about an ice local candidate; these candidates are found in the out
put from rtcicetransport.getlocalcandidates().
...this information considers only the outbound rtp stream, so any data which requires information about the state of the remote peers (such as round-trip time) is unavailable, since those values can't be com
puted without knowing about the other peers' states.
RTCStatsType - Web APIs
local-candidate an rtcicecandidatestats object giving statistics about an ice local candidate; these candidates are found in the out
put from rtcicetransport.getlocalcandidates().
...this information considers only the outbound rtp stream, so any data which requires information about the state of the remote peers (such as round-trip time) is unavailable, since those values can't be com
puted without knowing about the other peers' states.
RadioNodeList.value - Web APIs
on setting the value property, the first radio button in
put element whose value property is equal to the new value will be set to checked.
... syntax value = radionodelist.value; radionodelist.value = string; example html <form> <label><in
put type="radio" name="color" value="blue">blue</label> <label><in
put type="radio" name="color" value="red">red</label> </form> javascript // get the form const form = document.forms[0]; // get the form's radio buttons const radios = form.elements['color']; // choose the "red" option radios.value = 'red'; result specifications specification status comments html living standardthe definition of 'radionodelist.value' in that specification.
RsaPssParams - Web APIs
rfc 3447 says that "typical salt lengths" are either 0 or the length of the out
put of the digest algorithm that was selected when this key was generated.
... the maximum size of saltlength is given by: math.ceil((keysizeinbits - 1)/8) - digestsizeinbytes - 2 so for a key length of 2048 bits and a digest out
put size of 32 bytes, the maximum size would be 222.
SVGFEDropShadowElement - Web APIs
svgfedropshadowelement.stddeviationx read only an svganimatednumber corresponding to the (possibly automatically com
puted) x component of the stddeviationx attribute of the given element.
... svgfedropshadowelement.stddeviationy read only an svganimatednumber corresponding to the (possibly automatically com
puted) y component of the stddeviationy attribute of the given element.
SVGFEGaussianBlurElement - Web APIs
svgfegaussianblurelement.stddeviationx read only an svganimatednumber corresponding to the (possibly automatically com
puted) x component of the stddeviation attribute of the given element.
... svgfegaussianblurelement.stddeviationy read only an svganimatednumber corresponding to the (possibly automatically com
puted) y component of the stddeviation attribute of the given element.
SVGGraphicsElement - Web APIs
svggraphicselement.transform read only an svganimatedtransformlist reflecting the com
puted value of the transform property and its corresponding transform attribute of the given element.
... svggraphicselement.getbbox() returns a domrect representing the com
puted bounding box of the current element.
Screen Wake Lock API - Web APIs
there are plenty of use cases for keeping a screen on, including reading an ebook, map navigation, following a recipe, presenting to an audience, scanning a qr/barcode or applications that use voice or gesture control, rather than tactile in
put (the default way to keep a screen awake).
... document.addeventlistener('visibilitychange', () => { if (wakelock !== null && document.visibilitystate === 'visible') { wakelock = await navigator.wakelock.request('screen'); } });
putting it all together you can find the complete code on github here.
SpeechRecognitionError.error - Web APIs
aborted speech in
put was aborted in some manner, perhaps by some user-agent-specific behavior like a button the user can press to cancel speech in
put.
... not-allowed the user agent disallowed any speech in
put from occurring for reasons of security, privacy or user preference.
SpeechRecognitionErrorEvent.error - Web APIs
aborted speech in
put was aborted in some manner, perhaps by some user-agent-specific behavior like a button the user can press to cancel speech in
put.
... not-allowed the user agent disallowed any speech in
put from occurring for reasons of security, privacy or user preference.
SpeechSynthesisErrorEvent - Web APIs
examples var synth = window.speechsynthesis; var in
putform = document.queryselector('form'); var in
puttxt = document.queryselector('in
put'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
... in
putform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(in
puttxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onerror = function(event) { console.log('an error has occurred with the speech synthesis: ' + event.error); } in
puttxt.blur(); } specifications specification status comment web speech apithe definition of 'speechsynthesiserrorevent' in that specification.
SpeechSynthesisUtterance.SpeechSynthesisUtterance() - Web APIs
var synth = window.speechsynthesis; var in
putform = document.queryselector('form'); var in
puttxt = document.queryselector('in
put'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
... in
putform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(in
puttxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); in
puttxt.blur(); } specifications specification status comment web speech apithe definition of 'speechsynthesisutterance()' in that specification.
SpeechSynthesisUtterance.lang - Web APIs
examples var synth = window.speechsynthesis; var in
putform = document.queryselector('form'); var in
puttxt = document.queryselector('in
put'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
... in
putform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(in
puttxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.lang = 'en-us'; synth.speak(utterthis); in
puttxt.blur(); } specifications specification status comment web speech apithe definition of 'lang' in that specification.
SpeechSynthesisUtterance.onboundary - Web APIs
}; examples var synth = window.speechsynthesis; var in
putform = document.queryselector('form'); var in
puttxt = document.queryselector('in
put'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
... in
putform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(in
puttxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onboundary = function(event) { console.log(event.name + ' boundary reached after ' + event.elapsedtime + ' milliseconds.'); } in
puttxt.blur(); } specifications specification status comment web speech apithe definition of 'onboundary' in that specification.
SpeechSynthesisUtterance.onend - Web APIs
}; examples var synth = window.speechsynthesis; var in
putform = document.queryselector('form'); var in
puttxt = document.queryselector('in
put'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
... in
putform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(in
puttxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onend = function(event) { console.log('utterance has finished being spoken after ' + event.elapsedtime + ' milliseconds.'); } in
puttxt.blur(); } specifications specification status comment web speech apithe definition of 'onend' in that specification.
SpeechSynthesisUtterance.onerror - Web APIs
}; examples var synth = window.speechsynthesis; var in
putform = document.queryselector('form'); var in
puttxt = document.queryselector('in
put'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
... in
putform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(in
puttxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onerror = function(event) { console.log('an error has occurred with the speech synthesis: ' + event.error); } in
puttxt.blur(); } specifications specification status comment web speech apithe definition of 'onerror' in that specification.
SpeechSynthesisUtterance.onmark - Web APIs
}; examples var synth = window.speechsynthesis; var in
putform = document.queryselector('form'); var in
puttxt = document.queryselector('in
put'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
... in
putform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(in
puttxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onmark = function(event) { console.log('a mark was reached: ' + event.name); } in
puttxt.blur(); } specifications specification status comment web speech apithe definition of 'onmark' in that specification.
SpeechSynthesisUtterance.onpause - Web APIs
}; examples var synth = window.speechsynthesis; var in
putform = document.queryselector('form'); var in
puttxt = document.queryselector('in
put'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
... in
putform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(in
puttxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onpause = function(event) { console.log('speech paused after ' + event.elapsedtime + ' milliseconds.'); } in
puttxt.blur(); } specifications specification status comment web speech apithe definition of 'onpause' in that specification.
SpeechSynthesisUtterance.onresume - Web APIs
}; examples var synth = window.speechsynthesis; var in
putform = document.queryselector('form'); var in
puttxt = document.queryselector('in
put'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
... in
putform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(in
puttxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onresume = function(event) { console.log('speech resumed after ' + event.elapsedtime + ' milliseconds.'); } in
puttxt.blur(); } specifications specification status comment web speech apithe definition of 'onresume' in that specification.
SpeechSynthesisUtterance.onstart - Web APIs
}; examples var synth = window.speechsynthesis; var in
putform = document.queryselector('form'); var in
puttxt = document.queryselector('in
put'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
... in
putform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(in
puttxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onstart = function(event) { console.log('we have started uttering this speech: ' + event.utterance.text); } in
puttxt.blur(); } specifications specification status comment web speech apithe definition of 'onstart' in that specification.
SpeechSynthesisUtterance.pitch - Web APIs
examples var synth = window.speechsynthesis; var in
putform = document.queryselector('form'); var in
puttxt = document.queryselector('in
put'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
... in
putform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(in
puttxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.pitch = 1.5; synth.speak(utterthis); in
puttxt.blur(); } specifications specification status comment web speech apithe definition of 'pitch' in that specification.
SpeechSynthesisUtterance.rate - Web APIs
examples var synth = window.speechsynthesis; var in
putform = document.queryselector('form'); var in
puttxt = document.queryselector('in
put'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
... in
putform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(in
puttxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.rate = 1.5; synth.speak(utterthis); in
puttxt.blur(); } specifications specification status comment web speech apithe definition of 'rate' in that specification.
SpeechSynthesisUtterance.text - Web APIs
examples var synth = window.speechsynthesis; var in
putform = document.queryselector('form'); var in
puttxt = document.queryselector('in
put'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
... in
putform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(in
puttxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } console.log(utterthis.text); synth.speak(utterthis); in
puttxt.blur(); } specifications specification status comment web speech apithe definition of 'text' in that specification.
SpeechSynthesisUtterance.voice - Web APIs
examples var synth = window.speechsynthesis; var in
putform = document.queryselector('form'); var in
puttxt = document.queryselector('in
put'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
... in
putform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(in
puttxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); in
puttxt.blur(); } specifications specification status comment web speech apithe definition of 'voice' in that specification.
SpeechSynthesisUtterance.volume - Web APIs
examples var synth = window.speechsynthesis; var in
putform = document.queryselector('form'); var in
puttxt = document.queryselector('in
put'); var voiceselect = document.queryselector('select'); var voices = synth.getvoices(); ...
... in
putform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(in
puttxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.volume = 0.5; synth.speak(utterthis); in
puttxt.blur(); } specifications specification status comment web speech apithe definition of 'volume' in that specification.
SpeechSynthesisUtterance - Web APIs
inside the in
putform.onsubmit handler, we stop the form submitting with preventdefault(), use the constructor to create a new utterance instance containing the text from the text <in
put>, set the utterance's voice to the voice selected in the <select> element, and start the utterance speaking via the speechsynthesis.speak() method.
... var synth = window.speechsynthesis; var voices = synth.getvoices(); var in
putform = document.queryselector('form'); var in
puttxt = document.queryselector('in
put'); var voiceselect = document.queryselector('select'); for(var i = 0; i < voices.length; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; option.value = i; voiceselect.appendchild(option); } in
putform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(in
puttxt.value); utterthis.voice = voices[voiceselect.value]; synth.speak(utterthis); in
puttxt.blur(); } specifications specification status comment web speech apithe definition of 'speechsynthesisutterance' in that speci...
SpeechSynthesisVoice - Web APIs
ame + ' (' + voices[i].lang + ')'; if(voices[i].default) { option.textcontent += ' -- default'; } option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.appendchild(option); } } populatevoicelist(); if (speechsynthesis.onvoiceschanged !== undefined) { speechsynthesis.onvoiceschanged = populatevoicelist; } in
putform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(in
puttxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.pitch = pitch.value; utterthis.rate = rate.value; ...
... synth.speak(utterthis); utterthis.onpause = function(event) { var char = event.utterance.text.charat(event.charindex); console.log('speech paused at character ' + event.charindex + ' of "' + event.utterance.text + '", which is "' + char + '".'); } in
puttxt.blur(); } specifications specification status comment web speech apithe definition of 'speechsynthesisvoice' in that specification.
Using writable streams - Web APIs
abort(reason) — a method that will be called if the app signals that it wishes to abruptly close the stream and
put it in an errored state.
... we also create a new textencoder instance using the relevant constructor to encode the message into chunks to be
put into the stream.
StylePropertyMapReadOnly.get() - Web APIs
let's start by creating a link inside a paragraph in our html, and adding a definition list which we will populate with javascript: <p> <a href="https://example.com">link</a> </p> <dl id="regurgitation"></dl> we add a bit of css, including a custom property and an inhertable property: p { font-weight: bold; } a { --colour: red; color: var(--colour); } we use the element's com
putedstylemap() to return a stylepropertymapreadonly object.
... // get the element const myelement = document.queryselector('a'); // get the <dl> we'll be populating const styleslist = document.queryselector('#regurgitation'); // retrieve all com
puted styles with com
putedstylemap() const stylemap = myelement.com
putedstylemap(); // array of properties we're interested in const ofinterest = ['font-weight', 'border-left-color', 'color', '--colour']; // iterate thru our properties of interest for ( let i = 0; i < ofinterest.length; i++ ) { // properties const cssproperty = document.createelement('dt'); cssproperty.appendchild(document.createtextnode(ofinterest[i])); styleslist.appendchild(cssproperty); // values const ...
SubtleCrypto.deriveBits() - Web APIs
basekey is a cryptokey representing the in
put to the derivation algorithm.
... let salt; /* get some key material to use as in
put to the derivebits method.
UIEvent() - Web APIs
sourcecapabilities: an instance of the in
putdevicecapabilities interface which provides information about the physical device responsible for generating a touch event.
... specifications specification status comment in
putdevicecapabilities draft added sourcecapabilities property.
URL API - Web APIs
also covered are definitions of various terms related to addressing of com
puters on a network, and the algorithms for parsing ip addresses and dom addresses are specified.
...the filltablewithparameters() function below takes as in
put a htmltableelement object representing a <table>.
ValidityState.rangeOverflow - Web APIs
the read-only rangeoverflow property of a validitystate object indicates if the value of an <in
put>, after having been edited by the user, does not conform to the constraints set by the element's max attribute.
... given the following: <in
put type="number" min="20" max="40" step="2"/> if value > 40, rangeoverflow will be true.
ValidityState.rangeUnderflow - Web APIs
the read-only rangeunderflow property of a validitystate object indicates if the value of an <in
put>, after having been edited by the user, does not conform to the constraints set by the element's min attribute.
... given the following: <in
put type="number" min="20" max="40" step="2"/> if value < 20, rangeunderflow will be true.
ValidityState.stepMismatch - Web APIs
the read-only stepmismatch property of a validitystate object indicates if the value of an <in
put>, after having been edited by the user, does not conform to the constraints set by the element's step attribute.
... given the following: <in
put type="number" min="20" max="40" step="2"/> if (value - min) / 2 != 0, stepmismatch will be true.
WaveShaperNode - Web APIs
a waveshapernode always has exactly one in
put and one out
put.
... number of in
puts 1 number of out
puts 1 channel count mode "max" channel count 2 (not used in the default count mode) channel interpretation "speakers" constructor waveshapernode() creates a new instance of an waveshapernode object.
WebGLRenderingContext.disable() - Web APIs
possible values: constant description gl.blend deactivates blending of the com
puted fragment color values.
... gl.sample_alpha_to_coverage deactivates the com
putation of a temporary coverage value determined by the alpha value.
WebGLRenderingContext.enable() - Web APIs
possible values: constant description gl.blend activates blending of the com
puted fragment color values.
... gl.sample_alpha_to_coverage activates the com
putation of a temporary coverage value determined by the alpha value.
WebGLRenderingContext.getParameter() - Web APIs
t gl.max_combined_fragment_uniform_components glint64 gl.max_combined_uniform_blocks glint gl.max_combined_vertex_uniform_components glint64 gl.max_draw_buffers glint gl.max_element_index glint64 gl.max_elements_indices glint gl.max_elements_vertices glint gl.max_fragment_in
put_components glint gl.max_fragment_uniform_blocks glint gl.max_fragment_uniform_components glint gl.max_program_texel_offset glint gl.max_samples glint gl.max_server_wait_timeout glint64 gl.max_texture_lod_bias glfloat gl.max_transform_feedback_interleaved_components glint ...
... gl.max_transform_feedback_separate_attribs glint gl.max_transform_feedback_separate_components glint gl.max_uniform_block_size glint64 gl.max_uniform_buffer_bindings glint gl.max_varying_components glint gl.max_vertex_out
put_components glint gl.max_vertex_uniform_blocks glint gl.max_vertex_uniform_components glint gl.min_program_texel_offset glint gl.pack_row_length glint see pixelstorei.
WebGLRenderingContext.isEnabled() - Web APIs
possible values: constant description gl.blend blending of the com
puted fragment color values.
... gl.sample_alpha_to_coverage com
putation of a temporary coverage value determined by the alpha value.
Hello vertex attributes - Web APIs
« previousnext » this webgl example demonstrates how to combine shader programming and user interaction by sending user in
put to the shader using vertex attributes.
... hello world program in glsl how to send in
put to a shader program by saving data in gpu memory.
Using textures in WebGL - Web APIs
// until then
put a single pixel in the texture so we can // use it immediately.
... the fragment shader the fragment shader likewise needs to be updated: const fssource = ` varying highp vec2 vtexturecoord; uniform sampler2d usampler; void main(void) { gl_fragcolor = texture2d(usampler, vtexturecoord); } `; instead of assigning a color value to the fragment's color, the fragment's color is com
puted by fetching the texel (that is, the pixel within the texture) based on the value of vtexturecoord which like the colors is interpolated bewteen vertices.
Introduction to the Real-time Transport Protocol (RTP) - Web APIs
it accepts as in
put a mediastream containing the audio to play while the call is on hold.
... remote peer on the remote peer, when we receive an sdp offer with the directionality set to "sendonly", we handle it using the holdrequested() method, which accepts as in
put an sdp offer string.
WebRTC API - Web APIs
interfaces rtcpeerconnection represents a webrtc connection between the local com
puter and a remote peer.
... taking still photos with webrtc this article shows how to use webrtc to access the camera on a com
puter or mobile phone with webrtc support and take a photo with it.
WebRTC Statistics API - Web APIs
try { mypeerconnection = new rtcpeerconnection(pcoptions); statsinterval = window.setinterval(getconnectionstats, 1000); /* add event handlers, etc */ } catch(err) { console.error("error creating rtcpeerconnection: " + err); } function getconnectionstats() { mypeerconnection.getstats(null).then(stats => { var statsout
put = ""; stats.foreach(report => { if (report.type === "inbound-rtp" && report.kind === "video") { object.keys(report).foreach(statname => { statsout
put += `<strong>${statname}:</strong> ${report[statname]}<br>\n`; }); } }); document.queryselector(".stats-box").innerhtml = statsout
put; }); } when the promise returned by getstats() is fulfilled, ...
...the resolution handler receives as in
put an rtcstatsreport object containing the statistics information.
Writing WebSocket client applications - Web APIs
the browser may also out
put to its console a more descriptive error message as well as a closing code as defined in rfc 6455, section 7.4 through the closeevent.
... examplesocket.send(json.stringify(msg)); // blank the text in
put element, ready to receive the next line of text from the user.
WebXR application life cycle - Web APIs
this will involve managing in
puts, animations, and rendering.
... if your scene is complex, you should consider creating a worker—or using one that you've previously created for this purpose—to perform the com
putations needed for each frame to be rendered.
Web Animations API Concepts - Web APIs
to learn how to
put the api to use, check out its sister article, using the web animations api.
...this means we can use it to create and manipulate css-like animations that go from one pre-defined state to another, or we can use variables, loops, and callbacks to create interactive animations that adapt and react to changing in
puts.
Attestation and Assertion - Web APIs
this attestation format is commonly found in desktop com
puters and is used by windows hello as its preferred attestation format.
...older authenticators (u2f) do not support this out
put.
Web Speech API - Web APIs
there are two components to this api: speech recognition is accessed via the speechrecognition interface, which provides the ability to recognize voice context from an audio in
put (normally via the device's default speech recognition service) and respond appropriately.
... generally you'll use the interface's constructor to create a new speechrecognition object, which has a number of event handlers available for detecting when speech is in
put through the device's microphone.
Window.getSelection() - Web APIs
it is worth noting that currently getselection() doesn't work on the content of <textarea> and <in
put> elements in firefox, edge (legacy) and internet explorer.
... htmlin
putelement.setselectionrange() or the selectionstart and selectionend properties could be used to work around this.
Window.matchMedia() - Web APIs
examples this example runs the media query (max-width: 600px) and displays the value of the resulting mediaquerylist's matches property in a <span>; as a result, the out
put will say "true" if the viewport is less than or equal to 600 pixels wide, and will say "false" if the window is wider than that.
... html <span class="mq-value"></span> a simple <span> to receive the out
put.
Window: pageshow event - Web APIs
"persisted" : "not persisted"; console.log('event:', event.type, '-', ispersisted); break; default: console.log('event:', event.type); break; } }; events.foreach(eventname => window.addeventlistener(eventname, eventlogger) ); html <p>open the console and watch the out
put as you navigate to and from this page.
... try loading new pages into this tab, then navigating forward and backward through history, noting the events’ out
put to the log.</p> results specifications specification status comment html living standardthe definition of 'pageshow' in that specification.
Window: popstate event - Web APIs
if the goal is to catch the moment when the new document state is already fully in place, a zero-delay settimeout() method call should be used to effectively
put its inner callback function that does the processing at the end of the browser event loop: window.onpopstate = () => settimeout(dosomething, 0); when popstate is sent when the transition occurs, either due to the user triggering the browser's "back" button or otherwise, the popstate event is near the end of the process to transition to the new location.
...the entry is now said to have "persisted user state." this information the browser might add to the history session entry may include, for instance, the document's scroll position, the values of form in
puts, and other such data.
Window: unhandledrejection event - Web APIs
bubbles no cancelable yes interface promiserejectionevent event handler property onunhandledrejection usage notes allowing the unhandledrejection event to bubble will eventually result in an error message being out
put to the console.
... // prevent the default handling (such as out
putting the // error to the console) event.preventdefault(); }); specifications specification status comment html living standardthe definition of 'unhandledrejection' in that specification.
Worker.prototype.postMessage() - Web APIs
when either of two form in
puts (first and second) have their values changed, change events invoke postmessage() to send the value of both in
puts to the current worker.
...f) break; default: throw 'no atopic on incoming message to chromeworker'; } } function sendworkerarrbuff(abuf) { console.info('from worker, pre send back abuf.bytelength:', abuf.bytelength); self.postmessage({atopic:'do_sendmainarrbuff', abuf:abuf}, [abuf]); console.info('from worker, post send back abuf.bytelength:', abuf.bytelength); } out
put logged arrbuf.bytelength pre transfer: 8 bootstrap.js:40 arrbuf.bytelength post transfer: 0 bootstrap.js:42 from worker, pre send back abuf.bytelength: 8 myworker.js:5:2 incoming message from worker, msg: message { ...
WorkerGlobalScope.dump() - Web APIs
example to write an out
put from your worker to your com
puter's terminal, you first have to run an instance of firefox started from your command line/terminal.
... next, run a worker containing the following line: dump('test\n'); this should result in a "test" message being out
put to the terminal.
How to check the security state of an XMLHTTPRequest over SSL - Web APIs
cc["@mozilla.org/xmlextras/xmlhttprequest;1"].createinstance(); req.open('get', url, true); req.addeventlistener("error", function(e) { var error = createtcperrorfromfailedxhr(req); dumpsecurityinfo(req, error); }, false); req.onload = function(e) { dumpsecurityinfo(req); }; req.send(); } then test("https://addons.mozilla.org"); produced the following out
put in my console: connection status: succeeded security info: security state: secure common name (cn) = addons.mozilla.org organisation = mozilla corporation issuer = verisign, inc.
... sha1 fingerprint = f4:99:64:18:6b:7d:c8:fa:c0:0c:2e:a9:61:77:28:67:13:c4:97:7b valid from 7/14/2011 0:00:00 am valid until 8/20/2013 23:59:59 pm and here is the out
put of making an https request to a server that uses an expired certificate: test("https://www.appliancetherapy.com/"); note that the security state has become "insecure" now and there is an error name reported: connection status: failed: securityexpiredcertificateerror security info: security state: insecure common name (cn) = www.appliancetherapy.com organisation = appliance therapy group (selane products, inc) issuer = verisign, inc.
XMLSerializer - Web APIs
var inp = document.createelement('in
put'); var xmls = new xmlserializer(); var inp_xmls = xmls.serializetostring(inp); // first convert dom node into a string // insert the newly created node into the document's body document.body.insertadjacenthtml('afterbegin', inp_xmls); the code creates a new <in
put> element by calling document.createelement(), then serializes it into xml using serializetostring().
... once that's done, insertadjacenthtml() is used to insert the <in
put> element into the dom.
XRPermissionDescriptor.mode - Web APIs
syntax xrpermissiondescriptor = { mode: xrsessionmode, requiredfeatures: reqfeaturelist, optionalfeatures: optfeaturelist }; xrpermissiondescriptor.mode = xrsessionmode; xrmode = xrpermissiondescriptor.mode; value a domstring whose value is one of the strings found in the xrsessionmode enumerated type: immersive-ar the session's out
put will be given exclusive access to the immersive device, but the rendered content will be blended with the real-world environment.
... inline the out
put is presented inline within the context of an element in a standard html document, rather than occupying the full visual space.
XRPose.transform - Web APIs
it determines the targeted object by passing the event frame's pose into a function called findtargetusingray(), then dispatches the event differently depending on the user's handedness; this is done by comparing the value of the xrin
putsource property handedness to a value in the variable user.handedness.
... xrsession.addeventlistener("select", event => { let source = event.in
putsource; let frame = event.frame; let targetraypose = frame.getpose(source.targetrayspace, myrefspace); let targetobject = findtargetusingray(targetray.transform.matrix); if (source.targetraymode == "tracked-pointer") { if (source.handedness == user.handedness) { targetobject.primaryaction(); } else { targetobject.offhandaction(); } } }); specifications specification status comment webxr device apithe definition of 'xrpose.transform' in that specification.
XRPose - Web APIs
ode to provide the desired viewing position and angle: viewerpose = xrframe.getviewerpose(adjreferencespace); here, adjreferencespace is a reference space which has been updated using the base frame of reference for the frame and any adjustments needed to position the viewer based on movement or rotation which is being supplied from a source other than the xr device, such as keyboard or mouse in
puts.
...if any component of the transform is com
puted or created artificially (such as by using mouse or keyboard controls to move through space), this value is instead true, indicating that the transform is in part emulated in software.
XRRenderStateInit - Web APIs
inlineverticalfieldofview optional a floating-point value indicating the default field of view, in radians, to be used when com
puting the projection matrix for an inline xrsession.
... the projection matrix calculation also takes into account the out
put canvas's aspect ratio.
XRRigidTransform.matrix - Web APIs
thus, for an array [a0, a1, a2, ..., a13, a14, a15], the matrix looks like this: [a[0]a[4]a[8]a[12]a[1]a[5]a[9]a[13]a[2]a[6]a[10]a[14]a[3]a[7]a[11]a[15]]\begin{bmatrix} a[0] & a[4] & a[8] & a[12]\\ a[1] & a[5] & a[9] & a[13]\\ a[2] & a[6] & a[10] & a[14]\\ a[3] & a[7] & a[11] & a[15]\\ \end{bmatrix} the first time matrix is requested, it gets com
puted; after that, it's should be cached to avoid slowing down to com
pute it every time you need it.
... [100px010py001pz0001]\begin{bmatrix} 1 & 0 & 0 & x\\ 0 & 1 & 0 & y\\ 0 & 0 & 1 & z\\ 0 & 0 & 0 & 1 \end{bmatrix} then a rotation matrix is created by com
puting a column-vector rotation matrix from the unit quaternion specified by orientation: [1-2(qy2+qz2)2(qxqy-qzqw)2(qxqz+qyqw)02(qxqy+qzqw)1-2(qx2+qz2)2(qyqz-qxqw)02(qxqz-qyqw)2(qyqz+qxqw)1-2(qx2+qy2)00001]\begin{bmatrix} 1 - 2(q_y^2 + q_z^2) & 2(q_xq_y - q_zq_w) & 2(q_xq_z + q_yq_w) & p_x\\ 2(q_xq_y + q_zq_w) & 1 - 2(q_x^2 + q_z^2) & 2(q_yq_z - q_xq_w) & p_y\\ 2(q_xq_z - q_yq_w) & 2(q_yq_z + q_xq_...
XRRigidTransform - Web APIs
the advantage to using xrrigidtransform in these places rather than bare arrays that providing the matrix data is that the xrrigidtransform automatically does things like com
puting the inverse of the transform.
... even better, once it's been com
puted, it's cached so that subsequent requests are significantly faster.
XRSession.onsqueezeend - Web APIs
to learn more about how the sequence of squeeze events works, see primary squeeze actions in in
puts and in
put sources.
... xrsession.onsqueezeend = event => { if (event.in
putsource.handedness == user.handedness) { let targetraypose = event.frame.getpose(event.in
putsource.targetrayspace, myrefspace; if (user.heldobject) { cancelobjectdrag(user.heldobject); } } }; this code presumes that if the user actually intentionally completed the drag, user.heldobject will be null here.
XRSession.updateRenderState() - Web APIs
inlineverticalfieldofview optional a floating-point value indicating the default field of view, in radians, to be used when com
puting the projection matrix for an inline xrsession.
... the projection matrix calculation also takes into account the out
put canvas's aspect ratio.
XRSessionMode - Web APIs
values immersive-ar the session's out
put will be given exclusive access to the immersive device, but the rendered content will be blended with the real-world environment.
... inline the out
put is presented inline within the context of an element in a standard html document, rather than occupying the full visual space.
XRSystem: requestSession() - Web APIs
the supported modes are: immersive-ar the session's out
put will be given exclusive access to the immersive device, but the rendered content will be blended with the real-world environment.
... inline the out
put is presented inline within the context of an element in a standard html document, rather than occupying the full visual space.
XRView.transform - Web APIs
each object's model view matrix is com
puted by multiplying its own matrix which describes the object's own position and orientation by the additional position and orientation adjustments needed to match the camera's movement.
... we then com
pute the normals for the model view matrix by inverting it, then transposing it.
XRViewerPose.views - Web APIs
this array's length may potentially vary over the lifetime of the xrsession (for example, if the viewer enables or disables stereo mode on their xr out
put device).
...0, 0, 1); gl.cleardepth(1); gl.clear(gl.color_buffer_bit, gl.depth_buffer_bit); for (let view of pose.views) { let viewport = gllayer.getviewport(view); gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height); /* render the scene for the eye view.eye */ } } passing each view to getviewport() returns the webgl viewport to apply in order to cause the rendered out
put to be positioned correctly in the framebuffer for renderijng to the corresponding eye on the out
put device.
XRWebGLLayer.getNativeFramebufferScaleFactor() static method - Web APIs
if the scaling factor is greater than zero, then the frame buffer is smaller than the diplay's native dimensions, resulting in the out
put being up-scaled for display to the screen after rendering into the frame buffer.
...this ensures that the scene we render will not only match the viewpoint we need to express (which is defined by the position and orientation data in the pose), but that the rendered out
put will be constrained within the correct portion of the frame buffer for the eye we're drawing, regardless of any scaling that is being performed.
XRWebGLLayer.ignoreDepthValues - Web APIs
syntax let ignoringdepthbuffer = xrwebgllayer.ignoredepthvalues; value a boolean value which is true if the webgl context's depth buffer is being used while com
puting the locations of points in the 3d world.
... usage notes when the ignoredepthvalues property is false, the xr compositor uses the values found in the depth buffer, which should be accurate for the scene, in order to potentially improve the quality or the out
put as well as the comfort level for the viewer.
XRWebGLLayerInit.ignoreDepthValues - Web APIs
the depth buffer is typically used to assist in ordering vertices and, by extension, polygons while compositing, to ensure that the scene is correctly composited, with objects the correct distance away and with clipping and other distance-related com
putations performed as accurately as possible.
... without the depth buffer, these com
putations must rely entirely on the coordinates of each pixel.
XSLTProcessor - Web APIs
an xsltprocessor applies an xslt stylesheet transformation to an xml document to produce a new xml document as out
put.
... the resultant object depends on the out
put method of the stylesheet: out
put method result type html htmldocument xml xmldocument text xmldocument with a single root element <transformiix:result> with the text as a child [throws] void xsltprocessor.setparameter(string namespaceuri, string localname, any value) sets a parameter in the xslt stylesheet that w...
Using the aria-required attribute - Accessibility
description the aria-required attribute is used to indicate that user in
put is required on an element before a form can be submitted.
... examples example 1: a simple form <form action="post"> <label for="firstname">first name:</label> <in
put id="firstname" type="text" aria-required="true" /> <br/> <label for="lastname">last name:</label> <in
put id="lastname" type="text" aria-required="true" /> <br/> <label for="streetaddress">street address:</label> <in
put id="streetaddress" type="text" /> </form> working examples: tooltip example (includes the use of the aria-required attribute) notes used in ari...
ARIA - Accessibility
it is also important to acknowledge that some people who rely on assistive technology are reluctant to upgrade their software, for fear of losing the ability to interact with their com
puter and browser.
... aria for scripted widgets writing keyboard-navigable javascript widgets built-in elements like <in
put>, <button> etc have built-in keyboard accessibility.
Accessibility: What users can do to browse more safely - Accessibility
personalization and accessibility settings from the article, "understanding success criterion 2.3.1: three flashes or below threshold" "flashing can be caused by the display, the com
puter rendering the image or by the content being rendered.
...they can be addressed by the design and speed of the display and com
puter" hardware and operating systems on many com
puters offer control that is not afforded to developers.
Perceivable - Accessibility
understanding orientation 1.3.5 identify in
put purpose (aa) added in 2.1 follow the list of 53 in
put fields to programmatically identify the purpose of a field.
... understanding identify in
put purpose 1.3.6 identify purpose (aaa) added in 2.1 in content implemented using markup languages, the purpose of user interface components, icons, and regions can be programmatically determined.
-moz-image-rect - CSS: Cascading Style Sheets
function rotate() { var prevstyle = window.getcom
putedstyle(document.getelementbyid("box4"), null).getpropertyvalue("background-image"); // now that we've saved the last one, start rotating for (var i=1; i<=4; i++) { var curid = "box" + i; // shift the background images var curstyle = window.getcom
putedstyle(document.getelementbyid(curid), null).getpropertyvalue("background-image"); document.getelementbyid(curid).style.backg...
...roundimage = prevstyle; prevstyle = curstyle; } } this uses window.getcom
putedstyle() to fetch the style of each element, shifting it to the following element.
-webkit-border-before - CSS: Cascading Style Sheets
iumborder-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 elementsinheritedyespercentagesas each of the properties of the shorthand:-webkit-border-before-width: logical-width of containing blockcom
puted 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 absolute length or 0 if border-left-style is none or hiddenborder-right-width: the absolute length or 0 if border-right-style is none or hiddenborder-top-width: the absolute length or...
... 0 if border-top-style is none or 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 specifiedcolor: if the value is translucent, the com
puted value will be the rgba() corresponding one.
-webkit-mask-position-x - CSS: Cascading Style Sheets
mask-position-x: -50%; /* <length> values */ -webkit-mask-position-x: 50px; -webkit-mask-position-x: -1cm; /* multiple values values */ -webkit-mask-position-x: 50px, 25%, -3em; /* global values */ -webkit-mask-position-x: inherit; -webkit-mask-position-x: initial; -webkit-mask-position-x: unset; initial value0%applies toall elementsinheritednopercentagesrefer to the size of the box itselfcom
puted valuefor <length> the absolute value, otherwise a percentageanimation typediscrete syntax values <length-percentage> a length indicating the position of the left edge of the image relative to the box's left padding edge.
... formal definition initial value0%applies toall elementsinheritednopercentagesrefer to the size of the box itselfcom
puted valuefor <length> the absolute value, otherwise a percentageanimation typediscrete formal syntax [ <length-percentage> | left | center | right ]#where <length-percentage> = <length> | <percentage> examples horizontally positioning a mask image .exampleone { -webkit-mask-image: url(mask.png); -webkit-mask-position-x: right; } .exampletwo { -webkit-mask-image: url(mask.png); -webkit...
-webkit-mask-position-y - CSS: Cascading Style Sheets
mask-position-y: -50%; /* <length> values */ -webkit-mask-position-y: 50px; -webkit-mask-position-y: -1cm; /* multiple values values */ -webkit-mask-position-y: 50px, 25%, -3em; /* global values */ -webkit-mask-position-y: inherit; -webkit-mask-position-y: initial; -webkit-mask-position-y: unset; initial value0%applies toall elementsinheritednopercentagesrefer to the size of the box itselfcom
puted valuefor <length> the absolute value, otherwise a percentageanimation typediscrete syntax values <length-percentage> a length indicating the position of the top side of the image relative to the box's top padding edge.
... formal definition initial value0%applies toall elementsinheritednopercentagesrefer to the size of the box itselfcom
puted valuefor <length> the absolute value, otherwise a percentageanimation typediscrete formal syntax [ <length-percentage> | top | center | bottom ]#where <length-percentage> = <length> | <percentage> examples vertically positioning a mask image .exampleone { -webkit-mask-image: url(mask.png); -webkit-mask-position-y: bottom; } .exampletwo { -webkit-mask-image: url(mask.png); -webkit-...
-webkit-text-stroke-color - CSS: Cascading Style Sheets
formal definition initial valuecurrentcolorapplies toall elementsinheritedyescom
puted valuecom
puted 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 varying the stroke color html <p>text with stroke</p> <in
put type="color" value="#ff0000"> css p { margin: 0; font-size: 4em; -webkit-text-stroke-width: 3px; -webkit-text-stroke-color: #ff0000; /* can be changed in the live sample */ } javascript var colorpicker = document.queryselector("in
put"); colorpicker.addeventlistener("change", function(evt) { document.queryselector("p").style.webkittextstrokecolor = evt.target.value; }); results ...
::-moz-focus-inner - CSS: Cascading Style Sheets
the ::-moz-focus-inner css pseudo-element is a mozilla extension that represents an inner focus ring of the <button> element as well as the button, submit, reset, and color types of the <in
put> element.
... examples html <in
put type="submit" value="in
put"/> <button type="submit">button</button> css button::-moz-focus-inner, in
put[type="color"]::-moz-focus-inner, in
put[type="reset"]::-moz-focus-inner, in
put[type="button"]::-moz-focus-inner, in
put[type="submit"]::-moz-focus-inner { padding-block-start: 0px; padding-inline-end: 2px; padding-block-end: 0px; padding-inline-start: 2px; border: 1px dotted red; } result specifications not part of any standard.
::-webkit-file-upload-button - CSS: Cascading Style Sheets
the ::-webkit-file-upload-button css pseudo-element represents the button of an <in
put> of type="file".
... syntax selector::-webkit-file-upload-button examples html <form> <label for="fileupload">upload file</label><br> <in
put type="file" id="fileupload"> </form> css in
put, label { display: block; } in
put[type=file]::-webkit-file-upload-button { border: 1px solid grey; background: #fffaaa; } below is the example for you to try.
::-webkit-search-cancel-button - CSS: Cascading Style Sheets
the ::-webkit-search-cancel-button css pseudo-element represents a button (the "cancel button") at the edge of an <in
put> of type="search" which clears away the current value of the <in
put> element.
...the clear button is only shown on non-empty search <in
put> elements.
::-webkit-search-results-button - CSS: Cascading Style Sheets
the ::-webkit-search-results-button css pseudo-element represents a button (the "search results button") at the left edge of an <in
put> of type="search" which when clicked displays a menu which allows the user to choose from previous recent search queries.
...the search results button is only shown on search <in
put> elements that have a results attribute.
::first-letter (:first-letter) - CSS: Cascading Style Sheets
stet clita kasd gubergren, no sea takimata sanctus est.</p> <p>duis autem vel eum iriure dolor in hendrerit in vul
putate velit esse molestie consequat.</p> css p { width: 500px; line-height: 1.5; } h2 + p::first-letter { color: white; background-color: black; border-radius: 2px; box-shadow: 3px 3px 0 red; font-size: 250%; padding: 6px 3px; margin-right: 6px; float: left; } result effect on special punctuation and non-latin characters this example illustrates the effect of ::first-lett...
... html <p>duis autem vel eum iriure dolor in hendrerit in vul
putate velit esse molestie consequat.</p> <p>-the beginning of a special punctuation mark.</p> <p>_the beginning of a special punctuation mark.</p> <p>"the beginning of a special punctuation mark.</p> <p>'the beginning of a special punctuation mark.</p> <p>*the beginning of a special punctuation mark.</p> <p>#the beginning of a special punctuation mark.</p> <p>「特殊的汉字标点符号开头。</p> <p>《特殊的汉字标点符号开头。</p> <p>“特殊的汉字标点符号开头。</p> css p::first-letter { color: red; font-size: 150%; } result specifications specification status comment css pseudo-elements level 4the definition of '...
:enabled - CSS: Cascading Style Sheets
/* selects any enabled <in
put> */ in
put:enabled { color: blue; } syntax :enabled examples the following example makes the color of text and button <in
put>s green when enabled, and gray when disabled.
... html <form action="url_of_form"> <label for="firstfield">first field (enabled):</label> <in
put type="text" id="firstfield" value="lorem"><br> <label for="secondfield">second field (disabled):</label> <in
put type="text" id="secondfield" value="ipsum" disabled="disabled"><br> <in
put type="button" value="submit"> </form> css in
put:enabled { color: #2b2; } in
put:disabled { color: #aaa; } result specifications specification status comment html living standardthe definition of ':enabled' in that specification.
:indeterminate - CSS: Cascading Style Sheets
/* selects any <in
put> whose state is indeterminate */ in
put:indeterminate { background: lime; } elements targeted by this selector are: <in
put type="checkbox"> elements whose indeterminate property is set to true by javascript <in
put type="radio"> elements, when all radio buttons with the same name value in the form are unchecked <progress> elements in an indeterminate state syntax :indeterminate examples checkbox & radio button this example applies special styles to the labels associa...
... html <div> <in
put type="checkbox" id="checkbox"> <label for="checkbox">this label starts out lime.</label> </div> <div> <in
put type="radio" id="radio"> <label for="radio">this label starts out lime.</label> </div> css in
put:indeterminate + label { background: lime; } javascript var in
puts = document.getelementsbytagname("in
put"); for (var i = 0; i < in
puts.length; i++) { in
puts[i].indeterminate = true; } progress bar html <progress> css progress { margin: 4px; } progress:indeterminate { opacity: 0.5; background-color: lightgray; box-shadow: 0 0 2px 1px red; } result specifications specification status comment html living standardthe definition of ':indeterminate' in that specification.
:scope - CSS: Cascading Style Sheets
javascript let paragraph = document.getelementbyid("para"); let out
put = document.getelementbyid("out
put"); if (paragraph.matches(":scope")) { out
put.innertext = "yep, the element is its own scope as expected!"; } html <p id="para"> this is a paragraph.
...</p> <p id="out
put"></p> result direct children a situation where the :scope pseudo-class prove to be useful is when you need to get direct descendant of an already retrieved element.
:visited - CSS: Cascading Style Sheets
to style links appropriately,
put the :visited rule after the :link rule but before the :hover and :active rules, as defined by the lvha-order: :link — :visited — :hover — :active.
... although these styles can be change the appearance of colors to the end user, the window.getcom
putedstyle method will lie and always return the value of the non-:visited color.
aspect-ratio - CSS: Cascading Style Sheets
</div> css /* minimum aspect ratio */ @media (min-aspect-ratio: 8/5) { div { background: #9af; /* blue */ } } /* maximum aspect ratio */ @media (max-aspect-ratio: 3/2) { div { background: #9ff; /* cyan */ } } /* exact aspect ratio,
put it at the bottom to avoid override*/ @media (aspect-ratio: 1/1) { div { background: #f9a; /* red */ } } _example used iframe and dataurl to enable this iframe could resize html <label id="wf" for="w">width:165</label> <in
put id="w" name="w" type="range" min="100" max="250" step="5" value="165"> <label id="hf" for="w">height:165</label> <in
put id="h" name="h" type="range" min="100" m...
...a (min-aspect-ratio: 8/5) { div { background: %239af; } } @media (max-aspect-ratio: 3/2) { div { background: %239ff; } } @media (aspect-ratio: 1/1) { div { background: %23f9a; } }</style><div id='inner'> watch this element as you resize your viewport's width and height.</div>"> </iframe> css iframe{ display:block; } javascript outer.style.width=outer.style.height="165px" w.onchange=w.onin
put=function(){ outer.style.width=w.value+"px" wf.textcontent="width:"+w.value } h.onchange=h.onin
put=function(){ outer.style.height=h.value+"px" hf.textcontent="height:"+h.value } result specifications specification status comment media queries level 4the definition of 'aspect-ratio' in that specification.
monochrome - CSS: Cascading Style Sheets
the monochrome css media feature can be used to test the number of bits per pixel in the monochrome frame buffer of the out
put device.
... candidate recommendation the value can now be negative, in which case it com
putes to false.
resolution - CSS: Cascading Style Sheets
the resolution css media feature can be used to test the pixel density of the out
put device.
... syntax the resolution feature is specified as a <resolution> value representing the pixel density of the out
put device.
scan - CSS: Cascading Style Sheets
the scan css media feature can be used to test the scanning process (if any) utilized by the out
put device.
...all com
puter screens use progressive scanning.
Coordinate systems - CSS: Cascading Style Sheets
on a desktop com
puter, for example, the mouseevent.clientx and mouseevent.clienty properties indicate the position of the mouse cursor at the moment the event occurred, relative to the top-left corner of the browser window.
... the setcoords() function is designed to accept as in
put a mouseevent and the name of the origin to use when obtaining the coordinates.
Using Media Queries for Accessibility - CSS: Cascading Style Sheets
also, this method of switching animation off according to the user's preference can also benefit users with low battery or low-end phones or com
puters.
... this will help not only users with low vision and contrast sensitivity issues but also users that are working on a com
puter or phone with direct sunlight.
Privacy and the :visited selector - CSS: Cascading Style Sheets
this was done through window.getcom
putedstyle and other techniques.
... little white lies to preserve users' privacy, firefox and other browsers will lie to web applications under certain circumstances: the window.getcom
putedstyle method, and similar functions such as element.queryselector, will always return values indicating that a user has never visited any of the links on a page.
align-content - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies tomulti-line flex containersinheritednocom
puted valueas specifiedanimation typediscrete formal syntax normal | <baseline-position> | <content-distribution> | <overflow-position>?
... candidate recommendation initial definition initial valuenormalapplies tomulti-line flex containersinheritednocom
puted valueas specifiedanimation typediscrete ...
animation-fill-mode - CSS: Cascading Style Sheets
forwards the target will retain the com
puted values set by the last keyframe encountered during execution.
... formal definition initial valuenoneapplies toall elements, ::before and ::after pseudo-elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax <single-animation-fill-mode>#where <single-animation-fill-mode> = none | forwards | backwards | both examples you can see the effect of animation-fill-mode in the following example.
animation-timing-function - CSS: Cascading Style Sheets
the step timing functions divides the in
put time into a specified number of intervals that are equal in length.
... formal definition initial valueeaseapplies toall elements, ::before and ::after pseudo-elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax <timing-function>#where <timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>where <cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to tra...
animation - CSS: Cascading Style Sheets
furthermore, when serialized, default values of other properties must be out
put in at least the cases necessary to distinguish an animation-name that could be a value of another property, and may be out
put in additional cases.
...ss criterion 2.2.2 | w3c understanding wcag 2.0 formal definition initial valueas each of the properties of the shorthand:animation-name: noneanimation-duration: 0sanimation-timing-function: easeanimation-delay: 0sanimation-iteration-count: 1animation-direction: normalanimation-fill-mode: noneanimation-play-state: runningapplies toall elements, ::before and ::after pseudo-elementsinheritednocom
puted valueas each of the properties of the shorthand:animation-name: as specifiedanimation-duration: as specifiedanimation-timing-function: as specifiedanimation-delay: as specifiedanimation-direction: as specifiedanimation-iteration-count: as specifiedanimation-fill-mode: as specifiedanimation-play-state: as specifiedanimation typediscrete formal syntax <single-animation>#where <single-animation>...
aspect-ratio - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elements except inline boxes and internal ruby or table boxesinheritednocom
puted valueas specifiedanimation typediscrete formal syntax auto | <ratio> examples mapping width and height to aspect-ratio firefox has added an internal aspect-ratio property (in version 69 onwards) that applies to replaced elements and other related elements that accept width and height attributes.
... in firefox, the internal stylesheet rule looks like this: img, in
put[type="image"], video, embed, iframe, marquee, object, table { aspect-ratio: attr(width) / attr(height); } specifications specification status comment css box sizing module level 4the definition of 'aspect-ratio' in that specification.
background-clip - CSS: Cascading Style Sheets
see "the backgrounds of special elements." note: for documents whose root element is an html element: if the com
puted value of background-image on the root element is none and its background-color is transparent, user agents must instead propagate the com
puted values of the background properties from that element’s first html <body> child element.
...it also applies to ::first-letter and ::first-line.inheritednocom
puted valueas specifiedanimation typediscrete formal syntax <box>#where <box> = border-box | padding-box | content-box examples html <p class="border-box">the background extends behind the border.</p> <p class="padding-box">the background extends to the inside edge of the border.</p> <p class="content-box">the background extends only to the edge of the content box.</p> <p class="text">the backgr...
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 areacom
puted valueas each of the properties of the shorthand:background-image: as specified, but with <url> values made absolutebackground-position: a list, each item consisting of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentagebackground-size: as specified, but with relative lengths converted into absol...
...ute lengthsbackground-repeat: a list, each item consisting of two keywords, one per dimensionbackground-origin: as specifiedbackground-clip: as specifiedbackground-attachment: as specifiedbackground-color: com
puted 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> ]?
block-size - CSS: Cascading Style Sheets
initial valueautoapplies tosame as width and heightinheritednopercentagesblock-size of containing blockcom
puted valuesame as width and heightanimation typea length, percentage or calc(); syntax values the block-size property takes the same values as the width and height properties.
... formal definition initial valueautoapplies tosame as width and heightinheritednopercentagesblock-size of containing blockcom
puted valuesame as width and heightanimation typea length, percentage or calc(); formal syntax <'width'> examples block size with vertical text html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; block-size: 200px; } result specifications specification status comment css logical properties and values level 1the definition of 'block-size' in that specification.
border-block-start-width - CSS: Cascading Style Sheets
initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcom
puted valueabsolute length; 0 if the border style is none or hiddenanimation typea length values <'border-width'> the width of the border.
... formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcom
puted valueabsolute length; 0 if the border style is none or hiddenanimation typea length formal syntax <'border-top-width'> examples border width with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-block-start-width: 5px; } results specifications specification status comment css logical properties and values level 1the definition of 'border-block-start-width' in that specification.
border-block-start - CSS: Cascading Style Sheets
he 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 elementsinheritednocom
puted 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 absolute length or 0 if border-left-style is none or hiddenborder-right-width: the absolute length or 0 if border-right-style is none or hiddenborder-top-width: the absolute length or...
... 0 if border-top-style is none or 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-block-start-color: com
puted coloranimation typeas each of the properties of the shorthand:border-block-start-color: a colorborder-block-start-style: discreteborder-block-start-width: a length formal syntax <'border-top-width'> | <'border-top-style'> | <'color'>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
border-inline-end-color - CSS: Cascading Style Sheets
initial valuecurrentcolorapplies toall elementsinheritednocom
puted valuecom
puted coloranimation typea color values <'color'> the color of the border.
... formal definition initial valuecurrentcolorapplies toall elementsinheritednocom
puted valuecom
puted coloranimation typea color formal syntax <'border-top-color'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px solid blue; border-inline-end-color: red; } specifications specification status comment css logical properties and values level 1the definition of 'border-inline-end-color' in that specification.
border-inline-end-width - CSS: Cascading Style Sheets
initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcom
puted valueabsolute length; 0 if the border style is none or hiddenanimation typea length values <'border-width'> the width of the border.
... formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcom
puted valueabsolute length; 0 if the border style is none or hiddenanimation typea length formal syntax <'border-top-width'> examples applying a border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-inline-end-width: 5px; } results specifications specification status comment css logical properties and values level 1the definition of 'border-inline-end-width' in that specification.
border-inline-start-style - CSS: Cascading Style Sheets
initial valuenoneapplies toall elementsinheritednocom
puted valueas specifiedanimation typediscrete values <'border-style'> the line style of the border.
... formal definition initial valuenoneapplies toall elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-inline-start-style: dashed; } specifications specification status comment css logical properties and values level 1the definition of 'border-inline-start-style' in that specification.
border-inline-start - CSS: Cascading Style Sheets
he 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 elementsinheritednocom
puted 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 absolute length or 0 if border-left-style is none or hiddenborder-right-width: the absolute length or 0 if border-right-style is none or hiddenborder-top-width: the absolute length or...
... 0 if border-top-style is none or 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-start-color: com
puted coloranimation typeas each of the properties of the shorthand:border-inline-start-color: a colorborder-inline-start-style: discreteborder-inline-start-width: a length formal syntax <'border-top-width'> | <'border-top-style'> | <'color'>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
border-inline - CSS: Cascading Style Sheets
initial valueas each of the properties of the shorthand:border-top-width: mediumborder-top-style: noneborder-top-color: currentcolorapplies toall elementsinheritednocom
puted valueas each of the properties of the shorthand:border-top-width: the absolute length or 0 if border-top-style is none or hiddenborder-top-style: as specifiedborder-top-color: com
puted coloranimation typediscrete constituent properties this property is a shorthand for the following css properties: border-inline-color border-inline-style border-inline-width syntax values the border-in...
... formal definition initial valueas each of the properties of the shorthand:border-top-width: mediumborder-top-style: noneborder-top-color: currentcolorapplies toall elementsinheritednocom
puted valueas each of the properties of the shorthand:border-top-width: the absolute length or 0 if border-top-style is none or hiddenborder-top-style: as specifiedborder-top-color: com
puted coloranimation typediscrete formal syntax <'border-top-width'> | <'border-top-style'> | <'color'>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecate...
border-top-style - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocom
puted 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<...
...it also applies to ::first-letter.inheritednocom
puted valueas specifiedanimation typediscrete ...
border - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocom
puted 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 absolute length or 0 if border-left-style is none or hiddenborder-right-width: the absolute length or 0 if border-right-style is none or hiddenborder-top-width: the absolute length or...
... 0 if border-top-style is none or 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-color: as each of the properties of the shorthand:border-bottom-color: com
puted colorborder-left-color: com
puted colorborder-right-color: com
puted colorborder-top-color: com
puted coloranimation typeas each of the properties of the shorthand:border-color: as each of the properties of the shorthand:border-bottom-color: a colorborder-left-color: a colorborder-right-color: a colorborder-top-color: a colorborder-style: discreteborder-width: as each of the properties of the shorthand:border-bottom-width: a lengthborder-left-width: a lengthborder-right-width: a lengthborder...
box-flex-group - CSS: Cascading Style Sheets
if the box would overflow after the preferred space of the children has been com
puted, then space is removed from flexible elements in a manner similar to that used when adding extra space.
... formal definition initial value1applies toin-flow children of box elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax <integer> examples simple usage example in the original flexbox spec, box-flex-group could be used to assign flex children to different groups to distribute flexible space between: article:nth-child(1) { -webkit-box-flex-group: 1; } article:nth-child(2) { -webkit-box-flex-group: 2; } this was only ever supported in webkit-based browsers, with a prefix, and in subsequent versions of the spec th...
box-ordinal-group - CSS: Cascading Style Sheets
when the com
puted box-direction is normal, a box will display its elements starting from the lowest numbered ordinal group and ensure that those elements appear to the left (for horizontal boxes) or at the top (for vertical boxes) of the container.
... formal definition initial value1applies tochildren of box elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax <integer> examples basic usage example in an older version of the spec, box-ordinal-group was included to allow you to change the display order of flex children inside a flex container: article:nth-child(1) { -webkit-box-ordinal-group: 2 -moz-box-ordinal-group: 2 box-ordinal-group: 2 } article:nth-child(2) { -webkit-box-ordinal-group: 1 -moz-box...
break-after - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toblock-level elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax auto | avoid | always | all | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region examples breaking into neat columns in the following example we have a container that contains an <h1> spanning all columns (achieved using column-span: all) and a series of <h2>s and paragraphs laid out in mult...
...donec eu vul
putate nibh.
break-before - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toblock-level elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax auto | avoid | always | all | avoid-page | page | left | right | recto | verso | avoid-column | column | avoid-region | region examples breaking into neat columns in the following example we have a container that contains an <h1> spanning all columns (achieved using column-span: all) and a series of <h2>s and paragraphs laid out in mult...
...donec eu vul
putate nibh.
caption-side - CSS: Cascading Style Sheets
the caption-side css property
puts the content of a table's <caption> on the specified side.
... formal definition initial valuetopapplies totable-caption elementsinheritedyescom
puted valueas specifiedanimation typediscrete formal syntax top | bottom | block-start | block-end | inline-start | inline-end examples setting captions above and below html <table class="top"> <caption>caption above the table</caption> <tr> <td>some data</td> <td>some more data</td> </tr> </table> <br> <table class="bottom"> <caption>caption below the table</caption> <tr> ...
clip-path - CSS: Cascading Style Sheets
note: a com
puted value other than none results in the creation of a new stacking context the same way that css opacity does for values other than 1.
... formal definition initial valuenoneapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentagesrefer to reference box when specified, otherwise border-boxcom
puted valueas specified, but with <url> values made absoluteanimation typeyes, as specified for <basic-shape>, otherwise no formal syntax <clip-source> | [ <basic-shape> | <geometry-box> ] | nonewhere <clip-source> = <url><basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()> | <path()><geometry-box> = <shape-box> | fill-box | stroke-box | view-boxwhere <inset()> = inset( <length-percentage>{1,4} [ round <'border-radius'> ]?
display - CSS: Cascading Style Sheets
short note on what css display properties do to table semantics — the paciello group hidden content for better a11y | go make things mdn understanding wcag, guideline 1.3 explanations understanding success criterion 1.3.1 | w3c understanding wcag 2.0 formal definition initial valueinlineapplies toall elementsinheritednocom
puted valueas the specified value, except for positioned and floating elements and the root element.
... in both cases the com
puted value may be a keyword other than the one specified.animation typediscrete formal syntax [ <display-outside> | <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>where <display-outside> = block | inline | run-in<display-inside> = flow | flow-root | table | flex | grid | ruby<display-listitem> = <display-outside>?
brightness() - CSS: Cascading Style Sheets
the brightness() css function applies a linear multiplier to the in
put image, making it appear brighter or darker.
...a value of 0% will create an image that is completely black, while a value of 100% leaves the in
put unchanged.
contrast() - CSS: Cascading Style Sheets
the contrast() css function adjusts the contrast of the in
put image.
...a value of 0% will create an image that is completely gray, while a value of 100% leaves the in
put unchanged.
drop-shadow() - CSS: Cascading Style Sheets
the drop-shadow() css function applies a drop shadow effect to the in
put image.
... a drop shadow is effectively a blurred, offset version of the in
put image's alpha mask, drawn in a specific color and composited below the image.
invert() - CSS: Cascading Style Sheets
the invert() css function inverts the color samples in the in
put image.
...a value of 100% is completely inverted, while a value of 0% leaves the in
put unchanged.
opacity() - CSS: Cascading Style Sheets
the opacity() css function applies transparency to the samples in the in
put image.
...a value of 0% is completely transparent, while a value of 100% leaves the in
put unchanged.
saturate() - CSS: Cascading Style Sheets
the saturate() css function super-saturates or desaturates the in
put image.
...a value of 0% is completely unsaturated, while a value of 100% leaves the in
put unchanged.
sepia() - CSS: Cascading Style Sheets
the sepia() css function converts the in
put image to sepia, giving it a warmer, more yellow/brown appearance.
...a value of 100% is completely sepia, while a value of 0% leaves the in
put unchanged.
font-kerning - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyescom
puted valueas specifiedanimation typediscrete formal syntax auto | normal | none examples enabling and disabling kerning html <div id="kern"></div> <div id="nokern"></div> <textarea id="in
put">av t.
... ij</textarea> css div { font-size: 2rem; font-family: serif; } #nokern { font-kerning: none; } #kern { font-kerning: normal; } javascript let in
put = document.getelementbyid('in
put'); let kern = document.getelementbyid('kern'); let nokern = document.getelementbyid('nokern'); in
put.addeventlistener('keyup', function() { kern.textcontent = in
put.value; /* update content */ nokern.textcontent = in
put.value; }); kern.textcontent = in
put.value; /* initialize content */ nokern.textcontent = in
put.value; specifications specification status comment css fonts module level 3the definition of 'font-kerning' in that specification.
grid-auto-flow - CSS: Cascading Style Sheets
formal definition initial valuerowapplies togrid containersinheritednocom
puted valueas specifiedanimation typediscrete formal syntax [ row | column ] | dense examples setting grid auto-placement html <div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> <div id="item4"></div> <div id="item5"></div> </div> <select id="direction" onchange="changegridautoflow()"> <option value="column">column</option> <option value="row">row...
...</option> </select> <in
put id="dense" type="checkbox" onchange="changegridautoflow()"> <label for="dense">dense</label> css #grid { height: 200px; width: 200px; display: grid; grid-gap: 10px; grid-template: repeat(4, 1fr) / repeat(2, 1fr); grid-auto-flow: column; /* or 'row', 'row dense', 'column dense' */ } #item1 { background-color: lime; grid-row-start: 3; } #item2 { background-color: yellow; } #item3 { background-color: blue; } #item4 { grid-column-start: 2; background-color: red; } #item5 { background-color: aqua; } function changegridautoflow() { var grid = document.getelementbyid("grid"); var direction = document.getelementbyid("direction"); var dense = document.getelementbyid("dense"); var gridautoflow = direction.value === "row" ?
grid - CSS: Cascading Style Sheets
normalrow-gap: normalapplies togrid containersinheritednopercentagesas each of the properties of the shorthand:grid-template-rows: refer to corresponding dimension of the content areagrid-template-columns: refer to corresponding dimension of the content areagrid-auto-rows: refer to corresponding dimension of the content areagrid-auto-columns: refer to corresponding dimension of the content areacom
puted valueas each of the properties of the shorthand:grid-template-rows: as specified, but with relative lengths converted into absolute lengthsgrid-template-columns: as specified, but with relative lengths converted into absolute lengthsgrid-template-areas: as specifiedgrid-auto-rows: the percentage as specified or the absolute lengthgrid-auto-columns: the percentage as specified or the absolute le...
...ngthgrid-auto-flow: as specifiedgrid-column-gap: the percentage as specified or the absolute lengthgrid-row-gap: the percentage as specified or the absolute lengthcolumn-gap: as specified, with <length>s made absolute, and normal com
puting to zero except on multi-column elementsrow-gap: as specified, with <length>s made absolute, and normal com
puting to zero except on multi-column elementsanimation typediscrete formal syntax <'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense?
hanging-punctuation - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritedyescom
puted valueas specifiedanimation typediscrete formal syntax none | [ first | [ force-end | allow-end ] | last ] examples setting opening and closing quotes to hang html <p>“lorem ipsum dolor sit amet, consectetur adipiscing elit.
...praesent laoreet tortor massa, sit amet vul
putate nulla pharetra ut.”</p> css p { hanging-punctuation: first last; margin: .5rem; } result specifications specification status comment css text module level 3the definition of 'hanging-punctuation' in that specification.
height - CSS: Cascading Style Sheets
if the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value com
putes to auto.
... a percentage height on the root element is relative to the initial containing block.com
puted valuea percentage or auto or the absolute lengthanimation typea length, percentage or calc(); formal syntax auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> examples setting height using pixels and percentages html <div id="taller">i'm 50 pixels tall.</div> <div id="shorter">i'm 25 pixels tall.</div> <div id="parent"> <div id="child"> i'm half the height of my parent.
list-style-type - CSS: Cascading Style Sheets
the color of the marker will be the same as the com
puted color of the element it applies to.
... ul { list-style: none; } ul li::before { content: "\200b"; } voiceover and list-style-type: none – unfettered thoughts mdn understanding wcag, guideline 1.3 explanations understanding success criterion 1.3.1 | w3c understanding wcag 2.0 formal definition initial valuediscapplies tolist itemsinheritedyescom
puted valueas specifiedanimation typediscrete formal syntax <counter-style> | <string> | nonewhere <counter-style> = <counter-style-name> | symbols()where <counter-style-name> = <custom-ident> examples setting list item markers html list 1 <ol class="normal"> <li>hello</li> <li>world</li> <li>what's up?</li> </ol> list 2 <ol class="shortcut"> <li>looks</li> <li>like</li> <li>the</l...
margin-inline - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcom
puted valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typediscrete formal syntax <'margin-left'>{1,2} examples setting inline start and end margins html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { w...
... initial value0applies tosame as margininheritednopercentagesdepends on layout modelcom
puted valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typediscrete ...
margin-left - CSS: Cascading Style Sheets
this table summarizes the different cases: value of display value of float value of position com
puted 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.
...it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcom
puted valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> | auto examples setting left margin using pixels and percentages .content { margin-left: 5%; } .sidebox { margin-left: 10px; } .logo { margin-left: -5px; } specifications specification status comment css basic box modelthe definition of 'marg...
margin-right - CSS: Cascading Style Sheets
this table summarizes the different cases: value of display value of float value of position com
puted 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.
...it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcom
puted 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 specification status comment css basic box modelthe definition of '...
offset-path - CSS: Cascading Style Sheets
each shape or path must define an initial position for the com
puted value of 0 for offset-distance and an initial direction which specifies the rotation of the object to the initial position.
... formal definition initial valuenoneapplies totransformable elementsinheritednocom
puted valueas specifiedanimation typeas <angle>, <basic-shape> or <path()>creates stacking contextyes formal syntax none | ray( [ <angle> && <size>?
offset-rotate - CSS: Cascading Style Sheets
auto <angle> if auto is followed by an <angle>, the com
puted value of the angle is added to the com
puted value of auto.
... formal definition initial valueautoapplies totransformable elementsinheritednocom
puted valueas specifiedanimation typeas <angle>, <basic-shape> or <path()> formal syntax [ auto | reverse ] | <angle> examples setting element orientation along its offset path html <div></div> <div></div> <div></div> css div { width: 40px; height: 40px; background: #2bc4a2; margin: 20px; clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%); animation: move 5000ms infinite alternate ease-in-out; offset-path: path('m20,20 c20,50 180,-10 180,20'); } div:nth-child(1) { offset-rotate: auto; } div:nth-child(2) { offset-ro...
order - CSS: Cascading Style Sheets
flexbox & the keyboard navigation disconnect — tink source order matters | adrian roselli mdn understanding wcag, guideline 1.3 explanations understanding success criterion 1.3.2 | w3c understanding wcag 2.0 formal definition initial value0applies toflex items and absolutely-positioned flex container childreninheritednocom
puted valueas specifiedanimation typean integer formal syntax <integer> examples ordering items in a flex container this example uses css to create a classic two-sidebar layout surrounding a content block.
... candidate recommendation initial definition initial value0applies toflex items and absolutely-positioned flex container childreninheritednocom
puted valueas specifiedanimation typean integer ...
outline-color - CSS: Cascading Style Sheets
webaim: color contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 formal definition initial valueinvert, for browsers supporting it, currentcolor for the otherapplies toall elementsinheritednocom
puted valuefor the keyword invert, the com
puted value is invert.
... for the color value, if the value is translucent, the com
puted value will be the rgba() corresponding one.
overflow-block - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toblock-containers, flex containers, and grid containersinheritednocom
puted valueas specified, except with visible/clip com
puting to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clipanimation typediscrete formal syntax visible | hidden | clip | scroll | auto examples html <ul> <li><code>overflow-block:hidden</code> — hides the text outside the box <div id="div1"> lorem ipsum dolor sit amet, consectetur adipisicing el...
... working draft initial valueautoapplies toblock-containers, flex containers, and grid containersinheritednocom
puted valueas specified, except with visible/clip com
puting to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clipanimation typediscrete ...
overflow-wrap - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies tonon-replaced inline elementsinheritedyescom
puted valueas specifiedanimation typediscrete formal syntax normal | break-word | anywhere examples comparing overflow-wrap, word-break, and hyphens this example compares the results of overflow-wrap, word-break, and hyphens when breaking up a long word.
... working draft initial definition initial valuenormalapplies tonon-replaced inline elementsinheritedyescom
puted valueas specifiedanimation typediscrete ...
overflow-x - CSS: Cascading Style Sheets
if overflow-y is hidden, scroll or auto and this property is visible, it will implicitly com
pute to auto.
... formal definition initial valuevisibleapplies toblock-containers, flex containers, and grid containersinheritednocom
puted valueas specified, except with visible/clip com
puting to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clipanimation typediscrete formal syntax visible | hidden | clip | scroll | auto examples html <ul> <li><code>overflow-x:hidden</code> — hides the text outside the box <div id="div1"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz ...
overflow-y - CSS: Cascading Style Sheets
if overflow-x is hidden, scroll or auto and this property is visible (default) it will implicitly com
pute to auto.
... formal definition initial valuevisibleapplies toblock-containers, flex containers, and grid containersinheritednocom
puted valueas specified, except with visible/clip com
puting to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clipanimation typediscrete formal syntax visible | hidden | clip | scroll | auto examples setting overflow-y behavior html <ul> <li><code>overflow-y:hidden</code> — hides the text outside the box <div id="div1"> lorem ipsum dolor sit amet, co...
overscroll-behavior-y - CSS: Cascading Style Sheets
/* keyword values */ overscroll-behavior-y: auto; /* default */ overscroll-behavior-y: contain; overscroll-behavior-y: none; /* global values */ overscroll-behavior-y: inherit; overscroll-behavior-y: initial; overscroll-behavior-y: unset; initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocom
puted valueas specifiedanimation typediscrete syntax the overscroll-behavior-y property is specified as a keyword chosen from the list of values below.
... formal definition initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax contain | none | auto examples preventing an underlying element from scrolling vertically .messages { height: 220px; overflow: auto; overscroll-behavior-y: contain; } see overscroll-behavior for a full example and explanation.
place-self - CSS: Cascading Style Sheets
f-start auto; place-self: self-end normal; place-self: flex-start auto; place-self: flex-end normal; place-self: left auto; place-self: right normal; /* baseline alignment */ place-self: baseline normal; place-self: first baseline auto; place-self: last baseline normal; place-self: stretch auto; /* global values */ place-self: inherit; place-self: initial; place-self: unset; values auto com
putes to the parent's align-items value.
... formal definition initial valueas each of the properties of the shorthand:align-self: autojustify-self: autoapplies toblock-level boxes, absolutely-positioned boxes, and grid itemsinheritednocom
puted valueas each of the properties of the shorthand:align-self: auto com
putes to itself on absolutely-positioned elements, and to the com
puted value of align-items on the parent (minus any legacy keywords) on all other boxes, or start if the box has no parent.
Resolved value - CSS: Cascading Style Sheets
the resolved value of a css property is the value returned by getcom
putedstyle().
... for most properties, it is the com
puted value, but for a few legacy properties (including width and height), it is instead the used value.
scroll-padding-block-end - CSS: Cascading Style Sheets
this allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or simply to
put more breathing room between a targetted element and the edges of the scrollport.
... formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcom
puted valueas specifiedanimation typeby com
puted 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-block-end' in that specification.
scroll-padding-block-start - CSS: Cascading Style Sheets
this allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or simply to
put more breathing room between a targetted element and the edges of the scrollport.
... formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcom
puted valueas specifiedanimation typeby com
puted 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-block-start' in that specification.
scroll-padding-block - CSS: Cascading Style Sheets
this allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or simply to
put more breathing room between a targeted element and the edges of the scrollport.
... formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcom
puted valueas specifiedanimation typeby com
puted value type formal syntax [ auto | <length-percentage> ]{1,2}where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-padding-block' in that specification.
scroll-padding-bottom - CSS: Cascading Style Sheets
this allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or simply to
put more breathing room between a targetted element and the edges of the scrollport.
... formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcom
puted valueas specifiedanimation typeby com
puted 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-bottom' in that specification.
scroll-padding-inline-end - CSS: Cascading Style Sheets
this allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or simply to
put more breathing room between a targetted element and the edges of the scrollport.
... formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcom
puted valueas specifiedanimation typeby com
puted 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-inline-end' in that specification.
scroll-padding-inline-start - CSS: Cascading Style Sheets
this allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or simply to
put more breathing room between a targetted element and the edges of the scrollport.
... formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcom
puted valueas specifiedanimation typeby com
puted 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-inline-start' in that specification.
scroll-padding-inline - CSS: Cascading Style Sheets
this allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or simply to
put more breathing room between a targetted element and the edges of the scrollport.
... formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcom
puted valueas specifiedanimation typeby com
puted value type formal syntax [ auto | <length-percentage> ]{1,2}where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-padding-inline' in that specification.
scroll-padding-left - CSS: Cascading Style Sheets
this allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or simply to
put more breathing room between a targetted element and the edges of the scrollport.
... formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcom
puted valueas specifiedanimation typeby com
puted 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.
scroll-padding-right - CSS: Cascading Style Sheets
this allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or simply to
put more breathing room between a targetted element and the edges of the scrollport.
... formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcom
puted valueas specifiedanimation typeby com
puted 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-right' in that specification.
scroll-padding-top - CSS: Cascading Style Sheets
this allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars) or simply to
put more breathing room between a targetted element and the edges of the scrollport.
... formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcom
puted valueas specifiedanimation typeby com
puted 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-top' in that specification.
scroll-padding - CSS: Cascading Style Sheets
this allows the author to exclude regions of the scrollport that are obscured by other content (such as fixed-positioned toolbars or sidebars), or simply to
put more breathing room between a targeted element and the edges of the scrollport.
... formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcom
puted valueas specifiedanimation typeby com
puted value type formal syntax [ auto | <length-percentage> ]{1,4}where <length-percentage> = <length> | <percentage> specifications specification status comment css scroll snap module level 1the definition of 'scroll-padding' in that specification.
scrollbar-width - CSS: Cascading Style Sheets
initial valueautoapplies toscrolling boxesinheritednocom
puted valueas specifiedanimation typediscrete syntax /* keyword values */ scrollbar-width: auto; scrollbar-width: thin; scrollbar-width: none; /* global values */ scrollbar-width: inherit; scrollbar-width: initial; scrollbar-width: unset; values <scrollbar-width> defines the width of the scrollbar as a keyword.
... mdn understanding wcag, guideline 2.1 explanations mdn understanding wcag, guideline 2.5 explanations understanding success criterion 2.1.1 | w3c understanding wcag 2.1 understanding success criterion 2.5.5 | w3c understanding wcag 2.1 formal definition initial valueautoapplies toscrolling boxesinheritednocom
puted valueas specifiedanimation typediscrete formal syntax auto | thin | none examples sizing overflow scrollbars css .scroller { width: 300px; height: 100px; overflow-y: scroll; scrollbar-width: thin; } html <div class="scroller">veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.
<string> - CSS: Cascading Style Sheets
to out
put new lines, you must escape them with a line feed character such as \a or \00000a.
... is a string with \" an escaped double quote." "this string also has \22 an escaped double quote." 'this is a string with \' an escaped single quote.' 'this string also has \27 an escaped single quote.' "this is a string with \\ an escaped backslash." /* new line in a string */ "this string has a \aline break in it." /* string spanning two lines of code (these two strings will have identical out
put) */ "a really long \ awesome string" "a really long awesome string" specifications specification status comment css values and units module level 3the definition of '<string>' in that specification.
text-combine-upright - CSS: Cascading Style Sheets
if the integer is omitted, it com
putes to 2.
... formal definition initial valuenoneapplies tonon-replaced inline elementsinheritedyescom
puted valuespecified keyword, plus integer if 'digits'animation typediscrete formal syntax none | all | [ digits <integer>?
text-emphasis-style - CSS: Cascading Style Sheets
it may be com
puted to or rendered as 'f' only */ /* keyword values */ text-emphasis-style: filled; text-emphasis-style: open; text-emphasis-style: dot; text-emphasis-style: circle; text-emphasis-style: double-circle; text-emphasis-style: triangle; text-emphasis-style: filled sesame; text-emphasis-style: open sesame; /* global values */ text-emphasis-style: inherit; text-emphasis-style: initial; text-emphasis-st...
... formal definition initial valuenoneapplies toall elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax none | [ [ filled | open ] | [ dot | circle | double-circle | triangle | sesame ] ] | <string> examples h2 { text-emphasis-style: sesame; } specifications specification status comment css text decoration module level 3the definition of 'text-emphasis' in that specification.
text-emphasis - CSS: Cascading Style Sheets
it may be com
puted to or rendered as 'f' only */ /* keywords value */ text-emphasis: filled; text-emphasis: open; text-emphasis: filled sesame; text-emphasis: open sesame; /* keywords value combined with a color */ text-emphasis: filled sesame #555; /* global values */ text-emphasis: inherit; text-emphasis: initial; text-emphasis: unset; values none no emphasis marks.
... formal definition initial valueas each of the properties of the shorthand:text-emphasis-style: nonetext-emphasis-color: currentcolorapplies toall elementsinheritednocom
puted valueas each of the properties of the shorthand:text-emphasis-style: as specifiedtext-emphasis-color: com
puted coloranimation typeas each of the properties of the shorthand:text-emphasis-color: a colortext-emphasis-style: discrete formal syntax <'text-emphasis-style'> | <'text-emphasis-color'> examples a heading with emphasis shape and color this example draws a heading with triangles use...
text-indent - CSS: Cascading Style Sheets
the text-indent css property sets the length of empty space (indentation) that is
put before lines of text in a block.
... formal definition initial value0applies toblock containersinheritedyespercentagesrefer to the width of the containing blockcom
puted valuethe percentage as specified or the absolute length, plus any keywords as specifiedanimation typea length, percentage or calc(); formal syntax <length-percentage> && hanging?
text-rendering - CSS: Cascading Style Sheets
in svg, when text is scaled up or down, browsers calculate the final size of the text (which is determined by the specified font size and the applied scale) and request a font of that com
puted size from the platform's font system.
... formal definition initial valueautoapplies totext elementsinheritedyescom
puted valueas specifiedanimation typediscrete formal syntax auto | optimizespeed | optimizelegibility | geometricprecision examples automatic application of optimizelegibility this demonstrates how optimizelegibility is used by browsers automatically when the font-size is smaller than 20px.
text-transform - CSS: Cascading Style Sheets
in dutch (nl), the ij digraph becomes ij, even with text-transform: capitalize, which only
puts the first letter of a word in uppercase.
...it also applies to ::first-letter and ::first-line.inheritedyescom
puted valueas specifiedanimation typediscrete formal syntax none | capitalize | uppercase | lowercase | full-width | full-size-kana examples none <p>initial string <strong>lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</strong> </p> <p>text-transform: none <strong><span>lorem ipsum dolor sit amet, consectetur adipisicing elit, ...</span></strong> </p> span { text-transform...
text-underline-position - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elementsinheritedyescom
puted valueas specifiedanimation typediscrete formal syntax auto | from-font | [ under | [ left | right ] ] examples a simple example let's take a couple of simple example paragraphs: <p class="horizontal">lorem ipsum dolor sit amet, consectetur adipiscing elit.
...in the horizontal text we use text-underline-position: under; to
put the underline below all the descenders.
transform-style - CSS: Cascading Style Sheets
formal definition initial valueflatapplies totransformable elementsinheritednocom
puted valueas specifiedanimation typediscretecreates stacking contextyes formal syntax flat | preserve-3d examples transform style demonstration in this example we have a 3d cube created using transforms.
... html <section id="example-element"> <div class="face front">1</div> <div class="face back">2</div> <div class="face right">3</div> <div class="face left">4</div> <div class="face top">5</div> <div class="face bottom">6</div> </section> <div class="checkbox"> <label for="preserve"><code>preserve-3d</code></label> <in
put type="checkbox" id="preserve" checked> </div> css #example-element { margin: 50px; width: 100px; height: 100px; transform-style: preserve-3d; transform: rotate3d(1, 1, 1, 30deg); } .face { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; backface-visibility: inherit; font-size: 60px; color: #fff; } .front {...
transition-timing-function - CSS: Cascading Style Sheets
the step timing functions divides the in
put time into a specified number of intervals that are equal in length.
... formal definition initial valueeaseapplies toall elements, ::before and ::after pseudo-elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax <timing-function>#where <timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>where <cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to tra...
translate - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies totransformable elementsinheritednopercentagesrefer to the size of bounding boxcom
puted valueas specified, but with relative lengths converted into absolute lengthsanimation typea transformcreates stacking contextyes formal syntax none | <length-percentage> [ <length-percentage> <length>?
... initial valuenoneapplies totransformable elementsinheritednopercentagesrefer to the size of bounding boxcom
puted valueas specified, but with relative lengths converted into absolute lengthsanimation typea transformcreates stacking contextyes ...
visibility - CSS: Cascading Style Sheets
for xul elements, the com
puted size of the element is always zero, regardless of other styles that would normally affect the size, although margins still take effect.
... formal definition initial valuevisibleapplies toall elementsinheritedyescom
puted valueas specifiedanimation typea visibility formal syntax visible | hidden | collapse examples basic example html <p class="visible">the first paragraph is visible.</p> <p class="not-visible">the second paragraph is not visible.</p> <p class="visible">the third paragraph is visible.
word-break - CSS: Cascading Style Sheets
note: in contrast to word-break: break-word and overflow-wrap: break-word (see overflow-wrap), word-break: break-all will create a break at the exact place where text would otherwise overflow its container (even if
putting an entire word on its own line would negate the need for a break).
... formal definition initial valuenormalapplies toall elementsinheritedyescom
puted valueas specifiedanimation typediscrete formal syntax normal | break-all | keep-all | break-word examples html <p>1.
writing-mode - CSS: Cascading Style Sheets
formal definition initial valuehorizontal-tbapplies toall elements except table row groups, table column groups, table rows, and table columnsinheritedyescom
puted valueas specifiedanimation typediscrete formal syntax horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr examples using multiple writing modes this example demonstrates all of the writing modes, showing each with text in various languages.
...ical-rl; -webkit-writing-mode: vertical-rl; -ms-writing-mode: vertical-rl; } .example.text4 span, .example.text4 { writing-mode: sideways-lr; -webkit-writing-mode: sideways-lr; -ms-writing-mode: sideways-lr; } .example.text5 span, .example.text5 { writing-mode: sideways-rl; -webkit-writing-mode: sideways-rl; -ms-writing-mode: sideways-rl; } result this image shows what the out
put should look like, in case your browser's support for writing-mode is incomplete: specifications specification status comment css writing modes level 4the definition of 'writing-mode' in that specification.
z-index - CSS: Cascading Style Sheets
formal definition initial valueautoapplies topositioned elementsinheritednocom
puted valueas specifiedanimation typean integercreates stacking contextyes formal syntax auto | <integer> examples visually layering elements html <div class="dashed-box">dashed box <span class="gold-box">gold box</span> <span class="green-box">green box</span> </div> css .dashed-box { position: relative; z-index: 1; border: dashed; height: 8em; margin-bottom: 1em; margin-top...
...: 2em; } .gold-box { position: absolute; z-index: 3; /*
put .gold-box above .green-box and .dashed-box */ background: gold; width: 80%; left: 60px; top: 3em; } .green-box { position: absolute; z-index: 2; /*
put .green-box above .dashed-box */ background: lightgreen; width: 20%; left: 65%; top: -25px; height: 7em; opacity: 0.9; } result specifications specification status comment css level 2 (revision 1)the definition of 'z-index' in that specification.
CSS: Cascading Style Sheets
we have
put together a course that includes all the essential information you need to work towards your goal.
... css key concepts: the syntax and forms of the language specificity, inheritance and the cascade css units and values box model and margin collapse the containing block stacking and block-formatting contexts initial, com
puted, used, and actual values css shorthand properties css flexible box layout css grid layout media queries animation cookbook the css layout cookbook aims to bring together recipes for common layout patterns, things you might need to implement in your sites.
Ajax - Developer guides
filereader api the filereader api lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's com
puter, using file or blob objects to specify the file or data to read.
... file objects may be obtained from a filelist object returned as a result of a user selecting files using the <in
put> element, from a drag and drop operation's datatransfer object, or from the mozgetasfile() api on an htmlcanvaselement.
Live streaming web audio and video - Developer guides
live streaming technology is often employed to relay live events such as sports, concerts and more generally tv and radio programmes that are out
put live.
... often shortened to just streaming, live streaming is the process of transmitting media 'live' to com
puters and devices.
Web Audio playbackRate explained - Developer guides
e is a multiplier applied to the original rate.) a complete example let's create a <video> element first, and set up video and playback rate controls in html: <video id="myvideo" controls> <source src="https://udn.realityripple.com/samples/6f/08625b424a.m4v" type='video/mp4' /> <source src="https://udn.realityripple.com/samples/5b/8cd6da9c65.webm" type='video/webm' /> </video> <form> <in
put id="pbr" type="range" value="1" min="0.5" max="4" step="0.1" > <p>playback rate <span id="currentpbr">1</span></p> </form> and apply some javascript to it: window.onload = function () { var v = document.getelementbyid("myvideo"); var p = document.getelementbyid("pbr"); var c = document.getelementbyid("currentpbr"); p.addeventlistener('in
put',function(){ c.innerhtml = p.value; ...
... v.playbackrate = p.value; },false); }; finally, we listen for the in
put event firing on the <in
put> element, allowing us to react to the playback rate control being changed.
Challenge solutions - Developer guides
solution one way to do this is to
put comment delimiters around the rule for .carrot: /* .carrot { color: orange; } */ text styles big initial letters challenge without changing anything else, make all six initial letters twice the size in the browser's default serif font.
... solution the following rule
puts borders around only <td> elements that are inside the <tbody> element of the table with id=demo-table: #demo-table tbody td { border:1px solid #7a7; } media separate print style file challenge move the print-specific style rules to a separate css file and import them into your style4.css stylesheet.
Creating and triggering events - Developer guides
const form = document.queryselector('form'); const textarea = document.queryselector('textarea'); // create a new event, allow bubbling, and provide any data you want to pass to the "detail" property const eventawesome = new customevent('awesome', { bubbles: true, detail: { text: () => textarea.value } }); // the form element listens for the custom "awesome" event and then consoles the out
put of the passed text() method form.addeventlistener('awesome', e => console.log(e.detail.text())); // as the user types, the textarea inside the form dispatches/triggers the event to fire, and uses itself as the starting point textarea.addeventlistener('in
put', e => e.target.dispatchevent(eventawesome)); creating and dispatching events dynamically elements can listen for events that haven't bee...
...n created yet: <form> <textarea></textarea> </form> const form = document.queryselector('form'); const textarea = document.queryselector('textarea'); form.addeventlistener('awesome', e => console.log(e.detail.text())); textarea.addeventlistener('in
put', function() { // create and dispatch/trigger an event on the fly // note: optionally, we've also leveraged the "function expression" (instead of the "arrow function expression") so "this" will represent the element this.dispatchevent(new customevent('awesome', { bubbles: true, detail: { text: () => textarea.value } })) }); triggering built-in events this example demonstrates simulating a click (that is programmatically generating a click event) on a checkbox using dom methods.
Making content editable - Developer guides
: 200px; border: 1px #000000 solid; padding: 12px; overflow: scroll; } #textbox #sourcetext { padding: 0; margin: 0; min-width: 498px; min-height: 200px; } #editmode label { cursor: pointer; } </style> </head> <body onload="initdoc();"> <form name="compform" method="post" action="sample.php" onsubmit="if(validatemode()){this.mydoc.value=odoc.innerhtml;return true;}return false;"> <in
put type="hidden" name="mydoc"> <div id="toolbar1"> <select onchange="formatdoc('formatblock',this[this.selectedindex].value);this.selectedindex=0;"> <option selected>- formatting -</option> <option value="h1">title 1 <h1></option> <option value="h2">title 2 <h2></option> <option value="h3">title 3 <h3></option> <option value="h4">title 4 <h4></option> <option value="h5">title...
...a0cb/i1+3yitha7prkiphvbups+/fvrvv8/f///////////////////////////////////////////////yh5baeaab8alaaaaaawabyaaawn4ceozgmeakqubgsuspvbsyfjjvds6njlb0khr4akbcmfscgbqaocwjf5gwquvyksfbwze+awibv0ghfog2ewidchjwriqo9e2fx4xd5r+b0ddaenbxbhbhn2dgwdaqfjjyvhcqyrfgoidgiqjawtcqmriwwmfgicnvcaaamoak+blaortluyt7i5uiuhads=" /> </div> <div id="textbox" contenteditable="true"><p>lorem ipsum</p></div> <p id="editmode"><in
put type="checkbox" name="switchmode" id="switchbox" onchange="setdocmode(this.checked);" /> <label for="switchbox">show html</label></p> <p><in
put type="submit" value="send" /></p> </form> </body> </html> note: if you want to see how to standardize the creation and the insertion of your editor in your page, please see our more complete rich-text editor example.
Using HTML sections and outlines - Developer guides
createelement("section"); document.createelement("time"); </script> <![endif]--> as a last precaution, you could also add an explicit <noscript> element inside the <head> element to warn any users that have javascript disabled that your page relies on javascript: <noscript> <p><strong>this web page requires javascript to be enabled.</strong></p> <p>javascript is an object-oriented com
puter programming language commonly used to create interactive effects within web browsers.</p> <p><a href="https://goo.gl/koeeaj">how to enable javascript?</a></p> </noscript> this leads to the following code to allow the support of the html5 sections and headings elements in non-html5 browsers, even for internet explorer (8 and older), with a proper fallback for the case where this latter b...
...reateelement("article"); document.createelement("aside"); document.createelement("footer"); document.createelement("header"); document.createelement("nav"); document.createelement("section"); document.createelement("time"); </script> <![endif]--> <noscript> <p><strong>this web page requires javascript to be enabled.</strong></p> <p>javascript is an object-oriented com
puter programming language commonly used to create interactive effects within web browsers.</p> <p><a href="https://goo.gl/koeeaj">how to enable javascript?</a></p> </noscript> note: this code will also cause the html validator to return errors.
Mobile Web Development - Developer guides
designing for mobile devices mobile devices have quite different hardware characteristics compared with desktop or laptop com
puters.
...they usually have touch screens for user in
put.
Developer guides
user in
put and controls modern web user in
put goes beyond simple mouse and keyboard: think of touchscreens for example.
... this article provides recommendations for managing user in
put and implementing controls in open web apps, along with faqs, real-world examples, and links to further information for anyone needing more detailed information on the underlying technologies.
DASH Adaptive Streaming for HTML 5 Video - HTML: Hypertext Markup Language
webm_dash_manifest -i video_320x180_500k.webm \ -f webm_dash_manifest -i video_640x360_750k.webm \ -f webm_dash_manifest -i video_1280x720_1500k.webm \ -f webm_dash_manifest -i my_audio.webm \ -c copy \ -map 0 -map 1 -map 2 -map 3 -map 4 \ -f webm_dash_manifest \ -adaptation_sets "id=0,streams=0,1,2,3 id=1,streams=4" \ my_video_manifest.mpd the -map arguments correspond to the in
put files in the sequence they are given; you should have one for each file.
...
put the manifest and the associated video files on your web server or cdn.
<audio>: The Embed Audio element - HTML: Hypertext Markup Language
events event name fired when audioprocess the in
put buffer of a scriptprocessornode is ready to be processed.
... styling with css the <audio> element has no intrinsic visual out
put of its own unless the controls attribute is specified, in which case the browser's default controls are shown.
<blockquote>: The Block Quotation element - HTML: Hypertext Markup Language
<blockquote cite="https://tools.ietf.org/html/rfc1149"> <p>avian carriers can provide high delay, low through
put, and low altitude service.
...the carriers have an intrinsic collision avoidance system, which increases availability.</p> </blockquote> the out
put from this html snippet looks like this: specifications specification status comment html living standardthe definition of '<blockquote>' in that specification.
<cite>: The Citation element - HTML: Hypertext Markup Language
usage notes in the context of the <cite> element, a creative work that might be cited could be, for example, one of the following: a book a research paper an essay a poem a musical score a song a play or film script a film a television show a game a sculpture a painting a theatrical production a play an opera a musical an exhibition a legal case report a com
puter program a web site a web page a blog post or comment a forum post or comment a tweet a facebook post a written or oral statement and so forth.
... example <p>more information can be found in <cite>[iso-0000]</cite>.</p> the html above out
puts: specifications specification status comment html living standardthe definition of '<cite>' in that specification.
<code>: The Inline Code element - HTML: Hypertext Markup Language
the html <code> element displays its contents styled in a fashion intended to indicate that the text is a short fragment of com
puter code.
... example a paragraph of text that includes <code>: <p>the function <code>selectall()</code> highlights all the text in the in
put field so the user can, for example, copy or delete the text.</p> the out
put generated by this html looks like this: notes to represent multiple lines of code, wrap the <code> element within a <pre> element.
<col> - HTML: Hypertext Markup Language
possible values for this attribute are: baseline, which will
put the text as close to the bottom of the cell as it is possible, but align it on the baseline of the characters instead of the bottom of them.
... bottom, which will
put the text as close to the bottom of the cell as it is possible; middle, which will center the text in the cell; and top, which will
put the text as close to the top of the cell as it is possible.
<colgroup> - HTML: Hypertext Markup Language
possible values for this attribute are: baseline, which will
put the text as close to the bottom of the cell as it is possible, but align it on the baseline of the characters instead of the bottom of them.
... bottom, which will
put the text as close to the bottom of the cell as it is possible; middle, which will center the text in the cell; and top, which will
put the text as close to the top of the cell as it is possible.
<dialog>: The Dialog element - HTML: Hypertext Markup Language
ct> <option></option> <option>brine shrimp</option> <option>red panda</option> <option>spider monkey</option> </select> </label></p> <menu> <button value="cancel">cancel</button> <button id="confirmbtn" value="default">confirm</button> </menu> </form> </dialog> <menu> <button id="updatedetails">update details</button> </menu> <out
put aria-live="polite"></out
put> javascript var updatebutton = document.getelementbyid('updatedetails'); var favdialog = document.getelementbyid('favdialog'); var out
putbox = document.queryselector('out
put'); var selectel = document.queryselector('select'); var confirmbtn = document.getelementbyid('confirmbtn'); // "update details" button opens the <dialog> modally updatebutton.addeventlistener('...
...click', function onopen() { if (typeof favdialog.showmodal === "function") { favdialog.showmodal(); } else { alert("the <dialog> api is not supported by this browser"); } }); // "favorite animal" in
put sets the value of the submit button selectel.addeventlistener('change', function onselect(e) { confirmbtn.value = selectel.value; }); // "confirm" button of form triggers "close" on dialog because of [method="dialog"] favdialog.addeventlistener('close', function onclose() { out
putbox.value = favdialog.returnvalue + " button clicked - " + (new date()).tostring(); }); result specifications specification status comment html living standardthe definition of '<dialog>' in that specification.
<fieldset>: The Field Set element - HTML: Hypertext Markup Language
<form action="#"> <fieldset> <legend>simple fieldset</legend> <in
put type="radio" id="radio"> <label for="radio">spirit of radio</label> </fieldset> </form> disabled fieldset this example shows a disabled <fieldset> with two controls inside it.
... <form action="#"> <fieldset disabled> <legend>disabled fieldset</legend> <div> <label for="name">name: </label> <in
put type="text" id="name" value="chris"> </div> <div> <label for="pwd">archetype: </label> <in
put type="password" id="pwd" value="wookie"> </div> </fieldset> </form> technical summary content categories flow content, sectioning root, listed, form-associated element, palpable content.
<iframe>: The Inline Frame element - HTML: Hypertext Markup Language
because each browsing context is a complete document environment, every <iframe> in a page requires increased memory and other com
puting resources.
...this can be used in the target attribute of the <a>, <form>, or <base> elements; the formtarget attribute of the <in
put> or <button> elements; or the windowname parameter in the window.open() method.
<keygen> - HTML: Hypertext Markup Language
autofocus this boolean attribute lets you specify that the control should have in
put focus when the page loads, unless the user overrides it, for example by typing in a different control.
... here is an example form submission as it would be delivered to a cgi program by the http server: commonname=john+doe&email=doe@foo.com&org=foobar+com
puting+corp.& orgunit=bureau+of+bureaucracy&locality=anytown&state=california&country=us& key=mihfmhewxdanbgkqhkig9w0baqefaanladbiakeanx0tiljromuue%2bptwbre6xfv%0awtkqbsshxk5zhcuwcwyvcniq9b82qhjdoacdd34rqfcaind46fxkqunb0mvkzqid%0aaqabfhfnb3ppbgxhsxnneuzyawvuzdanbgkqhkig9w0baqqfaanbaakv2eex2n%2fs%0ar%2f7ijnrowlszsmttiqteb%2badwhgj9u1xruroilq%2fo2cuqxifzcnzkyakwp4dubqw%0ai0%2f%2frgbvmco%3d speci...
<menuitem> - HTML: Hypertext Markup Language
(menu items for indirect commands gain checkboxes or radio buttons when defined against elements <in
put type="checkbox"> and <in
put type="radio">.) content categories none.
... default this boolean attribute indicates use of the same command as the menu's subject element (such as a button or in
put).
<nextid>: The NeXT ID element (Obsolete) - HTML: Hypertext Markup Language
<form>, <in
put>, <textarea>, <select>, and <option> html version 2 strict level 1 this is like regular level 1 but it also excludes these depreciated elements, along with such constructs as nesting a header (<h*> element) within a link (<a> element) html version 2 level 2 this is the default and includes and permits all html level 2 functions and elements and attributes html version 2 strict level 2 this ...
...excludes these depreciated elements and also forbids such constructs as nesting a header (<h*> element) within a link (<a> element), or having a forms <in
put> element which is not within a block level element such as <p> html version 3.2 <nextid> has vanished altogether, never to be heard from again.
<sup>: The Superscript element - HTML: Hypertext Markup Language
for example: <p>one of the most common equations in all of physics is <var>e</var>=<var>m</var><var>c</var><sup>2</sup>.<p> the resulting out
put looks like this: superior lettering superior lettering is not technically the same thing as superscript.
...among the most common uses of superior lettering is the presentation of certain abbreviations in french: <p>robert a présenté son rapport à m<sup>lle</sup> bernard.</p> the resulting out
put: ordinal numbers ordinal numbers, such as "fourth" in english or "quinto" in spanish may be abbreviated using numerals and language-specific text rendered in superscript: <p>the ordinal number "fifth" can be abbreviated in various languages as follows:</p> <ul> <li>english: 5<sup>th</sup></li> <li>french: 5<sup>ème</sup></li> </ul> the out
put: specifications specification status comment html living standardthe definition of '<sub> and <sup>' in that specification.
<tfoot>: The Table Foot element - HTML: Hypertext Markup Language
possible values for this attribute are: baseline, which will
put the text as close to the bottom of the cell as it is possible, but align it on the baseline of the characters instead of the bottom of them.
... bottom, which will
put the text as close to the bottom of the cell as it is possible; middle, which will center the text in the cell; and top, which will
put the text as close to the top of the cell as it is possible.
<thead>: The Table Head element - HTML: Hypertext Markup Language
possible values for this attribute are: baseline, which will
put the text as close to the bottom of the cell as it is possible, but align it on the baseline of the characters instead of the bottom of them.
... bottom, which will
put the text as close to the bottom of the cell as it is possible; middle, which will center the text in the cell; top, which will
put the text as close to the top of the cell as it is possible.
<tr>: The Table Row element - HTML: Hypertext Markup Language
result let's actually look at the out
put first this time: notice how the heading area here is actually two rows, one with "name", "id", "membership dates", and "balance" headings, and the other with "joined" and "canceled", which are sub-headings below "membership dates".
... table { border: 1px solid black; } th, td { border: 1px solid black; } result the out
put is entirely unchanged, despite the addition of useful contextual information under the hood: basic styling as is the case with all parts of a table, you can change the appearance of a table row and its contents using css.
<var>: The Variable element - HTML: Hypertext Markup Language
usage notes related elements other elements that are used in contexts in which <var> is commonly used include: <code>: the html code element <kbd>: the html keyboard in
put element <samp>: the html sample out
put element if you encounter code that is mistakenly using <var> for style purposes rather than semantic purposes, you should either use a <span> with appropriate css or, an appropriate semantic element among the following: <em> <i> <q> default style most browsers apply font-style to "italic" when rendering <var>.
... <p>a simple equation: <var>x</var> = <var>y</var> + 2 </p> the out
put: overriding the default style using css, you can override the default style for the <var> element.
Inline elements - HTML: Hypertext Markup Language
you can't
put block elements inside inline elements.
... list of "inline" elements the following elements are inline by default (although block and inline elements are no longer defined in html 5, use content categories instead): <a> <abbr> <acronym> <audio> (if it has visible controls) <b> <bdi> <bdo> <big> <br> <button> <canvas> <cite> <code> <data> <datalist> <del> <dfn> <em> <embed> <i> <iframe> <img> <in
put> <ins> <kbd> <label> <map> <mark> <meter> <noscript> <object> <out
put> <picture> <progress> <q> <ruby> <s> <samp> <script> <select> <slot> <small> <span> <strong> <sub> <sup> <svg> <template> <textarea> <time> <u> <tt> <var> <video> <wbr> see also block-level elements html element reference display content categories block and inline layout in normal flow...
HTML: Hypertext Markup Language
html markup includes special "elements" such as <head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <nav>, <out
put>, <progress>, <video>, <ul>, <ol>, <li> and many others.
... we have
put together a course that includes all the essential information you need to work towards your goal.
HTTP conditional requests - HTTP
for unsafe methods, like
put, which usually uploads a document, the conditional request can be used to upload the document, only if the original it is based on is the same as that stored on the server.
... with the
put method you are able to implement this.
Content negotiation - HTTP
client hints advertise what kind of device the user agent runs on (for example, if it is a desktop com
puter or a mobile device).
...the inner format of a comment is not defined by the standard, though several browser
put several tokens in it, separated by ';'.
Accept-Encoding - HTTP
this may be the case with some image formats; the server is overloaded and cannot afford the com
putational overhead induced by the compression requirement.
... typically, microsoft recommends not to compress if a server uses more than 80% of its com
putational power.
CSP: report-uri - HTTP
$current_domain; http_response_code(204); // http 204 no content $json_data = file_get_contents('php://in
put'); // we pretty print the json before adding it to the log file if ($json_data = json_decode($json_data)) { $json_data = json_encode($json_data, json_pretty_print | json_unescaped_slashes); if (!file_exists($log_file)) { // send an email $message = "the following content-security-policy violation occurred on " .
... $log_file; mail($email_address, $email_subject, $message, 'content-type: text/plain;charset=utf-8'); } else if (filesize($log_file) > $log_file_size_limit) { exit(0); } file_
put_contents($log_file, $json_data, file_append | lock_ex); } specifications specification status comment content security policy level 3the definition of 'report-uri' in that specification.
Content-Type - HTTP
in requests, (such as post or
put), the client tells the server what type of data is actually sent.
... <form action="/" method="post" enctype="multipart/form-data"> <in
put type="text" name="description" value="some text"> <in
put type="file" name="myfile"> <button type="submit">submit</button> </form> the request looks something like this (less interesting headers are omitted here): post /foo http/1.1 content-length: 68137 content-type: multipart/form-data; boundary=---------------------------974767299852498929531610575 -----------------------------974767299...
Feature-Policy - HTTP
camera controls whether the current document is allowed to use video in
put devices.
... microphone controls whether the current document is allowed to use audio in
put devices.
If-Match - HTTP
for
put and other non-safe methods, it will only upload the resource in this case.
... for other methods, and in particular for
put, if-match can be used to prevent the lost update problem.
If-None-Match - HTTP
for other methods, and in particular for
put, if-none-match used with the * value can be used to save a file not known to exist, guaranteeing that another upload didn't happen before, losing the data of the previous
put; this problem is a variation of the lost update problem.
...they are only useful when uploading a resource, usually with
put, to check if another resource with the identity has already been uploaded before.
POST - HTTP
the difference between
put and post is that
put is idempotent: calling it once or several times successively has the same effect (that is no side effect), where successive identical post may have additional effects, like passing an order several times.
...in this case, the content type is selected by
putting the adequate string in the enctype attribute of the <form> element or the formenctype attribute of the <in
put> or <button> elements: application/x-www-form-urlencoded: the keys and values are encoded in key-value tuples separated by '&', with a '=' between the key and the value.
HTTP request methods - HTTP
put the
put method replaces all current representations of the target resource with the request payload.
... specifications specification title comment rfc 7231, section 4: request methods hypertext transfer protocol (http/1.1): semantics and content specifies get, head, post,
put, delete, connect, options, trace.
Redirections in HTTP - HTTP
used to redirect after a
put or a post, so that refreshing the result page doesn't re-trigger the operation.
... typically, you don't want your users to resend
put, post or delete requests.
Closures - JavaScript
<p id="help">helpful notes will appear here</p> <p>e-mail: <in
put type="text" id="email" name="email"></p> <p>name: <in
put type="text" id="name" name="name"></p> <p>age: <in
put type="text" id="age" name="age"></p> function showhelp(help) { document.getelementbyid('help').innerhtml = help; } function setuphelp() { var helptext = [ {'id': 'email', 'help': 'your e-mail address'}, {'id': 'name', 'help': 'your full name'}, {'id': 'age', 'hel...
... the helptext array defines three helpful hints, each associated with the id of an in
put field in the document.
JavaScript data types and data structures - JavaScript
strings are the common denominator of a lot of apis (in
put fields, local storage values, xmlhttprequest responses when using responsetext, etc.) and it can be tempting to only work with strings.
... objects in com
puter science, an object is a value in memory which is possibly referenced by an identifier.
Equality comparisons and sameness - JavaScript
even if your requirements involve having comparisons between two nan values evaluate to true, generally it is easier to special-case the nan checks (using the isnan method available from previous versions of ecmascript) than it is to work out how surrounding com
putations might affect the sign of any zeros you encounter in your comparison.
... here's a non-exhaustive list of built-in methods and operators that might cause a distinction between -0 and +0 to manifest itself in your code: - (unary negation) let stoppingforce = obj.mass * -obj.velocity; if obj.velocity is 0 (or com
putes to 0), a -0 is introduced at that place and propogates out into stoppingforce.
Concurrency model and the event loop - JavaScript
to do so, the message is removed from the queue and its corresponding function is called with the message as an in
put parameter.
...handling i/o is typically performed via events and callbacks, so when the application is waiting for an indexeddb query to return or an xhr request to return, it can still process other things like user in
put.
Loops and iteration - JavaScript
you can think of a loop as a com
puterized version of the game where you tell someone to take x steps in one direction, then y steps in another.
...lectform"> <p> <label for="musictypes">choose some music types, then click the button below:</label> <select id="musictypes" name="musictypes" multiple="multiple"> <option selected="selected">r&b</option> <option>jazz</option> <option>blues</option> <option>new age</option> <option>classical</option> <option>opera</option> </select> </p> <p><in
put id="btn" type="button" value="how many are selected?" /></p> </form> <script> function howmany(selectobject) { let numberselected = 0; for (let i = 0; i < selectobject.options.length; i++) { if (selectobject.options[i].selected) { numberselected++; } } return numberselected; } let btn = document.getelementbyid('btn'); btn.addeventlistener('click', function() { alert('num...
Inheritance and the prototype chain - JavaScript
try the following code: function dosomething(){} dosomething.prototype.foo = "bar"; // add a property onto the prototype var dosomeinstancing = new dosomething(); dosomeinstancing.prop = "some value"; // add a property onto the object console.log( dosomeinstancing ); this results in an out
put similar to the following: { prop: "some value", __proto__: { foo: "bar", constructor: ƒ dosomething(), __proto__: { constructor: ƒ object(), hasownproperty: ƒ hasownproperty(), isprototypeof: ƒ isprototypeof(), propertyisenumerable: ƒ propertyisenumerable(), tolocalestring: ƒ tolocalestring(), ...
...additionally, the initialization of the constructor may
put unwanted methods onto the object.
Private class fields - JavaScript
class classwithprivatemethod { #privatemethod() { return 'hello world' } getprivatemessage() { return this.#privatemethod() } } const instance = new classwithprivatemethod() console.log(instance.getprivatemessage()) // expected out
put: "hello world" private instance methods may be generator, async, or async generator functions.
... private getters and setters are also possible: class classwithprivateaccessor { #message get #decoratedmessage() { return `✨${this.#message}✨` } set #decoratedmessage(msg) { this.#message = msg } constructor() { this.#decoratedmessage = 'hello world' console.log(this.#decoratedmessage) } } new classwithprivateaccessor(); // expected out
put: "✨hello world✨" specifications specification public and private instance fieldsthe definition of 'fielddefinition' in that specification.
Classes - JavaScript
// unnamed let rectangle = class { constructor(height, width) { this.height = height; this.width = width; } }; console.log(rectangle.name); // out
put: "rectangle" // named let rectangle = class rectangle2 { constructor(height, width) { this.height = height; this.width = width; } }; console.log(rectangle.name); // out
put: "rectangle2" note: class expressions are subject to the same hoisting restrictions as described in the class declarations section.
... a function with a superclass as in
put and a subclass extending that superclass as out
put can be used to implement mix-ins in ecmascript: let calculatormixin = base => class extends base { calc() { } }; let randomizermixin = base => class extends base { randomize() { } }; a class that uses these mix-ins can then be written like this: class foo { } class bar extends calculatormixin(randomizermixin(foo)) { } specifications ...
SyntaxError: missing : after property id - JavaScript
var obj = { propertykey: null }; com
puted properties if you create a property key from an expression, you need to use square brackets.
... otherwise the property name can't be com
puted: var obj = { 'b'+'ar': 'foo' }; // syntaxerror: missing : after property id
put the expression in brackets []: var obj = { ['b'+'ar']: 'foo' }; ...
Arrow function expressions - JavaScript
var func = (a, b, c) => 1; // syntaxerror: expected expression, got '=>' however, this can be amended by
putting the line break after the arrow or using parentheses/braces as seen below to ensure that the code stays pretty and fluffy.
... you can also
put line breaks between arguments.
Method definitions - JavaScript
syntax const obj = { get property() {}, set property(value) {}, property( parameters… ) {}, *generator( parameters… ) {}, async property( parameters… ) {}, async* generator( parameters… ) {}, // with com
puted keys get [property]() {}, set [property](value) {}, [property]( parameters… ) {}, *[generator]( parameters… ) {}, async [property]( parameters… ) {}, async* [generator]( parameters… ) {}, }; description the shorthand syntax is similar to the getter and setter syntax introduced in ecmascript 2015.
... const obja = { method() {} } new obja.method // typeerror: obj.method is not a constructor const objb = { * g() {} } new objb.g // typeerror: obj.g is not a constructor (changed in es2016) examples simple test case const obj = { a: 'foo', b() { return this.a } }; console.log(obj.b()) // "foo" com
puted property names the shorthand syntax also supports com
puted property names.
Rest parameters - JavaScript
function myfun(a, b, ...manymoreargs) { console.log("a", a) console.log("b", b) console.log("manymoreargs", manymoreargs) } myfun("one", "two", "three", "four", "five", "six") // console out
put: // a, one // b, two // manymoreargs, [three, four, five, six] difference between rest parameters and the arguments object there are three main differences between rest parameters and the arguments object: rest parameters are only the ones that haven't been given a separate name (i.e.
...even though there is just one value, the last argument still gets
put into an array.
setter - JavaScript
expression starting with ecmascript 2015, you can also use expressions for a com
puted property name to bind to the given function.
... const o = {a: 0}; object.defineproperty(o, 'b', { set: function(x) { this.a = x / 2; } }); o.b = 10; // runs the setter, which assigns 10 / 2 (5) to the 'a' property console.log(o.a) // 5 using a com
puted property name const expr = 'foo'; const obj = { baz: 'bar', set [expr](v) { this.baz = v; } }; console.log(obj.baz); // "bar" obj.foo = 'baz'; // run the setter console.log(obj.baz); // "baz" specifications specification ecmascript (ecma-262)the definition of 'method definitions' in that specification.
Array.prototype.reduceRight() - JavaScript
lback, x) => { settimeout(callback, randint(1000), x * 3); }; const sub2 = (callback, x) => { settimeout(callback, randint(1000), x - 2); }; const split = (callback, x) => { settimeout(callback, randint(1000), x, x); }; const add = (callback, x, y) => { settimeout(callback, randint(1000), x + y); }; const div4 = (callback, x) => { settimeout(callback, randint(1000), x / 4); }; const com
putation = waterfall(add5, mult3, sub2, split, add, div4); com
putation(console.log, 5) // -> 14 // same as: const com
putation2 = (in
put, callback) => { const f6 = x=> div4(callback, x); const f5 = (x, y) => add(f6, x, y); const f4 = x => split(f5, x); const f3 = x => sub2(f4, x); const f2 = x => mult3(f3, x); add5(f2, in
put); } difference between reduce and reducerigh...
...it’s a flowing right-to-left, calling each function with the out
put of the last one.
Array.prototype.sort() - JavaScript
a compare function:', numericstringarray.sort()); console.log('sorted with comparenumbers:', numericstringarray.sort(comparenumbers)); console.log('mixednumericarray:', mixednumericarray.join()); console.log('sorted without a compare function:', mixednumericarray.sort()); console.log('sorted with comparenumbers:', mixednumericarray.sort(comparenumbers)); this example produces the following out
put.
... as the out
put shows, when a compare function is used, numbers sort correctly whether they are numbers or numeric strings.
Array - JavaScript
operties and elements, see this example and then refer to the table below: // match one d followed by one or more b's followed by one d // remember matched b's and the following d // ignore case const myre = /d(b+)(d)/i const myarray = myre.exec('cdbbdbsbz') the properties and elements returned from this match are as follows: property/element description example in
put read only the original string against which the regular expression was matched.
...,'p','p','p'], [' ',' ',' ',' ',' ',' ',' ',' '], [' ',' ',' ',' ',' ',' ',' ',' '], [' ',' ',' ',' ',' ',' ',' ',' '], [' ',' ',' ',' ',' ',' ',' ',' '], ['p','p','p','p','p','p','p','p'], ['r','n','b','q','k','b','n','r'] ] console.log(board.join('\n') + '\n\n') // move king's pawn forward 2 board[4][4] = board[6][4] board[6][4] = ' ' console.log(board.join('\n')) here is the out
put: r,n,b,q,k,b,n,r p,p,p,p,p,p,p,p , , , , , , , , , , , , , , , , , , , , , , , , , , , , p,p,p,p,p,p,p,p r,n,b,q,k,b,n,r r,n,b,q,k,b,n,r p,p,p,p,p,p,p,p , , , , , , , , , , , , , , , , , ,p, , , , , , , , , , p,p,p,p, ,p,p,p r,n,b,q,k,b,n,r using an array to tabulate a set of values values = [] for (let x = 0; x < 10; x++){ values.push([ 2 ** x, 2 * x ** 2 ]) } console.table(va...
Date.prototype.toLocaleString() - JavaScript
however, this might change in the future, and isn't guaranteed for all languages; out
put variations are by design, and allowed by the specification.
... most notably, the ie and edge browsers insert bidirectional control characters around dates, so the out
put text will flow properly when concatenated with other text.
Date - JavaScript
this date and time is the same as the unix epoch, which is the predominant base value for com
puter-recorded date and time values.
...particularly useful are the functions that out
put the date and time in coordinated universal time (utc), the global standard time defined by the world time standard.
Intl.DateTimeFormat.prototype.format() - JavaScript
however, this might change in the future and isn't guaranteed for all the languages — out
put variations are by design and allowed by the specification.
... most notably, the ie and edge browsers insert bidirectional control characters around dates, so the out
put text will flow properly when concatenated with other text.
Intl.DateTimeFormat.prototype.formatToParts() - JavaScript
examples datetimeformat out
puts localized, opaque strings that cannot be manipulated directly: var date = date.utc(2012, 11, 17, 3, 0, 42); var formatter = new intl.datetimeformat('en-us', { weekday: 'long', year: 'numeric', month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric', fractionalseconddigits: 3, hour12: true, timezone: 'utc' }); formatter.format(date); // "mond...
...t set in the bag (to any value), the result will include only the relatedyear: let df = new intl.datetimeformat("zh-u-ca-chinese"); df.formattoparts(date.utc(2012, 11, 17, 3, 0, 42)); // return value [ { type: 'relatedyear', value: '2012' }, { type: 'literal', value: '年' }, { type: 'month', value: '十一月' }, { type: 'day', value: '4' } ] in cases where the year would be out
put, .format() may commonly present these side-by-side: let df = new intl.datetimeformat("zh-u-ca-chinese", {year: "numeric"}); df.format(date.utc(2012, 11, 17, 3, 0, 42)); // return value 2012壬辰年 this also makes it possible to mix locale and calendar in both format: let df = new intl.datetimeformat("en-u-ca-chinese", {year: "numeric"}); let date = date.utc(2012, 11, 17, 3, 0, 42); df.fo...
JSON.parse() - JavaScript
throw new syntaxerror("json.parse"); }; } examples using json.parse() json.parse('{}'); // {} json.parse('true'); // true json.parse('"foo"'); // "foo" json.parse('[1, 5, "false"]'); // [1, 5, "false"] json.parse('null'); // null using the reviver parameter if a reviver is specified, the value com
puted by parsing is transformed before being returned.
... specifically, the com
puted value and all its properties (beginning with the most nested properties and proceeding to the original value itself) are individually run through the reviver.
Math.fround() - JavaScript
-1 : 1; if (sign < 0) arg = -arg; // com
pute the exponent (8 bits, signed).
...0 : 1; // com
pute 23 bits of mantissa, inverted to round toward zero.
Object.prototype.constructor - JavaScript
function tree(name) { this.name = name } let thetree = new tree('redwood') console.log('thetree.constructor is ' + thetree.constructor) this example displays the following out
put: thetree.constructor is function tree(name) { this.name = name } changing the constructor of an object the following example shows how to modify the constructor value of generic objects.
... math, new number(), 1, // remains unchanged new object(), {}, new regexp(), /(?:)/, new string(), 'test' // remains unchanged ] for (let i = 0; i < types.length; i++) { types[i].constructor = type types[i] = [types[i].constructor, types[i] instanceof type, types[i].tostring()] } console.log(types.join('\n')) this example displays the following out
put (comments added for reference): function type() {},false, // new array() function type() {},false, // [] function type() {},false,false // new boolean() function boolean() { [native code] },false,true // true function type() {},false,mon sep ...
Object.create() - JavaScript
note that such a different order may arise statically via disparate fixed codings such as here, but also dynamically via whatever the order any such property-adding code-branches actually get executed at runtime as depends on in
puts and/or random-variables.
...rectangle.prototype.constructor = rectangle; var rect = new rectangle(); console.log('is rect an instance of rectangle?', rect instanceof rectangle); // true console.log('is rect an instance of shape?', rect instanceof shape); // true rect.move(1, 1); // out
puts, 'shape moved.' if you wish to inherit from multiple objects, then mixins are a possibility.
Promise.any() - JavaScript
const perr = new promise((resolve, reject) => { reject("always fails"); }); const pslow = new promise((resolve, reject) => { settimeout(resolve, 500, "done eventually"); }); const pfast = new promise((resolve, reject) => { settimeout(resolve, 100, "done quick"); }); promise.any([perr, pslow, pfast]).then((value) => { console.log(value); // pfast fulfils first }) // expected out
put: "done quick" rejections with aggregateerror promise.any() rejects with an aggregateerror if no promise fulfils.
... const perr = new promise((resolve, reject) => { reject('always fails'); }); promise.any([perr]).catch((err) => { console.log(err); }) // expected out
put: "aggregateerror: no promise in promise.any was resolved" displaying the first image loaded in this example, we have a function that fetches an image and returns a blob.
Promise - JavaScript
not to be confused with: several other languages have mechanisms for lazy evaluation and deferring a com
putation, which they also call "promises", e.g.
...promisea.then( (val) => console.log("asynchronous logging has val:",val) ); console.log("immediate logging"); // produces out
put in this order: // immediate logging // asynchronous logging has val: 777 constructor promise() creates a new promise object.
RegExp() constructor - JavaScript
in other words, match the beginning or end of each line (delimited by \n or \r), not only the very beginning or end of the whole in
put string.
...use the constructor function when you know the regular expression pattern will be changing, or you don't know the pattern and are getting it from another source, such as user in
put.
RegExp.prototype.exec() - JavaScript
return value if the match succeeds, the exec() method returns an array (with extra properties index and in
put; see below) and updates the lastindex property of the regular expression object.
... 4 in
put the original string that was matched against.
RegExpInstance.lastIndex - JavaScript
if lastindex is equal to or less than the length of the string and if the regular expression matches the empty string, then the regular expression matches in
put starting from lastindex.
... if lastindex is equal to the length of the string and if the regular expression does not match the empty string, then the regular expression mismatches in
put, and lastindex is reset to 0.
String.prototype.anchor() - JavaScript
syntax str.anchor(name) parameters name a string representing a name value to
put into the generated <a name="..."> start tag.
... examples using anchor() var mystring = 'table of contents'; document.body.innerhtml = mystring.anchor('contents_anchor'); will out
put the following html: <a name="contents_anchor">table of contents</a> specifications specification ecmascript (ecma-262)the definition of 'string.prototype.anchor' in that specification.
String length - JavaScript
s: object.defineproperty(string.prototype, 'charlength', { get () { return getcharacterlength(this); } }); console.log('a\ud87e\udc04z'.charlength); // 3 examples basic usage let x = 'mozilla'; let empty = ''; console.log(x + ' is ' + x.length + ' code units long'); /* "mozilla is 7 code units long" */ console.log('the empty string has a length of ' + empty.length); // expected out
put: "the empty string has a length of 0" assigning to length let mystring = "bluebells"; // attempting to assign a value to a string's .length property has no observable effect.
... mystring.length = 4; console.log(mystring); // expected out
put: "bluebells" console.log(mystring.length); // expected out
put: 9 specifications specification ecmascript (ecma-262) ...
String.prototype.slice() - JavaScript
str2 = str1.slice(1, 8), str3 = str1.slice(4, -2), str4 = str1.slice(12), str5 = str1.slice(30); console.log(str2) // out
put: he morn console.log(str3) // out
put: morning is upon u console.log(str4) // out
put: is upon us.
... console.log(str5) // out
put: "" using slice() with negative indexes the following example uses slice() with negative indexes.
String - JavaScript
console.log(eval(s2.valueof())) // returns the number 4 escape notation special characters can be encoded using escape notation: code out
put \xxx (where xxx is 1–3 octal digits; range of 0–377) iso-8859-1 character / unicode code point between u+0000 and u+00ff \' single quote \" double quote \\ backslash \n new line \r carriage return \v vertical tab \t tab \b backspace \f form feed \uxxxx (wher...
...for example: let out
putstrings = [] for (let i = 0, n = in
putvalues.length; i < n; ++i) { out
putstrings.push(string(in
putvalues[i])); } specifications specification ecmascript (ecma-262)the definition of 'string' in that specification.
Lexical grammar - JavaScript
the source text of ecmascript scripts gets scanned from left to right and is converted into a sequence of in
put elements which are tokens, control characters, line terminators, comments or white space.
...a semicolon is inserted at the end, when the end of the in
put stream of tokens is detected and the parser is unable to parse the single in
put stream as a complete program.
Destructuring assignment - JavaScript
in this example, f() returns the values [1, 2] as its out
put, which can be parsed in a single line with destructuring.
...r: 'samantha smith' }, age: 35 }, { name: 'tom jones', family: { mother: 'norah jones', father: 'richard jones', brother: 'howard jones' }, age: 25 } ]; for (const {name: n, family: {father: f}} of people) { console.log('name: ' + n + ', father: ' + f); } // "name: mike smith, father: harry smith" // "name: tom jones, father: richard jones" com
puted object property names and destructuring com
puted property names, like on object literals, can be used with destructuring.
label - JavaScript
examples using a labeled continue with for loops var i, j; loop1: for (i = 0; i < 3; i++) { //the first for statement is labeled "loop1" loop2: for (j = 0; j < 3; j++) { //the second for statement is labeled "loop2" if (i === 1 && j === 1) { continue loop1; } console.log('i = ' + i + ', j = ' + j); } } // out
put is: // "i = 0, j = 0" // "i = 0, j = 1" // "i = 0, j = 2" // "i = 1, j = 0" // "i = 2, j = 0" // "i = 2, j = 1" // "i = 2, j = 2" // notice how it skips both "i = 1, j = 1" and "i = 1, j = 2" using a labeled continue statement given an array of items and an array of tests, this example counts the number of items that passes all the tests.
...[i])) { continue top; } } itemspassed++; } using a labeled break with for loops var i, j; loop1: for (i = 0; i < 3; i++) { //the first for statement is labeled "loop1" loop2: for (j = 0; j < 3; j++) { //the second for statement is labeled "loop2" if (i === 1 && j === 1) { break loop1; } console.log('i = ' + i + ', j = ' + j); } } // out
put is: // "i = 0, j = 0" // "i = 0, j = 1" // "i = 0, j = 2" // "i = 1, j = 0" // notice the difference with the previous continue example using a labeled break statement given an array of items and an array of tests, this example determines whether all items pass all tests.
MathML documentation index - MathML
27 <ms> mathml, mathml reference, mathml:element, mathml:token elements the mathml <ms> element represents a string literal meant to be interpreted by programming languages and com
puter algebra systems.
... 40 <semantics> mathml, mathml reference, mathml:element in mathml there are two ways to mark up mathematics: presentation mathml is used to control the layout of equations, whereas content mathml is designed to encode the semantic mathematical meaning and to make expressions understandable to com
puter algebra systems.
Animation performance and frame rate - Web Performance
the rendering waterfall the process a browser uses to paint changes to a page when an element is animating css properties can be described as a waterfall consisting of the following steps: recalculate style: when a property for an element changes, the browser must recalculate com
puted styles.
... layout: next, the browser uses the com
puted styles to figure out the position and geometry for the elements.
Recommended Web Performance Timings: How long is too long? - Web Performance
there are no clear set rules as to what constitutes a slow pace when loading pages, but there are specific guidelines for indicating content will load (1 second), idling (50ms), animating (16.7s) and responding to user in
put (50 to 200ms).
...if the thread is busy doing complex javascript execution, the main thread will not be available to react to user in
put, such as pressing a button.
Optimizing startup performance - Web Performance
the most important thing to do to try to help with the main code's startup process is to refactor the code into small pieces that can be done in chunks interspersed across multiple calls to your app's main loop, so that the main thread gets to handle in
put and the like.
...keep in mind, though, that if someone has an older, slower com
puter than yours, they may experience longer delays than you do!
Web Performance
to understand how to improve performance and perceived performance, it helps to understand how the browser works.recommended web performance timings: how long is too long?there are no clear set rules as to what constitutes a slow pace when loading pages, but there are specific guidelines for indicating content will load (1 second), idling (50ms), animating (16.7s) and responding to user in
put (50 to 200ms).the business case for web performanceyou know web performance is important, but how do you convince clients and management to invest in performance and make it a priority.
... glossary terms beacon brotli compression client hints code splitting cssom domain sharding effective connection type first contentful paint first cpu idle first in
put delay first interactive first meaningful paint first paint http http/2 jank latency lazy load long task lossless compression lossy compression main thread minification network throttling packet page load time page prediction parse perceived performance prefetch prerender quic rail real user monitoring resource timing round trip time (rtt) server timing speculative pars...
Media - Progressive web apps (PWAs)
user interfaces css has some special properties for devices that support a user interface, like com
puter displays.
...place your mouse over the items in this list to see the actual pointer shapes in your browser: selector selects pointer indicating a link wait indicating that the program cannot accept in
put progress indicating that the program is working, but can still accept in
put default the default (usually an arrow) an outline property creates an outline that is often used to indicate keyboard focus.
The building blocks of responsive design - Progressive web apps (PWAs)
this is probably a more logical place to
put such information, but the spec is not as well supported as the viewport meta tag, therefore you should stick with that for now.
...another proposal, srcset, was
put forward by apple and takes a slightly different approach, instead providing a new srcset attribute for <img> inside which image references are placed along with "hints" that the browser can use to work out which image is most suitable to display given its viewport size, resolution, etc.
begin - SVG: Scalable Vector Graphics
those are: focus, blur, focusin, focusout, activate, auxclick, click, dblclick, mousedown, mouseenter, mouseleave, mousemove, mouseout, mouseover, mouseup, wheel, beforein
put, in
put, keydown, keyup, compositionstart, compositionupdate, compositionend, load, unload, abort, error, select, resize, scroll, beginevent, endevent, and repeatevent.
... a valid accesskey-value consists of the function accesskey() with the character to be in
put as parameter.
dominant-baseline - SVG: Scalable Vector Graphics
xt dominant-baseline="middle" x="30" y="50">middle</text> <text dominant-baseline="hanging" x="30" y="80">hanging</text> </svg> usage notes value auto | text-bottom | alphabetic | ideographic | middle | central | mathematical | hanging | text-top default value auto animatable yes auto if this property occurs on a <text> element, then the com
puted value depends on the value of the writing-mode attribute.
... if the com
puted baseline-shift value actually shifts the baseline, then the baseline-table font-size component is set to the value of the font-size attribute on the element on which the dominant-baseline attribute occurs, otherwise the baseline-table font-size remains the same as that of the element.
end - SVG: Scalable Vector Graphics
those are: focus, blur, focusin, focusout, activate, auxclick, click, dblclick, mousedown, mouseenter, mouseleave, mousemove, mouseout, mouseover, mouseup, wheel, beforein
put, in
put, keydown, keyup, compositionstart, compositionupdate, compositionend, load, unload, abort, error, select, resize, scroll, beginevent, endevent, and repeatevent .
... a valid accesskey-value consists of the function accesskey() with the character to be in
put as parameter.
stroke-dashoffset - SVG: Scalable Vector Graphics
ygon>, <polyline>, <rect>, <text>, <textpath>, <tref>, and <tspan> html,body,svg { height:100% } <svg viewbox="-3 0 33 10" xmlns="http://www.w3.org/2000/svg"> <!-- no dash array --> <line x1="0" y1="1" x2="30" y2="1" stroke="black" /> <!-- no dash offset --> <line x1="0" y1="3" x2="30" y2="3" stroke="black" stroke-dasharray="3 1" /> <!-- the start of the dash array com
putation is pulled by 3 user units --> <line x1="0" y1="5" x2="30" y2="5" stroke="black" stroke-dasharray="3 1" stroke-dashoffset="3" /> <!-- the start of the dash array com
putation is pushed by 3 user units --> <line x1="0" y1="7" x2="30" y2="7" stroke="black" stroke-dasharray="3 1" stroke-dashoffset="-3" /> <!-- the start of the dash array com...
...
putation is pulled by 1 user units which ends up in the same rendering as the previous example --> <line x1="0" y1="9" x2="30" y2="9" stroke="black" stroke-dasharray="3 1" stroke-dashoffset="1" /> <!-- the following red lines highlight the offset of the dash array for each line --> <path d="m0,5 h-3 m0,7 h3 m0,9 h-1" stroke="rgba(255,0,0,.5)" /> </svg> usage notes value <percentage> | <length> default value 0 animatable yes the offset is usually expressed in user units resolved against the pathlength but if a <percentage> is used, the value is resolved as a percentage of the current viewport.
targetX - SVG: Scalable Vector Graphics
the targetx attribute determines the positioning in horizontal direction of the convolution matrix relative to a given target pixel in the in
put image.
... only one element is using this attribute: <feconvolvematrix> usage notes value <integer> default value floor(orderx / 2) animatable yes <integer> this value indicates the positioning in horizontal direction of the convolution matrix relative to a given target pixel in the in
put image.
targetY - SVG: Scalable Vector Graphics
the targety attribute determines the positioning in vertical direction of the convolution matrix relative to a given target pixel in the in
put image.
... only one element is using this attribute: <feconvolvematrix> usage notes value <integer> default value floor(ordery / 2) animatable yes <integer> this value indicates the positioning in vertical direction of the convolution matrix relative to a given target pixel in the in
put image.
SVG 1.1 Support in Firefox - SVG: Scalable Vector Graphics
of the pseudo-in
puts, sourcegraphic, sourcealpha, fillpaint and strokepaint are implemented.
... use of an unimplemented pseudo-in
put or filter element will cause the filter to be ignored and the referring graphic to be drawn without any filter.
SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
implementation status unknown !important user agent style rules controlling never-rendered elements implementation status unknown :focus and ::selection styles implementation status unknown geometry change notes x and y attributes removed from <pattern> and <filter> implementation status unknown auto value of width and height com
putes to 0 but 100% on <svg> not implemented coordinate systems, transformations and units change notes exception for bad values on svgmatrix.skewx() and svgmatrix.skewy() implementation status unknown bounding box for element with no position at (0, 0) implementation status unknown defer keyword removed from preserveaspectratio attribute ...
...operty implementation status unknown <tref> removed implementation status unknown <altglyph>, <altglyphdef>, <altglyphitem> and <glyphref> removed <altglyph>, <altglyphdef> and <altglyphitem> removed (bug 1260032), <glyphref> never really implemented (bug 1302693) svgtextcontentelement.selectsubstring() deprecated implementation status unknown getcom
putedtextlength() not including dx and dy values implementation status unknown text in non-rendered elements not included in addressable characters implementation status unknown unknown elements in text render as unpositioned spans implementation status unknown offset distances of text positioned along a transformed path measured in text elements coordinate system ...
Paths - SVG: Scalable Vector Graphics
this com
putation is for the non-rotated ellipse with start→end (110, 215)→(150.71, 170.29).
...this second com
putation is for the non-rotated ellipse with start→end (110, 215)→(162.55, 162.45).
Patterns - SVG: Scalable Vector Graphics
like gradients, the <pattern> element should be
put in the <defs> section of your svg file.
...by changing the patterncontentunits attribute, we can
put all the elements into the same unit system: <pattern id="pattern" width=".25" height=".25" patterncontentunits="objectboundingbox"> <rect x="0" y="0" width=".25" height=".25" fill="skyblue"/> <rect x="0" y="0" width=".125" height=".125" fill="url(#gradient2)"/> <circle cx=".125" cy=".125" r=".1" fill="url(#gradient1)" fill-opacity="0.5"/> </pattern> now, because the pattern content ...
Positions - SVG: Scalable Vector Graphics
the grid for all elements, svg uses a coordinate system or grid system similar to the one used by canvas (and by a whole lot of other com
puter drawing routines).
... in the most basic case one pixel in an svg document maps to one pixel on the out
put device (a.k.a.
Securing your site - Web security
privacy and the :visited selector this article discusses changes made to the getcom
putedstyle() method that eliminates the ability for malicious sites to figure out the user's browsing history.
... hash passwords using a secure algorithm (owasp) storing passwords in plain text can lead to attackers knowing and leaking the exact password of your site's users, potentially
putting the users at risk.
Using shadow DOM - Web Components
dom manipulation to create the element's internal shadow dom structure: // create spans let wrapper = document.createelement('span'); wrapper.setattribute('class', 'wrapper'); let icon = document.createelement('span'); icon.setattribute('class', 'icon'); icon.setattribute('tabindex', 0); let info = document.createelement('span'); info.setattribute('class', 'info'); // take attribute content and
put it inside the info span let text = this.getattribute('data-text'); info.textcontent = text; // insert icon let imgurl; if(this.hasattribute('img')) { imgurl = this.getattribute('img'); } else { imgurl = 'img/default.png'; } let img = document.createelement('img'); img.src = imgurl; icon.appendchild(img); styling the shadow dom after that we create a <style> element and populate it with so...
...acity: 1; }`; attaching the shadow dom to the shadow root the final step is to attach all the created elements to the shadow root: // attach the created elements to the shadow dom shadow.appendchild(style); shadow.appendchild(wrapper); wrapper.appendchild(icon); wrapper.appendchild(info); using our custom element once the class is defined, using the element is as simple as defining it, and
putting it on the page, as explained in using custom elements: // define the new element customelements.define('popup-info', popupinfo); <popup-info img="img/alt.png" data-text="your card validation code (cvc) is an extra security feature — it is the last 3 or 4 numbers on the back of your card."> internal versus external s...
translate - XPath
example <xsl:value-of select="translate('the quick brown fox.', 'abcdefghijklmnopqrstuvwxyz', 'abcdefghijklmnopqrstuvwxyz')" /> out
put the quick brown fox.
... example <xsl:value-of select="translate('the quick brown fox.', 'brown', 'red')" /> out
put the quick red fdx.
<xsl:copy> - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the <xsl:copy> element transfers a shallow copy (the node and any associated namespace node) of the current node to the out
put document.
... optional attributes use-attribute-sets lists attribute sets that should be applied to the out
put node, if it is an element.
<xsl:message> - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the <xsl:message> element out
puts a message (to the javascript console in ns) and optionally terminates execution of the stylesheet.
...the default value is "no", in which case the message is out
put and execution continues.
Communicating With Other Scripts - Archive of obsolete content
require("sdk/page-mod"); var self = require("sdk/self"); var pageurl = self.data.url("page.html") var pagemod = mod.pagemod({ include: pageurl, contentscriptfile: self.data.url("content-script.js"), contentscriptwhen: "ready" }) tabs.open(pageurl); the target web page "page.html" includes a button and a page script: <html> <head> <meta charset="utf-8"> </head> <body> <in
put id="message" type="button" value="send a message"/> <script type="text/javascript" src="page-script.js"></script> </body> </html> the content script "content-script.js" adds an event listener to the button, that sends a custom event containing a message: var messenger = document.getelementbyid("message"); messenger.addeventlistener("click", sendcustomevent, false); function sendcustomeve...
Working with Events - Archive of obsolete content
var tabs = require("sdk/tabs"); function listener1() { console.log("listener 1"); tabs.removelistener("ready", listener1); } function listener2() { console.log("listener 2"); } tabs.on("ready", listener1); tabs.on("ready", listener2); tabs.open("https://www.mozilla.org"); tabs.open("https://www.mozilla.org"); we should see out
put like this: info: tabevents: listener 1 info: tabevents: listener 2 info: tabevents: listener 2 listeners will be removed automatically when the add-on is unloaded.
indexed-db - Archive of obsolete content
var store = db.createobjectstore("items", {keypath: "time"}); }; request.onsuccess = function(e) { database.db = e.target.result; }; request.onerror = database.onerror; }; function additem(name) { var db = database.db; var trans = db.transaction(["items"], "readwrite"); var store = trans.objectstore("items"); var time = new date().gettime(); var request = store.
put({ "name": name, "time": time }); request.onerror = database.onerror; }; function getitems(callback) { var cb = callback; var db = database.db; var trans = db.transaction(["items"], "readwrite"); var store = trans.objectstore("items"); var items = new array(); trans.oncomplete = function() { cb(items); } var keyrange = idbkeyrange.lowerbound(0); var cursorrequ...
l10n - Archive of obsolete content
and the following code: var _ = require("sdk/l10n").get; console.log(_("hello_string")); the following out
put will be logged: info: hello!
simple-storage - Archive of obsolete content
d", icon: "./read.png", onclick: function() { console.log(ss.storage.value); } }); require("sdk/ui/button/action").actionbutton({ id: "delete", label: "delete", icon: "./delete.png", onclick: function() { delete ss.storage.value; console.log("deleting value"); } }); if you run it, you'll see that after clicking "read" after clicking "delete" gives you the expected out
put: info: undefined note that to run this add-on you'll have to save icon files named "write.png", "read.png", and "delete.png" to the add-on's "data" directory.
Forms related code snippets - Archive of obsolete content
p-increase-month, span.zdp-increase-year { float: right; margin-left: 2px; } td.zdp-active-cell { padding: 1px 3px; cursor: pointer; color: #000000; text-align: center; vertical-align: middle; } td.zdp-active-cell:hover { background-color: #999999; cursor: pointer; } td.zdp-empty-cell { cursor: not-allowed; } </style> </head> <body> <form name="myform"> <p> from: <in
put type="text" readonly class="date-picker" name="date-from" /> to: <in
put type="text" readonly class="date-picker" name="date-to" /> </p> </form> </body> </html> note: the current implementation of const (constant statement) is not part of ecmascript 5.
Progress Listeners - Archive of obsolete content
ng functions see related documentation onprogresschange: function(awebprogress, arequest, curself, maxself, curtot, maxtot) {}, onstatuschange: function(awebprogress, arequest, astatus, amessage) {}, onsecuritychange: function(awebprogress, arequest, astate) {} } attach the progress listener to a <browser> or a <tabbrowser> element using addprogresslistener, for example for firefox
put the following code in a load listener of a main window: gbrowser.addprogresslistener(mylistener); when used with a browser, the second argument is a mask which determines the type of events that will be received.
JavaScript timers - Archive of obsolete content
using javascript timers within animations (javascript daemons management) in com
puter science a daemon is a task that runs as a background process, rather than being under the direct control of an interactive user.
Windows - Archive of obsolete content
re-using and focusing named windows while specifying the name parameter to window.open or window.opendialog will prevent multiple windows of that name from opening, each call will actually re-initialize the window and thus lose whatever state the user has
put it in.
Code snippets - Archive of obsolete content
nevertheless, the increasing com
putational power of modern browsers together with the introduction of typed arrays in ecmascript allow us, in theory, to build full virtual machines in pure ecmascript.
Migrating from Internal Linkage to Frozen Linkage - Archive of obsolete content
(see xpcom:arrays.) nscomptr<nsisupportsarray> array; - rv = ns_newisupportsarray(getter_addrefs(array)); + array = do_createinstance(ns_supportsarray_contractid); - nscomptr<nsiin
putstream> rawstream;- rv = ns_newbytein
putstream(getter_addrefs(rawstream),- (const char*)data, length); + nscomptr<nsistringin
putstream> rawstream =+ do_createinstance(ns_stringin
putstream_contractid, &rv);+ ns_ensure_success(rv, rv);++ rv = rawstream->setdata((const char*)data, length); ns_ensure_success(rv, rv); nsistringin
putstream is not frozen (and thus, not av...
Signing an extension - Archive of obsolete content
sign the basic usage of the signing tool is as follows: nss-signtool \ -d (path to the directory that contains your certificate database files) \ -k (your certificate nickname) \ -p (your certificate password) \ -x -z (out
put path/name of signed file) \ (path to your extension working directory that contains chrome directory, chrome.manifest file, install.rdf file, etc.) writing your password directly in the script is dangerous.
Supporting search suggestions in search plugins - Archive of obsolete content
(this means that a suggestion-supporting engine plugin will have two <url> elements, the other one being the main text/html search url.) for example, the yahoo search plugin has this <url> entry: <url type="application/x-suggestions+json" template="http://ff.search.yahoo.com/gossip?out
put=fxjson&command={searchterms}"/> if the user types "fir" into the search bar, then pauses, firefox inserts "fir" in place of {searchterms} and queries that url: <url type="application/x-suggestions+json" template="http://ff.search.yahoo.com/gossip?out
put=fxjson&command=fir"/> the results are used to construct the suggestion list box.
Promises - Archive of obsolete content
ns.data; if (data && object.getprototypeof(data).constructor.name == "object") { options.data = new formdata; for (let key of object.keys(data)) options.data.append(key, data[key]); } xhr.send(options.data); }); } example usage: task.spawn(function* () { let request = yield request("http://example.com/", { method: "
put", mimetype: "application/json", headers: { "x-species": "hobbit" }, data: { foo: new file(path), thing: "stuff" }, responsetype: "json" }); console.log(request.response["json-key"]); }); ...
Search Extension Tutorial (Draft) - Archive of obsolete content
search.xml <?xml version="1.0" encoding="utf-8"?> <searchplugin xmlns="http://www.mozilla.org/2006/browser/search/"> <shortname>example engine</shortname> <description>example search engine</description> <in
putencoding>utf-8</in
putencoding> <image width="16" height="16" type="image/png">data:image/png;base64, ...
Adding preferences to an extension - Archive of obsolete content
called as a callback, we can't rely on // "this" referring to the right object, so we need to reference // it by its full name var symbol = stockwatcher.tickersymbol; var fullurl = "http://quote.yahoo.com/d/quotes.csv?f=sl1d1t1c1ohgv&e=.csv&s=" + symbol; function inforeceived() { var samplepanel = document.getelementbyid('stockwatcher2'); var out
put = httprequest.responsetext; if (out
put.length) { // remove any whitespace from the end of the string out
put = out
put.replace(/\w*$/, ""); // build the tooltip string var fieldarray = out
put.split(","); samplepanel.label = symbol + ": " + fieldarray[1]; samplepanel.tooltiptext = "chg: " + fieldarray[4] + " | " + "open: " +...
CSS3 - Archive of obsolete content
the next iteration of this specification is in the work, allowing to tailor a web site regarding the in
put methods available on the user agent, with new media features like hover or pointer.
List of Former Mozilla-Based Applications - Archive of obsolete content
last release on site from july 2005 fabula language learning application inactive galeon browser last news item on site from september 2006 gencatrss rss reader domain switched over to domain parking service ghostzilla browser archived version of ghostzilla site from 2005 homebase desktop operating environment for internet com
puters no longer available hp printer assistant printer utility hall of fame page mentions that this used an embedded version of mozilla at some point but i can't find reference to current status (may still be using mozilla code?) icebrowser java browser sdk uses mozilla rhino --eol'ed in 2009 (jin'sync) office app launcher download page last updated on...
Source Navigator - Archive of obsolete content
(you can always include more by pressing the "more" button.) in my case, i in
putted the followings: project file: <tt>~/snav-mozilla</tt> add directory (where your source files reside in -- i understand that the label here is not so self-explanatory...): <tt>~/moz1.9/mozilla</tt> (because i saved my source at ~/moz1.9/mozilla.) remember to ensure that "include subdirectories" and "build cross-reference database" are checked.
Structure of an installable bundle - Archive of obsolete content
for example, if a plugin vendor wanted to make a plugin available for consumer com
puters running linux(of the form: /platform/linux*/), macintosh(of the form: /platform/darwin*/), and windows(of the form: /platform/win*/), it would provide the following files: /platform/linux_x86-gcc3/plugins/libmyplugin.so /platform/winnt_x86-msvc/plugins/myplugin.dll /platform/darwin_ppc-gcc3/plugins/libmyplugin.dylib because xpt files are not platform-specific, any associated xpt files would...
Prerequisites - Archive of obsolete content
in order to complete this tutorial you need to have and know how to use the following programs on your com
puter: an installation of mozilla; zip and unzip utilities; a text editor.
Specifying the appearance - Archive of obsolete content
list-style-image: url("chrome://navigator/content/tb-testfailed.png"); } statusbarpanel#tinderbox-status[status="busted"] { list-style-image: url("chrome://navigator/content/tb-busted.png"); } mozilla can have multiple sets of stylesheets that govern its appearance, and we don't want to have to add these rules to each set (and have our extension break when a new set gets installed), so we'll
put this stylesheet in a file called tinderstatus.css in the same directory as navigator.xul and reference it at the top of that file right under the global stylesheet reference: <?xml-stylesheet href="chrome://navigator/skin/" type="text/css"?> <?xml-stylesheet href="chrome://navigator/content/tinderstatus.css" type="text/css"?> our css rules use the list-style-image property to define ...
Getting Started - Archive of obsolete content
css files the css files in these directories tell the browser how to display the buttons and other controls, where to
put the images, what border and padding it should
put around them, etc.
Mozilla Crypto FAQ - Archive of obsolete content
government claimed in return that cryptographic software was regulated based solely on its ability to be used to secure communications and data, and that the national security interest in so regulating it overrode any first amendment protections; as the export regulations
put it, "encryption software is controlled because of its functional capacity, and not because of any informational value of such software".
Hacking wiki - Archive of obsolete content
random tips you can set the file to log by
putting something like this in your localsettings.php: $wgdebuglogfile = 'c:\\123'; you can then use wfdebug() function to write to the log.
String Quick Reference - Archive of obsolete content
old way: use nsstring& and nscstring& void mymethod(const nsstring& in
put, nsstring& out
put); new way: use nsastring& and nsacstring& void mymethod(const nsastring& in
put, nsastring& out
put); substrings what: get direct references to string fragments why: avoid making multiple copies of the string old way: use a bunch of nsautostrings, and use left(), right() and mid() to grab a segment of a string: // get an 8-character string starting at the 4th position nsautostring leftside; str.left(leftside,...
Table Layout Regression Tests - Archive of obsolete content
execute mozilla -layoutdebug - p foo >out
putfile.txt execute the verify test make a note which tests have failed grep 'failed' out
putfile.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?
Tamarin Build System Documentation - Archive of obsolete content
t below the phase table the waterfall displays each buildstep and result the left side contains the time column and the user/revision link to represent the revision triggering a build, mouse over the user to see the revision and submission notes each buildstep run on a slave is a box with color indicating status, red is failed, green passed, yellow has warnings click the stdio link to see the out
put click on the build yellow box at the bottom of a set of buildsteps to see the result of all of the buildsteps for a build and the time each buildstep took scroll down to see previous builds triggered at the bottom of the page click on the [next page] link to display more previous builds what are the goals of the build system (qos)?
description - Archive of obsolete content
be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to
put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable).
listbox - Archive of obsolete content
be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to
put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable).
listitem - Archive of obsolete content
be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to
put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable).
menu - Archive of obsolete content
be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to
put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable).
menuseparator - Archive of obsolete content
be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to
put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable).
notification - Archive of obsolete content
be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to
put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable).
preference - Archive of obsolete content
a change event is fired in different ways for different xul in
put elements as listed below: onchange type: script code textbox when enter key is pressed radio/check box when the state is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e.
radiogroup - Archive of obsolete content
be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to
put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable).
richlistbox - Archive of obsolete content
be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to
put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable).
richlistitem - Archive of obsolete content
be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to
put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable).
scale - Archive of obsolete content
be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to
put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable).
script - Archive of obsolete content
you should usually
put scripts in a separate file pointed to by the src attribute, but you may also place the script inline inside the opening and closing script tags.
treecell - Archive of obsolete content
be aware, however, that some elements, such as textbox will display the value visually, so in order to merely associate data with an element, you could 1) use another attribute like "value2" or "data-myatt" (as in the html5 draft), as xul does not require validation (less future-proof); 2) use setattributens() to
put custom attributes in a non-xul namespace (serializable and future-proof); 3) use setuserdata() (future-proof and clean, but not easily serializable).
window - Archive of obsolete content
disablefastfindtype: boolean
put disablefastfind="true" on the root element of a xul document, which is intended to be loaded in a tab, to disable the find bar for the tab with this document.
Creating a Windows Inno Setup installer for XULRunner applications - Archive of obsolete content
[setup] appname=my app appvername=my app 1.0 apppublisher=mark finkle apppublisherurl=http://developer.mozilla.org/en/docs/getting_started_with_xulrunner appsupporturl=http://developer.mozilla.org/en/docs/getting_started_with_xulrunner appupdatesurl=http://developer.mozilla.org/en/docs/getting_started_with_xulrunner defaultdirname={pf}\my app defaultgroupname=my app allownoicons=yes out
putdir=..\build\out
put out
putbasefilename=myapp-1.0-win32 ; setupiconfile= compression=lzma solidcompression=yes [languages] name: english; messagesfile: compiler:default.isl [components] name: main; description: my app; types: full compact custom; flags: fixed name: runtime; description: xul runner runtime; types: full custom [tasks] name: desktopicon; description: {cm:createdesktopicon}; groupde...
Deploying XULRunner - Archive of obsolete content
here's a sample one: <?xml version="1.0" encoding="utf-8"?> <!doctype plist public "-//apple com
puter//dtd plist 1.0//en" "http://www.apple.com/dtds/propertylist-1.0.dtd"> <plist version="1.0"> <dict> <key>cfbundledevelopmentregion</key> <string>english</string> <key>cfbundleexecutable</key> <string>xulrunner</string> <key>cfbundlegetinfostring</key> <string>1.0</string> <key>cfbundleiconfile</key> <string>app_icon.icns</string> <key>cfbundleidentifier</key> <string>net.yourcompany.yo...
XULRunner tips - Archive of obsolete content
in order to satisfy these dependencies, you can save firefox's brand.dtd/brand.properties to chrome/locale/branding folder, modify them appropriately, and register a locale provider for branding by adding the following line to your chrome manifest: locale branding en-us chrome/locale/branding/ the location you
put the branding files in doesn't matter, as long as you register it appropriately in the manifest.
mozilla.dev.platform FAQ - Archive of obsolete content
a: xulrunner trunk and 1.8 (but not 1.8.0) build storage by default, and anything can be built with storage if you
put in you <tt>mozconfig --enable-storage</tt> q: program received signal exc_bad_instruction, illegal instruction/operand.
Mozprocess - Archive of obsolete content
{}, # environment to use for the process; defaults to os.environ ) exit_code = process.waitforfinish(timeout=60) # seconds see an example in https://github.com/mozilla/mozbase/b...profilepath.py processhandler may be subclassed to handle process timeouts (by overriding the ontimeout() method), process completion (by overriding onfinish()), and to process the command out
put (by overriding processout
putline()).
Mozilla release FAQ - Archive of obsolete content
when i try to use cvs on windows, i get an error about no home directory you need to set the home environment variable to a valid directory, as cvs was designed with unix in mind, and wants to
put a file in your home directory (the password file) i'm on a unix system, and still am having problems building here's a brief guide to common build problems: cc1: invalid option 'foo' cc: no such file or directory 'foo' these are almost always caused by your platform-specific makefile being incorrect for your system, either because you're not using the compiler that you're expected to (i.e.
2006-11-10 - Archive of obsolete content
summary: mozilla.dev.accessibility - oct 28-nov 10, 2006 announcements acm transactions on accessible com
puting "transactions on accessible com
puting (taccess) is a quarterly journal that publishes refereed articles addressing issues of com
puting as it impacts the lives of people with disabilities." read more...
2006-09-29 - Archive of obsolete content
summary: mozilla.dev.apps.thunderbird - september 22-29, 2006 announcements development for thunderjudge extension is
put on hold the author of the thunderjudge extension is currently
putting the development of the extension on hold due to several issues (more details available at the website).
2006-10-13 - Archive of obsolete content
summary: mozilla.dev.apps.thunderbird - october 7-13, 2006 announcements updated: thunderbird developer documentation eric shepherd has
put together a checklist for the upcoming thunderbird developer documentation and is looking for feedback as well as contributors.
2006-11-10 - Archive of obsolete content
nd tried to build it on fc3 with the following options: ./configure --enable-application=browser --prefix=$prefix --enable-extensions=default,spatialnavigation then he tried running "make" and received the following error: /usr/bin/ld: testtarray.o(.text+0x2237): unresolvable relocation against symbol `nstarray_base::semptyhdr' /usr/bin/ld: final link failed: nonrepresentable section on out
put collect2: ld returned 1 exit status gmake[3]: *** [testtarray] error 1 gmake[3]: leaving directory `/usr/mozilla2/src/mozilla/xpcom/tests' gmake[2]: *** [libs] error 2 gmake[2]: leaving directory `/usr/mozilla2/src/mozilla/xpcom' gmake[1]: *** [tier_2] error 2 gmake[1]: leaving directory `/usr/mozilla2/src/mozilla' make: *** [default] error 2 he is not sure what is wrong with his build, and is ...
2006-11-24 - Archive of obsolete content
others gave in
put on this as well meetings because of the firefox summit last week there is no project status meeting this week november 22 gecko 1.9/gran paradiso status meeting: (agenda) ...
NPN_GetStringIdentifier - Archive of obsolete content
syntax #include <npruntime.h> npidentifier npn_getstringidentifier(const n
putf8 *name); parameters the function has the following parameters: <tt>name</tt> the string for which an opaque identifier should be returned.
NPN_GetStringIdentifiers - Archive of obsolete content
syntax #include <npruntime.h> void npn_getstringidentifiers(const n
putf8 **names, int32_t namecount, npidentifier *identifiers); parameters the function has the following parameters: names an array of strings for which opaque identifiers should be returned.
NPN_RequestRead - Archive of obsolete content
if the stream is not inherently seekable, the stream must have been
put in np_seek mode initially (since the browser must cache all the stream data on disk in order to access it randomly).
NPN_SetException - Archive of obsolete content
syntax #include <npruntime.h> void npn_setexception(npobject *npobj, const n
putf8 *message); parameters the function has the following parameters: <tt>npobj</tt> the object on which the exception occurred.
NPSavedData - Archive of obsolete content
you can use the plug-in's npp_destroy() function to allocate an npsaveddata object using the npn_memalloc() function, fill in the fields, and return it to the browser as an out
put parameter.
Element - Archive of obsolete content
lddate> (rss last build date element) <link> (rss link element) m <managingeditor> (rss managing editor element) n <name> (rss name element) o p <pubdate> (rss published date element) q r <rating> (rss rating element) <rss> (rss's root "rss" element) s <skipdays> (rss skip days element) <skiphours> (rss skip hours element) <source> (rss source element) t <textin
put> (rss text in
put element) <title> (rss title element) <ttl> (rss ttl element) u <url> (rss url element) v w <webmaster> (rss web master element) <width> (rss width element) x y z ...
Vulnerabilities - Archive of obsolete content
an example is an in
put validation error, such as user-provided in
put not being properly evaluated for malicious character strings and overly long values associated with known attacks.
Theme changes in Firefox 2 - Archive of obsolete content
menulist#name[droppable="false"] menulist#name[droppable="false"] > .menulist-editable-box menulist#name[droppable="false"] > .menulist-editable-box > html|*.textbox-in
put menulist#name[droppable="false"] > .menulist-dropmarker menulist#name[droppable="false"] > menupopup this file styles addbookmark2.xul.
Summary of Changes - Archive of obsolete content
ct non-standard marquee html 4.01 div plus scripting non-standard bgsound html 4.01 object proprietary or deprecated feature w3c feature or recommended replacement ie5+ id_attribute_value document.all.id_attribute_value document.all[id_attribute_value] dom level 2: document.getelementbyid(id_attribute_value) ie5+ formname.in
putname.value dom level 1: document.forms["formname"].in
putname.value ie5+ in
putname.value dom level 1: document.forms["formname"].in
putname.value ie5+ formctrlname dom level 1: document.forms["formname"].formctrlname ie5+ document.forms(0) dom level 1: document.forms[0] ie elemref.innertext dom level 1 (core) interfac...
Using workers in extensions - Archive of obsolete content
that file, ticker_worker.js, is shown here: var symbol = ""; function refreshinformation() { if (!symbol) { throw "no symbol set!"; } var fullurl = "http://quote.yahoo.com/d/quotes.csv?f=sl1d1t1c1ohgv&e=.csv&s=" + symbol; function inforeceived() { var out
put = httprequest.responsetext; if (out
put) { postmessage(out
put.trim()); } httprequest = null; } var httprequest = new xmlhttprequest(); httprequest.open("get", fullurl, true); httprequest.onload = inforeceived; httprequest.send(null); } setinterval(function() { refreshinformation(); }, 10*60*1000); onmessage = function(event) { if (event.data) { symbol = event...
-moz-binding - Archive of obsolete content
formal definition initial valuenoneapplies toall elements except generated content or pseudo-elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax <url> | none examples .exampleone { -moz-binding: url(http://www.example.org/xbl/htmlbindings.xml#radiobutton); } specifications not part of any standard.
-moz-stack-sizing - Archive of obsolete content
(the problem does not affect children moved above or to the left of the stack.) initial valuestretch-to-fitapplies toall elementsinheritedyescom
puted valueas specifiedanimation typediscrete syntax values stretch-to-fit the child will influence the stack's size.
-ms-content-zoom-limit - Archive of obsolete content
smaller values zoom out.com
puted valueas each of the properties of the shorthand:-ms-content-zoom-limit-max: as specified-ms-content-zoom-limit-min: as specifiedanimation typediscrete syntax the -ms-content-zoom-limit shorthand property is specified as one or both of the following content zoom limit values, in order, separated by spaces.
-ms-content-zoom-snap-points - Archive of obsolete content
initial valuesnapinterval(0%, 100%)applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocom
puted valueas specifiedanimation typediscrete syntax values snapinterval( <percentage>, <percentage> ) specifies where the snap-points will be placed.
-ms-content-zoom-snap - Archive of obsolete content
initial valueas each of the properties of the shorthand:-ms-content-zoom-snap-type: none-ms-content-zoom-snap-points: snapinterval(0%, 100%)applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocom
puted valueas each of the properties of the shorthand:-ms-content-zoom-snap-type: as specified-ms-content-zoom-snap-points: as specifiedanimation typediscrete syntax the -ms-content-zoom-snap shorthand property is specified as one or both of the following content zoom snap values, in order, separated by spaces.
-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 elementsinheritednocom
puted valueas specifiedanimation typediscrete syntax values none the initial value of all elements except the top-level element.
-ms-filter - Archive of obsolete content
initial value"" (the empty string)applies toall elementsinheritednocom
puted valueas specifiedanimation typediscrete remarks the following table lists the most popular dx filters and their standards-based alternatives: dx filter standards-based alternative alpha opacity alphaimageloader <img> or background-image and related properties gradient background-image: linear-gradient() dropshadow text-shadow or...
-ms-high-contrast-adjust - Archive of obsolete content
initial valueautoapplies toall elementsinheritedyescom
puted valueas specifiedanimation typediscrete syntax values auto indicates the applicable css properties will be adjusted as expected when the system is in high contrast mode.
-ms-hyphenate-limit-chars - Archive of obsolete content
initial valueautoapplies toall elementsinheritedyescom
puted valueas specifiedanimation typediscrete syntax values auto corresponds to a value of 5 2 2, indicating a 5-character word limit, 2 characters required before a hyphenation break, and 2 characters required following a hyphenation break.
-ms-hyphenate-limit-lines - Archive of obsolete content
initial valueno-limitapplies toblock container elementsinheritedyescom
puted valueas specifiedanimation typediscrete syntax values no-limit indicates that hyphenation is not limited based on the number of consecutive hyphenated lines.
-ms-hyphenate-limit-zone - Archive of obsolete content
initial value0applies toblock container elementsinheritedyespercentagescalculated with respect to the width of the line boxcom
puted valueas specifiedanimation typediscrete syntax values <percentage> an integer followed by a percent sign (%), which specifies the width of the hyphenation zone, calculated with respect to the line box.
-ms-overflow-style - Archive of obsolete content
initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritedyescom
puted valueas specifiedanimation typediscrete syntax values auto the initial value.
-ms-scroll-limit-x-max - Archive of obsolete content
initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocom
puted valueas specifiedanimation typediscrete syntax values auto the maximum value for the scrollleft property is equal to element.scrollwidth.
-ms-scroll-limit-x-min - Archive of obsolete content
initial value0applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocom
puted valueas specifiedanimation typediscrete syntax values <length> the minimum value for the scrollleft property.
-ms-scroll-limit-y-max - Archive of obsolete content
initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocom
puted valueas specifiedanimation typediscrete syntax values auto the maximum value for the scrolltop property is equal to element.scrollheight.
-ms-scroll-limit-y-min - Archive of obsolete content
initial value0applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocom
puted valueas specifiedanimation typediscrete syntax values <length> the minimum value for the scrolltop property.
-ms-scroll-limit - Archive of obsolete content
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 elementsinheritednocom
puted 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.
-ms-scroll-rails - Archive of obsolete content
initial valuerailedapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocom
puted valueas specifiedanimation typediscrete syntax values none the content moves exactly with the user's finger.
-ms-scroll-snap-points-x - Archive of obsolete content
initial valuesnapinterval(0px, 100%)applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocom
puted valueas specifiedanimation typediscrete syntax values note: a <length-percentage> is a value that can be either a <length> or a <percentaqe>.
-ms-scroll-snap-points-y - Archive of obsolete content
initial valuesnapinterval(0px, 100%)applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocom
puted valueas specifiedanimation typediscrete syntax values note: a <length-percentage> is a value that can be either a <length> or a <percentaqe>.
-ms-scroll-snap-x - Archive of obsolete content
initial valueas each of the properties of the shorthand:-ms-scroll-snap-type: none-ms-scroll-snap-points-x: snapinterval(0px, 100%)applies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocom
puted valueas each of the properties of the shorthand:-ms-scroll-snap-type: as specified-ms-scroll-snap-points-x: as specifiedanimation typediscrete syntax values the -ms-scroll-snap-x shorthand property is specified as one or both of the following values, in order and separated by spaces.
ScriptEngineMajorVersion - Archive of obsolete content
example the following example illustrates the use of the scriptenginemajorversion function: if (window.scriptenginemajorversion) { console.log(window.scriptengine()); } out
put: <current major version> requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer 10 standards, internet explorer 11 standards.
ScriptEngineMinorVersion - Archive of obsolete content
if (window.scriptengineminorversion) { console.log(window.scriptengineminorversion()); } //out
put: <current minor version> requirements supported in the following document modes: quirks, internet explorer 6 standards, internet explorer 7 standards, internet explorer 8 standards, internet explorer 9 standards, internet explorer 10 standards, internet explorer 11 standards.
ECMAScript 2015 support in Mozilla - Archive of obsolete content
uctured parameters with default value assignment (firefox 41) arrow functions (firefox 22) generator function (firefox 26) yield (firefox 26) yield* (firefox 27) arguments[@@iterator] (firefox 46) other features binary and octal numeric literals (firefox 25) template strings (firefox 34) object initializer: shorthand property names (firefox 33) object initializer: com
puted property names (firefox 34) object initializer: shorthand method names (firefox 34) ...
Object.prototype.__noSuchMethod__ - Archive of obsolete content
examples simple test of __nosuchmethod__ var o = { __nosuchmethod__: function(id, args) { console.log(id, '(' + args.join(', ') + ')'); } }; o.foo(1, 2, 3); o.bar(4, 5); o.baz(); // out
put // foo (1, 2, 3) // bar (4, 5) // baz () using __nosuchmethod__ to simulate multiple inheritance an example of code that implements a primitive form of multiple inheritance is shown below.
LiveConnect Overview - Archive of obsolete content
also, any time you use javascript objects in your java code, you should
put the call to the javascript object inside a try...catch statement which handles exceptions of type netscape.javascript.jsexception.
Examples - Archive of obsolete content
back to the article stylesheet /* * if you try to view the results of these examples, * you will need to
put a file named style.css with * the following content in the same directory as * the examples.
Server-Side JavaScript - Archive of obsolete content
today with com
puting cycles having increased more than 10-fold and mozilla's work on rhino (javascript interpreter in java) and spidermonkey (javascript interpreter in c) and javascript itself, we have very solid foundations for javascript to be extraordinarily useful and applicable on the server-side again -- with performance in the same range as popular server-side environments like php and ruby on rails.
Building up a basic demo with PlayCanvas editor - Game development
entity; }; boxanimation.prototype = { // called once after all resources are loaded and before the first update initialize: function () { }, // called every frame, dt is time in seconds since last update update: function (dt) { } }; return boxanimation; }); the most interesting part is the update() function, which is where we can
put any code that we want repeated on every frame.
Building up a basic demo with PlayCanvas - Game development
playcanvas engine built for modern browsers, playcanvas is a fully-featured 3d game engine with resource loading, an entity and component system, advanced graphics manipulation, collision and physics engine (built with ammo.js), audio, and facilities to handle control in
puts from various devices (including gamepads).
Building up a basic demo with Three.js - Game development
the following lines
put the camera in place in the 3d coordinate system, and point it in the direction of our scene, so we can finally see something: var camera = new three.perspectivecamera(70, width/height); camera.position.z = 50; scene.add(camera); add the above lines to your code, below those previously added.
3D games on the Web - Game development
they can be split into vertex shaders and fragment shaders (or pixel shaders) — the former transforms shape positions to real 3d drawing coordinates, while the latter com
putes rendering colors and other attributes.
Async scripts for asm.js - Game development
putting async into action getting async compilation is easy: when writing your javascript, just use the async attribute like so: <script async src="file.js"></script> or, to do the same thing via script: var script = document.createelement('script'); script.src = "file.js"; document.body.appendchild(script); (scripts created from script default to async.) the default html shell emscripten genera...
Efficient animation for web games - Game development
modern console games, for example, tend to prioritise framerate during player movement and combat, but may prioritise image quality or physics detail when compromise to framerate and in
put response would be less noticeable.
Square tilemaps implementation: Static maps - Game development
le size in here would scale the tile.) so, for instance, to draw the tree tile, which is the third in the atlas, at the screen coordinates (128, 320), we would call drawimage() with these values: context.drawimage(atlasimage, 192, 0, 64, 64, 128, 320, 64, 64); in order to support atlases with multiple rows and columns, you would need to know how many rows and columns there are to be able to com
pute the source x and y.
Buttons - Game development
to do that, adjust the update() function like so: function update() { game.physics.arcade.collide(ball, paddle, ballhitpaddle); game.physics.arcade.collide(ball, bricks, ballhitbrick); if(playing) { paddle.x = game.in
put.x || game.world.width*0.5; } } that way the paddle is immovable after everything is loaded and prepared, but before the start of the actual game.
Collision detection - Game development
first, add a new line inside your update() function that checks for collision detection between ball and bricks, as shown below: function update() { game.physics.arcade.collide(ball, paddle); game.physics.arcade.collide(ball, bricks, ballhitbrick); paddle.x = game.in
put.x || game.world.width*0.5; } the ball's position is calculated against the positions of all the bricks in the group.
Move the ball - Game development
the code inside it is executed on every frame, so it's a perfect place to
put the code that will update the ball's position on screen.
Gecko FAQ - Gecko Redirect 1
gecko has been known previously by the code names "raptor" and "nglayout"; the new name was chosen following a trademark infringement dis
pute.
Backgrounds and borders - Learn web development
prerequisites: basic com
puter literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to learn how to style the background and border of boxes.
Cascade and inheritance - Learn web development
prerequisites: basic com
puter literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to learn about the cascade and specificity, and how inheritance works in css.
Handling different text directions - Learn web development
prerequisites: basic com
puter literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to understand the importance of writing modes to modern css.
Overflowing content - Learn web development
prerequisites: basic com
puter literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to understand overflow and how to manage it.
Attribute selectors - Learn web development
prerequisites: basic com
puter literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to learn what attribute selectors are and how to use them.
Combinators - Learn web development
prerequisites: basic com
puter literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to learn about the different combinator selectors that can be used in css.
Type, class, and ID selectors - Learn web development
prerequisites: basic com
puter literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to learn about the different css selectors we can use to apply css to a document.
CSS selectors - Learn web development
prerequisites: basic com
puter literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to learn how css selectors work in detail.
Sizing items in CSS - Learn web development
prerequisites: basic com
puter literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to understand the different ways we can size things in css.
The box model - Learn web development
prerequisites: basic com
puter literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to learn about the css box model, what makes up the box model and how to switch to the alternate model.
Flexbox - Learn web development
try adding the following declaration to your <section> rule: flex-direction: column; you'll see that this
puts the items back in a column layout, much like they were before we added any css.
Add a hitmap on top of an image - Learn web development
then assign that name (preceded by a hash) as the value for the usemap attribute: <img src="image-map.png" alt="" usemap="#example-map-1" /> step 2: activate your hotspots in this step,
put all your code inside a <map> element.
Framework main features - Learn web development
ember interactivity: events, classes and state ember interactivity: footer functionality, conditional rendering routing in ember ember resources and troubleshooting vue getting started with vue creating our first vue component rendering a list of vue components adding a new todo form: vue events, methods, and models styling vue components with css using vue com
puted properties vue conditional rendering: editing existing todos focus management with vue refs vue resources svelte getting started with svelte starting our svelte todo list app dynamic behavior in svelte: working with variables and props componentizing our svelte app advanced svelte: reactivity, lifecycle, accessibility working with svelte stores typescript ...
Introduction to cross browser testing - Learn web development
if you haven't got the means to test all those different browser, operating system, and device combinations on physical hardware, you can also make use of emulators (emulate a device using software on your desktop com
puter) and virtual machines (software that allows you to emulate multiple operating system/software combinations on your desktop com
puter).
Mozilla accessibility architecture
accessible/src/other/ empty implementations of platform-specific classes so that builds don't fail on platforms currently not-supported where we
put toolkit-specific code because atk and msaa are different accessibility api toolkits which share only about 75% of their code, there is a lot of toolkit-specific code that needs to live somewhere.
Information for users
assistive technology compatibility this is a wiki page which users can edit to provide up to date information on any issues related to compatibility with assistive technologies such as screen readers, screen magnifiers, voice in
put software and on screen keyboards.
Accessibility and Mozilla
the uaag is not the basis for any government accessibility regulations at this time.multiprocess on windowsa high-level overview of the ideas behind the a11y+e10s design is available on the wiki.software accessibility: where are we today?the accessibility of com
puter software has seen drastic improvements over the past two decades.
Theme concepts
defining a theme to create a theme (in this example a simple, single image theme): create a folder in a suitable location on your com
puter.
Android-specific test suites
if an issue is found within the code, a warning will be identified and
put into the correct category that the suite controls — this could be malicious, correctness, or just bad practice.
Browser chrome tests
requestlongertimeout(2); waitforexplicitfinish(); settimeout(completetest, 40000); } function completetest() { ok(true, "timeout did not run"); finish(); } exceptions in tests any exceptions thrown under test() will be caught and reported in the test out
put as a failure.
Chrome registration
manifest instructions comments # this line is a comment - you can
put here whatever you want a line is a comment if it begins with the character '#'.
Continuous Integration
the sheriffs' role is to "keep the tree green", or in other words, to keep the code in our respositories in a good state, to the extent that the state is reflected in the out
put shown on treeherder.
Debugging Table Reflow
it can be invoked by set gecko_block_debug_flags=reflow the available options are: reflow really-noisy-reflow max-element-size space-manager verify-lines damage-repair lame-paint-metrics lame-reflow-metrics disable-resize-opt these options can be combined with a comma separated list messages generated by the reflow switch: block(div)(1)@00be5ac4: reflowing dirty lines com
putedwidth=9000 com
putedheight=1500 this message is generated inside of nsresult nsblockframe::reflowdirtylines(nsblockreflowstate& astate) it first shows the block id and address and then the com
puted width and height from the htmlreflowstate.
HTTP logging
if you've
put it elsewhere, change the path used on the third line appropriately.) reproduce whatever problem you're trying to debug.
Configuring Build Options
this will also help when troubleshooting because people will want to know which build options you have selected and will assume that you have
put them in your mozconfig file.
OS TARGET
os_target is typically the out
put of the 'uname -s' command on the target platform.
Updating NSPR or NSS in mozilla-central
check for new or removed files $ hg addremove -n review the out
put to make sure it looks correct update the minimum required system nss version in old-configure.in.
Developer guide
obsolete build caveats and tips a place to
put build tips which are no longer relevant to building the latest version of the code from main but are relevant when building old codebases.
Displaying Places information using views
to
put it in terms of javascript, say you have a variable named treeview that references your places tree view: var treeview = document.getelementbyid("myplacestreeview"); points 1 and 2 apply to this variable.
Limitations of frame scripts
examples of apis add-on authors should avoid in frame scripts: nsifilein
putstream nsifileout
putstream constructing a file from a string or nsifile (but file objects can be sent via message manager) htmlin
putelement.mozsetfilenamearray (alternative: mozsetfilearray) xul and browser ui anything that tries to touch the browser ui or anything to do with xul is likely to not work in the content process.
Communicating with frame scripts
gs all the messages details: // chrome script messagemanager.addmessagelistener("my-addon@me.org:my-e10s-extension-message", listener); function listener(message) { console.log(message.name); console.log(message.sync); console.log(message.data); console.log(message.target); console.log(message.objects); } so combining this message listener with the message above will give console out
put somewhat like this, when the user clicks a <div>: "my-addon@me.org:my-e10s-extension-message" false object { details: "they clicked", tag: "div" } <xul:browser anonid="initialbrowser" ...
Limitations of frame scripts
for example: nsifilein
putstream nsifileout
putstream constructing a file from a string or nsifile (but file objects can be sent via message manager) htmlin
putelement.mozsetfilenamearray (alternative: mozsetfilearray) file: uris, see bug 1187099 <...> xul and browser ui anything that tries to touch the browser ui or anything to do with xul is likely not to work in the content process.
Tracking Protection
note that with firefox for android, you can access console out
put using the remote debugger.
Security best practices for Firefox front-end engineers
we use our built-in sanitizer with the following flags: sanitizerallowstyle sanitizerallowcomments sanitizerdropforms sanitizerlogremovals the sanitizer removes all scripts (script tags, event handlers) and form elements (form, in
put, keygen, option, optgroup, select, button, datalist).
-moz-window-dragging
<window>, <panel> inherited no media visual com
puted value as specified animation type discrete canonical order the unique non-ambiguous order defined by the formal grammar syntax the -moz-window-dragging property is specified as one of the keyword values listed below.
MozBeforePaint
this com
putes the current position for the animating box and updates the box's position on screen, and, if the animation sequence is not yet complete, calls window.requestanimationframe() to schedule the next animation frame to be drawn.
MozScrolledAreaChanged
note: while you can poll the values of document.scrollwidth and document.scrollheight to watch for changes to the document size, reading these properties can trigger document reflow, which can make them com
putationally expensive.
Embedding the editor
at window construction time, we get the editorshell from the <editor> element, and
put that into window.editorshell.
Gecko Keypress Event
e.g., ctrl+shift+'2' on persian keyboard layout in
puts a zwnj, though shift+'2' in
puts '@', and so, if gecko were to replace the charcode in this case, users would not be able to in
put zwnj (bug 414130).
Geckoview-Junit Tests
running tests locally if desired, connect an android device to your com
puter, or start an emulator, and make sure your device is visible to adb: $ adb devices list of devices attached emulator-5554 device if no device is found, 'mach geckoview-junit' will offer to start an emulator.
How to implement a custom autocomplete search component
to do so
put the following declaration in your chrome.manifest file: component {x753d830-ba1e-11e0-962b-0800200c9a66} components/basic_autocomplete.js contract @mozilla.org/autocomplete/search;1?name=basic-autocomplete {x753d830-ba1e-11e0-962b-0800200c9a66} and finally use this newly available component in a xul file like this: <textbox id="text1" type="autocomplete" autocompletesearch="basic-autocomplete"/>...
How to investigate Disconnect failures
the event viewer can be found on windows: com
puter management > event viewer > windows logs > application and here we look for errors that overlapped with the test run; we cannot see the freezes (the main thread is blocked).
How to Report a Hung Firefox
this may be because of a code error within firefox itself, such as a deadlock or infinite loop, or it may be caused by 3rd-party software such as a firefox extension, antivirus software, or even malware or a virus on your com
puter.
PBackground
the background thread is designed to be responsive (nobody is allowed to do long running com
putation or file i/o on it) to guarantee better latency than going through the main threads (which can run arbitrary js, gc, etc.) can provide.
Integrated Authentication
on older versions of windows this hash is com
puted using a relatively weak algorithm (see hertel for more info on ntlm authentication).
AddonManager
scope_system 8 this add-on is installed somewhere global to the system (installed for all users of the com
puter).
CustomizableUI.jsm
the internals of this call are cheap (no dom necessary) and you will know where the user has
put your widget.
Http.jsm
method get, post or
put (this is automatically set if postdata exists).
JavaScript OS.Constants
error values eacces permission denied eagain resource temporarily unavailable ebadf bad file descriptor eexist file exists efault bad address efbig file too large einval invalid argument eio in
put/out
put error eisdir is a directory eloop (not always available under windows) too many levels of symbolic links.
Log.jsm
updateappenders(); and the methods mentioned below: logger methods loggerrepository(); length: 0 keys of prototype: getlogger(); rootlogger storagestreamappender(); length: 1 keys of prototype: doappend(); getin
putstream(); newout
putstream(); out
putstream reset(); structuredformatter(); length: 0 keys of prototype: format(); method overview enumerateinterfaces(); length: 0 enumerateproperties(); length: 2 member fields ...
OS.File for the main thread
it uses an atomic write to ensure that the file is not modified if, for some reason, the write cannot complete (typically because the com
puter is turned off, the battery runs out, or the application is stopped.) let encoder = new textencoder(); // this encoder can be reused for several writes let array = encoder.encode("this is some text"); // convert the text to an array let promise = os.file.writeatomic("file.txt", array, // write the array atomically to "file.txt", ...
SourceMap.jsm
this is useful as the final intermediate representation a compiler might use before out
putting the generated js and source map.
XPCOMUtils.jsm
pseudocode this section provides some pseudocode that demonstrates how to
put together a javascript class based on the steps listed above.
JavaScript code modules
netutil.jsm provides helpful networking utility functions, including the ability to easily copy data from an in
put stream to an out
put stream asynchronously.
Index
13 initial setup localization as a pre-requisite to contributing to the l10n program, you need to have access to code, tools, and a properly configured local environment (i.e., your personal com
puter).
Localizing with Mercurial
in order to do so, right-click on your com
puter icon, choose properties > advanced > environmental variables, select path and click edit.
Translation phase
do you have a pet cat (com
puter-assisted translation) tool, like omegat?
Localization sign-off reviews
to
put it simply, when we receive your request, we expect that you have spent time testing your work and making sure all strings have been localized and that your changes are relatively functional.
Localization formats
rtl or wider display) gives the possibility to customize content per locale simple workflow, just
put the file on svn and it can appear on the staging server disadvantages to html very hard for qa if localizer changes something incorrectly (i.e.
What every Mozilla translator should know
for example: bug 12345, fix typos and resize prefwindow, a=l10n as soon as you have committed,
put the bug in fixed state and write fixed1.8.xxx in the keyword field you have to verify in the next build that the changes have been successful.
Extras
> </mfrac> </mrow> </math> </p> css content math.cue *[title] { color: blue; } mixing with other markups html content <math display="block"> <mrow> <mi>a</mi> <mo>=</mo> <mo>[</mo> <mtable> <mtr> <mtd><mn>1</mn></mtd> <mtd> <mtext> <img width="16" height="16" src="https://udn.realityripple.com/samples/3f/9341cbddc0.png" alt="mozilla-16" /> </mtext> </mtd> </mtr> <mtr> <mtd> <mtext><in
put value="type" size="4"/></mtext> </mtd> <mtd><mn>4</mn></mtd> </mtr> </mtable> <mo>]</mo> </mrow> </math> <math display="block"> <msqrt> <mpadded width="30px" height="15px" depth="15px" voffset="-15px"> <mtext> <svg width="30px" height="30px"> <defs> <radialgradient id="radgrad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style="...
Mobile
mobile web development mobile devices have very different hardware characteristics from desktop or laptop com
puters, and many of the apis used to work with them are still in the process of being standardized.
GC and CC logs
out
put to a file can be controlled with the moz_gctimer environment variable.
Intel Power Gadget
understanding the power gadget out
put the following screenshot (from the mac version) demonstrates the available measurements.
about:memory
++ jid1-xufzosoflzsoxg@jetpack/js-non-window/zones/zone(0x100496800) │ ├───5,574,608 b (00.58%) -- {59c81df5-4b7a-477b-912d-4e0fdf64e5f2} │ │ ├──5,529,280 b (00.57%) -- window-objects │ │ │ ├──4,175,584 b (00.43%) ++ top(chrome://chatzilla/content/chatzilla.xul, id=4293) │ │ │ └──1,353,696 b (00.14%) ++ top(chrome://chatzilla/content/out
put-window.html, id=4298) │ │ └─────45,328 b (00.00%) ++ js-non-window/zones/zone(0x100496800)/compartment([system principal], file:///users/njn/library/application%20support/firefox/profiles/puna0zr8.new/extensions/%7b59c81df5-4b7a-477b-912d-4e0fdf64e5f2%7d/components/chatzilla-service.js) │ └───1,872,144 b (00.19%) ++ treestyletab@piro.sakura.ne.jp/js-non-window/zone...
turbostat
invocation turbostat must be invoked as the super-user: sudo turbostat if you get an error saying "turbostat: no /dev/cpu/0/msr", you need to run the following command: sudo modprobe msr the out
put is as follows: core cpu avg_mhz %busy bzy_mhz tsc_mhz smi cpu%c1 cpu%c3 cpu%c6 cpu%c7 coretmp pkgtmp pkg%pc2 pkg%pc3 pkg%pc6 pkg%pc7 pkgwatt corwatt gfxwatt - - 799 21.63 3694 3398 0 12.02 3.16 1.71 61.48 49 49 0.00 0.00 0.00 0.00 22.68 15.13 1.13 0 0 821 22.44 3657 3398 0 9...
Performance
memory profiling and leak detection tools the developer tools "memory" panel the memory panel in the devtools supports taking heap snapshots, diffing them, com
puting dominator trees to surface "heavy retainers", and recording allocation stacks.
browser.dom.window.dump.file
browser.dom.window.dump.file redirects the ou
put of window.dump() calls to a file whose address is specified in this preference if browser.dom.window.dump.enabled is set to true.
Preference reference
set it to true to enable it, or false to disable it.browser.dom.window.dump.filebrowser.dom.window.dump.file redirects the ou
put of window.dump() calls to a file whose address is specified in this preference if browser.dom.window.dump.enabled is set to true.
Patches and pushes
<searchplugin xmlns="http://www.mozilla.org/2006/browser/search/"> <shortname>yahoo</shortname> <description>yahoo search</description> <in
putencoding>utf-8</in
putencoding> <image width="16" height="16">data:image/x-icon;base64,r0lgodlheaaqajecap8aaaaaap///waaach5baeaaaialaaaaaaqabaaaaipli+py+0nogquybdened2khkffwuamezmpzsfmaihphrrguum/ft+uwaaow==</image> ***this tag is optional***<url type="application/x-suggestions+json" method="get" template="http://ff.search.yahoo.com/gossip?out
put=fxjson&command={searchterms}" />*** <url ty...
Emscripten
emscripten generates fast code — its default out
put format is asm.js , a highly optimizable subset of javascript that can execute at close to native speed in many cases.
Installing JSHydra
cd $home/jshydra hg clone http://hg.mozilla.org/users/pidgeot18_gmail.com/jshydra/ cd jshydra ./configure make # run jshydra tests make check processing in
put files jshydra requires the files it processes to be correct js files.
Localization Use Cases
this takes the responsibility away from the developers and
puts it in the hands of localizers, at the same time transforming it from a burden into an opportunity.
Midas
anticipated usage is for temporarily disabling in
put while something else is occurring elsewhere in the web page.
PR_LOG
returns nothing description this macro formats the specified arguments and writes the out
put to the log file, if logging is enabled for the specified module and level.
PR NewProcessAttr
the new prprocessattr structure is initialized with these default attributes: the standard i/o streams (standard in
put, standard out
put, and standard error) are not redirected.
PR_NewThreadPrivateIndex
syntax #include <prthread.h> prstatus pr_newthreadprivateindex( pruintn *newindex, prthreadprivatedtor destructor); parameters pr_newthreadprivateindex has the following parameters: newindex on out
put, an index that is valid for all threads in the process.
PR_Now
you cannot assume that the values returned by pr_now() are monotonically increasing because the system clock of the com
puter may be reset.
PR_Read
on out
put, the buffer contains the data.
PR_SetSocketOption
description on in
put, the caller must set both the option and value fields of the prsocketoptiondata object pointed to by the data parameter.
Running NSPR tests
to run the test suite, run the shell script mozilla/nsprpub/pr/tests/runtests.sh in the directory where the test program binaries reside, for example, cvs -q co -r nspr_4_6_6_rtm mozilla/nsprpub mkdir linux.debug cd linux.debug ../mozilla/nsprpub/configure gmake cd pr/tests gmake ../../../mozilla/nsprpub/pr/tests/runtests.sh the out
put of the test suite looks like this: nspr test results - tests begin mon mar 12 11:44:41 pdt 2007 nspr_test_logfile /dev/null test result accept passed acceptread passed acceptreademu passed affinity passed alarm passed anonfm pas...
Build instructions for JSS 4.3.x
build instructions for jss 4.3.x newsgroup: mozilla.dev.tech.crypto before building jss, you need to set up your system as follows: build nspr/nss by following the nspr/nss build instructions, to check that nss built correctly, run all.sh (in mozilla/security/nss/tests) and examine the results (in mozilla/test_results/security/com
putername.#/results.html.
Using JSS
you can
put this directory in your classpath to run applications locally; or, you can package the class files into a jar file for easier distribution: cd mozilla/dist/classes[_dbg] zip -r ../jss42.jar .
JSS
when nss is
put in fips mode, jss ensures fips compliance by ensuring that all cryptographic operations are performed by the nss cryptographic module.
NSS Memory allocation
when a plarenapool is freed, all the arenas in that pool are
put on an arena free list.
NSS 3.12.5 release_notes
see the following struct in nss.h for details: nssinitparametersstr other new functions in secmod.h: secmod_getskipfirstflag secmod_getdefaultmoddbflag in prlink.h nss_securememcmp port_loadlibraryfromorigin modified functions sgn_update (see cryptohi.h) the parameter "in
put" of this function is changed from unsigned char * to const unsigned char *.
NSS 3.12.6 release notes
support for tls compression rfc 3749 bug 494603: update nss's copy of sqlite3 to 3.6.22 to get numerous bug fixes bug 496993: add accessor functions for ssl_implementedciphers bug 515279: cert_pkixverifycert considers a certificate revoked if cert_processocspresponse fails for any reason bug 515870: gcc compiler warnings in nss 3.12.4 bug 518255: the in
put buffer for sgn_update should be declared const bug 519550: allow the specification of an alternate library for sqlite bug 524167: crash in [[@ find_objects_by_template - nsstoken_findcertificatebyissuerandserialnumber] bug 526910: maxresponselength (initialized to pkix_default_max_response_length) is too small for downloading some crls.
NSS 3.12.9 release notes
bug 609068: implement j-pake in freebl bug 607058: crash [@ nss_cms_decoder_work_data] bug 613394: november/december 2010 batch of nss root ca changes bug 610843: need way to recover softoken in child after fork() bug 617492: add pk11_keygenwithtemplate function to pk11wrap (for firefox sync) bug 610162: sha-512 and sha-384 hashes are incorrect for in
puts of 512mb or larger when running under windows and other 32-bit platforms (fx 3.6.12 and 4.0b6) bug 518551: vfychain crashes in pkits tests.
NSS 3.14 release notes
the old options to disable ssl 2, ssl 3 and tls 1.0 have been removed and replaced with a new -v option that specifies the enabled range of protocol versions (see usage out
put of those tools).
NSS 3.15.5 release notes
notable changes in nss 3.15.5 bug 950129: improve the ocsp fetching policy when verifying ocsp responses bug 949060: validate the iov in
put argument (an array of priovec structures) of ssl_writev (called via pr_writev).
NSS 3.16.2 release notes
notable changes in nss 3.16.2 the btoa command has a new command-line option -w suffix, which causes the out
put to be wrapped in begin/end lines with the given suffix.
NSS 3.21 release notes
ckm_tls_mac - com
putes tls finished mac in secoidt.h nss_use_alg_in_ssl_kx - policy flag indicating that keys are used in tls key exchange in sslerr.h ssl_error_rx_short_dtls_read - error code for failure to include a complete dtls record in a udp packet ssl_error_no_supported_signature_algorithm - error code for when no valid signature and hash algorithm is available ssl_error_unsupport...
NSS 3.36.8 release notes
bugs fixed in nss 3.36.8 1554336 - optimize away unneeded loop in mpi.c 1515342 - more thorough in
put checking (cve-2019-11729) 1540541 - don't unnecessarily strip leading 0's from key material during pkcs11 import (cve-2019-11719) compatibility nss 3.36.8 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.38 release notes
when using certutil -o to print the chain for a given certificate nickname, the new parameter --simple-self-signed may be provided, which can avoid ambiguous out
put in some scenarios.
NSS 3.44.1 release notes
new in nss 3.44.1 new functionality 1546229 - add ipsec ike support to softoken many new fips test cases (note: this has increased the source archive by approximately 50 megabytes for this release.) bugs fixed in nss 3.44.1 1554336 - optimize away unneeded loop in mpi.c 1515342 - more thorough in
put checking (cve-2019-11729) 1540541 - don't unnecessarily strip leading 0's from key material during pkcs11 import (cve-2019-11719) 1515236 - add a sslkeylogfile enable/disable flag at build.sh 1473806 - fix seckey_converttopublickey handling of non-rsa keys 1546477 - updates to testing for fips validation 1552208 - prohibit use of rsassa-pkcs1-v1_5 algorithms in tls 1...
NSS 3.44.2 release notes
bugs fixed in nss 3.44.2 bug 1582343 - soft token mac verification not constant time bug 1577953 - remove arbitrary hkdf out
put limit by allocating space as needed this bugzilla query returns all the bugs fixed in nss 3.44.2: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.44.2 compatibility nss 3.44.2 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.46.1 release notes
bugs fixed in nss 3.46.1 bug 1582343 - soft token mac verification not constant time bug 1577953 - remove arbitrary hkdf out
put limit by allocating space as needed this bugzilla query returns all the bugs fixed in nss 3.46.1: https://bugzilla.mozilla.org/buglist.cgi?resolution=fixed&classification=components&query_format=advanced&product=nss&target_milestone=3.46.1 compatibility nss 3.46.1 shared libraries are backward compatible with all older nss 3.x shared libraries.
NSS 3.46 release notes
r aes-kw bug 1571316 - curve25519_32.c:280: undefined reference to `pr_assert' when building nss 3.45 on armhf-linux bug 1516593 - client to generate new random during renegotiation bug 1563258 - fips.sh fails due to non-existent "resp" directories bug 1561598 - remove -wmaybe-uninitialized warning in pqg.c bug 1560806 - increase softoken password max size to 500 characters bug 1568776 - out
put paths relative to repository in nss coverity bug 1453408 - modutil -changepw fails in fips mode if password is an empty string bug 1564727 - use a pss spki when possible for delegated credentials bug 1493916 - fix ppc64 inline assembler for clang bug 1561588 - remove -wmaybe-uninitialized warning in p7env.c bug 1561548 - remove -wmaybe-uninitialized warning in pkix_pl_ldapdefaultclient.c bu...
NSS 3.47 release notes
s hw acceleration on armv8 bug 1549225 - disable dsa signature schemes for tls 1.3 bug 1586947 - pk11_importandreturnprivatekey does not store nickname for ec keys bug 1586456 - unnecessary conditional in pki3hack, pk11load and stanpcertdb bug 1576307 - check mechanism param and param length before casting to mechanism-specific structs bug 1577953 - support longer (up to rfc maximum) hkdf out
puts bug 1508776 - remove refcounting from sftk_freesession (cve-2019-11756) bug 1494063 - support tls exporter in tstclnt and selfserv bug 1581024 - heap overflow in nss utility "derdump" bug 1582343 - soft token mac verification not constant time bug 1578238 - handle invald tag sizes for ckm_aes_gcm bug 1576295 - check all bounds when encrypting with seed_cbc bug 1580286 - nss rejects tls 1.
NSS Sample Code sample3
char *digest, unsigned int len) { int i; cout << "length: " << len << endl; for(i = 0;i < len;i++) printf("%02x ", digest[i]); cout << endl; } /* * main */ int main(int argc, const char *argv[]) { int status = 0; pk11slotinfo *slot = 0; pk11symkey *key = 0; pk11context *context = 0; unsigned char data[80]; unsigned char digest[20]; /*is there a way to tell how large the out
put is?*/ unsigned int len; secstatus s; /* initialize nss * if your application code has already initialized nss, you can skip it * here.
nss tech note3
bolyard this week at least 5 different people came to me with variants of the same question: what certificate extensions do i have to
put into my cert for nss to allow it to be used for purpose <x>??
nss tech note7
the strength of an rsa key pair is measured by the size of its modulus because given the modulus and public exponent, the best known algorithm for com
puting the private exponent is to factor the modulus.
New NSS Samples
see https://bugzilla.mozilla.org/show_bug.cgi?id=490238 how to download the samples: hg clone https://hg.mozilla.org/projects/nss; cd nss; hg update samples_branch samples list: sample code 1: hashing sample code 2: init nss database sample code 3: encrypt/decrypt and mac using token sample code 4: encrypt/decrypt and mac using session objects sample code 5: encrypt/decrypt/mac out
put public key as a csr sample code 6: encrypt/decrypt/mac generating a pkcs#11 csr common code used by these samples: sample code 0: utilities thanks are due to shailendra jain, mozilla community member, who is the principal author of these samples.
Overview of NSS
the nss libraries passed the niscc tls/ssl and s/mime test suites (1.6 million test cases of invalid in
put data).
PKCS11 FAQ
that is, no token init, no key gens, no data
puts, no cert
puts, etc.?
Python binding for NSS
add certificate_summary_format_lines() utility to generate concise certificate identification info for out
put.
FC_Digest
pusdigestlen [in, out] pointer to the maximum size of the out
put buffer, replaced by the length of the message digest if the operation is successful.
FC_GetFunctionList
syntax ck_rv fc_getfunctionlist(ck_function_list_ptr *ppfunctionlist); parameters fc_getfunctionlist has one parameter: ppfunctionlist [out
put] the address of a variable that will receive a pointer to the list of function pointers.
FC_GetMechanismList
syntax ck_rv fc_getmechanismlist( ck_slot_id slotid, ck_mechanism_type_ptr pmechanismlist, ck_ulong_ptr puscount ); parameters fc_getmechanismlist takes three parameters: slotid [in
put] pinfo [out
put] the address of a variable that will receive a pointer to the list of function pointers.
FC_Sign
pussignaturelen [in, out] pointer to the maximum size of the out
put buffer, replaced by the length of the signature if the operation is successful.
FC_SignRecover
pussignaturelen [in, out] pointer to the size of the out
put buffer, replaced by the length of the signature if the operation is successful.
FC_VerifyRecover
pusdatalen [in, out] pointer to the size of the out
put buffer, replaced by the length of the signature if the operation is successful.
FC_WaitForSlotEvent
syntax ck_rv fc_waitforslotevent(ck_flags flags, ck_slot_id_ptr pslot ck_void_ptr preserved); parameters fc_waitforslotevent takes three parameters: [in
put] flags [in
put] pslot.
NSS functions
nd later nss_init mxr 3.2 and later nss_initialize mxr 3.2 and later nss_initreadwrite mxr 3.2 and later nss_initwithmerge mxr 3.12 and later nss_isinitialized mxr 3.9.2 and later nss_nodb_init mxr 3.2 and later nss_
putenv mxr 3.2 and later nss_registershutdown mxr 3.11.1 and later nss_shutdown mxr 3.2 and later nss_unregistershutdown mxr 3.11.1 and later nss_versioncheck mxr 3.2 and later nssbase64_decodebuffer mxr 3.4 and later nssbase64decoder_...
JS_FlattenString
note: the in
put and out
put of js_flattenstring() are the same actual gc-thing so only one needs to be rooted.
JS_GetGCParameter
see zoneheapthreshold::com
putezoneheapgrowthfactorforheapsize in gc.cpp for the details.
JS_NewGlobalObject
but this creates a problem for consumers that need to set slots on the global to
put it in a consistent state.
JS_SetOptions
mxr id search for jsoption_dont_report_uncaught jsoption_relimit added in spidermonkey 1.8 throw an exception if a regular expression backtracks more than n3 times, where n is the length of the in
put string.
JS_SuspendRequest
description in js_threadsafe builds, when a multi-threaded application is in a request but needs to block or perform lengthy com
putation that can race safely with the garbage collector, it should call js_suspendrequest before the time-consuming operation and js_resumerequest after.
JSDBGAPI
prefix jsfilename_null jsfilename_system jsfilename_protected evaluating debug code js_evaluateinstackframe examining object properties typedef jspropertydesc jspd_enumerate jspd_readonly jspd_permanent jspd_alias jspd_argument jspd_variable jspd_exception jspd_error typedef jspropertydescarray js_propertyiterator js_getpropertydesc js_getpropertydescarray js_
putpropertydescarray hooks js_setdebuggerhandler js_setsourcehandler js_setexecutehook js_setcallhook js_setobjecthook js_setthrowhook js_setdebugerrorhook js_setnewscripthook js_setdestroyscripthook js_getglobaldebughooks js_setcontextdebughooks memory usage js_getobjecttotalsize js_getfunctiontotalsize js_getscripttotalsize system objects js_issystemobject js_newsyste...
SpiderMonkey 1.8.5
regexp apis js_clearregexpstatics, js_newregexpobject, js_newregucexpobject, and js_setregexpin
put now receive a pointer to the global object.
SpiderMonkey 1.8.7
regexp apis js_clearregexpstatics, js_newregexpobject, js_newregucexpobject, and js_setregexpin
put now receive a pointer to the global object.
Setting up CDT to work on SpiderMonkey
under the "providers" group tab, select "cdt gcc build out
put parser" and add the string |(ccache) to the end of the "compiler command pattern" text in
put.
Split object
again, spidermonkey enforces a slightly stronger rule: outer objects may never appear in a scope chain at all, except when
put there by an explicit c-level jsapi call (to js_setparent or equivalent).
TPS Bookmark Lists
be moved to position: the title of the existing bookmark item, in the current folder, where this bookmark should be moved to (i.e., this bookmark would be inserted into the bookmark list at the position of the named bookmark, causing that bookmark to be positioned below the current one) example: { uri: "http://www.google.com", title: "google", loadinsidebar: false, tags: [ "google", "com
puters", "misc" ] } livemark objects valid properties are: livemark: the livemark name.
Thread Sanitizer
the default way of symbolizing the traces is much slower than using llvm-symbolizer for that purpose: llvm ships with a symbolizer binary that tsan will readily use to immediately out
put symbolized traces much faster.
Mozinfo
example out
put: os: linux version: ubuntu 10.10 bits: 32 processor: x86 three of these fields, os, bits, and processor, have a finite set of choices.
Mozilla Projects
the in
puts driving the rewriting would normally be provided by a program-analysis system outside of pork.
The Rust programming language
rust and the future of systems programming unlocking the power of parallelism with rust rust for web developers safe systems programming with rust growing the rust community
putting rust into production at mozilla ...
Making cross-thread calls using runnables
task : public nsrunnable { public: picalculatetask(picallback callback, int digits) : mcallback(callback) , mdigits(digits) { } ns_imethod run() { nscstring result; calculatepi(mdigits, result); nscomptr<nsirunnable> resultrunnable = new piresulttask(mcallback, result); ns_dispatchtomainthread(resultrunnable); } private: picallback mcallback; int mdigits; };
putting it all together to start a new thread, create it using the thread manager: #include "nsxpcomcidinternal.h" void calculatepiasynchronously(int digits, picallback callback) { // to create a new thread, get the thread manager nscomptr<nsithreadmanager> tm = do_getservice(ns_threadmanager_contractid); nscomptr<nsithread> mythread; nsresult rv = tm->newthread(0, 0, getter_addrefs(mythread...
How To Pass an XPCOM Object to a New Window
to access the xpcom object from the window's code, you can access the window.arguments[] array, as shown in the example below: components.utils.reporterror(string(window.arguments[0])); this will produce out
put similar to "[xpconnect wrapped nsimyxpcomobject]".
Components.isSuccessCode
examples checking whether copying a stream's data succeeded the following example demonstrates copying data from a buffered nsiin
putstream to an nsiout
putstream, checking for whether the copy succeeded using components.issuccesscode().
Components.utils
obsolete since gecko 45 the function was moved to threadsafechromeutils nukesandbox() recom
putewrappers() to be called from js only.
xpcshell
example you can in
put javascript, straight to mozilla.
Standard XPCOM components
nsobserverservicethe xpcom observer service.nsscriptablein
putstreama component implementing nsiscriptablein
putstream.
NS_OVERRIDE
example class a has a method getfoo() which is overridden by class b: class a { virtual nsresult getfoo(nsifoo** aresult); }; class b : public a { ns_override virtual nsresult getfoo(nsifoo** aresult); }; later, the signature of a::getfoo() is changed to remove the out
put parameter: class a { - virtual nsresult getfoo(nsifoo** aresult); + virtual already_addrefed<nsifoo> getfoo(); }; b::getfoo() no longer overrides a::getfoo() as was originally intended.
IAccessibleText
it represents the current in
put position and will therefore typically be queried by at more often than other positions.
imgIContainer
obsolete since gecko 2.0 kblendsource 0 all color components of the frame, including alpha, const long kblendover = 1; // the frame should be composited onto the out
put buffer.
imgILoader
aloadgroup loadgroup to
put the image load into.
mozIRegistry
in the future, i'll either add the information about it or at least
put in a link to it's documentation.
mozIStorageStatement
sample code var statement = dbconn.createstatement( "select * " + "from table_name " + "where column_name like :userin
put escape '/'" ); statement.params.userin
put = statement.escapestringforlike(someuserin
put, "/"); binding functions these functions are discussed in more detail with sample code in the overview document.
nsIAbCard
astring generatephoneticname(in boolean alastnamefirst) parameters alastnamefirst set to true to
put the last name before the first.
nsIAccessibleEvent
isfromuserin
put boolean returns true if the event was caused by explicit user in
put, as opposed to purely originating from a timer or mouse movement.
nsIAppStartup
pinfo = components.classes["@mozilla.org/toolkit/app-startup;1"] .getservice(ci.nsiappstartup_mozilla_2_0).getstartupinfo(); var keys = object.keys(startupinfo); keys.sort(function(a, b) { return startupinfo[a] - startupinfo[b]; }); for each (var name in keys) { aconsoleservice.logstringmessage(name + ": " + startupinfo[name]); } to calculate how long startup took, com
pute the difference between the event's timestamp and the timestamp of the process event.
nsIArray
note that since null is a valid in
put, exceptions are used to indicate that an element is not found.
nsICRLManager
inherits from: nsisupports last changed in gecko 1.7 method overview wstring com
putenextautoupdatetime(in nsicrlinfo info, in unsigned long autoupdatetype, in double noofdays); void deletecrl(in unsigned long crlindex); nsiarray getcrls(); void importcrl([array, size_is(length)] in octet data, in unsigned long length, in nsiuri uri, in unsigned long type, in boolean dosilentdownload, in wstring crlkey); void reschedulecrlautoupdate(); boolean updatecrlfromurl(in wstring url, in wstring key); constants constant value description type_autoupdate_time_based 1 type_autoupdate_freq_based 2 methods com
putenextautoupdatetime() wstring com
putenextautoupdatetime( ...
nsIContentFrameMessageManager
methods void dump(in domstring astr); domstring atob(in domstring aasciistring); domstring btoa(in domstring abase64data); dump() prints the specified string to standard out
put.
nsIControllers
windows and text in
puts have default controllers that allow commands such as cmd_copy to act on the focused element or window.
nsICookieStorage
acookiesize on in
put, size of the cookie buffer, on out
put cookie's size.
nsIDOMFile
the nsidomfile interface retrieves data from a file submitted to a form using the in
put type "file".
nsIDOMFileList
the nsidomfilelist interface contains a list of nsidomfile objects describing the files selected by the user for a "file" in
put field on a web form.
nsIDirIndexListener
they can then be transformed into an out
put format (such as rdf, html and so on) inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview void onindexavailable(in nsirequest arequest, in nsisupports actxt, in nsidirindex aindex); void oninformationavailable(in nsirequest arequest, in nsisupports actxt, in astring ainfo); methods onindexavailable() called for each directory entry.
getFile
xpcom file system aliases apersistent [out] this out
put parameter indicates to the caller whether or not the returned location is persistent.
nsIDiskCacheStreamInternal
1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void closeinternal(); methods closeinternal() we use this method internally to close nsdiskcacheout
putstream under the cache service lock.
nsIDownloadManagerUI
with this information, it's possible to
put the download manager in a tab in the same window as the parent.
nsIDragSession
void getdata( in nsitransferable atransferable, in unsigned long aitemindex ); parameters atransferable the transferable for the data to be
put into.
nsIFeed
textin
put nsiwritablepropertybag2 information about a text box that can be displayed along with the feed by aggregators that support it, to allow the reader to send a response back to the source of the feed.
nsIHttpChannel
note: the data for a "post" or "
put" request can be configured via nsiuploadchannel.
nsIINIParserWriter
void writefile( in nsifile ainifile, optional in unsigned long aflags optional ); parameters ainifile optional if specified, this nsifile based object is used as the out
put file instead of the one specified at initialization time (if any).
available
this content is now available at nsiin
putstream.available().
close
this content is now available at nsiin
putstream.close().
isNonBlocking
this content is now available at nsiin
putstream.isnonblocking().
read
this content is now available at nsiin
putstream.read().
readSegments
this content is now available at nsiin
putstream.readsegments().
Using nsILoginManager
word, usernamefield, passwordfield ); examples creating a login for a web page var formlogininfo = new nslogininfo( 'http://www.example.com', 'http://login.example.com', null, 'joe', 'secret123', 'uname', 'pword' ); this login would correspond to a html form such as: <form action="http://login.example.com/foo/authenticate.cgi"> <div>please log in.</div> <label>username:</label> <in
put type="text" name="uname"> <label>password:</label> <in
put type="password" name="pword"> </form> creating a site authentication login var authlogininfo = new nslogininfo( 'http://www.example.com', null, 'exampleco login', 'alice', 'secret321', "", "" ); this would correspond to a login on http://www.example.com when the server sends a reply such as: http/1.0 401 authorization requir...
nsILoginMetaInfo
1.0 66 introduced gecko 1.9.1 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) you can specifically modify these values by passing changes into nsiloginmanager.modifylogin() using an nsipropertybag2 object as the in
put.
nsIMemoryReporterManager
this reporter is special-cased because it is interesting, and is moderately difficult to com
pute in javascript.
nsIMimeConverter
harset, in long fieldnamelen, in long encodedwordsize); string decodemimeheadertocharptr(in string header, in string default_charset, in boolean override_charset, in boolean eatcontinuations); astring decodemimeheader(in string header, in string default_charset, in boolean override_charset, in boolean eatcontinuations); mimeencoderdata *b64encoderinit(in mimeconverterout
putcallback out
put_fn, in void *closure); mimeencoderdata *qpencoderinit(in mimeconverterout
putcallback out
put_fn, in void *closure); void encoderdestroy(in mimeencoderdata *data, in boolean abort_p); long encoderwrite(in mimeencoderdata *data, in string buffer, in long size); methods encodemimepartiistr() an variant of encodemimepartiistr_utf8() which treats the...
Building an Account Manager Extension
function onpreinit(account, accountvalues) { } function oninit(pageid, serverid) { } function onaccepteditor() { } function onsave() { } function updatepage() {} step5:
putting it all together // todo build an demo extension for this tutorial...
nsISyncJPAKE
this will com
pute the key and expand the key to two keys, an aes256 encryption key and a 256 bit hmac key.
nsITreeView
it is multiplied by the width specified in the ::moz-tree-indentation pseudoelement to com
pute the exact indentation.
nsIURIFixup
fixup_flags_make_alternate_uri 2 tell the fixup to make an alternate uri from the in
put uri, for example to turn foo into www.foo.com.
nsIUpdatePatch
hashvalue astring the value of the hash function named in hashfunction that should be com
puted if the file is not corrupt.
nsIWindowMediator
you can specify the type of your window by
putting a windowtype attribute on the top-level element, like <window> or <dialog>.
nsIXMLHttpRequest
you only want this if your url is to a zip file or some file you want to download and make a nsiarraybufferin
putstream out of it or something xhr.send(null); } xhr('https://www.gravatar.com/avatar/eb9895ade1bd6627e054429d1e18b576?s=24&d=identicon&r=pg&f=1', data => { services.prompt.alert(null, 'xhr success', data); var file = os.path.join(os.constants.path.desktopdir, "test.png"); var promised = os.file.writeatomic(file, new uint8array(data)); promised.then( function() { ...
nsIXPCScriptable
if idp is non-null and the number of enumerable properties cannot be com
puted in advance, idp should be set to jsval_zero.
nsIXPConnect
returnstringonly the only results to come out of the com
putation (including exceptions) will be coerced into strings created in the sandbox.
nsIXmlRpcClient
supported arguments are: nsisupportspruint8, nsisupportspruint16, nsisupportsprint16, nsisupportsprint32: i4, nsisupportsprbool: boolean, nsisupportschar, nsisupportscstring: string, nsisupportsfloat, nsisupportsdouble: double, nsisupportsprtime: datetime.iso8601, nsiin
putstream: base64, nsisupportsarray: array, nsidictionary: struct note that both nsisupportsarray and nsidictionary can only hold any of the supported in
put types.
nsIAbCard/Thunderbird3
astring generatephoneticname(in boolean alastnamefirst) parameters alastnamefirst set to true to
put the last name before the first.
XPCOM Thread Synchronization
concurrentmethod() { nsautolock al(mlock); nsautomonitor am(mmonitor); if (needexpensivecom
putation()) { nsautounlock au(mlock); } am.wait(); pr_notifycondvar(mcvar); } new usage using namespace mozilla; concurrentmethod() { mutexautolock al(mlock); monitorautoenter am(mmonitor); if (needexpensivecom
putation()) { mutexautounlock au(mlock); } am.wait(); mcvar->notify(); } mozilla synchronization api...
XPCOM ABI
to
put it simply, an xpcom component built for a specific abi would only be compatible with firefox, thunderbird or other xulrunner application built for the same abi.
Xptcall Porting Guide
i
put together xptcall/src/md/test as a place to evolve the basic functionality as a port is coming together.
Generating xpt on Windows
assuming you installed your xulrunner sdk at <mozsdkdir>, you then need to issue a command similar to c:\working-dir> <mozsdkdir>\sdk\bin\typelib.py <in
putfile.idl> -o <out
putfile.xpt> -i <mozsdkdir>\idl ...
XPIDL Syntax
this may be followed by the language, as in `%{c++', to out
put the raw fragment only in the specified language.
xpidl
``/tmp/nsithing) for out
put -e use explicit out
put filename -d write dependencies (requires -e) -m specify out
put mode: header generate c++ header (.h) typelib generate xpconnect typelib (.xpt) doc generate html documentation (.html) java generate java interface (.java) ...
XSLT 2.0
error and diagnostics out
put from saxon-ce can be reviewed in the firefox developer console or in firebug.
The Valgrind Test Job
it also prints a suppression, which is a sequence of text that can be
put in a suppression file (and specified via valgrind's --suppressions option) if you want valgrind to ignore such errors in future runs.
MailNews fakeserver
tion the transaction is an object with two properties: us, and them; us is an array of responses we sent, them an array of commands received resettest none nothing prepares the server for the next test without closing the connection start port number nothing starts the server listening stop none nothing stops the server and closes the connection using fakeserver in qa testing debug out
put from fakeservers it is possible to get the fakeservers to dump to the console the commands they have sent and received.
Main Windows
things appear confusing for several reasons: much of the code is written to be portable, so instead of duplicating it, its been
put in overlays that are loaded over many different types of windows.
Creating a Custom Column
putting the pieces together we now have our column and our handler object - it's time to
put everything together.
Access Thunderbird Window Areas
var foldertree = getfoldertree(); var searchin
put = getsearchin
put(); var messagepane = getmessagepane(); var messagepaneframe = getmessagepaneframe(); var mailtoolbox = getmailtoolbox(); var currentmsgfolder = getloadedmsgfolder(); see the msgmail3panewindow.js for other helper methods ...
Using the Multiple Accounts API
preference: mail.identity.identity.fcc_folder - uri of folder to
put sent messages in preference: mail.identity.identity.bcc_self - boolean, should we blind carbon copy (bcc) this identity with each e-mail sent with this identity?
Using tab-modal prompts
rompter;1'].getservice(components.interfaces.nsipromptfactory); var prompt = promptfact.getprompt(window, components.interfaces.nsiprompt); var promptbag = prompt.queryinterface(components.interfaces.nsiwritablepropertybag2); promptbag.setpropertyasbool('allowtabmodal', true); var check = {value: false}; //initial state of checkbox, however if no text is supplied the checkbox is not shown var in
put = {value: 'pre filled value'}; var ok = prompt.prompt.apply(null, ['title - but not shown in tab modal', 'text goes here', in
put, 'check text, if no text, checkbox is not shown', check]); //this here is just an alert, showing the values of the prompt prompt.alert.apply(null, ['title not shown in modal', 'user clicked ok: ' + ok + '\n' + 'checked: ' + check.value + '\nin
put value: ' + in
put.value...
Declaring types
this method accepts as in
put the name of the structure and an array of field descriptors, each describing one field in the structure.
Constants - Plugins
version feature constants npvers constant: version feature information value description npvers_has_streamout
put 8 streaming data.
Plug-in Basics - Plugins
acces | grep -v search | grep plugins access("/home/user_name/.mozilla/firefox/dqh2nb5k.default-1441864569209/plugins", f_ok) = -1 enoent (no such file or directory) access("/home/user_name/.mozilla/plugins", f_ok) = -1 enoent (no such file or directory) access("/usr/lib64/firefox/browser/plugins", f_ok) = -1 enoent (no such file or directory) access("/usr/lib/mozilla/plugins", f_ok) = 0 this out
put i have after close firefox.
URLs - Plugins
file (host-specific filenames) locates files on a specific host com
puter rather than an internet resource.
Plugin Roadmap for Firefox - Plugins
flash & the future of interactive content google chrome flash roadmap sep 2013 - saying goodbye to our old friend npapi may 2014 - update on npapi deprecation november 2014 - the final countdown for npapi august 2016 - flash and chrome december 2016 - roll-out plan for html5 by default july 2017 - saying goodbye to flash in chrome microsoft edge and internet explorer april 2016 -
putting users in control of flash december 2016 - extending user control of flash with click-to-run july 2017 - flash on windows timeline august 2019 - update on removing flash from microsoft edge and internet explorer apple safari june 2016 - next steps for legacy plug-ins july 2017 - adobe announces flash distribution and updates to end ...
Accessibility Inspector - Firefox Developer Tools
this can mean different things depending on the type of the item; for example, a form in
put (role: entry) would have a value of whatever is entered in the in
put, whereas a link's value would be the url in the corresponding <a> element's href.
Inspecting web app manifests - Firefox Developer Tools
when you open the application panel’s manifest view on a page that doesn't have an app manifest successfully deployed, you'll get the following out
put shown: deploying a manifest to get a manifest deployed successfully, you need to include a <link> element in the <head> of your document that points to your .webmanifest file: <link rel="manifest" href="/manifest.webmanifest"> the .webmanifest extension is recommended in the spec, and should be served with an application/manifest+json mime type, although browsers generally tend to support manifests with other appropriate extensions like .json (mime type: application/json).
Debugging service workers - Firefox Developer Tools
when you open the application panel’s service workers view on a page that doesn't have a service worker registered, you'll get the following out
put shown: this gives you some advice on what to do if you don't have a service worker registered, and were perhaps expecting there to be one registered!
Tutorial: Set a breakpoint - Firefox Developer Tools
if debugger is unable to find the report function, or the console out
put does not appear, evaluate the expression tabs[0].content.document.location in the console to make sure that tabs[0] indeed refers to the html file you visited.
Examine and edit HTML - Firefox Developer Tools
usually this white space seems to have no effect and no visual out
put, but in fact, when a browser parses html it will automatically generate anonymous text nodes for elements not contained in a node.
Page inspector keyboard shortcuts - Firefox Developer Tools
show/hide more information about current property (com
puted view only, when a property is selected) enter or space return or space enter or space open mdn reference page about current property (com
puted view only, when a property is selected) f1 f1 f1 open current css file in style editor (com
puted view only, when more information is shown for a property and a css file reference is focused).
Sorting algorithms comparison - Firefox Developer Tools
// (generate random array, then call sort) x 200 -> sort() // sort with each algorithm, log the result -> bubblesort() -> swap() -> selectionsort() -> swap() -> quicksort() -> partition() the implementations of the sorting algorithms in the program are taken from https://github.com/nzakas/com
puter-science-in-javascript/ and are used under the mit license.
Frame rate - Firefox Developer Tools
switch to the flame chart to see the call stack at that point: the offending function is called dopointlesscom
putations(), and it's defined in "main.js".
Shader Editor - Firefox Developer Tools
with webgl you provide 2 programs called shaders which are called at the appropriate stages of the opengl rendering pipeline: a vertex shader, which com
putes the clip space coordinates of each vertex to be drawn, and a fragment shader, which determines the color for each pixel to be drawn.
Style Editor - Firefox Developer Tools
you can save any changes you've made to the style sheet to your local com
puter by clicking the save button in the bottom-right corner of each sheet's entry in the list.
Tips - Firefox Developer Tools
in the console out
put: click on the inspector icon () next to an element in the out
put to select it within the inspector.
Web Audio Editor - Firefox Developer Tools
two good demos are: the voice-change-o-matic, which can apply various effects to the microphone in
put and also provides a visualisation of the result the violent theremin, which changes the pitch and volume of a sine wave as you move the mouse pointer visualizing the graph the web audio editor will now display the graph for the loaded audio context.
Web Console remoting - Firefox Developer Tools
the response packet: { "from": "conn0.console9", "in
put": "document", "result": { "type": "object", "classname": "htmldocument", "actor": "conn0.consoleobj20" "extensible": true, "frozen": false, "sealed": false }, "timestamp": 1347306273605, "exception": null, "exceptionmessage": null, "helperresult": null } exception holds the json-ification of the exception thrown during evaluation.
AbstractWorker - Web APIs
this code assumes that there's an <in
put> element represented by first; an event handler for the change event is established so that when the user changes the value of first, a message is posted to the worker to let it know.
AnalyserNode.fftSize - Web APIs
example the following example shows basic usage of an audiocontext to create an analysernode, then requestanimationframe and <canvas> to collect time domain data repeatedly and draw an "oscilloscope style" out
put of the current audio in
put.
AnalyserNode.frequencyBinCount - Web APIs
example the following example shows basic usage of an audiocontext to create an analysernode, then requestanimationframe and <canvas> to collect frequency data repeatedly and draw a "winamp bargraph style" out
put of the current audio in
put.
AnalyserNode.getByteFrequencyData() - Web APIs
example the following example shows basic usage of an audiocontext to create an analysernode, then requestanimationframe and <canvas> to collect frequency data repeatedly and draw a "winamp bargraph style" out
put of the current audio in
put.
AnalyserNode.getByteTimeDomainData() - Web APIs
return value void | none example the following example shows basic usage of an audiocontext to create an analysernode, then requestanimationframe and <canvas> to collect time domain data repeatedly and draw an "oscilloscope style" out
put of the current audio in
put.
AnalyserNode.getFloatFrequencyData() - Web APIs
microphone in
put const audioele = new audio(); audioele.src = 'my-audio.mp3';//insert file name here audioele.autoplay = true; audioele.preload = 'auto'; const audiosourcenode = audioctx.createmediaelementsource(audioele); //create analyser node const analysernode = audioctx.createanalyser(); analysernode.fftsize = 256; const bufferlength = analysernode.frequencybincount; const dataarray = new float32array(buffe...
AnalyserNode.getFloatTimeDomainData() - Web APIs
example the following example shows basic usage of an audiocontext to create an analysernode, then requestanimationframe and <canvas> to collect time domain data repeatedly and draw an "oscilloscope style" out
put of the current audio in
put.
AnalyserNode.maxDecibels - Web APIs
example the following example shows basic usage of an audiocontext to create an analysernode, then requestanimationframe and <canvas> to collect frequency data repeatedly and draw a "winamp bargraph style" out
put of the current audio in
put.
AnalyserNode.minDecibels - Web APIs
example the following example shows basic usage of an audiocontext to create an analysernode, then requestanimationframe and <canvas> to collect frequency data repeatedly and draw a "winamp bargraph style" out
put of the current audio in
put.
Animation.currentTime - Web APIs
at the start of the game, her height is set between the two extremes by setting her animation's currenttime to half her keyframeeffect's duration: alicechange.currenttime = alicechange.effect.timing.duration / 2; a more generic means of seeking to the 50% mark of an animation would be: animation.currenttime = animation.effect.getcom
putedtiming().delay + animation.effect.getcom
putedtiming().activeduration / 2; reduced time precision to offer protection against timing attacks and fingerprinting, the precision of animation.currenttime might get rounded depending on browser settings.
Animation.updatePlaybackRate() - Web APIs
examples a speed selector component would benefit from smooth updating of updateplaybackrate(), as demonstrated below: speedselector.addeventlistener('in
put', evt => { cartoon.updateplaybackrate(parsefloat(evt.target.value)); cartoon.ready.then(() => { console.log(`playback rate set to ${cartoon.playbackrate}`); }); }); specifications specification status comment web animationsthe definition of 'updateplaybackrate()' in that specification.
Attr.namespaceURI - Web APIs
if (attribute.localname == "value" && attribute.namespaceuri == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") { // this is a xul value } notes this is not a com
puted value that is the result of a namespace lookup based on an examination of the namespace declarations in scope.
AudioBuffer.copyFromChannel() - Web APIs
exceptions indexsizeerror one of the in
put parameters has a value that is outside the accepted range: the value of channelnumber specifies a channel number which doesn't exist (that is, it's greater than or equal to the value of numberofchannels on the channel).
AudioBuffer - Web APIs
once
put into an audiobuffer, the audio can then be played by being passed into an audiobuffersourcenode.
AudioBufferSourceNode.loop - Web APIs
when the time specified by the loopend property is reached, playback continues at the time specified by loopstart example in this example, the audiocontext.decodeaudiodata function is used to decode an audio track and
put it into an audiobuffersourcenode.
AudioBufferSourceNode.start() - Web APIs
the com
putation of the offset into the sound is performed using the sound buffer's natural sample rate, rather than the current playback rate, so even if the sound is playing at twice its normal speed, the midway point through a 10-second audio buffer is still 5.
AudioContext.createMediaStreamDestination() - Web APIs
the createmediastreamdestination() method of the audiocontext interface is used to create a new mediastreamaudiodestinationnode object associated with a webrtc mediastream representing an audio stream, which may be stored in a local file or sent to another com
puter.
AudioNode.channelCount - Web APIs
the channelcount property of the audionode interface represents an integer used to determine how many channels are used when up-mixing and down-mixing connections to any in
puts to the node.
AudioNode.channelCountMode - Web APIs
the channelcountmode property of the audionode interface represents an enumerated value describing the way channels must be matched between the node's in
puts and out
puts.
AudioScheduledSourceNode - Web APIs
unless stated otherwise, nodes based upon audioscheduledsourcenode out
put silence when not playing (that is, before start() is called and after stop() is called).
AudioTrackList.onaddtrack - Web APIs
syntax audiotracklist.onaddtrack = eventhandler; value set onaddtrack to a function that accepts as in
put a trackevent object which indicates in its track property which audio track has been added to the media.
AudioTrackList.onremovetrack - Web APIs
syntax audiotracklist.onremovetrack = eventhandler; value set onremovetrack to a function that accepts as in
put a trackevent object which indicates in its track property which audio track has been removed from the media element.
BaseAudioContext.createAnalyser() - Web APIs
example the following example shows basic usage of an audiocontext to create an analyser node, then use requestanimationframe() to collect time domain data repeatedly and draw an "oscilloscope style" out
put of the current audio in
put.
BaseAudioContext.createConstantSource() - Web APIs
the createconstantsource() property of the baseaudiocontext interface creates a constantsourcenode object, which is an audio source that continuously out
puts a monaural (one-channel) sound signal whose samples all have the same value.
BaseAudioContext.createDelay() - Web APIs
var delay1; rangesynth.onin
put = function() { delay1 = rangesynth.value; synthdelay.delaytime.setvalueattime(delay1, audioctx.currenttime); } specifications specification status comment web audio apithe definition of 'createdelay()' in that specification.
BaseAudioContext.createDynamicsCompressor() - Web APIs
it is especially important in games and musical applications where large numbers of individual sounds are played simultaneously, where you want to control the overall signal level and help avoid clipping (distorting) of the audio out
put.
BaseAudioContext.createPeriodicWave() - Web APIs
the createperiodicwave() method of the baseaudiocontext interface is used to create a periodicwave, which is used to define a periodic waveform that can be used to shape the out
put of an oscillatornode.
Blob() - Web APIs
syntax var newblob = new blob(array, options); parameters array an array of arraybuffer, arraybufferview, blob, usvstring objects, or a mix of any of such objects, that will be
put inside the blob.
Blob.type - Web APIs
var i, filein
put, files, allowedfiletypes; // filein
put is a htmlin
putelement: <in
put type="file" multiple id="myfilein
put"> filein
put = document.getelementbyid("myfilein
put"); // files is a filelist object (simliar to nodelist) files = filein
put.files; // our application only allows gif, png, and jpeg images allowedfiletypes = ["image/png", "image/jpeg", "image/gif"]; for (i = 0; i < files.length; i++) { // test if file.type is an ...
rssi - Web APIs
this is used to com
pute the path loss as this.txpower - this.rssi.
Body.arrayBuffer() - Web APIs
function readfile(file) { return new response(file).arraybuffer(); } <in
put type="file" onchange="readfile(this.files[0])"> specifications specification status comment fetchthe definition of 'arraybuffer()' in that specification.
Body.blob() - Web APIs
when the fetch is successful, we read a blob out of the response using blob(),
put it into an object url using url.createobjecturl, and then set that url as the source of an <img> element to display the image.
Body.bodyUsed - Web APIs
when the fetch is successful, we read a blob out of the response using blob(),
put it into an object url using url.createobjecturl, and then set that url as the source of an <img> element to display the image.
CSSImageValue - Web APIs
we then get() the background-image from the stylemap and stringify it: // get the element const button = document.queryselector( 'button' ); // retrieve all com
puted styles with com
putedstylemap() const allcom
putedstyles = button.com
putedstylemap(); // return the cssimagevalue example console.log( allcom
putedstyles.get('background-image') ); console.log( allcom
putedstyles.get('background-image').tostring() ); specifications specification status comment css typed om level 1the definition of 'cssimagevalue' in that specification.
CSSMathSum - Web APIs
<div>has width</div> we assign a width div { width: calc(30% - 20px); } we add the javascript const stylemap = document.queryselector('div').com
putedstylemap(); console.log( stylemap.get('width') ); // cssmathsum {values: cssnumericarray, operator: "sum"} console.log( stylemap.get('width').operator ); // 'sum' console.log( stylemap.get('width').values ); // cssnumericarray {0: cssunitvalue, 1: cssunitvalue, length: 2} console.log( stylemap.get('width').values[0] ); // cssunitvalue {value: 30, unit: ...
CSSMathValue.operator - Web APIs
<div>my width has a <code>calc()</code> function</div> we assign a width with a calculation div { width: calc(50% - 0.5vw); } we add the javascript const stylemap = document.queryselector('div').com
putedstylemap(); console.log( stylemap.get('width') ); // cssmathsum {values: cssnumericarray, operator: "sum"} console.log( stylemap.get('width').values ); // cssnumericarray {0: cssunitvalue, 1: cssmathnegate, length: 2} console.log( stylemap.get('width').operator ); // 'sum' console.log( stylemap.get('width').values[1].operator ) // 'negate' the cssmathva...
CSSMathValue - Web APIs
<div>has width</div> we assign a width with a calculation div { width: calc(30% - 20px); } we add the javascript const stylemap = document.queryselector('div').com
putedstylemap(); console.log( stylemap.get('width') ); // cssmathsum {values: cssnumericarray, operator: "sum"} console.log( stylemap.get('width').operator ); // 'sum' console.log( stylemap.get('width').values[1].value ); // -20 the cssmathvalue.operator returns 'sum' because stylemap.get('width').values[1].value ); is -20: adding a negative number.
CSSPositionValue - Web APIs
let replacedel = document.getelementbyid( 'image' ); let position = new csspositionvalue( css.px(35), css.px(40) ); replacedel.attributestylemap.set( 'object-position', position ); console.log( position.x.value, position.y.value ); console.log( replacedel.com
putedstylemap().get('object-position') ); we set the object-position property, then check the values returned.
CSSPrimitiveValue.getFloatValue() - Web APIs
example var cs = window.getcom
putedstyle(document.body); var cssvalue = cs.getpropertycssvalue("margin-top"); console.log(cssvalue.getfloatvalue(cssprimitivevalue.css_cm)); specifications specification status comment document object model (dom) level 2 style specificationthe definition of 'cssprimitivevalue.getfloatvalue' in that specification.
CSSPrimitiveValue.getRGBColorValue() - Web APIs
example var cs = window.getcom
putedstyle(document.body); var cssvalue = cs.getpropertycssvalue("color"); console.log(cssvalue.getrgbcolorvalue()); specifications specification status comment document object model (dom) level 2 style specificationthe definition of 'cssprimitivevalue.getrgbcolorvalue' in that specification.
CSSPrimitiveValue.getRectValue() - Web APIs
example var cs = window.getcom
putedstyle(document.getelementbyid("clippeddiv")); var cssvalue = cs.getpropertycssvalue("clip"); console.log(cssvalue.getrectvalue()); specifications specification status comment document object model (dom) level 2 style specificationthe definition of 'cssprimitivevalue.getrectvalue' in that specification.
CSSPrimitiveValue.getStringValue() - Web APIs
example var cs = window.getcom
putedstyle(document.body); var cssvalue = cs.getpropertycssvalue("display"); console.log(cssvalue.getstringvalue()); specifications specification status comment document object model (dom) level 2 style specificationthe definition of 'cssprimitivevalue.getstringvalue' in that specification.
CSSPrimitiveValue.primitiveType - Web APIs
example var cs = window.getcom
putedstyle(document.body); var cssvalue = cs.getpropertycssvalue("color"); console.log(cssvalue.primitivetype); specifications specification status comment document object model (dom) level 2 style specificationthe definition of 'cssprimitivevalue.primitivetype' in that specification.
CSSPrimitiveValue - Web APIs
the cssprimitivevalue interface derives from the cssvalue interface and represents the current com
puted value of a css property.
CSSPseudoElement.type - Web APIs
ng values: "::before" "::after" "::marker" examples the example below demonstrates the relationship between csspseudoelement.type and element.pseudo(): const myelement = document.queryselector('q'); const myselector = '::after'; const csspseudoelement = myelement.pseudo(myselector); const typeofpseudoelement = csspseudoelement.type; console.log(myselector === typeofpseudoelement); // out
puts true specifications specification status comment css pseudo-elements level 4the definition of 'type' in that specification.
CSSPseudoElement - Web APIs
const element = document.queryselector('q'); const csspseudoelement = element.pseudo('::before'); console.log(csspseudoelement.element); // out
puts [object htmlquoteelement] console.log(csspseudoelement.type); // out
puts '::before' specifications specification status comment css pseudo-elements level 4the definition of 'csspseudoelement' in that specification.
CSSStyleDeclaration.getPropertyCSSValue() - Web APIs
example the following javascript code gets an object containing the com
puted rgb values of the color css property: var style = window.getcom
putedstyle(elem, null); var rgbobj = style.getpropertycssvalue('color').getrgbcolorvalue(); specifications specification status comment document object model (dom) level 2 style specificationthe definition of 'cssstyledeclaration' in that specification.
CSSStyleSheet.insertRule() - Web APIs
' !important' : '') + ';\n'; } // insert css rule stylesheet.insertrule(selector + '{' + propstr + '}', stylesheet.cssrules.length); } } polyfill the below polyfill will correct the in
put of the arguments of insertrule() to standardize them in internet explorer 5–8.
CSSValue - Web APIs
the cssvalue interface represents the current com
puted value of a css property.
Cache.add() - Web APIs
the add() method is functionally equivalent to the following: fetch(url).then(function(response) { if (!response.ok) { throw new typeerror('bad response status'); } return cache.
put(url, response); }) for more complex operations, you'll need to use cache.
put() directly.
Cache.addAll() - Web APIs
note: addall() will overwrite any key/value pairs previously stored in the cache that match the request, but will fail if a resulting
put() operation would overwrite a previous cache entry stored by the same addall() method.
CanvasRenderingContext2D.createImageData() - Web APIs
ctx = canvas.getcontext('2d'); const imagedata = ctx.createimagedata(100, 100); // iterate through every pixel for (let i = 0; i < imagedata.data.length; i += 4) { // modify pixel data imagedata.data[i + 0] = 190; // r value imagedata.data[i + 1] = 0; // g value imagedata.data[i + 2] = 210; // b value imagedata.data[i + 3] = 255; // a value } // draw image data to the canvas ctx.
putimagedata(imagedata, 20, 20); result more examples for more examples using createimagedata() and the imagedata object, see pixel manipulation with canvas and imagedata.data.
Drawing shapes with canvas - Web APIs
ngular shape example <html> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> </html> function draw() { var canvas = document.getelementbyid('canvas'); if (canvas.getcontext) { var ctx = canvas.getcontext('2d'); ctx.fillrect(25, 25, 100, 100); ctx.clearrect(45, 45, 60, 60); ctx.strokerect(50, 50, 50, 50); } } this example's out
put is shown below.
Finale - Web APIs
game development gaming is one of the most popular com
puter activities.
Hit regions and accessibility - Web APIs
ath.pi, false); ctx.fill(); ctx.addhitregion({id: 'circle'}); canvas.addeventlistener('mousemove', function(event) { if (event.region) { alert('hit region: ' + event.region); } }); </script> the addhitregion() method also takes a control option to route events to an element (that is a descendant of the canvas): ctx.addhitregion({control: element}); this can be useful for routing to <in
put> elements, for example.
Optimizing canvas - Web APIs
the ui would change only upon user in
put, the gameplay layer would change with every new frame, and the background would remain generally unchanged.
Using images - Web APIs
the images are hidden from out
put by setting the css property display to none for those images.
Clipboard - Web APIs
a typical application accesses clipboard functionality by mapping user in
put such as keybindings, menu selections, etc.
ClipboardEvent.clipboardData - Web APIs
the clipboardevent.clipboarddata property holds a datatransfer object, which can be used: to specify what data should be
put into the clipboard from the cut and copy event handlers, typically with a setdata(format, data) call; to obtain the data to be pasted from the paste event handler, typically with a getdata(format) call.
CompositionEvent.data - Web APIs
the data read-only property of the compositionevent interface returns the characters generated by the in
put method that raised the event; its exact nature varies depending on the type of event that generated the compositionevent object.
Console.timeEnd() - Web APIs
examples console.time("answer time"); alert("click to continue"); console.timelog("answer time"); alert("do a bunch of other stuff..."); console.timeend("answer time"); the out
put from the example above shows the time taken by the user to dismiss the first alert box, followed by the time it took for the user to dismiss the second alert: notice that the timer's name is displayed when the timer value is logged using timelog() and again when it's stopped.
Console.timeLog() - Web APIs
examples console.time("answer time"); alert("click to continue"); console.timelog("answer time"); alert("do a bunch of other stuff..."); console.timeend("answer time"); the out
put from the example above shows the time taken by the user to dismiss the first alert box, followed by the time it took for the user to dismiss the second alert: notice that the timer's name is displayed when the timer value is logged using timelog() and again when it's stopped.
Console API - Web APIs
examples let mystring = 'hello world'; // out
put "hello world" to the console console.log(mystring) see the console reference page for more examples.
ConstantSourceNode() - Web APIs
the constantsourcenode() constructor creates a new constantsourcenode object instance, representing an audio source which constantly out
puts samples whose values are always the same.
ConstantSourceNode.offset - Web APIs
example this example shows how to set up a constantsourcenode so its offset is used as the in
put to a pair of gainnodes; this snippet is derived from the complete example you can find in controlling multiple parameters with constantsourcenode.
ConvolverNode.normalize - Web APIs
its default value is true in order to achieve a more uniform out
put level from the convolver, when loaded with diverse impulse responses.
CustomElementRegistry.define() - Web APIs
w = this.attachshadow({mode: 'open'}); // create spans var wrapper = document.createelement('span'); wrapper.setattribute('class','wrapper'); var icon = document.createelement('span'); icon.setattribute('class','icon'); icon.setattribute('tabindex', 0); var info = document.createelement('span'); info.setattribute('class','info'); // take attribute content and
put it inside the info span var text = this.getattribute('text'); info.textcontent = text; // insert icon var imgurl; if(this.hasattribute('img')) { imgurl = this.getattribute('img'); } else { imgurl = 'img/default.png'; } var img = document.createelement('img'); img.src = imgurl; icon.appendchild(img); // create some css to apply to the shado...
DOMImplementation.createDocumentType() - Web APIs
the domimplementation.createdocumenttype() method returns a documenttype object which can either be used with domimplementation.createdocument upon document creation or can be
put into the document via methods like node.insertbefore() or node.replacechild().
DOMMatrixReadOnly - Web APIs
dommatrixreadonly.multiply() returns a new dommatrix created by com
puting the dot product of the source matrix and the specified matrix: a⋅b.
DOMPointInit.w - Web APIs
there are two methods which use dompointinit: the static function dompointreadonly.frompoint() takes an object that complies with dompointinit as its sole in
put parameter, to specify the coordinates and perspective value of the new point to be created.
DOMPointInit.x - Web APIs
dompointinit is used as an in
put when calling either dompointreadonly.frompoint() or dompoint.frompoint(), and is returned by the dompointreadonly.tojson() and dompoint.tojson() methods.
DOMPointInit.y - Web APIs
there are two methods which use dompointinit: the static function dompointreadonly.frompoint() takes an object that complies with dompointinit as its sole in
put parameter, to specify the coordinates and perspective value of the new point to be created.
DOMPointInit.z - Web APIs
there are two methods which use dompointinit: the static function dompointreadonly.frompoint() takes an object that complies with dompointinit as its sole in
put parameter, to specify the coordinates and perspective value of the new point to be created.
Binary strings - Web APIs
however at least one native function requires binary strings as its in
put, btoa(): invoking it on a string that contains codepoints greater than 255 will cause a character out of range error.
DOMTokenList.add() - Web APIs
first, the html: <span class="a b c"></span> now the javascript: let span = document.queryselector("span"); let classes = span.classlist; classes.add("d"); span.textcontent = classes; the out
put looks like this: you can add multiple tokens as well: span.classlist.add("d", "e", "f"); specifications specification status comment domthe definition of 'add()' in that specification.
DOMTokenList.contains() - Web APIs
first, the html: <span class="a b c"></span> now the javascript: let span = document.queryselector("span"); let classes = span.classlist; let result = classes.contains("c"); if (result) { span.textcontent = "the classlist contains 'c'"; } else { span.textcontent = "the classlist does not contain 'c'"; } the out
put looks like this: specifications specification status comment domthe definition of 'contains()' in that specification.
DOMTokenList.entries() - Web APIs
first, the html: <span class="a b c"></span> now the javascript: let span = document.queryselector("span"); let classes = span.classlist; let iterator = classes.entries(); for (let value of iterator) { span.textcontent += value + ' ++ '; } the out
put looks like this: specifications specification status comment domthe definition of 'entries() (as iterable<node>)' in that specification.
DOMTokenList.item() - Web APIs
first, the html: <span class="a b c"></span> now the javascript: let span = document.queryselector("span"); let classes = span.classlist; let item = classes.item(classes.length-1); span.textcontent = item; the out
put looks like this: specifications specification status comment domthe definition of 'item()' in that specification.
DOMTokenList.keys() - Web APIs
first, the html: <span class="a b c"></span> now the javascript: var span = document.queryselector("span"); var classes = span.classlist; var iterator = classes.keys(); for(var value of iterator) { span.textcontent += value + ' ++ '; } the out
put looks like this: specifications specification status comment domthe definition of 'keys() (as iterable<node>)' in that specification.
DOMTokenList.length - Web APIs
first, the html: <span class="a b c"></span> now the javascript: let span = document.queryselector("span"); let classes = span.classlist; let length = classes.length; span.textcontent = `classlist length = ${length}`; the out
put looks like this: specifications specification status comment domthe definition of 'length' in that specification.
DOMTokenList.remove() - Web APIs
first, the html: <span class="a b c"></span> now the javascript: let span = document.queryselector("span"); let classes = span.classlist; classes.remove("c"); span.textcontent = classes; the out
put looks like this: to remove multiple classes at once, you can supply multiple tokens.
DOMTokenList.replace() - Web APIs
first, the html: <span class="a b c"></span> now the javascript: let span = document.queryselector("span"); let classes = span.classlist; let result = classes.replace("c", "z"); console.log(result); if (result) { span.textcontent = classes; } else { span.textcontent = 'token not replaced successfully'; } the out
put looks like this: polyfill the following polyfill will add the replace method to the domtokenlist class.
DOMTokenList.toggle() - Web APIs
pan class="a b">classlist is 'a b'</span> now the javascript: let span = document.queryselector("span"); let classes = span.classlist; span.addeventlistener('click', function() { let result = classes.toggle("c"); if (result) { span.textcontent = `'c' added; classlist is now "${classes}".`; } else { span.textcontent = `'c' removed; classlist is now "${classes}".`; } }) the out
put looks like this: specifications specification status comment domthe definition of 'toggle()' in that specification.
DOMTokenList.value - Web APIs
first, the html: <span class="a b c"></span> now the javascript: let span = document.queryselector("span"); let classes = span.classlist; span.textcontent = classes.value; the out
put looks like this: specifications specification status comment domthe definition of 'value' in that specification.
DOMTokenList.values() - Web APIs
first, the html: <span class="a b c"></span> now the javascript: var span = document.queryselector("span"); var classes = span.classlist; var iterator = classes.values(); for(var value of iterator) { span.textcontent += value + ' ++ '; } the out
put looks like this: specifications specification status comment domthe definition of 'values() (as iterable<node>)' in that specification.
DataTransfer.mozGetDataAt() - Web APIs
function drop_handler(event) { var dt = event.datatransfer; var count = dt.mozitemcount; out
put("items: " + count + "\n"); for (var i = 0; i < count; i++) { out
put(" item " + i + ":\n"); var types = dt.moztypesat(i); for (var t = 0; t < types.length; t++) { out
put(" " + types[t] + ": "); try { var data = dt.mozgetdataat(types[t], i); out
put("(" + (typeof data) + ") : <" + data + " >\n"); } catch (ex) { out
put("<>\n"); dump(ex...
DataTransfer.mozTypesAt() - Web APIs
function drop_handler(event) { var dt = event.datatransfer; var count = dt.mozitemcount; out
put("items: " + count + "\n"); for (var i = 0; i < count; i++) { out
put(" item " + i + ":\n"); var types = dt.moztypesat(i); for (var t = 0; t < types.length; t++) { out
put(" " + types[t] + ": "); try { var data = dt.mozgetdataat(types[t], i); out
put("(" + (typeof data) + ") : <" + data + " >\n"); } catch (ex) { out
put("<>\n"); dump(ex...
DelayNode() - Web APIs
the delaynode() constructor of the web audio api creates a new delaynode object with a delay-line; an audionode audio-processing module that causes a delay between the arrival of an in
put data, and its propagation to the out
put.
DelayNode.delayTime - Web APIs
var delay1; rangesynth.onin
put = function() { delay1 = rangesynth.value; synthdelay.delaytime.setvalueattime(delay1, audioctx.currenttime); } specifications specification status comment web audio apithe definition of 'delaytime' in that specification.
DeprecationReportBody - Web APIs
the report details are displayed via the displayreports() fuction, which takes the observer callback's reports parameter as its parameter: function displayreports(reports) { const out
putelem = document.queryselector('.out
put'); const list = document.createelement('ul'); out
putelem.appendchild(list); for(let i = 0; i < reports.length; i++) { let listitem = document.createelement('li'); let textnode = document.createtextnode('report ' + (i + 1) + ', type: ' + reports[i].type); listitem.appendchild(textnode); let innerlist = document.createelement('ul'); l...
DisplayMediaStreamConstraints.video - Web APIs
this value may simply be a boolean, where true specifies that a default selection of in
put source be made (typically the entire display area of the device in use, spanning every screen in a multiple screen configuration).
Document.createDocumentFragment() - Web APIs
since the document fragment is in memory and not part of the main dom tree, appending children to it does not cause page reflow (com
putation of element's position and geometry).
Document.getElementsByName() - Web APIs
example <!doctype html> <html lang="en"> <title>example: using document.getelementsbyname</title> <in
put type="hidden" name="up"> <in
put type="hidden" name="down"> <script> var up_names = document.getelementsbyname("up"); console.log(up_names[0].tagname); // displays "in
put" </script> </html> notes the name attribute can only be applied in (x)html documents.
DocumentOrShadowRoot.elementsFromPoint() - Web APIs
example html <div> <p>some text</p> </div> <p>elements at point 30, 20:</p> <div id="out
put"></div> javascript let out
put = document.getelementbyid("out
put"); if (document.elementsfrompoint) { let elements = document.elementsfrompoint(30, 20); for (var i = 0; i < elements.length; i++) { out
put.textcontent += elements[i].localname; if (i < elements.length - 1) { out
put.textcontent += " < "; } } } else { out
put.innerhtml = "<span style=\"color: red;\">" + ...
DocumentOrShadowRoot.nodeFromPoint() - Web APIs
examples html content <div> <p>some text</p> </div> <p>top node at point 30, 20:</p> <div id="out
put"></div> javascript content var out
put = document.getelementbyid("out
put"); if (document.nodefrompoint) { var node = document.nodefrompoint(30, 20); out
put.textcontent += node.localname; } else { out
put.innerhtml = "<span style=\"color: red;\">" + "browser does not support <code>document.nodefrompoint()</code>" + "</span>"; } specifications not part of any specification at...
DocumentOrShadowRoot.nodesFromPoint() - Web APIs
example html content <div> <p>some text</p> </div> <p>nodes at point 30, 20:</p> <div id="out
put"></div> javascript content var out
put = document.getelementbyid("out
put"); if (document.nodesfrompoint) { var nodes = document.nodesfrompoint(30, 20); for(var i = 0; i < nodes.length; i++) { out
put.textcontent += nodes[i].localname; if (i < nodes.length - 1) { out
put.textcontent += " < "; } } } else { out
put.innerhtml = "<span style=\"color: red;\">" + "browser d...
Introduction to the DOM - Web APIs
ion> </select> <p><b><tt>link</tt></b></p> <select onchange="setbodyattr('link', this.options[this.selectedindex].value);"> <option value="blue">blue</option> <option value="green">green</option> </select> <small> <a href="http://some.website.tld/page.html" id="sample"> (sample link) </a> </small><br /> <in
put type="button" value="version" onclick="ver()" /> </form> </div> </body> </html> to test a lot of interfaces in a single page—for example, a "suite" of properties that affect the colors of a web page—you can create a similar test page with a whole console of buttons, textfields, and other html elements.
Example - Web APIs
var para = document.getelementsbytagname("p").item(0); para.firstchild.data = "this is the first paragraph."; // create a new text node for the second paragraph var newtext = document.createtextnode("this is the second paragraph."); // create a new element to be the second paragraph var newelement = document.createelement("p"); //
put the text in the paragraph newelement.appendchild(newtext); // and
put the paragraph on the end of the document by appending it to // the body (which is the parent of para) para.parentnode.appendchild(newelement); } </script> </head> <body> <in
put type="button" value="change this document." onclick="change()"> <h1>header</h1> <p>paragraph</p> </body> </head> ...
How whitespace is handled by HTML, CSS, and in the DOM - Web APIs
} or you could set negative margin on the list items: li { display: inline-block; width: 2rem; height: 2rem; margin-right: -0.25rem; } you can also solve this problem by
putting your list items all on the same line in the source, which causes the whitespace nodes to not be created in the first place: <li></li><li></li><li></li><li></li><li></li> dom traversal and whitespace when trying to do dom manipulation in javascript, you can also encounter problems because of whitespace nodes.
DynamicsCompressorNode.ratio - Web APIs
the ratio property of the dynamicscompressornode interface is a k-rate audioparam representing the amount of change, in db, needed in the in
put for a 1 db change in the out
put.
EXT_frag_depth - Web APIs
examples enable the extension: gl.getextension('ext_frag_depth'); now the out
put variable gl_fragdepthext is available to set a depth value of a fragment from within the fragment shader: <script type="x-shader/x-fragment"> void main() { gl_fragcolor = vec4(1.0, 0.0, 1.0, 1.0); gl_fragdepthext = 0.5; } </script> specifications specification status comment ext_frag_depththe definition of 'ext_frag_depth' in that specification.
EffectTiming - Web APIs
simply
put, these properties describe how the user agent should go about making the transition from keyframe to keyframe, and how to behave when the animation begins and ends.
Element: DOMMouseScroll event - Web APIs
note: if the platform's native mouse wheel events only provide scroll distance by pixels, or if the speed can be customized by the user, the value is com
puted using the line height of the nearest scrollable ancestor element of the event's target.
Element: auxclick event - Web APIs
when listening for auxclick events originating on elements that do not support in
put or navigation, you will often want to explicitly prevent other default actions mapped to the down action of the middle mouse button.
Element.clientLeft - Web APIs
when layout.scrollbar.side preference is set to 1 or to 3 and when the text-direction is set to rtl, then the vertical scrollbar is positioned on the left and this impacts the way clientleft is com
puted.
Element: focusin event - Web APIs
bubbles yes cancelable no interface focusevent event handler property onfocusin sync / async sync composed yes examples live example html <form id="form"> <in
put type="text" placeholder="text in
put"> <in
put type="password" placeholder="password"> </form> javascript const form = document.getelementbyid('form'); form.addeventlistener('focusin', (event) => { event.target.style.background = 'pink'; }); form.addeventlistener('focusout', (event) => { event.target.style.background = ''; }); result specifications specification status ...
Element: focusout event - Web APIs
bubbles yes cancelable no interface focusevent event handler property onfocusout sync / async sync composed yes examples live example html <form id="form"> <in
put type="text" placeholder="text in
put"> <in
put type="password" placeholder="password"> </form> javascript const form = document.getelementbyid('form'); form.addeventlistener('focusin', (event) => { event.target.style.background = 'pink'; }); form.addeventlistener('focusout', (event) => { event.target.style.background = ''; }); result specifications specification status ...
Element.getClientRects() - Web APIs
the amount of scrolling that has been done of the viewport area (or any other scrollable element) is taken into account when com
puting the rectangles.
Element.insertAdjacentHTML() - Web APIs
example // <div id="one">one</div> var d1 = document.getelementbyid('one'); d1.insertadjacenthtml('afterend', '<div id="two">two</div>'); // at this point, the new structure is: // <div id="one">one</div><div id="two">two</div> notes security considerations when inserting html into a page by using insertadjacenthtml(), be careful not to use user in
put that hasn't been escaped.
Element.insertAdjacentText() - Web APIs
example beforebtn.addeventlistener('click', function() { para.insertadjacenttext('afterbegin',textin
put.value); }); afterbtn.addeventlistener('click', function() { para.insertadjacenttext('beforeend',textin
put.value); }); have a look at our insertadjacenttext.html demo on github (see the source code too.) here we have a simple paragraph.
Element.namespaceURI - Web APIs
if (element.localname == "browser" && element.namespaceuri == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") { // this is a xul browser } notes this is not a com
puted value that is the result of a namespace lookup based on an examination of the namespace declarations in scope.
Element.onfullscreenerror - Web APIs
since full-screen mode changes are only permitted in response to a user in
put, this causes an error to occur, which triggers the delivery of the fullscreenerror event to the error handler, let elem = document.queryselector("video")}} elem.onfullscreenerror = function ( event ) { displaywarning("unable to switch into full-screen mode."); }; //....
Element: overflow event - Web APIs
bubbles yes cancelable yes interface uievent event handler property unknown examples <div id="wrapper"> <div id="child"></div> </div> <br/> <label><in
put type="checkbox" id="toggle" checked/> overflow</label> <style> #wrapper { width: 20px; height: 20px; background: #000; padding: 5px; overflow: hidden; } #child { width: 40px; height: 40px; border: 2px solid grey; background: #ccc; } </style> <script> var wrapper = document.getelementbyid("wrapper"), child = document.getelementbyid("child"), ...
Element.querySelector() - Web APIs
html <div> <h5>original content</h5> <p> inside paragraph <span>inside span</span> inside paragraph </p> </div> <div> <h5>out
put</h5> <div id="out
put"></div> </div> javascript var baseelement = document.queryselector("p"); document.getelementbyid("out
put").innerhtml = (baseelement.queryselector("div span").innerhtml); result the result looks like this: notice how the "div span" selector still successfully matches the <span> element, even though the baseelement's child nodes do not include the div element (it is ...
Element.scroll() - Web APIs
examples //
put the 1000th vertical pixel at the top of the element element.scroll(0, 1000); using options: element.scroll({ top: 100, left: 100, behavior: 'smooth' }); specification specification status comment css object model (cssom) view modulethe definition of 'element.scroll()' in that specification.
Element.tabStop - Web APIs
the tabstop property of the element interface returns a boolean indicating if the element can receive in
put focus via the tab key.
Element: underflow event - Web APIs
bubbles yes cancelable yes interface uievent event handler property unknown examples <div id="wrapper"> <div id="child"></div> </div> <br/> <label><in
put type="checkbox" id="toggle" checked/> overflow</label> <style> #wrapper { width: 20px; height: 20px; background: #000; padding: 5px; overflow: hidden; } #child { width: 40px; height: 40px; border: 2px solid grey; background: #ccc; } </style> <script> var wrapper = document.getelementbyid("wrapper"), child = document.getelementbyid("child"), ...
Event.eventPhase - Web APIs
example html <h4>event propagation chain</h4> <ul> <li>click 'd1'</li> <li>analyse event propagation chain</li> <li>click next div and repeat the experience</li> <li>change capturing mode</li> <li>repeat the experience</li> </ul> <in
put type="checkbox" id="chcapture" /> <label for="chcapture">use capturing</label> <div id="d1">d1 <div id="d2">d2 <div id="d3">d3 <div id="d4">d4</div> </div> </div> </div> <div id="divinfo"></div> css div { margin: 20px; padding: 4px; border: thin black solid; } #divinfo { margin: 18px; padding: 8px; background-color:white; font-size:80%; } javascr...
Event - Web APIs
animationevent audioprocessingevent beforein
putevent beforeunloadevent blobevent clipboardevent closeevent compositionevent cssfontfaceloadevent customevent devicelightevent devicemotionevent deviceorientationevent deviceproximityevent domtransactionevent dragevent editingbeforein
putevent errorevent fetchevent focusevent gamepadevent hashchangeevent idbversionchangeevent in
putevent keyboardevent mediastreamevent message...
EventTarget.addEventListener() - Web APIs
const mybutton = document.getelementbyid('my-button-id'); const somestring = 'data'; mybutton.addeventlistener('click', function() { console.log(somestring); // expected value: 'data' somestring = 'data again'; }); console.log(somestring); // expected value: 'data' (will never out
put 'data again') note: although inner scopes have access to const, let variables from outer scopes, you cannot expect any changes to these variables to be accessible after the event listener definition, within the same outer scope.
Fetch API - Web APIs
this will allow them to be used wherever they are needed in the future, whether it’s for service workers, cache api, and other similar things that handle or modify requests and responses, or any kind of use case that might require you to generate your responses programmatically (that is, the use of com
puter program or personal programming instructions).
File.getAsBinary() - Web APIs
example // filein
put is an htmlin
putelement: <in
put type="file" id="myfilein
put" multiple> var filein
put = document.getelementbyid("myfilein
put"); // files is a filelist object (similar to nodelist) var files = filein
put.files; // object for allowed media types var accept = { binary : ["image/png", "image/jpeg"], text : ["text/plain", "text/css", "application/xml", "text/html"] }; var file; for (var i = 0; ...
File.getAsDataURL() - Web APIs
syntax var url = instanceoffile.getasdataurl(); returns a string representing a data: url example // filein
put is a htmlin
putelement: <in
put type="file" id="myfilein
put" multiple> var filein
put = document.getelementbyid("myfilein
put"); // files is a filelist object (similar to nodelist) var files = filein
put.files; // array with acceptable file types var accept = ["image/png"]; // img is a htmlimgelement: <img id="myimg"> var img = document.getelementbyid("myimg"); // if we accept the first selected file type if (accept.indexof(files[0].mediatype) > -1) { // display the image //...
File.getAsText() - Web APIs
example // filein
put is a htmlin
putelement: <in
put type="file" id="myfilein
put" multiple> var filein
put = document.getelementbyid("myfilein
put"); // files is a filelist object (similar to nodelist) var files = filein
put.files; // object for allowed media types var accept = { binary : ["image/png", "image/jpeg"], text : ["text/plain", "text/css", "application/xml", "text/html"] }; var file; for (var i = 0; i...
File.lastModified - Web APIs
example reading from file in
put <in
put type="file" multiple id="filein
put"> const filein
put = document.queryselector('#filein
put'); filein
put.addeventlistener('change', (event) => { // files is a filelist object (similar to nodelist) const files = event.target.files; for (let file of files) { const date = new date(file.lastmodified); console.log(`${file.name} has a last modified date of ${date}`); } }); try ...
File.lastModifiedDate - Web APIs
example // filein
put is a htmlin
putelement: <in
put type="file" multiple id="myfilein
put"> var filein
put = document.getelementbyid("myfilein
put"); // files is a filelist object (simliar to nodelist) var files = filein
put.files; for (var i = 0; i < files.length; i++) { alert(files[i].name + " has a last modified date of " + files[i].lastmodifieddate); } reduced time precision to offer protection against timing attacks and fingerprinting, the precision of somefile.lastmodifieddate.gettime() mi...
File.name - Web APIs
example <in
put type="file" multiple onchange="processselectedfiles(this)"> function processselectedfiles(filein
put) { var files = filein
put.files; for (var i = 0; i < files.length; i++) { alert("filename " + files[i].name); } } try the results out below: specifications specification status comment file apithe definition of 'name' in that specification.
File.type - Web APIs
syntax var name = file.type; value a string, containing the media type(mime) indicating the type of the file, for example "image/png" for png images example <in
put type="file" multiple onchange="showtype(this)"> function showtype(filein
put) { var files = filein
put.files; for (var i = 0; i < files.length; i++) { var name = files[i].name; var type = files[i].type; alert("filename: " + name + " , type: " + type); } } note: based on the current implementation, browsers won't actually read the bytestream of a file to determine its media type.
Force Touch events - Web APIs
force touch events are a proprietary, apple-specific feature which makes possible (where supported by the in
put hardware) new interactions based on how hard the user clicks or presses down on the touchscreen or trackpad.
FormData.set() - Web APIs
example the following line creates an empty formdata object: var formdata = new formdata(); // currently empty you can set key/value pairs on this using formdata.set: formdata.set('username', 'chris'); formdata.set('userpic', myfilein
put.files[0], 'chris.jpg'); if the sent value is different than string or blob it will be automatically converted to string: formdata.set('name', 72); formdata.get('name'); // "72" specifications specification status comment xmlhttprequestthe definition of 'set()' in that specification.
FormDataEvent - Web APIs
this allows a formdata object to be quickly obtained in response to a formdata event firing, rather than needing to
put it together yourself when you wish to submit form data via a method like xmlhttprequest (see using formdata objects).
GainNode.gain - Web APIs
if you still hear something, make sure you haven't // connected your source into the out
put in addition to using the gainnode.
GlobalEventHandlers.onclick - Web APIs
html <p>click anywhere in this example.</p> <p id="log"></p> javascript let log = document.getelementbyid('log'); document.onclick = in
putchange; function in
putchange(e) { log.textcontent = `position: (${e.clientx}, ${e.clienty})`; } result specification specification status comment html living standardthe definition of 'onclick' in that specification.
GlobalEventHandlers.oninvalid - Web APIs
html <form id="form"> <p id="error" hidden>please fill out all fields.</p> <label for="city">city</label> <in
put type="text" id="city" required> <button type="submit">submit</button> </form> <p id="thanks" hidden>your data has been received.
GlobalEventHandlers.onresize - Web APIs
examples window size logger <p>resize the browser window to fire the <code>resize</code> event.</p> <p>window height: <span id="height"></span></p> <p>window width: <span id="width"></span></p> const heightout
put = document.queryselector('#height'); const widthout
put = document.queryselector('#width'); function resize() { heightout
put.textcontent = window.innerheight; widthout
put.textcontent = window.innerwidth; } window.onresize = resize; specification specification status comment html living standardthe definition of 'onresize' in that specification.
GlobalEventHandlers.onsubmit - Web APIs
html <form id="form"> <p id="error" hidden>please fill out all fields.</p> <label for="city">city</label> <in
put type="text" id="city" required> <button type="submit">submit</button> </form> <p id="thanks" hidden>your data has been received.
GlobalEventHandlers.ontransitioncancel - Web APIs
the function receives as in
put a single parameter: a transitionevent object describing the event which occurred; the event's transitionevent.elapsedtime property's value should be the same as the value of transition-duration.
GlobalEventHandlers.ontransitionend - Web APIs
the function receives as in
put a single parameter: a transitionevent object describing the event which occurred; the event's transitionevent.elapsedtime property's value should be the same as the value of transition-duration.
HTMLAreaElement - Web APIs
element.accesskey is a domstring containing a single character that switches in
put focus to the control.
HTMLButtonElement - Web APIs
htmlbuttonelement.autofocus is a boolean indicating whether or not the control should have in
put focus when the page loads, unless the user overrides it, for example by typing in a different control.
HTMLCanvasElement.captureStream() - Web APIs
send it to another com
puter using an rtcpeerconnection // pc is an rtcpeerconnection created elsewhere pc.addstream(stream); specifications specification status comment media capture from dom elementsthe definition of 'htmlcanvaselement.capturestream()' in that specification.
HTMLCanvasElement.toDataURL() - Web APIs
theight; ocanvas.width = nwidth; ocanvas.height = nheight; octx.drawimage(ocolorimg, 0, 0); oimgdata = octx.getimagedata(0, 0, nwidth, nheight); apix = oimgdata.data; npixlen = apix.length; for (npixel = 0; npixel < npixlen; npixel += 4) { apix[npixel + 2] = apix[npixel + 1] = apix[npixel] = (apix[npixel] + apix[npixel + 1] + apix[npixel + 2]) / 3; } octx.
putimagedata(oimgdata, 0, 0); ograyimg = new image(); ograyimg.src = ocanvas.todataurl(); ograyimg.onmouseover = showcolorimg; ocolorimg.onmouseout = showgrayimg; octx.clearrect(0, 0, nwidth, nheight); ocolorimg.style.display = "none"; ocolorimg.parentnode.insertbefore(ograyimg, ocolorimg); } } specifications specification status comment html li...
HTMLFormControlsCollection.namedItem() - Web APIs
example html <form> <in
put id="my-form-control" type="textarea"> </form> javascript // returns the htmlin
putelement representing #my-form-control elem1 = document.forms[0]['my-form-control']; specifications specification status comment html living standardthe definition of 'htmlformcontrolscollection.nameditem()' in that specification.
HTMLFormElement.acceptCharset - Web APIs
syntax var string = form.acceptcharset; form.acceptcharset = string; example in
puts = document.forms['myform'].acceptcharset; specifications specification status comment html living standardthe definition of 'htmlformelement: acceptcharset' in that specification.
HTMLFormElement.length - Web APIs
the elements included by htmlformelement.elements and htmlformelement.length are the following: <button> <fieldset> <in
put> (with the exception that any whose type is "image" are omitted for historical reasons) <object> <out
put> <select> <textarea> no other elements are included in the list returned by elements, which makes it an excellent way to get at the elements most important when processing forms.
HTMLFormElement: reset event - Web APIs
html <form id="form"> <label>test field: <in
put type="text"></label> <br><br> <button type="reset">reset form</button> </form> <p id="log"></p> javascript function logreset(event) { log.textcontent = `form reset!
HTMLFormElement.submit() - Web APIs
<in
put> with attribute type="submit" will not be submitted with the form when using htmlformelement.submit(), but it would be submitted when you do it with original html form submit.
HTMLFormElement.target - Web APIs
the target property of the htmlformelement interface represents the target of the form's action (i.e., the frame in which to render its out
put).
HTMLImageElement.height - Web APIs
var clockimage = document.queryselector("img"); let out
put = document.queryselector(".size"); const updateheight = event => { out
put.innertext = clockimage.height; }; window.addeventlistener("load", updateheight); window.addeventlistener("resize", updateheight); result this example may be easier to try out in its own window.
HTMLImageElement.loading - Web APIs
by establishing the intrinsic aspect ratio in this manner, you prevent elements from shifting around while the document loads, which can be disconcerting or off
putting at best and can cause users to click the wrong thing at worst, depending on the exact timing of the deferred loads and reflows.
HTMLImageElement.srcset - Web APIs
let box = document.queryselector(".box"); let image = box.queryselector("img"); let newelem = document.createelement("p"); newelem.innerhtml = `image: <code>${image.currentsrc}</code>`; box.appendchild(newelem); result in the displayed out
put below, the selected url will correspond with whether your display results in selecting the 1x or the 2x version of the image.
HTMLImageElement.width - Web APIs
var clockimage = document.queryselector("img"); let out
put = document.queryselector(".size"); const updatewidth = event => { out
put.innertext = clockimage.width; }; window.addeventlistener("load", updatewidth); window.addeventlistener("resize", updatewidth); result this example may be easier to try out in its own window.
HTMLKeygenElement - Web APIs
properties autofocus is a boolean that reflects the autofocus html attribute, indicating that the form control should have in
put focus when the page loads.
HTMLMediaElement.play() - Web APIs
exceptions the promise's rejection handler is called with an exception name passed in as its sole in
put parameter (as opposed to a traditional exception being thrown).
HTMLMediaElement.playbackRate - Web APIs
(default: 1.0) example var obj = document.createelement('video'); console.log(obj.playbackrate); // expected out
put: 1 specifications specification status comment html living standardthe definition of 'htmlmediaelement.playbackrate' in that specification.
HTMLMediaElement.seekable - Web APIs
examples var video = document.queryselector("video"); var timerangesobject = video.seekable; var timeranges = []; //go through the object and out
put an array for (let count = 0; count < timerangesobject.length; count ++) { timeranges.push([timerangesobject.start(count), timerangesobject.end(count)]); } specifications specification status comment html living standardthe definition of 'htmlmediaelement' in that specification.
HTMLElement.blur() - Web APIs
syntax element.blur(); examples remove focus from a text in
put html <in
put type="text" id="mytext" value="sample text"> <br><br> <button type="button" onclick="focusin
put()">click me to gain focus</button> <button type="button" onclick="blurin
put()">click me to lose focus</button> javascript function focusin
put() { document.getelementbyid('mytext').focus(); } function blurin
put() { document.getelementbyid('mytext').blur(); } result specification specification status comment html living standardthe definition of 'blur' in that specification.
HTMLElement.focus() - Web APIs
examples focus on a text field javascript focusmethod = function getfocus() { document.getelementbyid("mytextfield").focus(); } html <in
put type="text" id="mytextfield" value="text field."> <p></p> <button type="button" onclick="focusmethod()">click me to focus on the text field!</button> result focus on a button javascript focusmethod = function getfocus() { document.getelementbyid("mybutton").focus(); } html <button type="button" id="mybutton">click me!</button> <p></p> <button type="button" onclick="focusmeth...
HTMLSelectElement.autofocus - Web APIs
the htmlselectelement.autofocus property is a boolean that reflects the autofocus html attribute, which indicates whether the associated <select> element will get in
put focus when the page loads, unless the user overrides it.
HTMLSelectElement.disabled - Web APIs
<in
put id="allow-drinks" type="checkbox"/> </label> <label for="drink-select">drink selection:</label> <select id="drink-select" disabled> <option value="1">water</option> <option value="2">beer</option> <option value="3">pepsi</option> <option value="4">whisky</option> </select> javascript var allowdrinkscheckbox = document.getelementbyid("allow-drinks"); var drinkselect = document.getelementbyid("drink-select"); allowdrinkscheckbox.addeventlistener("change", fu...
HTMLSelectElement.form - Web APIs
syntax edit aform = aselectelement.form.selectname; example html <form action="http://www.google.com/search" method="get"> <label>google: <in
put type="search" name="q"></label> <in
put type="submit" value="search..."> </form> javascript a property available on all form elements, "type" returns the type of the calling form element.
IDBCursor.update() - Web APIs
note also that you can't directly
put cursor.value into an update call, hence the below example using an intermediary updatedata variable.
IDBDatabase.onversionchange - Web APIs
the onversionchange event handler of the idbdatabase interface handles the versionchange event, fired when a database structure change (idbopendbrequest.onupgradeneeded event or idbfactory.deletedatabase) was requested elsewhere (most probably in another window/tab on the same com
puter).
IDBDatabase.transaction() - Web APIs
you're storing critical data that cannot be recom
puted later) you can force a transaction to flush to disk before delivering the complete event by creating a transaction using the experimental (non-standard) readwriteflush mode (see idbdatabase.transaction.) this is currently experimental, and can only be used if the dom.indexeddb.experimental pref is set to true in about:config.
IDBObjectStore.get() - Web APIs
once this data object is retrieved, you could then update it using normal javascript, then
put it back into the database using a idbobjectstore.
put operation.
IDBTransaction: abort event - Web APIs
bubbles yes cancelable no interface event event handler property onabort this can happen for any of the following reasons: bad requests, (for example, trying to add the same key twice, or
put the same index key when the key has a uniqueness constraint), an explicit abort() call an uncaught exception in the request's success/error handler, an i/o error (an actual failure to write to disk, for example disk detached, or other os/hardware failure) quota exceeded.
IDBTransaction.oncomplete - Web APIs
you're storing critical data that cannot be recom
puted later) you can force a transaction to flush to disk before delivering the complete event by creating a transaction using the experimental (non-standard) readwriteflush mode (see idbdatabase.transaction.) this is currently experimental, and can only be used if the dom.indexeddb.experimental pref is set to true in about:config.
IdleDeadline - Web APIs
the idledeadline interface is used as the data type of the in
put parameter to idle callbacks established by calling window.requestidlecallback().
ImageCapture - Web APIs
map); }) .catch(error => console.log(error)); } function ontakephotobuttonclick() { imagecapture.takephoto() .then(blob => createimagebitmap(blob)) .then(imagebitmap => { const canvas = document.queryselector('#takephotocanvas'); drawcanvas(canvas, imagebitmap); }) .catch(error => console.log(error)); } /* utils */ function drawcanvas(canvas, img) { canvas.width = getcom
putedstyle(canvas).width.split('px')[0]; canvas.height = getcom
putedstyle(canvas).height.split('px')[0]; let ratio = math.min(canvas.width / img.width, canvas.height / img.height); let x = (canvas.width - img.width * ratio) / 2; let y = (canvas.height - img.height * ratio) / 2; canvas.getcontext('2d').clearrect(0, 0, canvas.width, canvas.height); canvas.getcontext('2d').drawimage(img, 0,...
ImageData() - Web APIs
const ctx = canvas.getcontext('2d'); const arr = new uint8clampedarray(40000); // iterate through every pixel for (let i = 0; i < arr.length; i += 4) { arr[i + 0] = 0; // r value arr[i + 1] = 190; // g value arr[i + 2] = 0; // b value arr[i + 3] = 255; // a value } // initialize a new imagedata object let imagedata = new imagedata(arr, 200); // draw image data to the canvas ctx.
putimagedata(imagedata, 20, 20); result specification specification status comment html living standardthe definition of 'imagedata()' in that specification.
ImageData.data - Web APIs
the x direction, times 255 let x = (i % 400) / 400 * 255; // percentage in the y direction, times 255 let y = math.ceil(i / 400) / 100 * 255; // modify pixel data imagedata.data[i + 0] = x; // r value imagedata.data[i + 1] = y; // g value imagedata.data[i + 2] = 255 - x; // b value imagedata.data[i + 3] = 255; // a value } // draw image data to the canvas ctx.
putimagedata(imagedata, 20, 20); result more examples for more examples using imagedata.data, see pixel manipulation with canvas, canvasrenderingcontext2d.createimagedata(), and canvasrenderingcontext2d.
putimagedata().
Basic concepts - Web APIs
you're storing critical data that cannot be recom
puted later) you can force a transaction to flush to disk before delivering the complete event by creating a transaction using the experimental (non-standard) readwriteflush mode (see idbdatabase.transaction.) this is currently experimental, and can only be used if the dom.indexeddb.experimental pref is set to true in about:config.
MessageChannel.port1 - Web APIs
the handlemessage handler then responds to a message being sent back from the <iframe> (using messageport.onmessage),
putting it into a paragraph.
MessageChannel.port2 - Web APIs
the handlemessage handler then responds to a message being sent back from the iframe (using messageport.onmessage),
putting it into a paragraph.
MessagePort.close() - Web APIs
channel.port1.addeventlistener('message', handlemessage, false); function handlemessage(e) { para.innerhtml = e.data; textin
put.value = ''; } channel.port1.start(); you could stop messages being sent at any time using channel.port1.close(); specifications specification status comment html living standardthe definition of 'close()' in that specification.
MessagePort.onmessage - Web APIs
the handlemessage handler then responds to a message being sent back from the iframe using onmessage,
putting it into a paragraph — messagechannel.port1 is listened to, to check when the message arrives.
MessagePort.postMessage() - Web APIs
the handlemessage handler then responds to a message being sent back from the iframe using onmessage,
putting it into a paragraph — messagechannel.port1 is listened to, to check when the message arrives.
MessagePort.start() - Web APIs
ge = handlemessage; function handlemessage(e) { para.innerhtml = e.data; } another option would be to do this using eventtarget.addeventlistener, however, when this method is used, you need to explicitly call start() to begin the flow of messages to this document: channel.port1.addeventlistener('message', handlemessage, false); function handlemessage(e) { para.innerhtml = e.data; textin
put.value = ''; } channel.port1.start(); specifications specification status comment html living standardthe definition of 'start()' in that specification.
Microdata DOM API - Web APIs
<h1 itemprop="name http://example.com/fn">hedral</h1> <p itemprop="desc">hedral is a male american domestic shorthair, with a fluffy <span itemprop="http://example.com/color">black</span> fur with <span itemprop="http://example.com/color">white</span> paws and belly.</p> <img itemprop="img" src="hedral.jpeg" alt="" title="hedral, age 18 months"> </section> ...it would result in the following out
put: name http://example.com/fn desc http://example.com/color img (the duplicate occurrence of "http://example.com/color" is not included in the list.) htmlpropertiescollection the htmlpropertiescollection interface is used for collections of elements that add name-value pairs to a particular item in the microdata model.
Microsoft API extensions - Web APIs
pinned sites apis mssitemodeevent mssitemodejumplistitemremoved msthumbnailclick other apis x-ms-aria-flowfrom x-ms-acceleratorkey x-ms-format-detection mscaching mscachingenabled mscapslockwarningoff event.msconverturl() mselementresize document.mselementsfromrect() msisstatichtml navigator.mslaunchuri() mslaunchuricallback element.msmatchesselector() msprotocols ms
putpropertyenabled mswriteprofilermark ...
MouseEvent.button - Web APIs
some pointing devices only have one button and use keyboard or other in
put mechanisms to indicate main, secondary, auxilary, etc.
MouseEvent.buttons - Web APIs
the mouseevent.buttons read-only property indicates which buttons are pressed on the mouse (or other in
put device) when a mouse event is triggered.
MouseEvent.initMouseEvent() - Web APIs
example html <div style="background:red; width:180px; padding:10px;"> <div id="out"></div> <in
put type="text"> </div> javascript document.body.onclick = function(){ e = arguments[0]; var dt = e.target,stag = dt.tagname.tolowercase(); document.getelementbyid("out").innerhtml = stag; }; var simulateclick = function(){ var evt = document.createevent("mouseevents"); evt.initmouseevent("click", true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null); document.body...
MouseEvent.movementX - Web APIs
in other words, the value of the property is com
puted like this: currentevent.movementx = currentevent.screenx - previousevent.screenx.
MouseEvent.movementY - Web APIs
in other words, the value of the property is com
puted like this: currentevent.movementy = currentevent.screeny - previousevent.screeny.
MouseScrollEvent - Web APIs
the mousescrollevent interface represents events that occur due to the user moving a mouse wheel or similar in
put device.
msFirstPaint - Web APIs
put another way, msfirstpaint utilizes the browser to measure when the first content completes being painted in the window.
msSetMediaProtectionManager - Web APIs
the mediaprotectionmanager class can be passed as an in
put to a media playback api or the mediaprotectionmanager property inside the tag's video or audio.
Navigation Timing API - Web APIs
examples calculate the total page load time to com
pute the total amount of time it took to load the page, you can use the following code: const perfdata = window.performance.timing; const pageloadtime = perfdata.loadeventend - perfdata.navigationstart; this subtracts the time at which navigation began (navigationstart) from the time at which the load event handler returns (loadeventend).
Navigator.mediaCapabilities - Web APIs
the navigator.mediacapabilities read-only property returns a mediacapabilities object that can expose information about the decoding and encoding capabilities for a given format and out
put capabilities as defined by the media capabilities api.
Navigator.mediaDevices - Web APIs
the navigator.mediadevices read-only property returns a mediadevices object, which provides access to connected media in
put devices like cameras and microphones, as well as screen sharing.
Navigator.oscpu - Web APIs
or 4.5) windows ce windowsce x.y1 windows 64-bit (64-bit build) windows nt x.y; win64; x64 windows 64-bit (32-bit build) windows nt x.y; wow64 windows 32-bit windows nt x.y mac os x (ppc build) powerpc mac os x version x.y mac os x (i386/x64 build) intel mac os x or macos version x.y linux 64-bit (32-bit build) out
put of uname -s plus "i686 on x86_64" linux out
put of uname -sm x.y refers to the version of the operating system example function osinfo() { alert(window.navigator.oscpu); } osinfo(); // alerts "windows nt 6.0" for example usage notes unless your code is privileged (chrome or at least has the universalbrowserread privilege), it may get the value of the general.oscpu.ove...
Navigator.requestMediaKeySystemAccess() - Web APIs
the fulfillment handler receives as in
put just one parameter: mediakeysystemaccess a mediakeysystemaccess object representing the media key system configuration described by keysystem and supportedconfigurations exceptions in case of an error, the returned promise is rejected with a domexception whose name indicates what kind of error occurred.
NavigatorConcurrentHardware - Web APIs
modern com
puters have multiple physical cores in their cpu (two or four cores is typical), but each physical core is also usually able to run more than one thread at a time using advanced scheduling techniques.
Navigator.onLine - Web APIs
you could be getting false positives, such as in cases where the com
puter is running a virtualization software that has virtual ethernet adapters that are always "connected." therefore, if you really want to determine the online status of the browser, you should develop additional means for checking.
NavigatorStorage - Web APIs
there are many apis which provide ways for web content to store data on a user's com
puter, including cookies, the web storage api (window.localstorage and window.sessionstorage), and indexeddb.
NetworkInformation.downlink - Web APIs
this value is based on recently observed application layer through
put across recently active connections, excluding connections made to a private address space.
Node.baseURI - Web APIs
if the document contains xml:base attributes (which you shouldn't do in html documents), the element.baseuri takes the xml:base attributes of element's parents into account when com
puting the base url.
Node.isSupported() - Web APIs
var main = document.getelementbyid('doc'); var out
put = main.issupported('html', '2.0'); </script> specifications specification status comment document object model (dom) level 3 core specificationthe definition of 'node.issupported()' in that specification.
Node.namespaceURI - Web APIs
if (node.localname == "browser" && node.namespaceuri == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") { // this is a xul browser } notes this is not a com
puted value that is the result of a namespace lookup based on an examination of the namespace declarations in scope.
Node.nodeName - Web APIs
ttype the value of documenttype.name element the value of element.tagname entity the entity name entityreference the name of entity reference notation the notation name processinginstruction the value of processinginstruction.target text "#text" example given the following markup: <div id="d1">hello world</div> <in
put type="text" id="t"> and the following script: var div1 = document.getelementbyid("d1"); var text_field = document.getelementbyid("t"); text_field.value = div1.nodename; in xhtml (or any other xml format), text_field's value would read "div".
NonDocumentTypeChildNode.nextElementSibling - Web APIs
syntax var nextnode = elementnodereference.nextelementsibling; example <div id="div-01">here is div-01</div> <div id="div-02">here is div-02</div> <script type="text/javascript"> var el = document.getelementbyid('div-01').nextelementsibling; console.log('siblings of div-01:'); while (el) { console.log(el.nodename); el = el.nextelementsibling; } </script> this example out
puts the following into the console when it loads: siblings of div-01: div script polyfill for internet explorer 8 this property is unsupported prior to ie9, so the following snippet can be used to add support to ie8: // source: https://github.com/alhadis/snippets/blob/master/js/polyfills/ie8-child-elements.js if(!("nextelementsibling" in document.documentelement)){ object.defineproperty(elem...
NonDocumentTypeChildNode.previousElementSibling - Web APIs
/div> <li>this is a list item</li> <li>this is another list item</li> <div id="div-03">here is div-03</div> <script> let el = document.getelementbyid('div-03').previouselementsibling; document.write('<p>siblings of div-03</p><ol>'); while (el) { document.write('<li>' + el.nodename + '</li>'); el = el.previouselementsibling; } document.write('</ol>'); </script> this example out
puts the following into the page when it loads: siblings of div-03 1.
NotificationAction - Web APIs
notificationaction.action read only the name of the action, which can be used to identify the clicked action similar to in
put names.
Page Visibility API - Web APIs
for example, if your web app is playing a video, it can pause the video when the user
puts the tab into the background, and resume playback when the user returns to the tab.
PannerNode.coneInnerAngle - Web APIs
rotation in the 'horizontal plane') to an orientation vector const yrotationtovector = degrees => { // convert degrees to radians and offset the angle so 0 points towards the listener const radians = (degrees - 90) * (math.pi / 180); // using cosine and sine here ensures the out
put values are always normalised // i.e.
PannerNode.coneOuterAngle - Web APIs
rotation in the 'horizontal plane') to an orientation vector const yrotationtovector = degrees => { // convert degrees to radians and offset the angle so 0 points towards the listener const radians = (degrees - 90) * (math.pi / 180); // using cosine and sine here ensures the out
put values are always normalised // i.e.
PannerNode.coneOuterGain - Web APIs
rotation in the 'horizontal plane') to an orientation vector const yrotationtovector = degrees => { // convert degrees to radians and offset the angle so 0 points towards the listener const radians = (degrees - 90) * (math.pi / 180); // using cosine and sine here ensures the out
put values are always normalised // i.e.
PannerNode.orientationX - Web APIs
rotation in the 'horizontal plane') to an orientation vector const yrotationtovector = degrees => { // convert degrees to radians and offset the angle so 0 points towards the listener const radians = (degrees - 90) * (math.pi / 180); // using cosine and sine here ensures the out
put values are always normalised // i.e.
PannerNode.orientationY - Web APIs
rotation in the 'horizontal plane') to an orientation vector const yrotationtovector = degrees => { // convert degrees to radians and offset the angle so 0 points towards the listener const radians = (degrees - 90) * (math.pi / 180); // using cosine and sine here ensures the out
put values are always normalised // i.e.
PannerNode.orientationZ - Web APIs
rotation in the 'horizontal plane') to an orientation vector const yrotationtovector = degrees => { // convert degrees to radians and offset the angle so 0 points towards the listener const radians = (degrees - 90) * (math.pi / 180); // using cosine and sine here ensures the out
put values are always normalised // i.e.
PannerNode.panningModel - Web APIs
hrtf: renders a stereo out
put of higher quality than equalpower — it uses a convolution with measured impulse responses from human subjects.
PaymentMethodChangeEvent.methodName - Web APIs
example this example uses the paymentmethodchange event to watch for changes to the payment method selected for apple pay, in order to com
pute a discount if the user chooses to use a visa card as their payment method.
PaymentRequest: paymentmethodchange event - Web APIs
} event.updatewith(detailsupdate); }, false); this begins by looking at the event's methodname property; if that indicates that the user is trying to use apple pay, we pass the methoddetails into a function called calculateservicefee(), which we might create to take the information about the transaction, such as the underlying credit card being used to service the apple pay request, and com
pute and return an paymentdetailsupdate object that specifies changes to be applied to the paymentrequest in order to add any service fees that the payment method might require.
PaymentRequest: shippingoptionchange event - Web APIs
paymentrequest.addeventlistener("shippingoptionchange", event => { const value = calculatenewtotal(paymentrequest.shippingoption); const total = { currency: "eur", label: "total due", value, }; event.updatewith({ total }); }, false); after caling a custom function, calculatenewtotal(), to com
pute the updated total based on the newly-selected shipping option as specified by the shippingoption.
Using the Payment Request API - Web APIs
showing additional user interface after successful payments if the merchant desires to collect additional information not part of the api (e.g., additional delivery instructions), the merchant can show a page with additional <in
put type="text"> fields after the checkout.
PerformancePaintTiming - Web APIs
rmance = window.performance; let performanceentries = performance.getentriesbytype('paint'); performanceentries.foreach( (performanceentry, i, entries) => { console.log("the time to " + performanceentry.name + " was " + performanceentry.starttime + " milliseconds."); }); } else { console.log('performance timing isn\'t supported.'); } } the code above produces console out
put something like the following: the time to first-paint was 2785.915 milliseconds.
Using the Performance API - Web APIs
function print_json() { var json; var o = document.getelementsbytagname("out
put")[0]; if (window.performance.tojson === undefined) { json = "window.performance.tojson() is not supported"; o.innerhtml += json + "<br>"; } else { var s; json = window.performance.tojson(); // print the performance object s = json.stringify(json); o.innerhtml = "<p>performance = " + s + "</p>"; // print the performance.timing and performance.navigation objec...
Using Performance Timeline - Web APIs
function log(s) { var o = document.getelementsbytagname("out
put")[0]; o.innerhtml += s + " <br>"; } function do_work (n) { for (var i=0 ; i < n; i++) { var m = math.random(); } } function print_perf_entry(pe) { log("..name: " + pe.name + "; entrytype: " + pe.entrytype + "; starttime: " + pe.starttime + "; duration: " + pe.duration); } function print_performanceentries() { if (performance.mark === undefined) { ...
ProgressEvent.total - Web APIs
syntax value = progressevent.total specifications specification status comment xmlhttprequestthe definition of 'progressevent.lengthcom
putable' in that specification.
PublicKeyCredential.getClientExtensionResults() - Web APIs
examples var publickey = { // here are the extensions (as "in
puts") extensions: { "loc": true, // this extension has been defined to include location information in attestation "uvi": true // user verification index: how the user was verified }, challenge: new uint8array(16) /* from the server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(16) /* from the server */, name: "jdoe@examp...
RTCDataChannel.send() - Web APIs
example in this example, a routine called sendmessage() is created; it accepts an object as in
put and sends to the remote peer, over the rtcdatachannel, a json string with the specified object and a time stamp.
RTCDataChannel - Web APIs
when an error occurs on the data channel, the function receives as in
put an errorevent object describing the error which occurred.onmessage the rtcdatachannel.onmessage property stores an eventhandler which specifies a function to be called when the message event is fired on the channel.
RTCError - Web APIs
this message is then displayed using a function called showmyalertmessage(), which stands in for whatever out
put mechanism this code might use.
RTCErrorEvent.error - Web APIs
this message is then displayed using a function called showmyalertmessage(), which stands in for whatever out
put mechanism this code might use.
RTCIceCandidate.candidate - Web APIs
the complete list of attributes for this example candidate is: foundation = 4234997325 component = "rtp" (the number 1 is encoded to this string; 2 becomes "rtcp") protocol = "udp" priority = 2043278322 ip = "192.168.0.56" port = 44323 type = "host" example in this example, we see a function which receives as in
put an sdp string containing an ice candidate received from the remote peer during the signaling process.
RTCIceCandidate.relatedAddress - Web APIs
example in this example, the candidate's type is checked, and then debugging out
put is presented, based on the candidate type, including the candidate's ip and relatedaddress.
RTCIceCandidate.relatedPort - Web APIs
example in this example, the candidate's type is checked, and then debugging out
put is presented, based on the candidate type, including the candidate's type, address (ip and port), and related address (relatedaddress and relatedport).
RTCIceCandidate - Web APIs
note: for backward compatibility, the constructor also accepts as in
put a string containing the value of the candidate property instead of a rtcicecandidateinit object, since the candidate includes all of the information that rtcicecandidateinit does and more.
RTCIceCandidateInit.candidate - Web APIs
message like this: function goticecandidatemessage(msg) { var icecandidate = new rtcicecandidate({ candidate: msg.candidate; }); pc.addicecandidate(icecandidate).catch({ /* handle error */ }); } it's helpful to note that for backward compatibility with older versions of the webrtc specification, the rtcicecandidate() constructor accepts the value of candidate as its only in
put, in place of the rtcicecandidateinit dictionary.
RTCIceCandidatePairStats.firstRequestTimestamp - Web APIs
you can use this value in combination with lastrequesttimestamp and requestssent to com
pute the average interval between consecutive connectivity checks: avgcheckinterval = (candidatepairstats.lastrequesttimestamp - candidatepairstats.firstrequesttimestamp) / candidatepairstats.requestssent; specifications specification status comment identifiers for webrtc's statistics apithe definition of 'rtcicecandidatepairstats.
RTCIceCandidatePairStats.lastRequestTimestamp - Web APIs
you can use this value in combination with firstrequesttimestamp and requestssent to com
pute the average interval between consecutive connectivity checks: avgcheckinterval = (candidatepairstats.lastrequesttimestamp - candidatepairstats.firstrequesttimestamp) / candidatepairstats.requestssent; specifications specification status comment identifiers for webrtc's statistics apithe definition of 'rtcicecandidatepairstats.
RTCIceCandidatePairStats.remoteCandidateId - Web APIs
the rtcicecandidatepairstats property remotecandidateid is a string that uniquely identifies the remote ice candidate which was analyzed to generate the rtcicecandidatestats used to com
pute the statistics for this pair of candidates.
RTCIceCandidateStats.priority - Web APIs
the priority of a candidate is calculated using the following variables as in
puts: the preferability of the candidate type (local, server reflexive, peer reflexive, or relayed) the preferability of the candidate's specific ip address (for multihomed agents) the candidate's component id (1 for rtp, 2 for rtcp) the candidate's priority is com
puted using the formula (ptype is the priority of the candidate's type and plocal is the priority of the ip address): priority = 2...
RTCIceTransport.getLocalCandidates() - Web APIs
example this simple example gets the local candidate list from the rtcicetransport for the first rtcrtpsender on the rtcpeerconnection, then out
puts to the console all of the candidates in the list.
RTCIceTransport.getRemoteCandidates() - Web APIs
example this simple example gets the remote candidate list from the rtcicetransport for the first rtcrtpsender on the rtcpeerconnection, then out
puts to the console all of the candidates in the list.
RTCPeerConnection.ondatachannel - Web APIs
syntax rtcpeerconnection.ondatachannel = function; value set this property to be a function you provide which receives as in
put a single parameter: an rtcdatachannelevent which provides in its channel property the rtcdatachannel which has been created.
RTCPeerConnection.onicecandidate - Web APIs
syntax rtcpeerconnection.onicecandidate = eventhandler; value this should be set to a function which you provide that accepts as in
put an rtcpeerconnectioniceevent object representing the icecandidate event.
RTCPeerConnection.oniceconnectionstatechange - Web APIs
syntax rtcpeerconnection.oniceconnectionstatechange = eventhandler; value this event handler can be set to function which is passed a single in
put parameter: an event object describing the iceconnectionstatechange event which occurred.
RTCPeerConnection.remoteDescription - Web APIs
the returned value typically reflects a remote description which has been received over the signaling server (as either an offer or an answer) and then
put into effect by your code calling rtcpeerconnection.setremotedescription() in response.
RTCRtpEncodingParameters.maxBitrate - Web APIs
this value is com
puted using the standard transport independent application specific maximum (tias) bandwidth as defined by rfc 3890, section 6.2.2; this is the maximum bandwidth needed without considering protocol overheads from ip, tcp or udp, and so forth.
RTCRtpStreamStats - Web APIs
local-only measurements these properties are com
puted locally, and are only available to the device receiving the media stream.
RadioNodeList - Web APIs
on setting the value property, the first radio button in
put element whose value property is equal to the new value will be set to checked.
Range.surroundContents() - Web APIs
example html <span class="header-text">
put this in a headline</span> javascript const range = document.createrange(); const newparent = document.createelement('h1'); range.selectnode(document.queryselector('.header-text')); range.surroundcontents(newparent); result specifications specification status comment domthe definition of 'range.surroundcontents()' in that specification.
Range.toString() - Web APIs
look at the out
put below.</p> <p id="log"></p> javascript const range = document.createrange(); range.setstartbefore(document.getelementsbytagname('b').item(0), 0); range.setendafter(document.getelementsbytagname('b').item(1), 0); document.getelementbyid('log').textcontent = range.tostring(); result specifications specification status comment domthe definition of 'range.tostring()' in that specification.
ReadableStream.getReader() - Web APIs
each chunk is read sequentially and out
put to the ui, until the stream has finished being read, at which point we return out of the recursive function and print the entire stream to another part of the ui.
ReadableStreamDefaultReader.cancel() - Web APIs
each chunk is read sequentially and out
put to the ui, until the stream has finished being read, at which point we return out of the recursive function and print the entire stream to another part of the ui.
ReadableStreamDefaultReader.read() - Web APIs
each chunk is read sequentially and out
put to the ui as an array of utf-8 bytes, until the stream has finished being read, at which point we return out of the recursive function and print the entire stream to another part of the ui.
Report - Web APIs
the report details are displayed via the displayreports() fuction, which takes the observer callback's reports parameter as its parameter: function displayreports(reports) { const out
putelem = document.queryselector('.out
put'); const list = document.createelement('ul'); out
putelem.appendchild(list); for(let i = 0; i < reports.length; i++) { let listitem = document.createelement('li'); let textnode = document.createtextnode('report ' + (i + 1) + ', type: ' + reports[i].type); listitem.appendchild(textnode); let innerlist = document.createelement('ul'); l...
Request() - Web APIs
syntax var myrequest = new request(in
put[, init]); parameters in
put defines the resource that you wish to fetch.
ResizeObserver - Web APIs
the javascript looks like so: const h1elem = document.queryselector('h1'); const pelem = document.queryselector('p'); const divelem = document.queryselector('body > div'); const slider = document.queryselector('in
put[type="range"]'); const checkbox = document.queryselector('in
put[type="checkbox"]'); divelem.style.width = '600px'; slider.addeventlistener('in
put', () => { divelem.style.width = slider.value + 'px'; }) const resizeobserver = new resizeobserver(entries => { for (const entry of entries) { if (entry.contentboxsize) { h1elem.style.fontsize = math.max(1.5, entry.contentboxsize.inlines...
Resize Observer API - Web APIs
the window resize event), then figure out what the new dimensions or other features of the element after a resize using element.getboundingclientrect or window.getcom
putedstyle, for example.
Response.useFinalURL - Web APIs
example consider a script residing in page index.html: fetch('/test').then((r) => console.log(r.url)) test.html is being controlled by the service worker sw.js: onfetch = (e) => { e.respondwith(fetch('/page2').then((r) => { r.usefinalurl = true; return r; }) } the out
put will be /page2 and not /test in index.html, since setting the usefinalurl means that the response's url is not set to request's url.
SVGEllipseElement - Web APIs
example svg content <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="100" cy="100" rx="100" ry="60" id="ellipse" onclick="out
putsize();"/> </svg> javascript content function out
putsize() { var ellipse = document.getelementbyid("ellipse"); // out
puts "horizontal radius: 100 vertical radius: 60" console.log( 'horizontal radius: ' + ellipse.rx.baseval.valueasstring, 'vertical radius: ' + ellipse.ry.baseval.valueasstring ) } result specifications specification status comment ...
SVGGeometryElement - Web APIs
svggeometryelement.gettotallength() returns the user agent's com
puted value for the total length of the path in user units.
SVGGraphicsElement: copy event - Web APIs
example html <?xml version="1.0" encoding="utf-8"?> <svg viewbox="0 0 100 30" width="600" height="320" xmlns="http://www.w3.org/2000/svg"> <text x="5" y="10" id="text-to-copy">copy this text</text> <foreignobject x="5" y="20" width="90" height="20"> <in
put xmlns="http://www.w3.org/1999/xhtml" placeholder="paste it here"/> </foreignobject> </svg> css in
put { font-size: 10px; width: 100%; height: 90%; box-sizing: border-box; border: 1px solid black; } javascript document.getelementsbytagname("text")[0].addeventlistener("copy", evt => { evt.clipboarddata.setdata('text/plain', document.getselection().tostring().touppercase()); ev...
SVGGraphicsElement: paste event - Web APIs
example html <?xml version="1.0" encoding="utf-8"?> <svg viewbox="0 0 140 30" width="600" height="320" xmlns="http://www.w3.org/2000/svg"> <foreignobject x="5" y="-10" width="90" height="20"> <in
put xmlns="http://www.w3.org/1999/xhtml" value="copy this text"/> </foreignobject> <text x="5" y="30" id="element-to-paste-text" tabindex="1">paste it here</text> </svg> css in
put { font-size: 10px; width: 100%; height: 90%; box-sizing: border-box; border: 1px solid black; } javascript document.getelementbyid("element-to-paste-text").addeventlistener("paste", evt => { evt.targ...
SVGPathElement - Web APIs
svgpathelement.gettotallength() returns a float representing the com
puted value for the total length of the path using the browser's distance-along-a-path algorithm, as a distance in the current user coordinate system.
The 'X' property - Web APIs
usage context name x value <length> | <percentage> initial 0 applies to <mask> , ‘svg’, ‘rect’, ‘image’, ‘foreignobject’ inherited no percentages refer to the size of the current viewport (see units) media visual com
puted value absolute length or percentage animatable yes simple usage a <coordinate> is a length in the user coordinate system that is the given distance from the origin of the user coordinate system along the relevant axis (the x-axis for x coordinates, the y-axis for y coordinates).
ScrollToOptions.behavior - Web APIs
when the form is submitted, an event handler is run that
puts the entered values into a scrolltooptions dictionary, and then invokes the window.scrollto() method, passing the dictionary as a parameter: form.addeventlistener('submit', (e) => { e.preventdefault(); var scrolloptions = { left: leftin
put.value, top: topin
put.value, behavior: scrollin
put.checked ?
ScrollToOptions.left - Web APIs
when the form is submitted, an event handler is run that
puts the entered values into a scrolltooptions dictionary, and then invokes the window.scrollto() method, passing the dictionary as a parameter: form.addeventlistener('submit', (e) => { e.preventdefault(); var scrolloptions = { left: leftin
put.value, top: topin
put.value, behavior: scrollin
put.checked ?
ScrollToOptions.top - Web APIs
when the form is submitted, an event handler is run that
puts the entered values into a scrolltooptions dictionary, and then invokes the window.scrollto() method, passing the dictionary as a parameter: form.addeventlistener('submit', (e) => { e.preventdefault(); var scrolloptions = { left: leftin
put.value, top: topin
put.value, behavior: scrollin
put.checked ?
ScrollToOptions - Web APIs
when the form is submitted, an event handler is run that
puts the entered values into a scrolltooptions dictionary, and then invokes the window.scrollto() method, passing the dictionary as a parameter: form.addeventlistener('submit', (e) => { e.preventdefault(); var scrolloptions = { left: leftin
put.value, top: topin
put.value, behavior: scrollin
put.checked ?
Selection - Web APIs
selection and in
put focus selection and in
put focus (indicated by document.activeelement) have a complex relationship that varies by browser.
Using server-sent events - Web APIs
ener("ping", function(event) { const newelement = document.createelement("li"); const time = json.parse(event.data).time; newelement.innerhtml = "ping at " + time; eventlist.appendchild(newelement); }); this code is similar, except that it will be called automatically whenever the server sends a message with the event field set to "ping"; it then parses the json in the data field and out
puts that information.
SourceBuffer.appendBufferAsync() - Web APIs
example this simplified example async function, fillsourcebuffer(), takes as in
put parameters buffersource, buffer, and a sourcebuffer to which to append the source media from the buffer.
SpeechRecognition.abort() - Web APIs
e | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; var diagnostic = document.queryselector('.out
put'); var bg = document.queryselector('html'); document.body.onclick = function() { recognition.start(); console.log('ready to receive a color command.'); } abortbtn.onclick = function() { recognition.abort(); console.log('speech recognition aborted.'); } recognition.onspeechend = function() { recognition.stop(); console.log('speech recognition has stopped.'); } specifications ...
SpeechRecognition.start() - Web APIs
e | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; var diagnostic = document.queryselector('.out
put'); var bg = document.queryselector('html'); document.body.onclick = function() { recognition.start(); console.log('ready to receive a color command.'); } abortbtn.onclick = function() { recognition.abort(); console.log('speech recognition aborted.'); } recognition.onspeechend = function() { recognition.stop(); console.log('speech recognition has stopped.'); } specifications ...
SpeechRecognition.stop() - Web APIs
e | orange | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; var diagnostic = document.queryselector('.out
put'); var bg = document.queryselector('html'); document.body.onclick = function() { recognition.start(); console.log('ready to receive a color command.'); } abortbtn.onclick = function() { recognition.abort(); console.log('speech recognition aborted.'); } recognition.onspeechend = function() { recognition.stop(); console.log('speech recognition has stopped.'); } specifications ...
SpeechRecognition - Web APIs
oise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; recognition.continuous = false; recognition.lang = 'en-us'; recognition.interimresults = false; recognition.maxalternatives = 1; var diagnostic = document.queryselector('.out
put'); var bg = document.queryselector('html'); document.body.onclick = function() { recognition.start(); console.log('ready to receive a color command.'); } recognition.onresult = function(event) { var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color; bg.style.backgroundcolor = color; } specifications specification status comme...
SpeechSynthesis.resume() - Web APIs
the resume() method of the speechsynthesis interface
puts the speechsynthesis object into a non-paused state: resumes it if it was already paused.
SpeechSynthesis.speak() - Web APIs
in
putform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(in
puttxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); in
puttxt.blur(); } specifications ...
Touch.clientX - Web APIs
// register touchstart and touchend listeners for element 'source' var src = document.getelementbyid("source"); var clientx, clienty; src.addeventlistener('touchstart', function(e) { // cache the client x/y coordinates clientx = e.touches[0].clientx; clienty = e.touches[0].clienty; }, false); src.addeventlistener('touchend', function(e) { var deltax, deltay; // com
pute the change in x and y coordinates.
Touch.clientY - Web APIs
// register touchstart and touchend listeners for element 'source' var src = document.getelementbyid("source"); var clientx, clienty; src.addeventlistener('touchstart', function(e) { // cache the client x/y coordinates clientx = e.touches[0].clientx; clienty = e.touches[0].clienty; }, false); src.addeventlistener('touchend', function(e) { var deltax, deltay; // com
pute the change in x and y coordinates.
TrackEvent() - Web APIs
return value a newly-created trackevent object, initialized as described by the in
puts to the constructor.
TrackEvent - Web APIs
trackkind = "text"; } else { trackkind = "unknown"; } switch(event.type) { case "addtrack": console.log("added a " + trackkind + " track"); break; case "removetrack": console.log("removed a " + trackkind + " track"); break; } } the event handler uses the javascript instanceof operator to determine which type of track the event occurred on, then out
puts to console a message indicating what kind of track it is and whether it's being added to or removed from the element.
UIEvent.layerX - Web APIs
note the pagex\pagey properties still return the absolute position in the document, including page scrolling.</span> </div> <div id="d3"> <form name="form_coords" id="form1"> parent element id: <in
put type="text" name="parentid" size="7" /><br /> pagex:<in
put type="text" name="pagexcoords" size="7" /> pagey:<in
put type="text" name="pageycoords" size="7" /><br /> layerx:<in
put type="text" name="layerxcoords" size="7" /> layery:<in
put type="text" name="layerycoords" size="7" /> </form> </div> </body> </html> specifications this property is not part of any specification.
UIEvent.layerY - Web APIs
note the pagex\pagey properties still return the absolute position in the document, including page scrolling.</span> </div> <div id="d3"> <form name="form_coords" id="form1"> parent element id: <in
put type="text" name="parentid" size="7" /><br /> pagex:<in
put type="text" name="pagexcoords" size="7" /> pagey:<in
put type="text" name="pageycoords" size="7" /><br /> layerx:<in
put type="text" name="layerxcoords" size="7" /> layery:<in
put type="text" name="layerycoords" size="7" /> </form> </div> </body> </html> specifications this property is not part of any specification.
UIEvent.pageY - Web APIs
note the pagex\pagey properties still return the absolute position in the document, including page scrolling.</span> </div> <div id="d3"> <form name="form_coords"> parent element id: <in
put type="text" name="parentid" size="7" /><br /> pagex:<in
put type="text" name="pagexcoords" size="7" /> pagey:<in
put type="text" name="pageycoords" size="7" /><br /> layerx:<in
put type="text" name="layerxcoords" size="7" /> layery:<in
put type="text" name="layerycoords" size="7" /> </form> </div> </body> </html> specifications this property is not part of any specification.
URLSearchParams.set() - Web APIs
'use strict' function genurl(rexp, atext, bdebug=false){ let theurl theurl= new url('https://regexr.com') theurl.searchparams.set( 'expression', rexp.tostring() ) theurl.searchparams.set( 'tool', 'replace' ) theurl.searchparams.set( 'in
put', '\u2911\u20dc' )// ⤑⃜ theurl.searchparams.set( 'text', atext.join('\n') ) if( bdebug ){ // display the key/value pairs for(var pair of theurl.searchparams.entries()) { console.debug(pair[0] + ' = \'' + pair[1] + '\''); } console.debug(theurl) } return theurl } var url = genurl( /(^\s*\/\/|\s*[^:]\/\/).*\s*$|\s*\/\*(.|\n)+?\*\/\s*$/gm // single/multi-line comments // /(^\s*\...
USBDevice.clearHalt() - Web APIs
syntax var promise = usbdevice.clearhalt(direction, endpointnumber) parameters direction indicates whether the devices in
put or out
put should be cleared.
USBEndpoint - Web APIs
for example, a usb serial device must provide bulk in
put and out
put endpoints but their endpoint numbers will depend on what other interfaces the device provides.
validityState.tooLong - Web APIs
the read-only toolong property of a validitystate object indicates if the value of an <in
put> or <textarea>, after having been edited by the user, exceeds the maximum code-unit length established by the element's maxlength attribute.
validityState.tooShort - Web APIs
the read-only tooshort property of a validitystate object indicates if the value of an <in
put>, <button>, <select>, <out
put>, <fieldset> or <textarea>, after having been edited by the user, is less than the minimum code-unit length established by the element's minlength attribute.
VideoTrackList.onaddtrack - Web APIs
syntax videotracklist.onaddtrack = eventhandler; value set onaddtrack to a function that accepts as in
put a trackevent object which indicates in its track property which video track has been added to the media.
VideoTrackList.onremovetrack - Web APIs
syntax videotracklist.onremovetrack = eventhandler; value set onremovetrack to a function that accepts as in
put a trackevent object which indicates in its track property which video track has been removed from the media element.
WEBGL_debug_shaders - Web APIs
this extension is not directly available to web sites as the way of how the shader is translated may uncover personally-identifiable information to the web page about the kind of graphics card in the user's com
puter.
WebGL2RenderingContext.transformFeedbackVaryings() - Web APIs
examples var transformfeedback = gl.createtransformfeedback(); gl.bindtransformfeedback(gl.transform_feedback, transformfeedback); var transformfeedbackout
puts = ['gl_position', 'anotherout
put']; gl.transformfeedbackvaryings(shaderprog, transformfeedbackout
puts, gl.interleaved_attribs); gl.linkprogram(shaderprog); specifications specification status comment webgl 2.0the definition of 'transformfeedbackvaryings' in that specification.
WebGLRenderingContext.getUniformLocation() - Web APIs
once you have the uniform's location, you can access the uniform itself using one of the other uniform access methods, passing in the uniform location as one of the in
puts: getuniform() returns the value of the uniform at the given location.
WebGLRenderingContext.isContextLost() - Web APIs
the user's com
puter has multiple graphics processors (such as a laptop with both mobile and desktop class gpus, the former used primarily when on battery power), and the user or system decides to switch gpus.
Clearing with colors - Web APIs
by tweaking those "dials" and "switches" you can modify the internal state of the webgl machine, which in turn changes how in
put (in this case, a clear command) translates into out
put (in this case, all pixels are set to green).
Color masking - Web APIs
this means that graphics operations in webgl are done in a certain order, where the out
put of each operation serves as the in
put of the next.
Hello GLSL - Web APIs
if the canvas remains blank, you can check the out
put of the next example, which draws exactly the same thing.
WebGL constants - Web APIs
rtex_uniform_components 0x8b4a max_array_texture_layers 0x88ff min_program_texel_offset 0x8904 max_program_texel_offset 0x8905 max_varying_components 0x8b4b fragment_shader_derivative_hint 0x8b8b rasterizer_discard 0x8c89 vertex_array_binding 0x85b5 max_vertex_out
put_components 0x9122 max_fragment_in
put_components 0x9125 max_server_wait_timeout 0x9111 max_element_index 0x8d6b textures constants passed to webglrenderingcontext.texparameteri(), webglrenderingcontext.texparameterf(), webglrenderingcontext.bindtexture(), webglrenderingcontext.teximage2d(), and others.
Data in WebGL - Web APIs
this is commonly used to share a vertex's normal vector after it has been com
puted by the vertex shader.
Matrix math for the web - Web APIs
matrices can be used to represent transformations of objects in space, and are used for performing many key types of com
putation when constructing images and visualizing data on the web.
Animating textures in WebGL - Web APIs
instead, all it does is create an empty texture object,
put a single pixel in it, and set its filtering for later use: function inittexture(gl) { const texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); // because video has to be download over the internet // they might take a moment until it's ready so //
put a single pixel in the texture so we can // use it immediately.
Getting started with WebGL - Web APIs
webgl programs consist of control code written in javascript and shader code (glsl) that is executed on a com
puter's graphics processing unit (gpu).
WebGL tutorial - Web APIs
webgl programs consist of control code written in javascript and special effects code (shader code) that is executed on a com
puter's graphics processing unit (gpu).
Writing WebSocket servers - Web APIs
that header looks something like the following (remember each header line ends with \r\n and
put an extra \r\n after the last one to indicate the end of the header): http/1.1 101 switching protocols upgrade: websocket connection: upgrade sec-websocket-accept: s3pplmbitxaq9kygzzhzrbk+xoo= additionally, the server can decide on extension/subprotocol requests here; see miscellaneous for details.
Using bounded reference spaces - Web APIs
there are two cut-out areas in the room, possibly representing a couch, sofa, or bench behind the user and a stand or table on which the com
puter or other hardware is located.
Web Audio API best practices - Web APIs
as you work with a lot of changing values within the web audio api and will want to provide users with control over these, the range in
put is often a good choice of control to use.
Visualizations with Web Audio API - Web APIs
xt || window.webkitaudiocontext)(); var analyser = audioctx.createanalyser(); this node is then connected to your audio source at some point between your source and your destination, for example: source = audioctx.createmediastreamsource(stream); source.connect(analyser); analyser.connect(distortion); distortion.connect(audioctx.destination); note: you don't need to connect the analyser's out
put to another node for it to work, as long as the in
put is connected to the source, either directly or via another node.
Using the Web Storage API - Web APIs
we have also provided an event out
put page — if you load this page in another tab, then make changes to your choices in the landing page, you'll see the updated storage information out
putted as a storageevent is fired.
Web Storage API - Web APIs
in addition, we have provided an event out
put page — if you load this page in another tab, then make changes to your choices in the landing page, you'll see the updated storage information out
putted as the storageevent is fired.
WheelEvent - Web APIs
the wheelevent interface represents events that occur due to the user moving a mouse wheel or similar in
put device.
Window.localStorage - Web APIs
in particular, data stored by a script on a site accessed with http (e.g., http://example.com) is
put in a different localstorage object from the same site accessed with https (e.g., https://example.com).
Window.mozInnerScreenX - Web APIs
that means it can be affected by the zoom level; to com
pute the actual number of physical screen pixels, you should use the nsidomwindowutils.screenpixelspercsspixel property.
Window.mozInnerScreenY - Web APIs
that means it can be affected by the zoom level; to com
pute the actual number of physical screen pixels, you should use the nsidomwindowutils.screenpixelspercsspixel property.
Window.onmozbeforepaint - Web APIs
the event handler receives as an in
put parameter an event whose timestamp property is the time, in milliseconds since epoch, that is the "current time" for the current animation frame.
Window.requestAnimationFrame() - Web APIs
when callbacks queued by requestanimationframe() begin to fire multiple callbacks in a single frame, each receives the same timestamp even though time has passed during the com
putation of every previous callback's workload.
window.requestIdleCallback() - Web APIs
this enables developers to perform background and low priority work on the main event loop, without impacting latency-critical events such as animation and in
put response.
Window: resize event - Web APIs
<p>resize the browser window to fire the <code>resize</code> event.</p> <p>window height: <span id="height"></span></p> <p>window width: <span id="width"></span></p> const heightout
put = document.queryselector('#height'); const widthout
put = document.queryselector('#width'); function reportwindowsize() { heightout
put.textcontent = window.innerheight; widthout
put.textcontent = window.innerwidth; } window.onresize = reportwindowsize; addeventlistener equivalent you could set up the event handler using the addeventlistener() method: window.addeventlistener('resize', rep...
Window.scroll() - Web APIs
examples <!--
put the 100th vertical pixel at the top of the window --> <button onclick="scroll(0, 100);">click to scroll down 100 pixels</button> using options: window.scroll({ top: 100, left: 100, behavior: 'smooth' }); notes window.scrollto() is effectively the same as this method.
Window.sessionStorage - Web APIs
in particular, data stored by a script on a site accessed with http (e.g., http://example.com) is
put in a different sessionstorage object from the same site accessed with https (e.g., https://example.com).
WindowClient.focus() - Web APIs
the focus() method of the windowclient interface gives user in
put focus to the current client and returns a promise that resolves to the existing windowclient.
Worker - Web APIs
example the following code snippet creates a worker object using the worker() constructor, then uses the worker object: var myworker = new worker('/worker.js'); var first = document.queryselector('in
put#number1'); var second = document.queryselector('in
put#number2'); first.onchange = function() { myworker.postmessage([first.value, second.value]); console.log('message posted to worker'); } for a full example, see ourbasic dedicated worker example (run dedicated worker).
Worklet - Web APIs
worklet types worklets are restricted to specific use cases; they cannot be used for arbitrary com
putations like web workers.
WritableStream.WritableStream() - Web APIs
abort(reason) optional this method, also defined by the developer, will be called if the app signals that it wishes to abruptly close the stream and
put it in an errored state.
XMLHttpRequest: abort event - Web APIs
bubbles no cancelable no interface progressevent event handler property onabort examples live example html <div class="controls"> <in
put class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <in
put class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <in
put class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } in
put { width: 11rem; ...
XMLHttpRequest: error event - Web APIs
bubbles no cancelable no interface progressevent event handler property onerror examples live example html <div class="controls"> <in
put class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <in
put class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <in
put class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } in
put { width: 11rem; margin: .5rem; } js const xhrbuttonsuccess = docume...
XMLHttpRequest: load event - Web APIs
bubbles no cancelable no interface progressevent event handler property onload examples live example html <div class="controls"> <in
put class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <in
put class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <in
put class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } in
put { width: 11rem; margin: .5rem; } js const xhrbutt...
XMLHttpRequest: loadend event - Web APIs
bubbles no cancelable no interface progressevent event handler property onloadend examples live example html <div class="controls"> <in
put class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <in
put class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <in
put class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } in
put { wi...
XMLHttpRequest: loadstart event - Web APIs
bubbles no cancelable no interface progressevent event handler property onloadstart examples live example html <div class="controls"> <in
put class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <in
put class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <in
put class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } in
put { width: 11rem; margin: .5rem; } js const xhrbuttonsucces...
XMLHttpRequest.open() - Web APIs
syntax xmlhttprequest.open(method, url[, async[, user[, password]]]) parameters method the http request method to use, such as "get", "post", "
put", "delete", etc.
XMLHttpRequest: progress event - Web APIs
bubbles no cancelable no interface progressevent event handler property onprogress examples live example html <div class="controls"> <in
put class="xhr success" type="button" name="xhr" value="click to start xhr (success)" /> <in
put class="xhr error" type="button" name="xhr" value="click to start xhr (error)" /> <in
put class="xhr abort" type="button" name="xhr" value="click to start xhr (abort)" /> </div> <textarea readonly class="event-log"></textarea> css .event-log { width: 25rem; height: 4rem; border: 1px solid black; margin: .5rem; padding: .2rem; } in
put { width: 11rem; margin: .5rem; } js const xhrbuttons...
XMLHttpRequest.send() - Web APIs
send() accepts an optional parameter which lets you specify the request's body; this is primarily used for requests such as
put.
XMLHttpRequest.sendAsBinary() - Web APIs
prototype.sendasbinary = function (sdata) { var nbytes = sdata.length, ui8data = new uint8array(nbytes); for (var nidx = 0; nidx < nbytes; nidx++) { ui8data[nidx] = sdata.charcodeat(nidx) & 0xff; } /* send as arraybufferview...: */ this.send(ui8data); /* ...or as arraybuffer (legacy)...: this.send(ui8data.buffer); */ }; } note: it's possible to build this polyfill
putting two types of data as argument for send(): an arraybuffer (ui8data.buffer – the commented code) or an arraybufferview (ui8data, which is a typed array of 8-bit unsigned integers – uncommented code).
XMLHttpRequest.status - Web APIs
example var xhr = new xmlhttprequest(); console.log('unsent: ', xhr.status); xhr.open('get', '/server'); console.log('opened: ', xhr.status); xhr.onprogress = function () { console.log('loading: ', xhr.status); }; xhr.onload = function () { console.log('done: ', xhr.status); }; xhr.send(); /** * out
puts the following: * * unsent: 0 * opened: 0 * loading: 200 * done: 200 */ specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequest.statusText - Web APIs
example var xhr = new xmlhttprequest(); console.log('0 unsent', xhr.statustext); xhr.open('get', '/server', true); console.log('1 opened', xhr.statustext); xhr.onprogress = function () { console.log('3 loading', xhr.statustext); }; xhr.onload = function () { console.log('4 done', xhr.statustext); }; xhr.send(null); /** * out
puts the following: * * 0 unsent * 1 opened * 3 loading ok * 4 done ok */ specifications specification status comment xmlhttprequest living standard whatwg living standard ...
XMLSerializer.serializeToString() - Web APIs
notes on the resulting xml there are some things worth noting about the xml out
put by serializetostring(): for xml serializations, element and attr nodes are always serialized with their namespaceuri intact.
XPathEvaluator.createExpression() - Web APIs
html <div>xpath example</div> <div>number of <div>s: <out
put></out
put></div> javascript var xpath = "//div"; var evaluator = new xpathevaluator(); var expression = evaluator.createexpression("//div"); var result = expression.evaluate(document, xpathresult.ordered_node_snapshot_type); document.queryselector("out
put").textcontent = result.snapshotlength; result specifications specification status comment document object model...
XPathEvaluator.evaluate() - Web APIs
html <div>xpath example</div> <div>number of <div>s: <out
put></out
put></div> javascript var evaluator = new xpathevaluator(); var result = evaluator.evaluate("//div", document, null, xpathresult.ordered_node_snapshot_type); document.queryselector("out
put").textcontent = result.snapshotlength; result specifications specification status comment document object model (dom) level 3 xpath specificationthe definition of 'xpatheva...
XPathEvaluator - Web APIs
html <div>xpath example</div> <div>number of <div>s: <out
put></out
put></div> javascript var xpath = "//div"; var evaluator = new xpathevaluator(); var expression = evaluator.createexpression("//div"); var result = expression.evaluate(document, xpathresult.ordered_node_snapshot_type); document.queryselector("out
put").textcontent = result.snapshotlength; result specifications specification status comment document object model...
XPathExpression.evaluate() - Web APIs
html <div>xpath example</div> <div>number of <div>s: <out
put></out
put></div> javascript var xpath = "//div"; var evaluator = new xpathevaluator(); var expression = evaluator.createexpression("//div"); var result = expression.evaluate(document, xpathresult.ordered_node_snapshot_type); document.queryselector("out
put").textcontent = result.snapshotlength; result specifications specification status comment document object model...
XPathExpression - Web APIs
html <div>xpath example</div> <div>number of <div>s: <out
put></out
put></div> javascript var xpath = "//div"; var evaluator = new xpathevaluator(); var expression = evaluator.createexpression(xpath); var result = expression.evaluate(document, xpathresult.ordered_node_snapshot_type); document.queryselector("out
put").textcontent = result.snapshotlength; result specifications specification status comment document object model (...
XPathResult.booleanValue - Web APIs
html <div>xpath example</div> <p>text is 'xpath example': <out
put></out
put></p> javascript var xpath = "//div/text() = 'xpath example'"; var result = document.evaluate(xpath, document, null, xpathresult.boolean_type, null); document.queryselector("out
put").textcontent = result.booleanvalue; result specifications specification status comment document object model (dom) level 3 xpath specificationthe definition of 'xpathresult.boo...
XPathResult.invalidIteratorState - Web APIs
html <div>xpath example</div> <p>iterator state: <out
put></out
put></p> javascript var xpath = "//div"; var result = document.evaluate(xpath, document, null, xpathresult.any_type, null); // invalidates the iterator state document.queryselector("div").remove(); document.queryselector("out
put").textcontent = result.invaliditeratorstate ?
XPathResult.iterateNext() - Web APIs
html <div>xpath example</div> <div>tag names of the matched nodes: <out
put></out
put></div> javascript var xpath = "//div"; var result = document.evaluate(xpath, document, null, xpathresult.any_type, null); var node = null; var tagnames = []; while(node = result.iteratenext()) { tagnames.push(node.localname); } document.queryselector("out
put").textcontent = tagnames.join(", "); result specifications specification status comment document...
XPathResult.numberValue - Web APIs
html <div>xpath example</div> <div>number of <div>s: <out
put></out
put></div> javascript var xpath = "count(//div)"; var result = document.evaluate(xpath, document, null, xpathresult.number_type, null); document.queryselector("out
put").textcontent = result.numbervalue; result specifications specification status comment document object model (dom) level 3 xpath specificationthe definition of 'xpathresult.numbervalue' in that ...
XPathResult.resultType - Web APIs
html <div>xpath example</div> <div>is xpath result a node set: <out
put></out
put></div> javascript var xpath = "//div"; var result = document.evaluate(xpath, document, null, xpathresult.any_type, null); document.queryselector("out
put").textcontent = result.resulttype >= xpathresult.unordered_node_iterator_type && result.resulttype <= xpathresult.first_ordered_node_type; result specifications specification status comment document o...
XPathResult.singleNodeValue - Web APIs
html <div>xpath example</div> <div>tag name of the element having the text content 'xpath example': <out
put></out
put></div> javascript var xpath = "//*[text()='xpath example']"; var result = document.evaluate(xpath, document, null, xpathresult.first_ordered_node_type, null); document.queryselector("out
put").textcontent = result.singlenodevalue.localname; result specifications specification status comment document object model (dom) level 3 xpath specificationthe definit...
XPathResult.snapshotItem() - Web APIs
html <div>xpath example</div> <div>tag names of the matched nodes: <out
put></out
put></div> javascript var xpath = "//div"; var result = document.evaluate(xpath, document, null, xpathresult.ordered_node_snapshot_type, null); var node = null; var tagnames = []; for(var i = 0; i < result.snapshotlength; i++) { var node = result.snapshotitem(i); tagnames.push(node.localname); } document.queryselector("out
put").textcontent = tagnames.join(", "); result specificat...
XPathResult.snapshotLength - Web APIs
html <div>xpath example</div> <div>number of matched nodes: <out
put></out
put></div> javascript var xpath = "//div"; var result = document.evaluate(xpath, document, null, xpathresult.ordered_node_snapshot_type, null); document.queryselector("out
put").textcontent = result.snapshotlength; result specifications specification status comment document object model (dom) level 3 xpath specificationthe definition of 'xpathresult.snapshotle...
XPathResult.stringValue - Web APIs
html <div>xpath example</div> <div>text content of the <div> above: <out
put></out
put></div> javascript var xpath = "//div/text()"; var result = document.evaluate(xpath, document, null, xpathresult.string_type, null); document.queryselector("out
put").textcontent = result.stringvalue; result specifications specification status comment document object model (dom) level 3 xpath specificationthe definition of 'xpathresult.stringvalue' in that ...
XRFrame.getPose() - Web APIs
basespace an xrspace to use as the base or origin for the purposes of com
puting the relative position and orientation.
XRFrame.getViewerPose() - Web APIs
syntax var xrviewerpose = xrframe.getviewerpose(referencespace); parameters referencespace an xrreferencespace object specifying the space to use as the reference point or base for the com
putation of the viewer's current pose.
XRReferenceSpaceEvent - Web APIs
this is an opportunity for your app to update any stored transforms, position/orientation information, or the like—or to dump any cached values based on the reference's space's origin so you can recom
pute them as needed.
XRReferenceSpaceType - Web APIs
it's particularly useful when determining the distance between the viewer and an in
put, or when working with offset spaces.
XRRenderState.inlineVerticalFieldOfView - Web APIs
the inlineverticalfieldofview read-only property of the xrrenderstate interface defines the angle of the field of view in radians used when com
puting projection matrices for "inline" xrsession objects.
XRRigidTransform.inverse - Web APIs
examples in this example, the model view matrix for an object is com
puted by taking the view matrix and multiplying it by the object's pose matrix.
XRWebGLLayer - Web APIs
that function receives as in
put an xrframe which encapsulates the data needed to render the frame.
Introduction - Web APIs
each template matches (using xpath) a certain fragment of the in
put xml document and then applies the substitution part on that fragment to create the new resulting document.
ARIA live regions - Accessibility
a working example of a simple year control for better understanding: <div id="date-in
put"> <label>year: <in
put type="text" id="year" value="1990" onblur="change(event)"/> </label> </div> <div id="date-out
put" aria-live="polite"> the set year is: <span id="year-out
put">1990</span> </div> function change(event) { var yearout = document.getelementbyid("year-out
put"); switch (event.target.id) { case "year": yearout.innerhtml = event.target.value; break...
Using the alert role - Accessibility
assistive technology products should listen for such an event and notify the user accordingly: screen readers may interrupt current out
put (whether it's speech or braille) and immediately announce or display the alert message.
Using the group role - Accessibility
tem">inbox</li> <li role="menuitem">archive</li> <li role="menuitem">trash</li> </ul> <ul role="group"> <li role="menuitem">custom folder 1</li> <li role="menuitem">custom folder 2</li> <li role="menuitem">custom folder 3</li> </ul> <ul role="group"> <li role="menuitem">new folder</li> </ul> </div> working examples: file directory treeview example using com
puted properties navigation treeview example using declared properties notes group members that are outside of the dom subtree of the group need to have explicit relationships assigned to them in order to participate in the group.
How to file ARIA-related bugs - Accessibility
bugs microsoft internet explorer file ie bugs microsoft edge file ms edge bugs view existing ms edge aria bugs mozilla firefox file firefox bugs use component: disability access apis opera file opera bugs use [aria] in the summary field js libraries dojo toolkit file dojo bug
put accessibility in the component field yahoo user interface file yui bugs file against specific component in category combobox and include aria in summary field ...
ARIA: timer role - Accessibility
required javascript features keypress used to handle keyboard in
put and control the focus click, touch handle as appropriate for your widget as well changing attribute values aria-activedescendant is used to manage the focus inside the application container.
ARIA: document role - Accessibility
assistive technologies should switch context back to document mode, possibly intercepting from controls rewired for the parent's dynamic context, re-enabling the standard in
put events, such as up or down arrow keyboard events, to control the reading cursor.
ARIA: figure role - Accessibility
a figure is generally considered to be one or more images, code snippets, or other content that
puts across information in a different way to a regular flow of text.
ARIA: row role - Accessibility
if the set of columns which is present in the dom is not contiguous, or if there are cells spanning more than one row or column,
put the aria-colindex on all of the children of each row instead of on the row itself.
ARIA: checkbox role - Accessibility
instead use the native html checkbox of <in
put type="checkbox">, which natively provides all the functionality required: <in
put type="checkbox" id="chk1-label"> <label for="chk1-label">remember my preferences</label> description the native html checkbox form control can only have two checked states ("checked" or "not checked"), with an indeterminate state settable via javascript.
ARIA: dialog role - Accessibility
examples a dialog containing a form <div role="dialog" aria-labelledby="dialog1title" aria-describedby="dialog1desc"> <h2 id="dialog1title">subscription form</h2> <p id="dialog1desc">we will not share this information with third parties.</p> <form> <p> <label for="firstname">first name</label> <in
put id="firstname" type="text" /> </p> <p> <label for="lastname">last name</label> <in
put id="lastname" type="text"/> </p> <p> <label for="interests">interests</label> <textarea id="interests"></textarea> </p> <p> <in
put type="checkbox" id="autologin"/> <label for="autologin">auto-login?</label> </p> <p> <in
put...
Architecture - Accessibility
com
pute the item offset relative to the start of this line search forward from the starting offset for an embed character if an embed character is found, continue processing with offset = index plus the line start index if an embed character is not found: if the line ending is equal to one less than the length of all text in the accessible, proceed to the next access...
Custom properties (--*): CSS variables - CSS: Cascading Style Sheets
initial valuesee proseapplies toall elementsinheritedyescom
puted valueas specified with variables substitutedanimation typediscrete syntax --somekeyword: left; --somecolor: #0000ff; --somecomplexvalue: 3px 6px rgb(20, 32, 54); <declaration-value> this value matches any sequence of one or more tokens, so long as the sequence does not contain an unallowed token.
-moz-context-properties - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toany element that can have an image applied to it, for example as a background-image, border-image, or list-style-image.inheritedyescom
puted valueas specifiedanimation typediscrete formal syntax none | [ fill | fill-opacity | stroke | stroke-opacity ]# examples exposing fill and stroke to an svg image in this example we have a simple svg embedded using an <img> element.
-moz-float-edge - CSS: Cascading Style Sheets
formal definition initial valuecontent-boxapplies toall elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax border-box | content-box | margin-box | padding-box examples html <div class="box"> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> css .box { display: block; height: 5px; margin: 0.5em auto 0.5em auto; color: gray; -moz-float-edge: margin-box; box-sizing: border-box; } result specifications ...
-moz-force-broken-image-icon - CSS: Cascading Style Sheets
formal definition initial value0applies toimagesinheritednocom
puted valueas specifiedanimation typediscrete formal syntax <integer> examples html <img src='/broken/image/link.png' alt='broken image link'> css img { -moz-force-broken-image-icon: 1; height: 100px; width: 100px; } result screenshotlive sample note: unless the image has a specified height and width the broken image icon will not be displayed but the alt attribute will also be hidden...
-moz-image-region - CSS: Cascading Style Sheets
it will not work with xul <image src="url" />.inheritedyescom
puted valueas specifiedanimation typediscrete formal syntax <shape> | autowhere <shape> = rect(<top>, <right>, <bottom>, <left>) examples clipping an image #example-button { /* display only the 4x4 area from the top left of this image */ list-style-image: url("chrome://example/skin/example.png"); -moz-image-region: rect(0px, 4px, 4px, 0px); } #example-button:hover { /* use the 4x4 area t...
-moz-orient - CSS: Cascading Style Sheets
formal definition initial valueinlineapplies toany element; it has an effect on progress and meter, but not on <in
put type="range"> or other elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax inline | block | horizontal | vertical examples html <p> the following progress meter is horizontal (the default): </p> <progress max="100" value="75"></progress> <p> the following progress meter is vertical: </p> <progress class="vert" max="100" value="75"></progress> css .vert ...
-moz-outline-radius-bottomleft - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentagesrefer to the corresponding dimension of the border boxcom
puted valueas specifiedanimation typea length, percentage or calc(); formal syntax <outline-radius>where <outline-radius> = <length> | <percentage> examples rounding a outline since this is a firefox-only property, this example will not display the desired effect if you are viewing this in a browser other than firefox.
-moz-outline-radius-bottomright - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentagesrefer to the corresponding dimension of the border boxcom
puted valueas specifiedanimation typea length, percentage or calc(); formal syntax <outline-radius>where <outline-radius> = <length> | <percentage> examples html <p>look at this paragraph's bottom-right corner.</p> css p { margin: 5px; border: solid cyan; outline: dotted red; -moz-outline-radius-bottomright: 2em; } result the example above will not display the desired effect if yo...
-moz-outline-radius-topleft - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentagesrefer to the corresponding dimension of the border boxcom
puted valueas specifiedanimation typea length, percentage or calc(); formal syntax <outline-radius>where <outline-radius> = <length> | <percentage> examples the example below will not display the desired effect if you are viewing this in a browser other than firefox.
-moz-outline-radius-topright - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentagesrefer to the corresponding dimension of the border boxcom
puted valueas specifiedanimation typea length, percentage or calc(); formal syntax <outline-radius>where <outline-radius> = <length> | <percentage> examples html <p>look at this paragraph's top-right corner.</p> css p { margin: 5px; border: solid cyan; outline: dotted red; -moz-outline-radius-topright: 2em; } result the example above will not display the desired effect if you are ...
-moz-outline-radius - CSS: Cascading Style Sheets
dnopercentagesas each of the properties of the shorthand:-moz-outline-radius-topleft: refer to the corresponding dimension of the border box-moz-outline-radius-topright: refer to the corresponding dimension of the border box-moz-outline-radius-bottomright: refer to the corresponding dimension of the border box-moz-outline-radius-bottomleft: refer to the corresponding dimension of the border boxcom
puted valueas each of the properties of the shorthand:-moz-outline-radius-topleft: as specified-moz-outline-radius-topright: as specified-moz-outline-radius-bottomright: as specified-moz-outline-radius-bottomleft: as specifiedanimation typeas each of the properties of the shorthand:-moz-outline-radius-topleft: a length, percentage or calc();-moz-outline-radius-topright: a length, percentage or calc()...
-webkit-line-clamp - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednocom
puted valueas specifiedanimation typeby com
puted 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.
-webkit-mask-attachment - CSS: Cascading Style Sheets
formal definition initial valuescrollapplies toall elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax <attachment>#where <attachment> = scroll | fixed | local examples fixing a mask image to the viewport body { -webkit-mask-image: url('images/mask.png'); -webkit-mask-attachment: fixed; } specifications not part of any standard.
-webkit-mask-box-image - CSS: Cascading Style Sheets
initial value: none applies to: all elements inherited: no media: visual com
puted value: as specified syntax -webkit-mask-box-image: <mask-box-image> [<top> <right> <bottom> <left> <x-repeat> <y-repeat>] where: <mask-box-image> <uri> | <gradient> | none <top> <right> <bottom> <left> <length> | <percentage> <x-repeat> <y-repeat> repeat | stretch | round | space values <uri> the location of the image resource to be used as a mask image.
-webkit-mask-composite - CSS: Cascading Style Sheets
formal definition initial valuesource-overapplies toall elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax <composite-style>#where <composite-style> = clear | copy | source-over | source-in | source-out | source-atop | destination-over | destination-in | destination-out | destination-atop | xor examples compositing with xor .example { -webkit-mask-image: url(mask1.png), url('mask2.png'); -webkit-mask-composite: xor, source-over; } spec...
-webkit-mask-repeat-x - CSS: Cascading Style Sheets
formal definition initial valuerepeatapplies toall elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax repeat | no-repeat | space | round examples using a repeating or non-repeating mask image .exampleone { -webkit-mask-image: url('mask.png'); -webkit-mask-repeat-x: repeat; } .exampletwo { -webkit-mask-image: url('mask.png'); -webkit-mask-repeat-x: no-repeat; } using multiple mask images you can specify a different <repeat-st...
-webkit-mask-repeat-y - CSS: Cascading Style Sheets
formal definition initial valuerepeatapplies toall elementsinheritednocom
puted valuefor <length> the absolute value, otherwise a percentageanimation typediscrete formal syntax repeat | no-repeat | space | round examples using a repeating or non-repeating mask image .exampleone { -webkit-mask-image: url('mask.png'); -webkit-mask-repeat-y: repeat; } .exampletwo { -webkit-mask-image: url('mask.png'); -webkit-mask-repeat-y: no-repeat; } using multiple mask ima...
-webkit-overflow-scrolling - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscrolling boxesinheritedyescom
puted valueas specifiedanimation typediscrete formal syntax auto | touch examples html <div class="scroll-touch"> <p> this paragraph has momentum scrolling </p> </div> <div class="scroll-auto"> <p> this paragraph does not.
-webkit-tap-highlight-color - CSS: Cascading Style Sheets
formal definition initial valueblackapplies toall elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
-webkit-text-fill-color - CSS: Cascading Style Sheets
formal definition initial valuecurrentcolorapplies toall elementsinheritedyescom
puted valuecom
puted 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> ]?
-webkit-text-stroke-width - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritedyescom
puted valueabsolute <length>animation typediscrete formal syntax <length> examples varying stroke widths css p { margin: 0; font-size: 4em; -webkit-text-stroke-color: red; } #thin { -webkit-text-stroke-width: thin; } #medium { -webkit-text-stroke-width: 3px; } #thick { -webkit-text-stroke-width: 1.5mm; } html <p id="thin">thin stroke</p> <p id="medium">medium stroke</p> <p id=...
-webkit-text-stroke - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:-webkit-text-stroke-width: 0-webkit-text-stroke-color: currentcolorapplies toall elementsinheritedyescom
puted valueas each of the properties of the shorthand:-webkit-text-stroke-width: absolute <length>-webkit-text-stroke-color: com
puted coloranimation typeas each of the properties of the shorthand:-webkit-text-stroke-width: discrete-webkit-text-stroke-color: a color formal syntax <length> | <color>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | ...
-webkit-touch-callout - CSS: Cascading Style Sheets
formal definition initial valuedefaultapplies toall elementsinheritedyescom
puted valueas specifiedanimation typediscrete formal syntax default | none examples turn off touch callout .example { -webkit-touch-callout: none; } specifications not part of any standard.
:-moz-focusring - CSS: Cascading Style Sheets
syntax :-moz-focusring examples html <in
put /> css in
put { margin: 5px; } :-moz-focusring { color: red; outline: 2px dotted green; } result specifications not part of any standard.
:-moz-only-whitespace - CSS: Cascading Style Sheets
dth: 100vw; max-height: 100vh; } div { background-color: #ccc; box-sizing: border-box; height: 100vh; min-height: 16px; min-height: 1rem; } div { border: 4px solid red; } :-moz-only-whitespace { border-color: lime; } result specifications briefly defined as :blank in selectors level 4, but then the functionality was merged into :empty and :blank redefined to mean empty <in
put>.
:active - CSS: Cascading Style Sheets
to style links appropriately,
put the :active rule after all other link-related rules, as defined by the lvha-order: :link — :visited — :hover — :active.
:host() - CSS: Cascading Style Sheets
the most obvious use of this is to
put a class name only on certain custom element instances, and then include the relevant class selector as the function argument.
:hover - CSS: Cascading Style Sheets
to style links appropriately,
put the :hover rule after the :link and :visited rules but before the :active one, as defined by the lvha-order: :link — :visited — :hover — :active.
:link - CSS: Cascading Style Sheets
to style links appropriately,
put the :link rule before all other link-related rules, as defined by the lvha-order: :link — :visited — :hover — :active.
additive-symbols - CSS: Cascading Style Sheets
formal definition related at-rule@counter-styleinitial valuen/acom
puted valueas specified formal syntax [ <integer> && <symbol> ]#where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
fallback - CSS: Cascading Style Sheets
formal definition related at-rule@counter-styleinitial valuedecimalcom
puted valueas specified formal syntax <counter-style-name>where <counter-style-name> = <custom-ident> examples specifying a fallback counter style html <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> css @counter-style fallback-example { system: fixed; symbols: "\24b6" "\24b7" "\24b8"; fallback: upper-alpha; } .list { list-style:...
negative - CSS: Cascading Style Sheets
formal definition related at-rule@counter-styleinitial value"-" hyphen-minuscom
puted valueas specified formal syntax <symbol> <symbol>?where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
pad - CSS: Cascading Style Sheets
formal definition related at-rule@counter-styleinitial value0 ""com
puted valueas specified formal syntax <integer> && <symbol>where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
prefix - CSS: Cascading Style Sheets
formal definition related at-rule@counter-styleinitial value"" (the empty string)com
puted valueas specified formal syntax <symbol>where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
range - CSS: Cascading Style Sheets
formal definition related at-rule@counter-styleinitial valueautocom
puted valueas specified formal syntax [ [ <integer> | infinite ]{2} ]# | auto examples setting counter style over a range <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> <li>six</li> <li>seven</li> <li>eight</li> <li>nine</li> <li>ten</li> </ul> @counter-style range-multi-example { system: cyclic; symbols: "\25a0" "\25a1"; range: ...
speak-as - CSS: Cascading Style Sheets
let's talk about speech css | css tricks formal definition related at-rule@counter-styleinitial valueautocom
puted valueas specified formal syntax auto | bullets | numbers | words | spell-out | <counter-style-name>where <counter-style-name> = <custom-ident> examples setting the spoken form for a counter html <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> css @counter-style speak-as-example { system: fixed; symbols: ; s...
suffix - CSS: Cascading Style Sheets
" (full stop followed by a space)com
puted valueas specified formal syntax <symbol>where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
symbols - CSS: Cascading Style Sheets
formal definition related at-rule@counter-styleinitial valuen/acom
puted valueas specified formal syntax <symbol>+where <symbol> = <string> | <image> | <custom-ident>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
system - CSS: Cascading Style Sheets
formal definition related at-rule@counter-styleinitial valuesymboliccom
puted valueas specified formal syntax cyclic | numeric | alphabetic | symbolic | additive | [ fixed <integer>?
font-display - CSS: Cascading Style Sheets
formal definition related at-rule@font-faceinitial valueautocom
puted valueas specified formal syntax [ auto | block | swap | fallback | optional ] examples specifying fallback font-display @font-face { font-family: examplefont; src: url(/path/to/fonts/examplefont.woff) format('woff'), url(/path/to/fonts/examplefont.eot) format('eot'); font-weight: 400; font-style: normal; font-display: fallback; } specifications specification s...
font-family - CSS: Cascading Style Sheets
formal definition related at-rule@font-faceinitial valuen/a (required)com
puted valueas specified formal syntax <family-name>where <family-name> = <string> | <custom-ident>+ examples setting the font family name @font-face { font-family: examplefont; src: url('examplefont.ttf'); } specifications specification status comment css fonts module level 3the definition of 'font-family' in that specification.
font-stretch - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.8 | w3c understanding wcag 2.0 formal definition related at-rule@font-faceinitial valuenormalcom
puted valueas specified formal syntax <font-stretch-absolute>{1,2}where <font-stretch-absolute> = normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | <percentage> examples setting a percentage range for font-stretch the following find a local open sans font or import it, and allow using the font for normal, semi-c...
font-style - CSS: Cascading Style Sheets
formal definition related at-rule@font-faceinitial valuenormalcom
puted valueas specified formal syntax normal | italic | oblique <angle>{0,2} examples specifying an italic font style as an example, consider the garamond font family, in its normal form, we get the following result: @font-face { font-family: garamond; src: url('garamond.ttf'); } the italicized version of this text uses the same glyphs present in the unstyled version, but they are artifi...
font-variation-settings - CSS: Cascading Style Sheets
formal definition related at-rule@font-faceinitial valuenormalcom
puted valueas specified formal syntax normal | [ <string> <number> ]# examples setting font weight and stretch in a @font-face rule @font-face { font-family: 'opentypefont'; src: url('open_type_font.woff2') format('woff2'); font-weight: normal; font-style: normal; font-variation-settings: 'wght' 400, 'wdth' 300; } specifications specification status comment ...
font-weight - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.8 | w3c understanding wcag 2.0 formal definition related at-rule@font-faceinitial valuenormalcom
puted valueas specified formal syntax <font-weight-absolute>{1,2}where <font-weight-absolute> = normal | bold | <number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[1,1000]> examples setting normal font weight in a @font-face rule the following finds a local open sans font or...
src - CSS: Cascading Style Sheets
formal definition related at-rule@font-faceinitial valuen/a (required)com
puted valueas specified formal syntax [ <url> [ format( <string># ) ]?
unicode-range - CSS: Cascading Style Sheets
formal definition related at-rule@font-faceinitial valueu+0-10ffffcom
puted valueas specified formal syntax <unicode-range># examples using a different font for a single character in this example we create a simple html containing a single <div> element, including an ampersand, that we want to style with a different font.
marks - CSS: Cascading Style Sheets
formal definition related at-rule@pageinitial valuenonecom
puted valueas specified formal syntax none | [ crop | cross ] examples adding crop and cross marks @page { marks: crop cross; } specifications specification status comment css paged media module level 3the definition of 'marks' in that specification.
size - CSS: Cascading Style Sheets
formal definition related at-rule@pageinitial valueautocom
puted valueas specified, but with relative lengths converted into absolute lengths formal syntax <length>{1,2} | auto | [ <page-size> | [ portrait | landscape ] ] examples specifying size and orientation @page { size: 4in 6in landscape; } nesting inside a @media rule @media print { @page { size: 50mm 150mm; } } specifications specification status comment ...
height - CSS: Cascading Style Sheets
if the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as none.com
puted valueas each of the properties of the shorthand:min-height: the percentage as specified or the absolute lengthmax-height: the percentage as specified or the absolute length or none formal syntax <viewport-length>{1,2}where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting minimum and maximum height @viewport { height: 500px...
max-height - CSS: Cascading Style Sheets
formal definition related at-rule@viewportinitial valueautopercentagesrefer to the height of the initial viewportcom
puted valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto formal syntax <viewport-length>where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting viewport max height in pixels @viewport { max-height: 600px; } specifications specification ...
max-width - CSS: Cascading Style Sheets
formal definition related at-rule@viewportinitial valueautopercentagesrefer to the width of the initial viewportcom
puted valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto formal syntax <viewport-length>where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting viewport max width in pixels @viewport { max-width: 600px; } specifications specification ...
max-zoom - CSS: Cascading Style Sheets
formal definition related at-rule@viewportinitial valueautopercentagesthe zoom factor itselfcom
puted valueauto, or a non-negative number or percentage as specified formal syntax auto | <number> | <percentage> examples setting max-zoom @viewport { max-zoom: 1.5; } specifications specification status comment css device adaptationthe definition of '"max-zoom" descriptor' in that specification.
min-height - CSS: Cascading Style Sheets
formal definition related at-rule@viewportinitial valueautopercentagesrefer to the height of the initial viewportcom
puted valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto formal syntax <viewport-length>where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting viewport min height in pixels @viewport { min-height: 200px; } specifications specification ...
min-width - CSS: Cascading Style Sheets
formal definition related at-rule@viewportinitial valueautopercentagesrefer to the width of the initial viewportcom
puted valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto formal syntax <viewport-length>where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting viewport min width in pixels @viewport { min-width: 200px; } specifications specification s...
min-zoom - CSS: Cascading Style Sheets
formal definition related at-rule@viewportinitial valueautopercentagesthe zoom factor itselfcom
puted valueauto, or a non-negative number or percentage as specified formal syntax auto | <number> | <percentage> examples setting min zoom factor @viewport { min-zoom: 2.0; } specifications specification status comment css device adaptationthe definition of '"min-zoom" descriptor' in that specification.
orientation - CSS: Cascading Style Sheets
formal definition related at-rule@viewportinitial valueautopercentagesrefer to the size of bounding boxcom
puted valueas specified formal syntax auto | portrait | landscape examples setting viewport orientation @viewport { orientation: landscape; } specifications specification status comment css device adaptationthe definition of '"orientation" descriptor' in that specification.
user-zoom - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | understanding wcag 2.0 formal definition related at-rule@viewportinitial valuezoompercentagesrefer to the size of bounding boxcom
puted valueas specified formal syntax zoom | fixed examples disabling user zoom @viewport { user-zoom: fixed; } specifications specification status comment css device adaptationthe definition of '"user-zoom" descriptor' in that specification.
viewport-fit - CSS: Cascading Style Sheets
formal definition related at-rule@viewportinitial valueautocom
puted valueas specified formal syntax auto | contain | cover examples scaling viewport to fit device display @viewport { viewport-fit: cover; } specifications specification status comment css round display level 1the definition of '"viewport-fit" descriptor' in that specification.
width - CSS: Cascading Style Sheets
formal definition related at-rule@viewportinitial valueas each of the properties of the shorthand:min-width: automax-width: nonepercentagesas each of the properties of the shorthand:min-width: refer to the width of the containing blockmax-width: refer to the width of the containing blockcom
puted valueas each of the properties of the shorthand:min-width: the percentage as specified or the absolute lengthmax-width: the percentage as specified or the absolute length or none formal syntax <viewport-length>{1,2}where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting minimum and maximum width @viewport { width: 500px; } ...
zoom - CSS: Cascading Style Sheets
formal definition related at-rule@viewportinitial valueautopercentagesthe zoom factor itselfcom
puted valueauto, or a non-negative number or percentage as specified formal syntax auto | <number> | <percentage> examples setting viewport zoom factor @viewport { zoom: 2.0; } specifications specification status comment css device adaptationthe definition of '"zoom" descriptor' in that specification.
Attribute selectors - CSS: Cascading Style Sheets
{ color: purple; } html <div lang="en-us en-gb en-au en-nz">hello world!</div> <div lang="pt">olá mundo!</div> <div lang="zh-cn">世界您好!</div> <div lang="zh-tw">世界您好!</div> <div data-lang="zh-tw">世界您好!</div> result html ordered lists the html specification requires the type attribute to be matched case-insensitively due to it primarily being used in the <in
put> element, trying to use attribute selectors to with the type attribute of an ordered list doesn't work without the case-sensitive modifier.
Layout using named grid lines - CSS: Cascading Style Sheets
.wrapper { grid-template-columns: repeat(4, [col1-start] 1fr [col2-start] 3fr); } if your repeating syntax
puts two lines next to each other then they will be merged, and create the same result as giving a line multiple names in a non-repeating track definition.
Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
ody { padding: 10px; } .listing { list-style: none; margin: 2em; display: grid; grid-gap: 20px; grid-auto-flow: dense; grid-template-columns: repeat(auto-fill,minmax(200px, 1fr)); } .listing .wide { grid-column-end: span 2; } this technique of using auto-placement with some rules applied to certain items is very useful, and can help you to deal with content that is being out
put by a cms for example, where you have repeated items and can perhaps add a class to certain ones as they are rendered into the html.
Using CSS transitions - CSS: Cascading Style Sheets
function updatetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); transition-timing-function specifies a function to define how intermediate values for properties are com
puted.
Mozilla CSS extensions - CSS: Cascading Style Sheets
:-moz-system-metric(mac-graphite-theme) :-moz-system-metric(scrollbar-end-backward) :-moz-system-metric(scrollbar-end-forward) :-moz-system-metric(scrollbar-start-backward) :-moz-system-metric(scrollbar-start-forward) :-moz-system-metric(scrollbar-thumb-proportional) :-moz-system-metric(touch-enabled) :-moz-system-metric(windows-default-theme) -moz-user-focus -moz-user-in
put -moz-user-modify -moz-window-dragging -moz-window-shadow formerly proprietary properties that are now standard note: to maximize the compatibility of your css, you should use the unprefixed standard properties instead of the prefixed ones listed below.
CSS reference - CSS: Cascading Style Sheets
concepts syntax and semantics css syntax at-rules cascade comments descriptor inheritance shorthand properties specificity value definition syntax css unit and value types values actual value com
puted value initial value resolved value specified value used value layout block formatting context box model containing block layout mode margin collapsing replaced elements stacking context visual formatting model dom-css / cssom major object types documentorshadowroot.stylesheets stylesheets[i].cssrules cssrules[i].csstext (selector & style) cssrules[i].selectortext htmle...
Shorthand properties - CSS: Cascading Style Sheets
see also css key concepts: css syntax, at-rule, comments, specificity and inheritance, the box, layout modes and visual formatting models, and margin collapsing, or the initial, com
puted, resolved, specified, used, and actual values.
Syntax - CSS: Cascading Style Sheets
note: the content of a css declaration block, that is a list of semi-colon-separated declarations, without the initial and closing braces, can be
put inside an html style attribute.
WebKit CSS extensions - CSS: Cascading Style Sheets
::-webkit-file-upload-button ::-webkit-inner-spin-button ::-webkit-in
put-placeholder ::-webkit-media-controls ::-webkit-media-controls-current-time-display ::-webkit-media-controls-enclosure ::-webkit-media-controls-fullscreen-button ::-webkit-media-controls-mute-button ::-webkit-media-controls-overlay-enclosure ::-webkit-media-controls-panel ::-webkit-media-controls-play-button ::-webkit-media-controls-timeline ::-webkit-media-controls-time-remaining-displa...
align-items - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies toall elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax normal | stretch | <baseline-position> | [ <overflow-position>?
all - CSS: Cascading Style Sheets
formal definition initial valuethere is no practical initial value for it.applies toall elementsinheritednocom
puted valueas the specified value applies to each property this is a shorthand for.animation typeas each of the properties of the shorthand (all properties but unicode-bidi and direction) formal syntax initial | inherit | unset | revert examples html <blockquote id="quote"> lorem ipsum dolor sit amet, consectetur adipiscing elit.
animation-delay - CSS: Cascading Style Sheets
formal definition initial value0sapplies toall elements, ::before and ::after pseudo-elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax <time># examples see css animations for examples.
animation-direction - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies toall elements, ::before and ::after pseudo-elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax <single-animation-direction>#where <single-animation-direction> = normal | reverse | alternate | alternate-reverse examples see css animations for examples.
animation-duration - CSS: Cascading Style Sheets
formal definition initial value0sapplies toall elements, ::before and ::after pseudo-elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax <time># examples see css animations for examples.
animation-iteration-count - CSS: Cascading Style Sheets
formal definition initial value1applies toall elements, ::before and ::after pseudo-elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax <single-animation-iteration-count>#where <single-animation-iteration-count> = infinite | <number> examples see css animations for examples.
animation-name - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elements, ::before and ::after pseudo-elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax [ none | <keyframes-name> ]#where <keyframes-name> = <custom-ident> | <string> examples see css animations for examples.
animation-play-state - CSS: Cascading Style Sheets
formal definition initial valuerunningapplies toall elements, ::before and ::after pseudo-elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax <single-animation-play-state>#where <single-animation-play-state> = running | paused examples see css animations for examples.
backdrop-filter - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocom
puted valueas specifiedanimation typea filter function list formal syntax none | <filter-function-list>where <filter-function-list> = [ <filter-function> | <url> ]+where <filter-function> = <blur()> | <brightness()> | <contrast()> | <drop-shadow()> | <grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <saturate()> | <sepia()>where <blur()> = blur( <length> )<brightness()> = brightness( <num...
backface-visibility - CSS: Cascading Style Sheets
formal definition initial valuevisibleapplies totransformable elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax visible | hidden examples cube with transparent and opaque faces this example shows a cube with transparent faces, and one with opaque faces.
background-attachment - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednocom
puted valueas specifiedanimation typediscrete formal syntax <attachment>#where <attachment> = scroll | fixed | local examples simple example html <p> there were doors all round the hall, but they were all locked; and when alice had been all the way down one side and up the other, trying every door, she walked sadly down the middle, wondering how she was ever to get out again.
background-blend-mode - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednocom
puted valueas specifiedanimation typediscrete 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 <div id="div"></div> <select id="select"> <option>normal</option> <option>multiply</option> <option selected>s...
background-color - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednocom
puted valuecom
puted 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> ]?
background-image - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednocom
puted 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>?
background-origin - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednocom
puted valueas specifiedanimation typediscrete formal syntax <box>#where <box> = border-box | padding-box | content-box examples setting background origins .example { border: 10px double; padding: 10px; background: url('image.jpg'); background-position: center left; background-origin: content-box; } #example2 { border: 4px solid black; padding: 10px; background: url('image.gif')...
background-position-x - CSS: Cascading Style Sheets
formal definition initial valueleftapplies toall elementsinheritednopercentagesrefer to width of background positioning area minus height of background imagecom
puted valuea list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keywordanimation typediscrete formal syntax [ center | [ [ left | right | x-start | x-end ]?
background-position-y - CSS: Cascading Style Sheets
formal definition initial valuetopapplies toall elementsinheritednopercentagesrefer to height of background positioning area minus height of background imagecom
puted valuea list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keywordanimation typediscrete formal syntax [ center | [ [ top | bottom | y-start | y-end ]?
background-repeat - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednocom
puted valuea list, each item consisting of two keywords, one per dimensionanimation typediscrete formal syntax <repeat-style>#where <repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2} examples setting background-repeat html <ol> <li>no-repeat <div class="one"></div> </li> <li>repeat <div class="two"></div> </li> <li>repeat-x <div class="three...
border-block-color - CSS: Cascading Style Sheets
formal definition initial valuecurrentcolorapplies toall elementsinheritednocom
puted valuecom
puted coloranimation typediscrete formal syntax <'border-top-color'>{1,2} examples border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px solid blue; border-block-color: red; } results specifications ...
border-block-end-color - CSS: Cascading Style Sheets
formal definition initial valuecurrentcolorapplies toall elementsinheritednocom
puted valuecom
puted coloranimation typea color formal syntax <'border-top-color'> examples border color with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px solid blue; border-block-end-color: red; } results specifications ...
border-block-end-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples dashed border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-block-end-style: dashed; } results specifications ...
border-block-end-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcom
puted valueabsolute length; 0 if the border style is none or hiddenanimation typea length formal syntax <'border-top-width'> examples border width with veritcal text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-block-end-width...
border-block-end - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:border-top-width: mediumborder-top-style: noneborder-top-color: currentcolorapplies toall elementsinheritednocom
puted valueas each of the properties of the shorthand:border-top-width: the absolute length or 0 if border-top-style is none or hiddenborder-top-style: as specifiedborder-top-color: com
puted coloranimation typeas each of the properties of the shorthand:border-block-end-color: a colorborder-block-end-style: discreteborder-block-end-width: a length formal syntax <'border-top-width'> | <'border-top-st...
border-block-start-color - CSS: Cascading Style Sheets
values <'color'> see border-color formal definition initial valuecurrentcolorapplies toall elementsinheritednocom
puted valuecom
puted coloranimation typea color formal syntax <'border-top-color'> examples border color with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px solid blue; border-block-start-color: red; } results specifications ...
border-block-start-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples dashed border wtih vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-block-start-style: dashed; } results specifications ...
border-block-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples dashed border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-block-style: dashed; } results specifications ...
border-block-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcom
puted valueabsolute length; 0 if the border style is none or hiddenanimation typediscrete formal syntax <'border-top-width'> examples border width with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-block-width: 5p...
border-block - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:border-top-width: mediumborder-top-style: noneborder-top-color: currentcolorapplies toall elementsinheritednocom
puted valueas each of the properties of the shorthand:border-top-width: the absolute length or 0 if border-top-style is none or hiddenborder-top-style: as specifiedborder-top-color: com
puted coloranimation typediscrete formal syntax <'border-top-width'> | <'border-top-style'> | <'color'>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecate...
border-bottom-color - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocom
puted valuecom
puted coloranimation typea color formal syntax <'border-top-color'> examples a simple div with a border html <div class="mybox"> <p>this is a box with a border around it.
border-bottom-left-radius - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcom
puted valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples live example code .
border-bottom-right-radius - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcom
puted valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples live example code .
border-bottom-style - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocom
puted valueas specifiedanimation typediscrete formal syntax <line-style>where <line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset examples demonstrating all border styles 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">soli...
border-bottom-width - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocom
puted valuethe absolute length or 0 if border-bottom-style is none or hiddenanimation typea length formal syntax <line-width>where <line-width> = <length> | thin | medium | thick examples comparing bottom 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-bottom-width: thick; } div:nth-child(2) { bo...
border-bottom - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocom
puted valueas each of the properties of the shorthand:border-bottom-width: the absolute length or 0 if border-bottom-style is none or hiddenborder-bottom-style: as specifiedborder-bottom-color: com
puted coloranimation typeas each of the properties of the shorthand:border-bottom-color: a colorborder-bottom-style: discreteborder-bottom-width: a length formal syntax <line-width> | <line-style> | <colo...
border-collapse - CSS: Cascading Style Sheets
formal definition initial valueseparateapplies totable and inline-table elementsinheritedyescom
puted valueas specifiedanimation typediscrete formal syntax collapse | separate examples a colorful table of browser engines html <table class="separate"> <caption><code>border-collapse: separate</code></caption> <tbody> <tr><th>browser</th> <th>layout engine</th></tr> <tr><td class="fx">firefox</td> <td class="gk">gecko</td></tr> <tr><td class="ed">edge</td> <td class="tr">edge...
border-color - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocom
puted valueas each of the properties of the shorthand:border-bottom-color: com
puted colorborder-left-color: com
puted colorborder-right-color: com
puted colorborder-top-color: com
puted coloranimation typeas each of the properties of the shorthand:border-bottom-color: a colorborder-left-color: a colorborder-right-color: a colorborder-top-color: a color formal syntax <color>{1,4}where <color> = <rgb()>...
border-end-end-radius - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcom
puted valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples border radius with vertical text html <div> <p class="exampletext">example</p> </div> css content div { background-color: rebeccapurple; width: 120px; height: 120px; border-end-end-radius: ...
border-end-start-radius - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcom
puted valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples border radius with vertical text html <div> <p class="exampletext">example</p> </div> css div { background-color: rebeccapurple; width: 120px; height: 120px; border-end-start-radius: 10px; ...
border-image-outset - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocom
puted valueas specified, but with relative lengths converted into absolute lengthsanimation typeby com
puted value type formal syntax [ <length> | <number> ]{1,4} examples outsetting a border image html <div id="outset">this element has an outset border image!</div> css #outset { width: 10rem; background: #cef; border: 1.4rem solid; border-image: radial-gradient(#ff2, #55f) 40; bord...
border-image-repeat - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocom
puted valueas specifiedanimation typediscrete formal syntax [ stretch | repeat | round | space ]{1,2} examples repeating border images css #bordered { width: 12rem; margin-bottom: 1rem; padding: 1rem; border: 40px solid; border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 27; border-image-repeat: stretch; /* can be changed in the live sample */ } html <div i...
border-image-source - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocom
puted 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>?
border-image-width - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednopercentagesrefer to the width or height of the border image areacom
puted valueas specified, but with relative lengths converted into absolute lengthsanimation typeby com
puted value type formal syntax [ <length-percentage> | <number> | auto ]{1,4}where <length-percentage> = <length> | <percentage> examples tiling a border image this example creates a border image using the following ".png" file, which is 90 by 90 pixels: thus, each circle in the source image ...
border-inline-color - CSS: Cascading Style Sheets
formal definition initial valuecurrentcolorapplies toall elementsinheritednocom
puted valuecom
puted coloranimation typediscrete formal syntax <'border-top-color'>{1,2} examples border color with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px solid blue; border-inline-color: red; } results specifications ...
border-inline-end-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-inline-end-style: dashed; } results specifications specification status ...
border-inline-start-color - CSS: Cascading Style Sheets
formal definition initial valuecurrentcolorapplies toall elementsinheritednocom
puted valuecom
puted coloranimation typea color formal syntax <'border-top-color'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px solid blue; border-inline-start-color: red; } specifications specification status comment ...
border-inline-start-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcom
puted valueabsolute length; 0 if the border style is none or hiddenanimation typea length formal syntax <'border-top-width'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-inline-start-width: 5px; } specifications ...
border-inline-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples html content <div> <p class="exampletext">example text</p> </div> css content div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-inline-style: dashed; } specifications specification status ...
border-inline-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elementsinheritednopercentageslogical-width of containing blockcom
puted valueabsolute length; 0 if the border style is none or hiddenanimation typediscrete formal syntax <'border-top-width'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-inline-width: 5px 10px; } specifications ...
border-left-color - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocom
puted valuecom
puted 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> ]?
border-left-style - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocom
puted 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<...
border-left-width - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocom
puted 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-child(2) { border-left-w...
border-left - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocom
puted valueas each of the properties of the shorthand:border-left-width: the absolute length or 0 if border-left-style is none or hiddenborder-left-style: as specifiedborder-left-color: com
puted coloranimation typeas each of the properties of the shorthand:border-left-color: a colorborder-left-style: discreteborder-left-width: a length formal syntax <line-width> | <line-style> | <color>where <line-...
border-radius - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcom
puted valueas each of the properties of the shorthand:border-bottom-left-radius: two absolute <length>s or <percentage>sborder-bottom-right-radius: two absolute <length>s or <percentage>sborder-top-left-radius: two absolute <length>s or <percentage>sborder-top-right-radius: two absolute <length>s or <percentage>sanimation typeas each of the properties of the shorthand:border-top-left-radius: a length...
border-right-color - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocom
puted valuecom
puted 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> ]?
border-right-style - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocom
puted valueas specifiedanimation typediscrete formal syntax <line-style>where <line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset examples border styles 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 cla...
border-right-width - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocom
puted valuethe absolute length or 0 if border-right-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-right-width: thick; } div:nth-child(2) { border-righ...
border-right - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocom
puted valueas each of the properties of the shorthand:border-right-width: the absolute length or 0 if border-right-style is none or hiddenborder-right-style: as specifiedborder-right-color: com
puted coloranimation typeas each of the properties of the shorthand:border-right-color: a colorborder-right-style: discreteborder-right-width: a length formal syntax <line-width> | <line-style> | <color>where...
border-start-end-radius - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcom
puted valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples border radius with vertical text html <div> <p class="exampletext">example</p> </div> css div { background-color: rebeccapurple; width: 120px; height: 120px; border-start-end-radius: 10px; ...
border-start-start-radius - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcom
puted valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples border radius with vertical text html <div> <p class="exampletext">example</p> </div> css div { background-color: rebeccapurple; width: 120px; height: 120px; border-start-start-radius: 10px...
border-top-color - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocom
puted valuecom
puted 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> ]?
border-top-left-radius - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcom
puted valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples live example code an arc of ellipse is used as the border div { border-top-left-radius: 40px 40px; } an arc of ellipse is used as th...
border-top-right-radius - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednopercentagesrefer to the corresponding dimension of the border boxcom
puted valuetwo absolute <length>s or <percentage>sanimation typea length, percentage or calc(); formal syntax <length-percentage>{1,2}where <length-percentage> = <length> | <percentage> examples live example code an arc of circle is used as the border div { border-top-right-radius: 40px 40px; } an arc of ellipse is used as th...
border-top-width - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocom
puted valuethe absolute length or 0 if border-top-style is none or hiddenanimation typea length formal syntax <line-width>where <line-width> = <length> | thin | medium | thick examples html <div>element 1</div> <div>element 2</div> css div { border: 1px solid red; margin: 1em 0; } div:nth-child(1) { border-top-width: thick; } div:nth-child(2) { border-top-width: 2em; } result spec...
border-top - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocom
puted valueas each of the properties of the shorthand:border-top-width: the absolute length or 0 if border-top-style is none or hiddenborder-top-style: as specifiedborder-top-color: com
puted coloranimation typeas each of the properties of the shorthand:border-top-color: a colorborder-top-style: discreteborder-top-width: a length formal syntax <line-width> | <line-style> | <color>where <line-width> ...
border-width - CSS: Cascading Style Sheets
it also applies to ::first-letter.inheritednocom
puted valueas each of the properties of the shorthand:border-bottom-width: the absolute length or 0 if border-bottom-style is none or hiddenborder-left-width: the absolute length or 0 if border-left-style is none or hiddenborder-right-width: the absolute length or 0 if border-right-style is none or hiddenborder-top-width: the absolute length or 0 if border-top-style is none or hiddenanimation typeas ...
box-align - CSS: Cascading Style Sheets
formal definition initial valuestretchapplies toelements with a css display value of box or inline-boxinheritednocom
puted valueas specifiedanimation typediscrete formal syntax start | center | end | baseline | stretch examples setting box alignment <!doctype html> <html> <head> <title>css box-align example</title> <style> div.example { display: box; /* as specified */ display: -moz-box; /* mozilla */ display: -webkit-box; /* webkit */ /* make this box taller ...
box-decoration-break - CSS: Cascading Style Sheets
formal definition initial valuesliceapplies toall elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax slice | clone examples inline box fragments an inline element that contains line breaks styled with: .example { background: linear-gradient(to bottom right, yellow, green); box-shadow: 8px 8px 10px 0px deeppink, -5px -5px 5px 0px blue, 5px 5px 15px 0px yellow; padding: 0em 1em; border-radius: 16px; border-style: s...
box-direction - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies toelements with a css display value of box or inline-boxinheritednocom
puted valueas specifiedanimation typediscrete formal syntax normal | reverse | inherit examples setting box direction .example { /* bottom-to-top layout */ -moz-box-direction: reverse; /* mozilla */ -webkit-box-direction: reverse; /* webkit */ box-direction: reverse; /* as specified */ } specifications not part of any standard.
box-flex - CSS: Cascading Style Sheets
formal definition initial value0applies toelements that are direct children of an element with a css display value of -moz-box or -moz-inline-box or -webkit-box or -webkit-inline-boxinheritednocom
puted valueas specifiedanimation typediscrete formal syntax <number> examples setting box-flex <!doctype html> <html> <head> <title>-moz-box-flex example</title> <style> div.example { display: -moz-box; display: -webkit-box; border: 1px solid black; width: 100%; } div.example > p:nth-child(1) { -moz-box-flex: 1; /* mozilla...
box-orient - CSS: Cascading Style Sheets
formal definition initial valueinline-axis (horizontal in xul)applies toelements with a css display value of box or inline-boxinheritednocom
puted valueas specifiedanimation typediscrete formal syntax horizontal | vertical | inline-axis | block-axis | inherit examples setting horizontal box orientation here, he box-orient property will cause the two <p> sections in the example to display in the same line.
box-pack - CSS: Cascading Style Sheets
formal definition initial valuestartapplies toelements with a css display value of -moz-box, -moz-inline-box, -webkit-box or -webkit-inline-boxinheritednocom
puted valueas specifiedanimation typediscrete formal syntax start | center | end | justify examples div.example { border-style: solid; display: -moz-box; /* mozilla */ display: -webkit-box; /* webkit */ /* make this box taller than the children, so there is room for the box-pack */ height: 300px; /* make this box wide enough to show the contents are centered horizontally *...
box-sizing - CSS: Cascading Style Sheets
formal definition initial valuecontent-boxapplies toall elements that accept width or heightinheritednocom
puted valueas specifiedanimation typediscrete formal syntax content-box | border-box examples box sizes with content-box and border-box this example shows how different box-sizing values alter the rendered size of two otherwise identical elements.
break-inside - CSS: Cascading Style Sheets
a subset of values should be aliased as follows: page-break-inside break-inside auto auto avoid avoid formal definition initial valueautoapplies toblock-level elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax auto | avoid | avoid-page | avoid-column | avoid-region examples avoiding breaking inside a figure in the following example we have a container that contains an <h1> spanning all columns (achieved using column-span: all) and a series of paragraphs laid out in multiple columns using column-width: 200px.
clear - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toblock-level elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax none | left | right | both | inline-start | inline-end examples clear: left html <div class="wrapper"> <p class="black">lorem ipsum dolor sit amet, consectetuer adipiscing elit.
clip - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toabsolutely positioned elementsinheritednocom
puted valueauto if specified as auto, otherwise a rectangle with four values, each of which is auto if specified as auto or the com
puted length otherwiseanimation typea rectangle formal syntax <shape> | autowhere <shape> = rect(<top>, <right>, <bottom>, <left>) examples clipping an image css .dotted-border { border: dotted; position: relative; width: 536px; height: 350px; } #top-left, ...
color - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyescom
puted valueif the value is translucent, the com
puted value will be the rgba() corresponding one.
column-count - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toblock containers except table wrapper boxesinheritednocom
puted valueas specifiedanimation typean integer formal syntax <integer> | auto examples splitting a paragraph across three columns html <p class="content-box"> this is a bunch of text split into three columns using the css `column-count` property.
column-fill - CSS: Cascading Style Sheets
formal definition initial valuebalanceapplies tomulticol elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax auto | balance | balance-all examples splitting text evenly across columns html <p class="content-box"> this is a bunch of text split into multiple columns.
column-gap (grid-column-gap) - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies tomulti-column elements, flex containers, grid containersinheritednopercentagesrefer to corresponding dimension of the content areacom
puted valueas specified, with <length>s made absolute, and normal com
puting to zero except on multi-column elementsanimation typea length, percentage or calc(); formal syntax normal | <length-percentage>where <length-percentage> = <length> | <percentage> examples flex layout html <div id="flexbox"> <div></div> <div></div> <div></div> </div> css #flexbox { display: flex; height: 100...
column-rule-color - CSS: Cascading Style Sheets
formal definition initial valuecurrentcolorapplies tomulticol elementsinheritednocom
puted valuecom
puted 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> ]?
column-rule-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies tomulticol elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax <'border-style'> examples setting a dashed column rule html <p>this is a bunch of text split into three columns.
column-rule-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies tomulticol elementsinheritednocom
puted valuethe absolute length; 0 if the column-rule-style is none or hiddenanimation typea length formal syntax <'border-width'> examples setting a thick column rule html <p>this is a bunch of text split into three columns.
column-rule - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:column-rule-width: mediumcolumn-rule-style: nonecolumn-rule-color: currentcolorapplies tomulticol elementsinheritednocom
puted valueas each of the properties of the shorthand:column-rule-color: com
puted colorcolumn-rule-style: as specifiedcolumn-rule-width: the absolute length; 0 if the column-rule-style is none or hiddenanimation typeas each of the properties of the shorthand:column-rule-color: a colorcolumn-rule-style: discretecolumn-rule-width: a length formal syntax <'column-rule-width'> | <'column-rule-style'> |...
column-span - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toin-flow block-level elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax none | all examples making a heading span columns in this example, the heading is made to span across all the columns of the article.
column-width - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toblock containers except table wrapper boxesinheritednocom
puted valuethe absolute length, zero or largeranimation typea length formal syntax <length> | auto examples setting column width in pixels html <p class="content-box"> lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
columns - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:column-width: autocolumn-count: autoapplies toblock containers except table wrapper boxesinheritednocom
puted valueas each of the properties of the shorthand:column-width: the absolute length, zero or largercolumn-count: as specifiedanimation typeas each of the properties of the shorthand:column-width: a lengthcolumn-count: an integer formal syntax <'column-width'> | <'column-count'> examples setting three equal columns html <p class="content-box"> this is a bunch of text split into three colum...
contain - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax none | strict | content | [ size | layout | style | paint ] examples simple layout the markup below consists of a number of articles, each with content: <h1>my blog</h1> <article> <h2>heading of a nice article</h2> <p>content here.</p> </article> <article> <h2>another heading of another article</h2> <img src="graphic.jpg" alt="...
cursor - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elementsinheritedyescom
puted valueas specified, but with <url> values made absoluteanimation typediscrete formal syntax [ [ <url> [ <x> <y> ]?
direction - CSS: Cascading Style Sheets
formal definition initial valueltrapplies toall elementsinheritedyescom
puted 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.
<display-internal> - CSS: Cascading Style Sheets
html <main> <div> <label for="name">name</label> <in
put type="text" id="name" name="name"> </div> <div> <label for="age">age</label> <in
put type="text" id="age" name="age"> </div> </main> css main { display: table; } div { display: table-row; } label, in
put { display: table-cell; margin: 5px; } result specifications specification status css display module level 3the definition of 'display-interna...
empty-cells - CSS: Cascading Style Sheets
formal definition initial valueshowapplies totable-cell elementsinheritedyescom
puted valueas specifiedanimation typediscrete formal syntax show | hide example showing and hiding empty table cells html <table class="table_1"> <tr> <td>moe</td> <td>larry</td> </tr> <tr> <td>curly</td> <td></td> </tr> </table> <br> <table class="table_2"> <tr> <td>moe</td> <td>larry</td> </tr> <tr> <td>curly</td> <td></td> </tr> </table> css ...
env() - CSS: Cascading Style Sheets
set-top, 20px); env(safe-area-inset-right, 1em); env(safe-area-inset-bottom, 0.5vh); env(safe-area-inset-left, 1.4rem); values safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom, safe-area-inset-left the safe-area-inset-* variables are four environment variables that define a rectangle by its top, right, bottom, and left insets from the edge of the viewport, which is safe to
put content into without risking it being cut off by the shape of a non‑rectangular display.
flex-basis - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toflex items, including in-flow pseudo-elementsinheritednopercentagesrefer to the flex container's inner main sizecom
puted valueas specified, but with relative lengths converted into absolute lengthsanimation typea length, percentage or calc(); formal syntax content | <'width'> examples setting flex item initial sizes html <ul class="container"> <li class="flex flex1">1: flex-basis test</li> <li class="flex flex2">2: flex-basis test</li> <li class="flex flex3">3: flex-basis test</li> <li class="flex f...
flex-direction - CSS: Cascading Style Sheets
flexbox & the keyboard navigation disconnect — tink source order matters | adrian roselli mdn understanding wcag, guideline 1.3 explanations understanding success criterion 1.3.2 | w3c understanding wcag 2.0 formal definition initial valuerowapplies toflex containersinheritednocom
puted valueas specifiedanimation typediscrete formal syntax row | row-reverse | column | column-reverse examples reversing flex container columns and rows html <h4>this is a column-reverse</h4> <div id="content"> <div class="box" style="background-color:red;">a</div> <div class="box" style="background-color:lightblue;">b</div> <div class="box" style="background-color:yellow;">c</div> </di...
flex-flow - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:flex-direction: rowflex-wrap: nowrapapplies toflex containersinheritednocom
puted valueas each of the properties of the shorthand:flex-direction: as specifiedflex-wrap: as specifiedanimation typediscrete formal syntax <'flex-direction'> | <'flex-wrap'> examples setting column-reverse and wrap element { /* main-axis is the block direction with reversed main-start and main-end.
flex-grow - CSS: Cascading Style Sheets
formal definition initial value0applies toflex items, including in-flow pseudo-elementsinheritednocom
puted valueas specifiedanimation typea number formal syntax <number> examples setting flex item grow factor html <h4>this is a flex-grow</h4> <h5>a,b,c and f are flex-grow:1 .
flex-shrink - CSS: Cascading Style Sheets
formal definition initial value1applies toflex items, including in-flow pseudo-elementsinheritednocom
puted valueas specifiedanimation typea number formal syntax <number> examples setting flex item shrink factor html <p>the width of content is 500px; the flex-basis of the flex items is 120px.</p> <p>a, b, c have flex-shrink:1 set.
flex-wrap - CSS: Cascading Style Sheets
formal definition initial valuenowrapapplies toflex containersinheritednocom
puted valueas specifiedanimation typediscrete formal syntax nowrap | wrap | wrap-reverse examples setting flex container wrap values html <h4>this is an example for flex-wrap:wrap </h4> <div class="content"> <div class="red">1</div> <div class="green">2</div> <div class="blue">3</div> </div> <h4>this is an example for flex-wrap:nowrap </h4> <div class="content1"> <div class="red">1</di...
flex - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:flex-grow: 0flex-shrink: 1flex-basis: autoapplies toflex items, including in-flow pseudo-elementsinheritednocom
puted valueas each of the properties of the shorthand:flex-grow: as specifiedflex-shrink: as specifiedflex-basis: as specified, but with relative lengths converted into absolute lengthsanimation typeas each of the properties of the shorthand:flex-grow: a numberflex-shrink: a numberflex-basis: a length, percentage or calc(); formal syntax none | [ <'flex-grow'> <'flex-shrink'>?
font-family - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyescom
puted valueas specifiedanimation typediscrete formal syntax [ <family-name> | <generic-family> ]#where <family-name> = <string> | <custom-ident>+<generic-family> = serif | sans-serif | cursive | fantasy | monospace examples some common font families .serif { font-family: times, times new roman, georgia, serif; } .sansserif { font-family: verdana, arial, helvetica, sans-serif; } .monospace ...
font-feature-settings - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyescom
puted valueas specifiedanimation typediscrete formal syntax normal | <feature-tag-value>#where <feature-tag-value> = <string> [ <integer> | on | off ]?
font-language-override - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyescom
puted valueas specifiedanimation typediscrete formal syntax normal | <string> examples using danish glyphs html <p class="para1">default language setting.</p> <p class="para2">this is a string with the <code>font-language-override</code> set to danish.</p> css p.para1 { font-language-override: normal; } p.para2 { font-language-override: "dan"; } result specifications speci...
font-optical-sizing - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyescom
puted valueas specifiedanimation typediscrete formal syntax auto | none examples disabling optical sizing <p class="optical-sizing">this paragraph is optically sized.
font-size-adjust - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyescom
puted valueas specifiedanimation typea number formal syntax none | <number> examples adjusting lower-case letter sizes html <p class="times">this text uses the times font (10px), which is hard to read in small sizes.</p> <p class="verdana">this text uses the verdana font (10px), which has relatively large lowercase letters.</p> <p class="adjtimes">this is the 10px times, but now adjusted to the...
font-size - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyespercentagesrefer to the parent element's font sizecom
puted 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<length-percentage> = <length> | <percentage> examples setting font sizes css .small { ...
font-smooth - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elementsinheritedyescom
puted valueas specifiedanimation typediscrete formal syntax auto | never | always | <absolute-size> | <length>where <absolute-size> = xx-small | x-small | small | medium | large | x-large | xx-large | xxx-large examples basic usage example the following example shows the safari/chromium and firefox equivalents that turn on font-smoothing on macos.
font-stretch - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyescom
puted valueas specifiedanimation typea font stretch formal syntax <font-stretch-absolute>where <font-stretch-absolute> = normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | <percentage> examples setting font stretch percentages note that this example will only work in browsers that support <percentage> values.
font-synthesis - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyescom
puted valueas specifiedanimation typediscrete formal syntax none | [ weight | style ] examples disabling font synthesis html <em class="syn">synthesize me!
font-variant-alternates - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyescom
puted valueas specifiedanimation typediscrete formal syntax normal | [ stylistic( <feature-value-name> ) | historical-forms | styleset( <feature-value-name># ) | character-variant( <feature-value-name># ) | swash( <feature-value-name> ) | ornaments( <feature-value-name> ) | annotation( <feature-value-name> ) ]where <feature-value-name> = <custom-ident> examples html <p>firefox rocks!</p> <p clas...
font-variant-caps - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyescom
puted valueas specifiedanimation typediscrete formal syntax normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps examples setting the small-caps font variant html <p class="small-caps">firefox rocks, small caps!</p> <p class="normal">firefox rocks, normal caps!</p> css .small-caps { font-variant-caps: small-caps; font-style: italic; } .normal { ...
font-variant-east-asian - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyescom
puted valueas specifiedanimation typediscrete formal syntax normal | [ <east-asian-variant-values> || <east-asian-width-values> || ruby ]where <east-asian-variant-values> = [ jis78 | jis83 | jis90 | jis04 | simplified | traditional ]<east-asian-width-values> = [ full-width | proportional-width ] examples setting east asian glyph variants this example require font "yu gothic" installed in your os...
font-variant-ligatures - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyescom
puted valueas specifiedanimation typediscrete formal syntax normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> ]where <common-lig-values> = [ common-ligatures | no-common-ligatures ]<discretionary-lig-values> = [ discretionary-ligatures | no-discretionary-ligatures ]<historical-lig-values> = [ historical-ligatures | no-historica...
font-variant-numeric - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyescom
puted valueas specifiedanimation typediscrete formal syntax normal | [ <numeric-figure-values> | <numeric-spacing-values> | <numeric-fraction-values> | ordinal | slashed-zero ]where <numeric-figure-values> = [ lining-nums | oldstyle-nums ]<numeric-spacing-values> = [ proportional-nums | tabular-nums ]<numeric-fraction-values> = [ diagonal-fractions | stacked-fractions ] examples setting ordinal n...
font-variant-position - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyescom
puted valueas specifiedanimation typediscrete formal syntax normal | sub | super examples setting superscript and subscript forms html <p class="normal">normal!</p> <p class="super">super!</p> <p class="sub">sub!</p> css p { display: inline; } .normal { font-variant-position: normal; } .super { font-variant-position: super; } .sub { font-variant-position: sub; } result specif...
font-variant - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyescom
puted valueas specifiedanimation typediscrete formal syntax normal | none | [ <common-lig-values> | <discretionary-lig-values> | <historical-lig-values> | <contextual-alt-values> | stylistic( <feature-value-name> ) | historical-forms | styleset( <feature-value-name># ) | character-variant( <feature-value-name># ) | swash( <feature-value-name> ) | ornaments( <feature-value-name> ) | annotation( <fea...
font-variation-settings - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyescom
puted valueas specifiedanimation typea transform formal syntax normal | [ <string> <number> ]# examples you can find a number of other variable fonts examples at our variable fonts guide, v-fonts.com, and axis-praxis.org.
gap (grid-gap) - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:row-gap: normalcolumn-gap: normalapplies tomulti-column elements, flex containers, grid containersinheritednocom
puted valueas each of the properties of the shorthand:row-gap: as specified, with <length>s made absolute, and normal com
puting to zero except on multi-column elementscolumn-gap: as specified, with <length>s made absolute, and normal com
puting to zero except on multi-column elementsanimation typeas each of the properties of the shorthand:row-gap: a length, percentage or calc();column-gap: a length, p...
grid-area - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:grid-row-start: autogrid-column-start: autogrid-row-end: autogrid-column-end: autoapplies togrid items and absolutely-positioned boxes whose containing block is a grid containerinheritednocom
puted valueas each of the properties of the shorthand:grid-row-start: as specifiedgrid-column-start: as specifiedgrid-row-end: as specifiedgrid-column-end: as specifiedanimation typediscrete formal syntax <grid-line> [ / <grid-line> ]{0,3}where <grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>?
grid-auto-columns - CSS: Cascading Style Sheets
formal definition initial valueautoapplies togrid containersinheritednopercentagesrefer to corresponding dimension of the content areacom
puted valuethe percentage as specified or the absolute lengthanimation typediscrete formal syntax <track-size>+where <track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )where <track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto<inflexible-breadth> = <length> | <percentage> | min-content | max-cont...
grid-auto-rows - CSS: Cascading Style Sheets
formal definition initial valueautoapplies togrid containersinheritednopercentagesrefer to corresponding dimension of the content areacom
puted valuethe percentage as specified or the absolute lengthanimation typediscrete formal syntax <track-size>+where <track-size> = <track-breadth> | minmax( <inflexible-breadth> , <track-breadth> ) | fit-content( [ <length> | <percentage> ] )where <track-breadth> = <length-percentage> | <flex> | min-content | max-content | auto<inflexible-breadth> = <length> | <percentage> | min-content | max-cont...
grid-column-end - CSS: Cascading Style Sheets
formal definition initial valueautoapplies togrid items and absolutely-positioned boxes whose containing block is a grid containerinheritednocom
puted valueas specifiedanimation typediscrete formal syntax <grid-line>where <grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>?
grid-column-start - CSS: Cascading Style Sheets
formal definition initial valueautoapplies togrid items and absolutely-positioned boxes whose containing block is a grid containerinheritednocom
puted valueas specifiedanimation typediscrete formal syntax <grid-line>where <grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>?
grid-column - CSS: Cascading Style Sheets
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 containerinheritednocom
puted 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>?
grid-row-end - CSS: Cascading Style Sheets
formal definition initial valueautoapplies togrid items and absolutely-positioned boxes whose containing block is a grid containerinheritednocom
puted valueas specifiedanimation typediscrete formal syntax <grid-line>where <grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>?
grid-row-start - CSS: Cascading Style Sheets
formal definition initial valueautoapplies togrid items and absolutely-positioned boxes whose containing block is a grid containerinheritednocom
puted valueas specifiedanimation typediscrete formal syntax <grid-line>where <grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>?
grid-row - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:grid-row-start: autogrid-row-end: autoapplies togrid items and absolutely-positioned boxes whose containing block is a grid containerinheritednocom
puted valueas each of the properties of the shorthand:grid-row-start: as specifiedgrid-row-end: as specifiedanimation typediscrete formal syntax <grid-line> [ / <grid-line> ]?where <grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>?
grid-template-areas - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies togrid containersinheritednocom
puted valueas specifiedanimation typediscrete formal syntax none | <string>+ examples specifying named grid areas html <section id="page"> <header>header</header> <nav>navigation</nav> <main>main area</main> <footer>footer</footer> </section> css #page { display: grid; width: 100%; height: 250px; grid-template-areas: "head head" "nav main" ...
grid-template-columns - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies togrid containersinheritednopercentagesrefer to corresponding dimension of the content areacom
puted 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>?
grid-template-rows - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies togrid containersinheritednopercentagesrefer to corresponding dimension of the content areacom
puted 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>?
grid-template - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:grid-template-columns: nonegrid-template-rows: nonegrid-template-areas: noneapplies togrid containersinheritednopercentagesas each of the properties of the shorthand:grid-template-columns: refer to corresponding dimension of the content areagrid-template-rows: refer to corresponding dimension of the content areacom
puted valueas each of the properties of the shorthand:grid-template-columns: as specified, but with relative lengths converted into absolute lengthsgrid-template-rows: as specified, but with relative lengths converted into absolute lengthsgrid-template-areas: as specifiedanimation typediscrete formal syntax none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>?
hyphens - CSS: Cascading Style Sheets
formal definition initial valuemanualapplies toall elementsinheritedyescom
puted valueas specifiedanimation typediscrete formal syntax none | manual | auto examples specifying text hyphenation this example uses three classes, one for each possible configuration of the hyphens property.
image-orientation - CSS: Cascading Style Sheets
formal definition initial value0degapplies toall elementsinheritedyescom
puted valuean <angle>, rounded to the next quarter turn from 0deg and normalized, that is moduloing the value by 1turnanimation typediscrete formal syntax from-image | <angle> | [ <angle>?
image-rendering - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elementsinheritedyescom
puted valueas specifiedanimation typediscrete formal syntax auto | crisp-edges | pixelated examples setting image scaling algorithms in practical use, the pixelated and crisp-edges rules can be combined to provide some fallback for each other.
initial-letter-align - CSS: Cascading Style Sheets
formal definition initial valueautoapplies to::first-letter pseudo-elements and inline-level first child of a block containerinheritednocom
puted valueas specifiedanimation typediscrete formal syntax [ auto | alphabetic | hanging | ideographic ] examples aligning initial letter html <p class="auto ">initial letter - auto</p> <p class="alphabetic">initial letter - alphabetic</p> <p class="hanging">initial letter - hanging</p> <p class="ideographic">initial letter - ideographic</p> css .auto { -webkit-initial-letter-align: auto;...
initial-letter - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies to::first-letter pseudo-elements and inline-level first child of a block containerinheritednocom
puted valueas specifiedanimation typediscrete formal syntax normal | [ <number> <integer>?
inline-size - CSS: Cascading Style Sheets
formal definition initial valueautoapplies tosame as width and heightinheritednopercentagesinline-size of containing blockcom
puted valuesame as width and heightanimation typea length, percentage or calc(); formal syntax <'width'> examples setting inline size in pixels html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; inline-size: 110px; } result specifications specification status comment css logical propertie...
inset-block-end - CSS: Cascading Style Sheets
formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-height of containing blockcom
puted valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'> examples setting block end offset html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; position: ...
inset-block-start - CSS: Cascading Style Sheets
formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-height of containing blockcom
puted valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'> examples setting block start offset html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; position...
inset-block - CSS: Cascading Style Sheets
formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-height of containing blockcom
puted valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'>{1,2} examples setting block start and end offsets html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-...
inset-inline-end - CSS: Cascading Style Sheets
formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-width of containing blockcom
puted valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'> examples setting inline end offset html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; position: ...
inset-inline-start - CSS: Cascading Style Sheets
formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-width of containing blockcom
puted valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'> examples setting inline start offset html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; positio...
inset-inline - CSS: Cascading Style Sheets
formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-width of containing blockcom
puted valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'>{1,2} examples setting inline start and end offsets html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical...
inset - CSS: Cascading Style Sheets
formal definition initial valueautoapplies topositioned elementsinheritednopercentageslogical-height of containing blockcom
puted valuesame as box offsets: top, right, bottom, left properties except that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'>{1,4} examples setting offsets for an element html <div> <span class="exampletext">example text</span> </div> css div { background-color: yellow; width: 150px; height: 120px; position: relative; } .exampletext { ...
isolation - CSS: Cascading Style Sheets
in svg, it applies to container elements, graphics elements, and graphics referencing elements.inheritednocom
puted valueas specifiedanimation typediscrete formal syntax auto | isolate examples forcing a new stacking context for an element html <div id="b" class="a"> <div id="d"> <div class="a c">auto</div> </div> <div id="e"> <div class="a c">isolate</div> </div> </div> css .a { background-color: rgb(0,255,0); } #b { width: 200px; height: 210px; } .c { width: 100px; height...
justify-content - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies toflex containersinheritednocom
puted valueas specifiedanimation typediscrete formal syntax normal | <content-distribution> | <overflow-position>?
justify-items - CSS: Cascading Style Sheets
formal definition initial valuelegacyapplies toall elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax normal | stretch | <baseline-position> | <overflow-position>?
justify-self - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toblock-level boxes, absolutely-positioned boxes, and grid itemsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax auto | normal | stretch | <baseline-position> | <overflow-position>?
letter-spacing - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyescom
puted valuean optimum value consisting of either an absolute length or the keyword normalanimation typea length formal syntax normal | <length> examples setting letter spacing html <p class="normal">letter spacing</p> <p class="em-wide">letter spacing</p> <p class="em-wider">letter spacing</p> <p class="em-tight">letter spacing</p> <p class="px-wide">letter spacing</p> css .normal { letter...
line-break - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elementsinheritedyescom
puted valueas specifiedanimation typediscrete formal syntax auto | loose | normal | strict | anywhere examples setting text wrapping see whether the text is wrapped before "々", "ぁ" and "。".
line-height-step - CSS: Cascading Style Sheets
formal definition initial value0applies toblock containersinheritedyescom
puted valueabsolute <length>animation typediscrete formal syntax <length> examples setting step unit for line box height in the following example, the height of line box in each paragraph is rounded up to the step unit.
list-style-image - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies tolist itemsinheritedyescom
puted valuenone or the image with its uri made absoluteanimation typediscrete formal syntax <url> | none examples setting list item images html <ul> <li>item 1</li> <li>item 2</li> </ul> css ul { list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif"); } result specifications specification status comment css lists module level 3t...
list-style-position - CSS: Cascading Style Sheets
formal definition initial valueoutsideapplies tolist itemsinheritedyescom
puted valueas specifiedanimation typediscrete formal syntax inside | outside examples setting list item position html <ul class="inside">list 1 <li>list item 1-1</li> <li>list item 1-2</li> <li>list item 1-3</li> <li>list item 1-4</li> </ul> <ul class="outside">list 2 <li>list item 2-1</li> <li>list item 2-2</li> <li>list item 2-3</li> <li>list item 2-4</li> </ul> <ul class="ins...
list-style - CSS: Cascading Style Sheets
::before { content: "\200b"; } voiceover and list-style-type: none – unfettered thoughts mdn understanding wcag, guideline 1.3 explanations understanding success criterion 1.3.1 | w3c understanding wcag 2.0 formal definition initial valueas each of the properties of the shorthand:list-style-type: disclist-style-position: outsidelist-style-image: noneapplies tolist itemsinheritedyescom
puted valueas each of the properties of the shorthand:list-style-image: none or the image with its uri made absolutelist-style-position: as specifiedlist-style-type: as specifiedanimation typediscrete formal syntax <'list-style-type'> | <'list-style-position'> | <'list-style-image'> examples setting list style type and position html list 1 <ul class="one"> <li>list item1</li> <li>list item2...
margin-block-end - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcom
puted valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length formal syntax <'margin-left'> examples setting block end margin html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vert...
margin-block-start - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcom
puted valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length formal syntax <'margin-left'> examples setting block start margin html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: ve...
margin-block - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcom
puted valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typediscrete formal syntax <'margin-left'>{1,2} examples setting block start and end margins html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { wr...
margin-bottom - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcom
puted valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> | auto examples setting positive and negative bottom margins html <div class="container"> <div class="box0">box 0</div> <div class="box1">box 1</div> <div class="box2">box one's negative margin pulls me up</div> </div> css css for divs to set margin-bottom and height .box...
margin-inline-end - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcom
puted valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length formal syntax <'margin-left'> examples setting inline end margin html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: ver...
margin-inline-start - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcom
puted valueif specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, autoanimation typea length formal syntax <'margin-left'> examples setting inline start margin html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: v...
margin-top - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcom
puted valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> | auto examples setting positive and negative top margins .content { margin-top: 5%; } .sidebox { margin-top: 10px; } .logo { margin-top: -5px; } #footer { margin-top: 1em; } specifications specification status comment css basic box model...
margin-trim - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednocom
puted valueas specifiedanimation typediscrete formal syntax none | in-flow | all examples basic usage once support is implemented for this property, it will probably work like so: when you've got a container with some inline children and you want to
put a margin between each child but not have it interfere with the spacing at the end of the row, you might do something like this: article { ba...
margin - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcom
puted valueas each of the properties of the shorthand:margin-bottom: the percentage as specified or the absolute lengthmargin-left: the percentage as specified or the absolute lengthmargin-right: the percentage as specified or the absolute lengthmargin-top: the percentage as specified or the absolute lengthanimation typea length ...
mask-border-mode - CSS: Cascading Style Sheets
formal definition initial valuealphaapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax luminance | alpha examples basic usage this property doesn't yet seem to have support anywhere.
mask-border-outset - CSS: Cascading Style Sheets
formal definition initial value0applies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocom
puted valueas specified, but with relative lengths converted into absolute lengthsanimation typediscrete formal syntax [ <length> | <number> ]{1,4} examples basic usage this property doesn't appear to be supported anywhere yet.
mask-border-repeat - CSS: Cascading Style Sheets
formal definition initial valuestretchapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax [ stretch | repeat | round | space ]{1,2} examples basic usage this property doesn't appear to be supported anywhere yet.
mask-border-slice - CSS: Cascading Style Sheets
formal definition initial value0applies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentagesrefer to size of the mask border imagecom
puted valueas specifiedanimation typediscrete formal syntax <number-percentage>{1,4} fill?where <number-percentage> = <number> | <percentage> examples basic usage this property doesn't appear to be supported anywhere yet.
mask-border-source - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocom
puted valueas specified, but with <url> values made absoluteanimation typediscrete formal syntax none | <image>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>where <image()> = image( <image-tags>?
mask-border-width - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentagesrelative to width/height of the mask border image areacom
puted valueas specified, but with relative lengths converted into absolute lengthsanimation typediscrete formal syntax [ <length-percentage> | <number> | auto ]{1,4}where <length-percentage> = <length> | <percentage> examples basic usage this property doesn't appear to be supported anywhere yet.
mask-border - CSS: Cascading Style Sheets
er-repeat: stretchmask-border-slice: 0mask-border-source: nonemask-border-width: autoapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentagesas each of the properties of the shorthand:mask-border-slice: refer to size of the mask border imagemask-border-width: relative to width/height of the mask border image areacom
puted valueas each of the properties of the shorthand:mask-border-mode: as specifiedmask-border-outset: as specified, but with relative lengths converted into absolute lengthsmask-border-repeat: as specifiedmask-border-slice: as specifiedmask-border-source: as specified, but with <url> values made absolutemask-border-width: as specified, but with relative lengths converted into absolute lengthsanimat...
mask-clip - CSS: Cascading Style Sheets
formal definition initial valueborder-boxapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax [ <geometry-box> | no-clip ]#where <geometry-box> = <shape-box> | fill-box | stroke-box | view-boxwhere <shape-box> = <box> | margin-boxwhere <box> = border-box | padding-box | content-box examples clipping a mask to the border box css #masked { width: 100px; height: 100px; background-color: #8cffa0; margin: 20px; border: 20px...
mask-composite - CSS: Cascading Style Sheets
formal definition initial valueaddapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax <compositing-operator>#where <compositing-operator> = add | subtract | intersect | exclude examples compositing mask layers with addition css #masked { width: 100px; height: 100px; background-color: #8cffa0; mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg), url(https://mdn.mozillademos.org/files/1...
mask-image - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocom
puted valueas specified, but with <url> values made absoluteanimation typediscrete formal syntax <mask-reference>#where <mask-reference> = none | <image> | <mask-source>where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient><mask-source> = <url>where <image()> = image( <image-tags>?
mask-mode - CSS: Cascading Style Sheets
formal definition initial valuematch-sourceapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax <masking-mode>#where <masking-mode> = alpha | luminance | match-source examples using alpha mask mode css #masked { width: 227px; height: 200px; background: blue linear-gradient(red, blue); mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg); mask-mode: alpha; /* can be changed in the live sample */ } html <d...
mask-origin - CSS: Cascading Style Sheets
formal definition initial valueborder-boxapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax <geometry-box>#where <geometry-box> = <shape-box> | fill-box | stroke-box | view-boxwhere <shape-box> = <box> | margin-boxwhere <box> = border-box | padding-box | content-box examples setting mask origin to border-box css #masked { width: 100px; height: 100px; margin: 10px; border: 10px solid blue; background-color: #8cffa0; ...
mask-position - CSS: Cascading Style Sheets
formal definition initial valuecenterapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentagesrefer to size of mask painting area minus size of mask layer image (see the text for background-position)com
puted valueconsists of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentage.animation typerepeatable list of simple list of length, percentage, or calc formal syntax <position>#where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ]...
mask-repeat - CSS: Cascading Style Sheets
formal definition initial valueno-repeatapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednocom
puted valueconsists of two keywords, one per dimensionanimation typediscrete formal syntax <repeat-style>#where <repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2} examples setting repeat for a single mask css #masked { width: 250px; height: 250px; background: blue linear-gradient(red, blue); mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg...
mask-type - CSS: Cascading Style Sheets
formal definition initial valueluminanceapplies to<mask> elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax luminance | alpha examples setting an alpha mask html <div class="redsquare"></div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> <defs> <mask id="m" maskcontentunits="objectboundingbox" style="mask-type:alpha"> <rect x=".1" y=".1" width=".8"...
mask - CSS: Cascading Style Sheets
-position: centermask-clip: border-boxmask-origin: border-boxmask-size: automask-composite: addapplies toall elements; in svg, it applies to container elements excluding the defs element and all graphics elementsinheritednopercentagesas each of the properties of the shorthand:mask-position: refer to size of mask painting area minus size of mask layer image (see the text for background-position)com
puted valueas each of the properties of the shorthand:mask-image: as specified, but with <url> values made absolutemask-mode: as specifiedmask-repeat: consists of two keywords, one per dimensionmask-position: consists of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a <length>), otherwise as a percentage.mask-clip: as specifiedmask-o...
max-block-size - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as width and heightinheritednopercentagesblock-size of containing blockcom
puted valuesame as max-width and max-heightanimation typea length, percentage or calc(); formal syntax <'max-width'> examples setting max-block-size with horizontal and vertical text in this example, the same text (the opening sentences from herman melville's novel moby-dick) is presented in both the horizontal-tb and vertical-rl writing modes.
max-height - CSS: Cascading Style Sheets
if the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as none.com
puted valuethe percentage as specified or the absolute length or noneanimation typea length, percentage or calc(); formal syntax auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> examples setting max-height using percentage and keyword values table { max-height: 75%; } form { max-height: none; } sp...
max-inline-size - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as width and heightinheritednopercentagesinline-size of containing blockcom
puted valuesame as max-width and max-heightanimation typea length, percentage or calc(); formal syntax <'max-width'> examples setting max inline size in pixels html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; block-size: 100%; max-inline-size: 200px; } result specifications specification status co...
max-width - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | w3c understanding wcag 2.0 formal definition initial valuenoneapplies toall elements but non-replaced inline elements, table rows, and row groupsinheritednopercentagesrefer to the width of the containing blockcom
puted valuethe percentage as specified or the absolute length or noneanimation typea length, percentage or calc(); formal syntax auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> examples setting max width in pixels in this example, the "child" will be either 150 pixels wide or the width of the "parent...
min-block-size - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as width and heightinheritednopercentagesblock-size of containing blockcom
puted valuesame as min-width and min-heightanimation typea length, percentage or calc(); formal syntax <'min-width'> examples setting minimum block size for vertical text html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; min-block-size: 200px; } result specifications specification status comment ...
min-height - CSS: Cascading Style Sheets
if the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as 0.com
puted valuethe percentage as specified or the absolute lengthanimation typea length, percentage or calc(); formal syntax auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> examples setting min-height table { min-height: 75%; } form { min-height: 0; } specifications specification status ...
min-inline-size - CSS: Cascading Style Sheets
formal definition initial value0applies tosame as width and heightinheritednopercentagesinline-size of containing blockcom
puted valuesame as min-width and min-heightanimation typea length, percentage or calc(); formal syntax <'min-width'> examples setting minimum inline size for vertical text html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; block-size: 5%; min-inline-size: 200px; } result specifications specification st...
min-width - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elements but non-replaced inline elements, table rows, and row groupsinheritednopercentagesrefer to the width of the containing blockcom
puted valuethe percentage as specified or the absolute lengthanimation typea length, percentage or calc(); formal syntax auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> examples setting minimum element width table { min-width: 75%; } form { min-width: 0; } specifications specification ...
mix-blend-mode - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies toall elementsinheritednocom
puted 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 clas...
object-fit - CSS: Cascading Style Sheets
formal definition initial valuefillapplies toreplaced elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax fill | contain | cover | none | scale-down examples setting object-fit for an image html <section> <h2>object-fit: fill</h2> <img class="fill" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> <img class="fill narrow" src="https://udn.realityripple.com/samples/ae/248a9938d9.png" alt="mdn logo"> <h2...
object-position - CSS: Cascading Style Sheets
formal definition initial value50% 50%applies toreplaced elementsinheritedyespercentagesrefer to width and height of element itselfcom
puted valueas specifiedanimation typerepeatable list of simple list of length, percentage, or calc formal syntax <position>where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
offset-anchor - CSS: Cascading Style Sheets
formal definition initial valueautoapplies totransformable elementsinheritednopercentagesrelativetowidthandheightcom
puted valuefor <length> the absolute value, otherwise a percentageanimation typea position formal syntax auto | <position>where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
offset-distance - CSS: Cascading Style Sheets
formal definition initial value0applies totransformable elementsinheritednopercentagesrefer to the total path lengthcom
puted valuefor <length> the absolute value, otherwise a percentageanimation typea length, percentage or calc(); formal syntax <length-percentage>where <length-percentage> = <length> | <percentage> examples using offset-distance in an animation the motion aspect in css motion path typically comes from animating the offset-distance property.
offset-position - CSS: Cascading Style Sheets
formal definition initial valueautoapplies totransformable elementsinheritednopercentagesrefertosizeofcontainingblockcom
puted valuefor <length> the absolute value, otherwise a percentageanimation typea position formal syntax auto | <position>where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
offset - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:offset-position: autooffset-path: noneoffset-distance: 0offset-anchor: autooffset-rotate: autoapplies totransformable elementsinheritednopercentagesas each of the properties of the shorthand:offset-position: refertosizeofcontainingblockoffset-distance: refer to the total path lengthoffset-anchor: relativetowidthandheightcom
puted valueas each of the properties of the shorthand:offset-position: for <length> the absolute value, otherwise a percentageoffset-path: as specifiedoffset-distance: for <length> the absolute value, otherwise a percentageoffset-anchor: for <length> the absolute value, otherwise a percentageoffset-rotate: as specifiedanimation typeas each of the properties of the shorthand:offset-position: a positio...
opacity - CSS: Cascading Style Sheets
webaim: color contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 formal definition initial value1.0applies toall elementsinheritednocom
puted valuethe specified value, clipped in the range [0,1]animation typea number formal syntax <alpha-value>where <alpha-value> = <number> | <percentage> examples setting background opacity html <div class="light">you can barely see this.</div> <div class="medium">this is easier to see.</div> <div class="heavy">this is very easy to see.</div> css div { background-color: yellow; } .light { o...
orphans - CSS: Cascading Style Sheets
formal definition initial value2applies toblock container elementsinheritedyescom
puted valueas specifiedanimation typediscrete formal syntax <integer> examples setting a minimum orphan size of three lines html <div> <p>this is the first paragraph containing some text.</p> <p>this is the second paragraph containing some more text than the first one.
outline-offset - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednocom
puted valueas specified, but with relative lengths converted into absolute lengthsanimation typea length formal syntax <length> examples setting outline offset in pixels html <p>gallia est omnis divisa in partes tres.</p> css p { outline: 1px dashed red; outline-offset: 10px; background: yellow; border: 1px solid blue; margin: 15px; } result specifications specificati...
outline-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax auto | <'border-style'> examples setting outline style to auto the auto value indicates a custom outline style — typically a style [that] is either a user interface default for the platform, or perhaps a style that is richer than can be described in detail in css, e.g.
outline-width - CSS: Cascading Style Sheets
formal definition initial valuemediumapplies toall elementsinheritednocom
puted valuean absolute length; if the keyword none is specified, the com
puted value is 0animation typea length formal syntax <line-width>where <line-width> = <length> | thin | medium | thick examples setting an element's outline width html <span id="thin">thin</span> <span id="medium">medium</span> <span id="thick">thick</span> <span id="twopixels">2px</span> <span id="oneex">1ex</span> <span i...
Guide to scroll anchoring - CSS: Cascading Style Sheets
these suppression triggers are changes to the com
puted value of any of the following properties: top, left, right, or bottom margin or padding any width or height-related properties transform additionally, position changes anywhere inside the scrolling box also disable scroll anchoring.
overflow-anchor - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax auto | none examples prevent scroll anchoring to prevent scroll anchoring in a document, use the overflow-anchor property.
overflow-inline - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toblock-containers, flex containers, and grid containersinheritednocom
puted valueas specified, except with visible/clip com
puting to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clipanimation typediscrete formal syntax visible | hidden | clip | scroll | auto examples setting inline overflow behavior html <ul> <li><code>overflow-inline:hidden</code> — hides the text outside the box <div id="div1"> abcdefghijklmop...
overflow - CSS: Cascading Style Sheets
formal definition initial valuevisibleapplies toblock-containers, flex containers, and grid containersinheritednocom
puted valueas each of the properties of the shorthand:overflow-x: as specified, except with visible/clip com
puting to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clipoverflow-y: as specified, except with visible/clip com
puting to auto/hidden respectively if one of overflow-x or overflow-y is neither visible nor clipanimation typediscrete formal syntax [ visibl...
overscroll-behavior-block - CSS: Cascading Style Sheets
formal definition initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax contain | none | auto examples preventing block overscrolling in this demo we have two block-level boxes, one inside the other.
overscroll-behavior-inline - CSS: Cascading Style Sheets
formal definition initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax contain | none | auto examples preventing inline overscrolling in this demo we have two block-level boxes, one inside the other.
overscroll-behavior-x - CSS: Cascading Style Sheets
formal definition initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax contain | none | auto examples preventing an underlying element from scrolling horizontally in our simple overscroll-behavior-x example (see source code also), we have two block-level boxes, one inside the other.
overscroll-behavior - CSS: Cascading Style Sheets
formal definition initial valueautoapplies tonon-replaced block-level elements and non-replaced inline-block elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax [ contain | none | auto ]{1,2} examples preventing an underlying element from scrolling in our overscroll-behavior example (see the source code also), we present a full-page list of fake contacts, and a dialog box containing a chat window.
padding-block-end - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcom
puted valueas <length>animation typea length formal syntax <'padding-left'> examples setting block end padding for vertical text html content <div> <p class="exampletext">example text</p> </div> css content div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; padding-block-end: 20px; background-color: #c8c800; } result ...
padding-block-start - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcom
puted valueas <length>animation typea length formal syntax <'padding-left'> examples setting block start padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; padding-block-start: 20px; background-color: #c8c800; } result specifications...
padding-block - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcom
puted valueas <length>animation typediscrete formal syntax <'padding-left'>{1,2} examples setting block padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; padding-block: 20px 40px; background-color: #c8c800; } result specifications ...
padding-bottom - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcom
puted valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> examples setting padding bottom with pixels and percentages .content { padding-bottom: 5%; } .sidebox { padding-bottom: 10px; } specifications specification status comment css basic box modelthe definition of 'padding-bottom' in that specificati...
padding-inline-end - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcom
puted valueas <length>animation typea length formal syntax <'padding-left'> examples setting inline end padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; padding-inline-end: 20px; background-color: #c8c800; } specifications ...
padding-inline-start - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcom
puted valueas <length>animation typea length formal syntax <'padding-left'> examples setting inline start padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; padding-inline-start: 20px; background-color: #c8c800; } specifications ...
padding-inline - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcom
puted valueas <length>animation typediscrete formal syntax <'padding-left'>{1,2} examples setting inline padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; padding-inline: 20px 40px; background-color: #c8c800; } result specifications...
padding-left - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcom
puted 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 comment css basic box modelthe definition of 'padding-left' in that specification.
padding-right - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcom
puted valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> examples setting right padding using pixels and percentages .content { padding-right: 5%; } .sidebox { padding-right: 10px; } specifications specification status comment css basic box modelthe definition of 'padding-right' in that specification.
padding-top - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcom
puted valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> examples setting top padding using pixels and percentages .content { padding-top: 5%; } .sidebox { padding-top: 10px; } specifications specification status comment css basic box modelthe definition of 'padding-top' in that specification.
padding - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcom
puted valueas each of the properties of the shorthand:padding-bottom: the percentage as specified or the absolute lengthpadding-left: the percentage as specified or the absolute lengthpadding-right: the percentage as specified or the absolute lengthpadding-top: the percentage as specified or the absolute lengthanimation typea length formal syntax [ <length> | <percentage> ]{1,4} examples setting ...
page-break-after - CSS: Cascading Style Sheets
user agents may also apply it to other elements like table-row elements.inheritednocom
puted valueas specifiedanimation typediscrete formal syntax auto | always | avoid | left | right | recto | verso examples setting a page break after footnotes /* move to a new page after footnotes */ div.footnotes { page-break-after: always; } specifications specification status comment css logical properties and values level 1the definition of 'recto and verso' ...
page-break-before - CSS: Cascading Style Sheets
user agents may also apply it to other elements like table-row elements.inheritednocom
puted valueas specifiedanimation typediscrete formal syntax auto | always | avoid | left | right | recto | verso examples avoid a page break before the dic /* avoid page break before the div */ div.note { page-break-before: avoid; } specifications specification status comment css logical properties and values level 1the definition of 'recto and verso' in that s...
page-break-inside - CSS: Cascading Style Sheets
user agents may also apply it to other elements like table-row elements.inheritednocom
puted valueas specifiedanimation typediscrete formal syntax auto | avoid examples avoiding page breaks inside elements html <div class="page"> <p>this is the first paragraph.</p> <section class="list"> <span>a list</span> <ol> <li>one</li> <!-- <li>two</li> --> </ol> </section> <ul> <li>one</li> <!-- <li>two</li> --> </ul> <p>this is the second paragr...
paint-order - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies totext elementsinheritedyescom
puted valueas specifiedanimation typediscrete formal syntax normal | [ fill | stroke | markers ] examples reversing the paint order of stroke and fill svg <svg xmlns="http://www.w3.org/2000/svg" width="400" height="200"> <text x="10" y="75">stroke in front</text> <text x="10" y="150" class="stroke-behind">stroke behind</text> </svg> css text { font-family: sans-serif; font-size: 50px;...
<percentage> - CSS: Cascading Style Sheets
examples width and margin-left <div style="background-color:navy;"> <div style="width:50%; margin-left:20%; background-color:chartreuse;"> width: 50%, left margin: 20% </div> <div style="width:30%; margin-left:60%; background-color:pink;"> width: 30%, left margin: 60% </div> </div> the above html will out
put: font-size <div style="font-size:18px;"> <p>full-size text (18px)</p> <p><span style="font-size:50%;">50% (9px)</span></p> <p><span style="font-size:200%;">200% (36px)</span></p> </div> the above html will out
put: specifications specification status comment css values and units module level 4the definition of '<percentage>' in that specification.
perspective-origin - CSS: Cascading Style Sheets
formal definition initial value50% 50%applies totransformable elementsinheritednopercentagesrefer to the size of bounding boxcom
puted valuefor <length> the absolute value, otherwise a percentageanimation typesimple list of length, percentage, or calc formal syntax <position>where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
perspective - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies totransformable elementsinheritednocom
puted valuethe absolute length or noneanimation typea lengthcreates stacking contextyes formal syntax none | <length> examples setting perspective this example shows a cube with the perspective set at different positions.
place-content - CSS: Cascading Style Sheets
ize of the items is less than the size of the alignment container, any auto-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by max-height/max-width (or equivalent functionality), so that the combined size exactly fills the alignment container formal definition initial valuenormalapplies tomulti-line flex containersinheritednocom
puted valueas specifiedanimation typediscrete formal syntax <'align-content'> <'justify-content'>?
place-items - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:align-items: normaljustify-items: legacyapplies toall elementsinheritednocom
puted valueas each of the properties of the shorthand:align-items: as specifiedjustify-items: as specifiedanimation typediscrete formal syntax <'align-items'> <'justify-items'>?
pointer-events - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elementsinheritedyescom
puted valueas specifiedanimation typediscrete formal syntax auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all | inherit examples disabling pointer events on all images this example disables pointer events (clicking, dragging, hovering, etc.) on all images.
quotes - CSS: Cascading Style Sheets
formal definition initial valuedepends on user agentapplies toall elementsinheritedyescom
puted valueas specifiedanimation typediscrete formal syntax none | auto | [ <string> <string> ]+ examples basic quote marks html <q>to be or not to be.
resize - CSS: Cascading Style Sheets
resize does not apply to the following: inline elements block elements for which the overflow property is set to visible formal definition initial valuenoneapplies toelements with overflow other than visible, and optionally replaced elements representing images or videos, and iframesinheritednocom
puted valueas specifiedanimation typediscrete formal syntax none | both | horizontal | vertical | block | inline examples disabling resizability of textareas in many browsers, <textarea> elements are resizable by default.
rotate - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies totransformable elementsinheritednocom
puted valueas specifiedanimation typea transformcreates stacking contextyes formal syntax none | <angle> | [ x | y | z | <number>{3} ] && <angle> examples rotate an element on hover html <div> <p class="rotate">rotation</p> </div> css * { box-sizing: border-box; } html { font-family: sans-serif; } div { width: 150px; margin: 0 auto; } p { padding: 10px 5px; border: 3px solid...
row-gap (grid-row-gap) - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies tomulti-column elements, flex containers, grid containersinheritednopercentagesrefer to corresponding dimension of the content areacom
puted valueas specified, with <length>s made absolute, and normal com
puting to zero except on multi-column elementsanimation typea length, percentage or calc(); formal syntax normal | <length-percentage>where <length-percentage> = <length> | <percentage> examples flex layout html <div id="flexbox"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> c...
ruby-align - CSS: Cascading Style Sheets
formal definition initial valuespace-aroundapplies toruby bases, ruby annotations, ruby base containers, ruby annotation containersinheritedyescom
puted valueas specifiedanimation typediscrete formal syntax start | center | space-between | space-around examples ruby aligned at the start of the base text html <ruby> <rb>this is a long text to check</rb> <rp>(</rp><rt>short ruby</rt><rp>)</rp> </ruby> css ruby { ruby-align: start; } result ruby aligned at the center of the base text html <ruby> <rb>this is a long text t...
ruby-position - CSS: Cascading Style Sheets
formal definition initial valueoverapplies toruby annotations containersinheritedyescom
puted valueas specifiedanimation typediscrete formal syntax over | under | inter-character examples ruby positioned over the text html <ruby> <rb>超電磁砲</rb> <rp>(</rp><rt>レールガン</rt><rp>)</rp> </ruby> css ruby { ruby-position:over; } result ruby positioned under the text html <ruby> <rb>超電磁砲</rb> <rp>(</rp><rt>レールガン</rt><rp>)</rp> </...
scale - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies totransformable elementsinheritednocom
puted valueas specifiedanimation typea transformcreates stacking contextyes formal syntax none | <number>{1,3} examples scaling an element on hover html <div> <p class="scale">scaling</p> </div> css * { box-sizing: border-box; } html { font-family: sans-serif; } div { width: 150px; margin: 0 auto; } p { padding: 10px 5px; border: 3px solid black; border-radius: 20px; widt...
scroll-behavior - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscrolling boxesinheritednocom
puted valueas specifiedanimation typediscrete formal syntax auto | smooth examples setting smooth scroll behavior html <nav> <a href="#page-1">1</a> <a href="#page-2">2</a> <a href="#page-3">3</a> </nav> <scroll-container> <scroll-page id="page-1">1</scroll-page> <scroll-page id="page-2">2</scroll-page> <scroll-page id="page-3">3</scroll-page> </scroll-container> css a { display...
scroll-margin-block-end - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednocom
puted valueas specifiedanimation typeby com
puted value type formal syntax <length> specifications specification status comment css scroll snap module level 1the definition of 'scroll-margin-block-end' in that specification.
scroll-margin-block-start - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednocom
puted valueas specifiedanimation typeby com
puted value type formal syntax <length> specifications specification status comment css scroll snap module level 1the definition of 'scroll-margin-block-start' in that specification.
scroll-margin-block - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednocom
puted valueas specifiedanimation typeby com
puted value type formal syntax <length>{1,2} specifications specification status comment css scroll snap module level 1the definition of 'scroll-margin-block' in that specification.
scroll-margin-bottom - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednocom
puted valueas specifiedanimation typeby com
puted value type formal syntax <length> specifications specification status comment css scroll snap module level 1the definition of 'scroll-margin-bottom' in that specification.
scroll-margin-inline-end - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednocom
puted valueas specifiedanimation typeby com
puted value type formal syntax <length> examples simple demonstration this example implements something very similar to the interactive example above, except that here we'll explain to you how it's implemented.
scroll-margin-inline-start - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednocom
puted valueas specifiedanimation typeby com
puted value type formal syntax <length> examples simple demonstration this example implements something very similar to the interactive example above, except that here we'll explain to you how it's implemented.
scroll-margin-inline - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednocom
puted valueas specifiedanimation typeby com
puted value type formal syntax <length>{1,2} examples simple demonstration this example implements something very similar to the interactive example above, except that here we'll explain to you how it's implemented.
scroll-margin-left - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednocom
puted valueas specifiedanimation typeby com
puted value type formal syntax <length> specifications specification status comment css scroll snap module level 1the definition of 'scroll-margin-left' in that specification.
scroll-margin-right - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednocom
puted valueas specifiedanimation typeby com
puted value type formal syntax <length> specifications specification status comment css scroll snap module level 1the definition of 'scroll-margin-right' in that specification.
scroll-margin-top - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednocom
puted valueas specifiedanimation typeby com
puted value type formal syntax <length> specifications specification status comment css scroll snap module level 1the definition of 'scroll-margin-top' in that specification.
scroll-margin - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednocom
puted valueas specifiedanimation typeby com
puted value type formal syntax <length>{1,4} examples simple demonstration this example implements something very similar to the interactive example above, except that here we'll explain to you how it's implemented.
scroll-snap-align - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax [ none | start | end | center ]{1,2} specifications specification status comment css scroll snap module level 1the definition of 'scroll-snap-align' in that specification.
scroll-snap-coordinate - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednopercentagesrefer to the element’s border boxcom
puted valueas specified, but with relative lengths converted into absolute lengthsanimation typea position formal syntax none | <position>#where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
scroll-snap-destination - CSS: Cascading Style Sheets
formal definition initial value0px 0pxapplies toscroll containersinheritednopercentagesrelative to same axis of the padding-box of the scroll containercom
puted valueas specified, but with relative lengths converted into absolute lengthsanimation typea position formal syntax <position>where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
scroll-snap-points-x - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toscroll containersinheritednopercentagesrelative to same axis of the padding-box of the scroll containercom
puted valueas specified, but with relative lengths converted into absolute lengthsanimation typediscrete formal syntax none | repeat( <length-percentage> )where <length-percentage> = <length> | <percentage> examples setting horizontal scroll snap points html <div id="container"> <div>1</div> <div>2</div> <div>3</div> </div> css #container { width: 200px; overflow: auto; white-spac...
scroll-snap-points-y - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toscroll containersinheritednopercentagesrelative to same axis of the padding-box of the scroll containercom
puted valueas specified, but with relative lengths converted into absolute lengthsanimation typediscrete formal syntax none | repeat( <length-percentage> )where <length-percentage> = <length> | <percentage> examples setting vertical scroll snap points html <div id="container"> <div>1</div> <div>2</div> <div>3</div> </div> css #container { height: 200px; width: 220px; overflow-x: h...
scroll-snap-stop - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies toall elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax normal | always examples snapping in different axes this example is duplicated from scroll-snap-type with minor variances.
scroll-snap-type-x - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toscroll containersinheritednocom
puted valueas specifiedanimation typediscrete formal syntax none | mandatory | proximity specifications not part of any standard.
scroll-snap-type-y - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toscroll containersinheritednocom
puted valueas specifiedanimation typediscrete formal syntax none | mandatory | proximity specifications not part of any standard.
scroll-snap-type - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax none | [ x | y | block | inline | both ] [ mandatory | proximity ]?
scrollbar-color - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscrolling boxesinheritedyescom
puted valueas specifiedanimation typea color formal syntax auto | dark | light | <color>{2}where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]?
shape-image-threshold - CSS: Cascading Style Sheets
formal definition initial value0.0applies tofloatsinheritednocom
puted valuethe same as the specified value after clipping the <number> to the range [0.0, 1.0].animation typea number formal syntax <alpha-value>where <alpha-value> = <number> | <percentage> examples aligning text to a gradient this example creates a <div> block with a gradient background image.
shape-margin - CSS: Cascading Style Sheets
formal definition initial value0applies tofloatsinheritednopercentagesrefer to the width of the containing blockcom
puted valueas specified, but with relative lengths converted into absolute lengthsanimation typea length, percentage or calc(); formal syntax <length-percentage>where <length-percentage> = <length> | <percentage> examples adding a margin to a polygon html <section> <div class="shape"></div> we are not quite sure of any one thing in biology; our knowledge of geology is relatively very slight, an...
tab-size - CSS: Cascading Style Sheets
formal definition initial value8applies toblock containersinheritedyescom
puted valuethe specified integer or an absolute lengthanimation typea length formal syntax <integer> | <length> examples expanding by character count pre { tab-size: 4; /* set tab size to 4 characters wide */ } collapse tabs pre { tab-size: 0; /* remove indentation */ } comparing to the default size this example compares a default tab size with a custom tab size.
table-layout - CSS: Cascading Style Sheets
formal definition initial valueautoapplies totable and inline-table elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax auto | fixed examples fixed-width tables with text-overflow this example uses a fixed table layout, combined with the width property, to restrict the table's width.
text-align-last - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toblock containersinheritedyescom
puted valueas specifiedanimation typediscrete formal syntax auto | start | end | left | right | center | justify examples justifying the last line <p>integer elementum massa at nulla placerat varius.
text-align - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.8 | understanding wcag 2.0 formal definition initial valuestart, or a nameless value that acts as left if direction is ltr, right if direction is rtl if start is not supported by the browser.applies toblock containersinheritedyescom
puted valueas specified, except for the match-parent value which is calculated against its parent's direction value and results in a com
puted value of either left or rightanimation typediscrete formal syntax start | end | left | right | center | justify | match-parent examples left alignment html <p class="example"> integer elementum massa at nulla placerat varius.
text-decoration-color - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednocom
puted valuecom
puted 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> ]?
text-decoration-line - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednocom
puted valueas specifiedanimation typediscrete formal syntax none | [ underline | overline | line-through | blink ] | spelling-error | grammar-error examples <p class="wavy">here's some text with wavy red underline!</p> <p class="both">this text has lines both above and below it.</p> .wavy { text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; } .both {...
text-decoration-skip-ink - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elementsinheritedyescom
puted valueas specifiedanimation typediscrete formal syntax auto | all | none examples html <p>you should go on a quest for a cup of coffee.</p> <p class="no-skip-ink">or maybe you'd prefer some tea?</p> <p>この文は、 text-decoration-skip-ink: auto の使用例を示しています。</p> <p class="skip-ink-all">この文は、 text-decoration-skip-ink: all の使用例を示しています...
text-decoration-skip - CSS: Cascading Style Sheets
formal definition initial valueobjectsapplies toall elementsinheritedyescom
puted valueas specifiedanimation typediscrete formal syntax none | [ objects | [ spaces | [ leading-spaces | trailing-spaces ] ] | edges | box-decoration ] examples skipping edges html <p>hey, grab a cup of <em>coffee!</em></p> css p { margin: 0; font-size: 3em; text-decoration: underline; text-decoration-skip: edges; } result specifications specification status co...
text-decoration-style - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednocom
puted 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; }...
text-decoration-thickness - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the font size of the element itselfcom
puted valueas specifiedanimation typeby com
puted value type formal syntax auto | from-font | <length> | <percentage> examples varying thickness html <p class="thin">here's some text with a 1px red underline.</p> <p class="thick">this one has a 5px red underline.</p> <p class="shorthand">this uses the equivalent shorthand.</p> css .thin { text-decoration-line: underline; text-decoration-st...
text-decoration - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednocom
puted valueas each of the properties of the shorthand:text-decoration-line: as specifiedtext-decoration-style: as specifiedtext-decoration-color: com
puted colortext-decoration-thickness: as specifiedanimation typeas each of the properties of the shorthand:text-decoration-color: a colortext-decoration-style: discretetext-decoration-line: discretetext-decoration-thickness: by com
puted value type forma...
text-emphasis-color - CSS: Cascading Style Sheets
formal definition initial valuecurrentcolorapplies toall elementsinheritednocom
puted valuecom
puted 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> ]?
text-emphasis-position - CSS: Cascading Style Sheets
formal definition initial valueover rightapplies toall elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax [ over | under ] && [ right | left ] examples preferring ruby over emphasis marks some editors prefer to hide emphasis marks when they conflict with ruby.
text-justify - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toinline-level and table-cell elementsinheritedyescom
puted valueas specifiedanimation typediscrete formal syntax auto | inter-character | inter-word | none examples <p class="none"><code>text-justify: none</code> —<br>lorem ipsum dolor sit amet, consectetur adipiscing elit.
text-orientation - CSS: Cascading Style Sheets
formal definition initial valuemixedapplies toall elements, except table row groups, rows, column groups, and columnsinheritedyescom
puted valueas specifiedanimation typediscrete formal syntax mixed | upright | sideways examples html <p>lorem ipsum dolet semper quisquam.</p> css p { writing-mode: vertical-rl; text-orientation: upright; } result specifications specification status comment css writing modes module level 3the definition of 'text-orientation' in that specification.
text-overflow - CSS: Cascading Style Sheets
formal definition initial valueclipapplies toblock container elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax [ clip | ellipsis | <string> ]{1,2} examples css p { width: 200px; border: 1px solid; padding: 2px 5px; /* both of the following are required for text-overflow */ white-space: nowrap; overflow: hidden; } .overflow-visible { white-space: initial; } .overflow-clip { text-overflow: clip; } .overflow-ellipsis { text-o...
text-shadow - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyescom
puted valuea color plus three absolute lengthsanimation typea shadow list formal syntax none | <shadow-t>#where <shadow-t> = [ <length>{2,3} && <color>?
text-size-adjust - CSS: Cascading Style Sheets
formal definition initial valueauto for smartphone browsers supporting inflation, none in other cases (and then not modifiable).applies toall elementsinheritedyespercentagesyes, refer to the corresponding size of the text fontcom
puted valueas specifiedanimation typediscrete formal syntax none | auto | <percentage> examples basic disabling usage as hinted at above, on a properly designed responsive site the text-size-adjust behavior is not needed, so developers can elect to turn it off by specifying a vlaue of none: p { -webkit-text-size-adjust: none; text-size-adjust: none; } specifications specification...
text-underline-offset - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyespercentagesrefer to the font size of the element itselfcom
puted valueas specifiedanimation typeby com
puted value type formal syntax auto | <length> | <percentage> examples <p class="oneline">here's some text with an offset wavy red underline!</p> <br> <p class="twolines">this text has lines both above and below it.
touch-action - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | understanding wcag 2.0 formal definition initial valueautoapplies toall elements except: non-replaced inline elements, table rows, row groups, table columns, and column groupsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax auto | none | [ [ pan-x | pan-left | pan-right ] | [ pan-y | pan-up | pan-down ] | pinch-zoom ] | manipulation examples disabling all gestures the most common usage is to disable all gestures on an element (and its non-scrollable descendants) that provides its own dragging and zooming behavior – such as a map or game surface.
transform-box - CSS: Cascading Style Sheets
formal definition initial valueview-boxapplies totransformable elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax content-box | border-box | fill-box | stroke-box | view-box examples svg transform-origin scoping in this example we have an svg: <svg id="svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 50 50"> <g> <circle id="center" fill="red" r="1" transform="translate(25 25)" /> <circle id="boxcenter" fill="blue" r=".5" transform="t...
transform-origin - CSS: Cascading Style Sheets
the keywords are convenience shorthands and match the following <percentage> values: keyword value left 0% center 50% right 100% top 0% bottom 100% formal definition initial value50% 50% 0applies totransformable elementsinheritednopercentagesrefer to the size of bounding boxcom
puted valuefor <length> the absolute value, otherwise a percentageanimation typesimple list of length, percentage, or calc formal syntax [ <length-percentage> | left | center | right | top | bottom ] | [ [ <length-percentage> | left | center | right ] && [ <length-percentage> | top | center | bottom ] ] <length>?where <length-percentage> = <length> | <percentage> examples code sample ...
transform - CSS: Cascading Style Sheets
find out more: mdn understanding wcag, guideline 2.3 explanations understanding success criterion 2.3.3 | w3c understanding wcag 2.1 formal definition initial valuenoneapplies totransformable elementsinheritednopercentagesrefer to the size of bounding boxcom
puted valueas specified, but with relative lengths converted into absolute lengthsanimation typea transformcreates stacking contextyes formal syntax none | <transform-list>where <transform-list> = <transform-function>+where <transform-function> = <matrix()> | <translate()> | <translatex()> | <translatey()> | <scale()> | <scalex()> | <scaley()> | <rotate()> | <skew()> | <skewx()> | <skewy()> | <matr...
transition-delay - CSS: Cascading Style Sheets
formal definition initial value0sapplies toall elements, ::before and ::after pseudo-elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax <time># examples transition-delay: 0.5s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height ba...
transition-duration - CSS: Cascading Style Sheets
formal definition initial value0sapplies toall elements, ::before and ::after pseudo-elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax <time># examples transition-duration: 0.5s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height...
transition-property - CSS: Cascading Style Sheets
formal definition initial valueallapplies toall elements, ::before and ::after pseudo-elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax none | <single-transition-property>#where <single-transition-property> = all | <custom-ident> examples there are several examples of css transitions included in the main css transitions article.
transition - CSS: Cascading Style Sheets
formal definition initial valueas each of the properties of the shorthand:transition-delay: 0stransition-duration: 0stransition-property: alltransition-timing-function: easeapplies toall elements, ::before and ::after pseudo-elementsinheritednocom
puted valueas each of the properties of the shorthand:transition-delay: as specifiedtransition-duration: as specifiedtransition-property: as specifiedtransition-timing-function: as specifiedanimation typediscrete formal syntax <single-transition>#where <single-transition> = [ none | <single-transition-property> ] | <time> | <timing-function> | <time>where <single-transition-property> = all | <custo...
unicode-bidi - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies toall elements, though some values have no effect on non-inline elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax normal | embed | isolate | bidi-override | isolate-override | plaintext examples css .bible-quote { direction: rtl; unicode-bidi: embed; } html <div class="bible-quote"> a line of text </div> <div> another line of text </div> result specifications specification status comment css writing mode...
user-select - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toall elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax auto | text | none | contain | all examples html <p>you should be able to select this text.</p> <p class="unselectable">hey, you can't select this text!</p> <p class="all">clicking once will select all of this text.</p> css .unselectable { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: ...
vertical-align - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritednopercentagesrefer to the line-height of the element itselfcom
puted 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 a...
white-space - CSS: Cascading Style Sheets
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 elementsinheritedyescom
puted 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> <...
widows - CSS: Cascading Style Sheets
formal definition initial value2applies toblock container elementsinheritedyescom
puted valueas specifiedanimation typediscrete formal syntax <integer> examples controlling column widows html <div> <p>this is the first paragraph containing some text.</p> <p>this is the second paragraph containing some more text than the first one.
width - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | understanding wcag 2.0 formal definition initial valueautoapplies toall elements but non-replaced inline elements, table rows, and row groupsinheritednopercentagesrefer to the width of the containing blockcom
puted valuea percentage or auto or the absolute lengthanimation typea length, percentage or calc(); formal syntax auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> examples default width p.goldie { background: gold; } <p class="goldie">the mozilla community produces a lot of great software.</p> p...
will-change - CSS: Cascading Style Sheets
.slide { will-change: transform; } formal definition initial valueautoapplies toall elementsinheritednocom
puted valueas specifiedanimation typediscrete formal syntax auto | <animateable-feature>#where <animateable-feature> = scroll-position | contents | <custom-ident> examples via script this is an example showing how to apply the will-change property through scripting, which is probably what you should be doing in most cases.
word-spacing - CSS: Cascading Style Sheets
it also applies to ::first-letter and ::first-line.inheritedyespercentagesrefer to the width of the affected glyphcom
puted valuean optimum, minimum, and maximum value, each consisting of either an absolute length, a percentage, or the keyword normalanimation typea length formal syntax normal | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status comment css text module level 3the definition of 'word-spacing' in that specification.
zoom - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies toall elementsinheritednocom
puted valueas specifiedanimation typean integer formal syntax normal | reset | <number> | <percentage> examples first example html <p class="small">small</p> <p class="normal">normal</p> <p class="big">big</p> css p.small { zoom: 75%; } p.normal { zoom: normal; } p.big { zoom: 2.5; } p { display: inline-block; } p:hover { zoom: reset; } result second example html <div id="a" ...
math:max() - EXSLT
to com
pute the maximum value of the node-set, the node set is sorted into descending order as it would be using xsl:sort() with a data type of number.
math:min() - EXSLT
to com
pute the minimum value of the node-set, the node set is sorted into ascending order as it would be using xsl:sort() with a data type of number.
regexp:match() - EXSLT
for example: <xsl:for-each select="regexp:match('http://developer.mozilla.org/en/docs/firefox_3_for_developers', '(\w+):\/\/([^/:]+)(:\d*)?([^# ]*)')"> part <xsl:value-of select="position()" /> = <xsl:value-of select="." /> </xsl:for-each> this code generates the following out
put: part 1 = http://developer.mozilla.org/en/docs/firefox_3_for_developers part 2 = http part 3 = developer.mozilla.org part 4 = part 5 = /en/docs/firefox_3_for_developers specifications exslt - regexp:match ...
str:split() - EXSLT
example str:split('book, phone, com
puter, chair', ', ') returns a node set like: <token>book</token> <token>phone</token> <token>com
puter</token> <token>chair</token> specifications exslt - str:split ...
Block formatting context - Developer guides
see also float, clear css key concepts: css syntax, at-rule, comments, specificity and inheritance, the box, layout modes and visual formatting models, and margin collapsing, or the initial, com
puted, resolved, specified, used, and actual values.
HTML5 Parser - Developer guides
please note that you shouldn't use end tags for void elements that don't have end tags: <area>, <base>, <br>, <col>, <command>, <embed>, <hr>, <img>, <in
put>, <keygen>, <link>, <meta>, <param>, <source> and <wbr>.
Writing forward-compatible websites - Developer guides
here's an example that works in browsers without html5 support but breaks in a browser supporting html5: <form action="http://www.example.com"> <in
put type="submit" value="submit the form" </form> due to the missing > on the in
put tag.
<acronym> - HTML: Hypertext Markup Language
a few browsers not only add a dotted underline, but also
put it in small caps; to avoid this styling, adding something like font-variant: none in the css takes care of this case.
<bdi>: The Bidirectional Isolate element - HTML: Hypertext Markup Language
these elements instruct the browser to treat the name in isolation from its embedding context, so the example out
put is properly ordered: <ul> <li><bdi class="name">اَلأَعْشَى</bdi> - 1st place</li> <li><bdi class="name">jerry cruncher</bdi> - 2nd place</li> </ul> body { border: 1px solid #3f87a6; max-width: calc(100% - 40px - 6px); padding: 20px; width: calc(100% - 40px - 6px); border-width: 1px 1px 1px 5px; } specifications specification status comment ...
<datalist>: The HTML Data List element - HTML: Hypertext Markup Language
examples <label for="mybrowser">choose a browser from this list:</label> <in
put list="browsers" id="mybrowser" name="mybrowser" /> <datalist id="browsers"> <option value="chrome"> <option value="firefox"> <option value="internet explorer"> <option value="opera"> <option value="safari"> <option value="microsoft edge"> </datalist> result specifications specification status comment html living standardthe definition of '<datalist>' ...
<figure>: The Figure with Optional Caption element - HTML: Hypertext Markup Language
+ navigator.cookieenabled + "; "; txt+= "platform: " + navigator.platform + "; "; txt+= "user-agent header: " + navigator.useragent + "; "; console.log("navigatorexample", txt); } </pre> </figure> quotations <figure> <figcaption><cite>edsger dijkstra:</cite></figcaption> <blockquote>if debugging is the process of removing software bugs, then programming must be the process of
putting them in.</blockquote> </figure> poems <figure> <p style="white-space:pre"> bid me discourse, i will enchant thine ear, or like a fairy trip upon the green, or, like a nymph, with long dishevell'd hair, dance on the sands, and yet no footing seen: love is a spirit all compact of fire, not gross to sink, but light, and will aspire.</p> <figcaption><cite>venus and adonis</cite>, ...
<map> - HTML: Hypertext Markup Language
examples <map name="primary"> <area shape="circle" coords="75,75,75" href="left.html"> <area shape="circle" coords="275,75,75" href="right.html"> </map> <img usemap="#primary" src="https://udn.realityripple.com/samples/6a/7e559101b3.png" alt="350 x 150 pic"> result expected live example out
put the live example above should appear similar to the following images (when using your keyboard tab key): for the left.html link: for the right.html link specifications specification status comment html living standardthe definition of '<map>' in that specification.
<rb>: The Ruby Base element - HTML: Hypertext Markup Language
in this case we don't need to include <rb> elements: <ruby> 漢 <rp>(</rp><rt>kan</rt><rp>)</rp> 字 <rp>(</rp><rt>ji</rt><rp>)</rp> </ruby> <ruby> <rb>漢<rb>字 <rp>(</rp><rt>kan<rt>ji<rp>)</rp> </ruby> body { font-size: 22px; } the out
put looks like so: the html above might look something like this when rendered by a browser without ruby support: 漢字 (kan ji) body { font-size: 22px; } note: see the article about the <ruby> element for further examples.
<rt>: The Ruby Text element - HTML: Hypertext Markup Language
examples this simple example provides romaji transliteration for the kanji characters within the <ruby> element: <ruby> 漢 <rt>kan</rt> 字 <rt>ji</rt> </ruby> body { font-size: 22px; } the out
put looks like this in your browser: on a browser without ruby support, this example might look like this: 漢 kan 字 ji body { font-size: 22px; } specifications specification status comment html living standardthe definition of '<rt>' in that specification.
<strong>: The Strong Importance element - HTML: Hypertext Markup Language
examples basic example <p>before proceeding, <strong>make sure you
put on your safety goggles</strong>.</p> the resulting out
put: labeling warnings <p><strong>important:</strong> before proceeding, make sure you add plenty of butter.</p> this results in: specifications specification status comment html living standardthe definition of '<strong>' in that specification.
<time> - HTML: Hypertext Markup Language
4:39.929 2011-11-18 14:54:39.929 a valid global date and time string 2011-11-18t14:54:39.929z 2011-11-18t14:54:39.929-0400 2011-11-18t14:54:39.929-04:00 2011-11-18 14:54:39.929z 2011-11-18 14:54:39.929-0400 2011-11-18 14:54:39.929-04:00 a valid duration string pt4h18m3s examples simple example html <p>the concert starts at <time datetime="2018-07-07t20:00:00">20:00</time>.</p> out
put datetime example html <p>the concert took place on <time datetime="2001-05-15t19:00">may 15</time>.</p> out
put specifications specification status comment html living standardthe definition of '<time>' in that specification.
class - HTML: Hypertext Markup Language
though the specification doesn't
put requirements on the name of classes, web developers are encouraged to use names that describe the semantic purpose of the element, rather than the presentation of the element.
title - HTML: Hypertext Markup Language
some typical uses: labeling <iframe> elements for assistive technology providing a programmatically associated label for an <in
put> element as a fallback for a real <label> labeling controls in data tables additional semantics are attached to the title attributes of the <link>, <abbr>, <in
put>, and <menuitem> elements.
Evolution of HTTP - HTTP
ssl was
put on the standards track and eventually became tls, with versions 1.0, 1.1, 1.2, and 1.3 appearing successfully to close vulnerabilities.
MIME types (IANA media types) - HTTP
tipart document as a whole) --aboundarystring content-disposition: form-data; name="myfile"; filename="img.jpg" content-type: image/jpeg (data) --aboundarystring content-disposition: form-data; name="myfield" (data) --aboundarystring (more subparts) --aboundarystring-- the following <form>: <form action="http://localhost:8000/" method="post" enctype="multipart/form-data"> <label>name: <in
put name="mytextfield" value="test"></label> <label><in
put type="checkbox" name="mycheckbox"> check</label> <label>upload file: <in
put type="file" name="myfile" value="test.txt"></label> <button>send the file</button> </form> will send this message: post / http/1.1 host: localhost:8000 user-agent: mozilla/5.0 (macintosh; intel mac os x 10.9; rv:50.0) gecko/20100101 firefox/50.0 accept: text/h...
HTTP caching - HTTP
the expiration time is com
puted as follows: expirationtime = responsetime + freshnesslifetime - currentage where responsetime is the time at which the response was received according to the browser.
Configuring servers for Ogg media - HTTP
the out
put from oggz-info looks like this: $ oggz-info /g/media/bruce_vs_ironman.ogv content-duration: 00:01:00.046 skeleton: serialno 1976223438 4 packets in 3 pages, 1.3 packets/page, 27.508% ogg overhead presentation-time: 0.000 basetime: 0.000 theora: serialno 0170995062 1790 packets in 1068 pages, 1.7 packets/page, 1.049% ogg overhead video-framerate:...
Connection management in HTTP/1.x - HTTP
not all types of http requests can be pipelined: only idempotent methods, that is get, head,
put and delete, can be replayed safely: should a failure happen, the pipeline content can simply be repeated.
Content-Disposition - HTTP
when dealing with multiple files in the same field (for example, the multiple attribute of an <in
put type="file"> element), there can be several subparts with the same name.
CSP: form-action - HTTP
<meta http-equiv="content-security-policy" content="form-action 'none'"> <form action="javascript:alert('foo')" id="form1" method="post"> <in
put type="text" name="fieldname" value="fieldvalue"> <in
put type="submit" id="submit" value="submit"> </form> // error: refused to send form data because it violates the following // content security policy directive: "form-action 'none'".
CSP: navigate-to - HTTP
<meta http-equiv="content-security-policy" content="navigate-to 'none'"> <form action="javascript:alert('foo')" id="form1" method="post"> <in
put type="text" name="fieldname" value="fieldvalue"> <in
put type="submit" id="submit" value="submit"> </form> specifications specification status comment content security policy level 3the definition of 'navigate-to' in that specification.
ETag - HTTP
for example, when editing mdn, the current wiki content is hashed and
put into an etag in the response: etag: "33a64df551425fcc55e4d42a148795d9f25f89d4" when saving changes to a wiki page (posting data), the post request will contain the if-match header containing the etag values to check freshness against.
Expect - HTTP
put /somewhere/fun http/1.1 host: origin.example.com content-type: video/h264 content-length: 1234567890987 expect: 100-continue the server now checks the request headers and may respond with a 100 (continue) response to instruct the client to go ahead and send the message body, or it will send a 417 (expectation failed) status if any of the expectations cannot be met.
Feature-Policy: camera - HTTP
the http feature-policy header camera directive controls whether the current document is allowed to use video in
put devices.
HTTP Messages - HTTP
their start-line contain three elements: an http method, a verb (like get,
put or post) or a noun (like head or options), that describes the action to be performed.
200 OK - HTTP
the successful result of a
put or a delete is often not a 200 ok but a 204 no content (or a 201 created when the resource is uploaded for the first time).
204 No Content - HTTP
the common use case is to return 204 as a result of a
put request, updating a resource, without changing the current content of the page displayed to the user.
302 Found - HTTP
this is useful when you want to give a response to a
put method that is not the uploaded resource but a confirmation message such as: 'you successfully uploaded xyz'.
307 Temporary Redirect - HTTP
this is useful when you want to give an answer to a
put method that is not the uploaded resources, but a confirmation message (like "you successfully uploaded xyz").
412 Precondition Failed - HTTP
for example, when editing mdn, the current wiki content is hashed and
put into an etag in the response: etag: "33a64df551425fcc55e4d42a148795d9f25f89d4" when saving changes to a wiki page (posting data), the post request will contain the if-match header containing the etag values to check freshness against.
Expressions and operators - JavaScript
idates an object's value property, given the object and the high and low values: function validate(obj, lowval, hival) { if ((obj.value < lowval) || (obj.value > hival)) console.log('invalid value!'); } you could call validate in each form element's onchange event handler, using this to pass it to the form element, as in the following example: <p>enter a number between 18 and 99:</p> <in
put type="text" name="age" size=3 onchange="validate(this, 18, 99);"> grouping operator the grouping operator ( ) controls the precedence of evaluation in expressions.
Iterators and generators - JavaScript
for (let value of ['a', 'b', 'c']) { console.log(value); } // "a" // "b" // "c" [...'abc']; // ["a", "b", "c"] function* gen() { yield* ['a', 'b', 'c']; } gen().next(); // { value: "a", done: false } [a, b, c] = new set(['a', 'b', 'c']); a; // "a" advanced generators generators com
pute their yielded values on demand, which allows them to efficiently represent sequences that are expensive to com
pute (or even infinite sequences, as demonstrated above).
JavaScript modules - JavaScript
createreportlist() — creates an unordered list appended inside a specified wrapper element, which can be used to out
put report data into.
Numbers and dates - JavaScript
then, using the number of milliseconds per day, it com
putes the number of days between today and endyear, using gettime and rounding to a whole number of days.
Unicode property escapes - JavaScript
// ٢ is the digit 2 in arabic-indic notation // while it is predominantly written within the arabic script // it can also be written in the thaana script "٢".match(/\p{script=thaana}/u); // null as thaana is not the predominant script super() "٢".match(/\p{script_extensions=thaana}/u); // ["٢", index: 0, in
put: "٢", groups: undefined] unicode property escapes vs.
URIError: malformed URI sequence - JavaScript
if there isn't such a character, an error will be thrown: decodeuricomponent('%e0%a4%a'); // "urierror: malformed uri sequence" with proper in
put, this should usually look like something like this: decodeuricomponent('javascript_%d1%88%d0%b5%d0%bb%d0%bb%d1%8b'); // "javascript_шеллы" ...
SyntaxError: Unexpected token - JavaScript
correct would be
putting brackets around the ||: function round(n, upperbound, lowerbound){ if((n > upperbound) || (n < lowerbound)){ throw 'number ' + string(n) + ' is more than ' + string(upperbound) + ' or less than ' + string(lowerbound); }else if(n < ((upperbound + lowerbound)/2)){ return lowerbound; }else{ return upperbound; } } ...
Functions - JavaScript
for example, alert(new function()) out
puts: function anonymous() { } since the function actually does not have a name, anonymous is not a variable that can be accessed within the function.
Array.prototype.find() - JavaScript
dex ', index, ' with value ', value); }); // shows all indexes, including deleted array.find(function(value, index) { // delete element 5 on first iteration if (index === 0) { console.log('deleting array[5] with value ', array[5]); delete array[5]; } // element 5 is still visited even though deleted console.log('visited index ', index, ' with value ', value); }); // expected out
put: // deleting array[5] with value 5 // visited index 0 with value 0 // visited index 1 with value 1 // visited index 2 with value undefined // visited index 3 with value undefined // visited index 4 with value undefined // visited index 5 with value undefined // visited index 6 with value 6 specifications specification ecmascript (ecma-262)the definition of 'array.prototyp...
Array.prototype.flat() - JavaScript
flatdeep(val, d - 1) : val), []) : arr.slice(); }; flatdeep(arr, infinity); // [1, 2, 3, 4, 5, 6] use a stack // non recursive flatten deep using a stack // note that depth control is hard/inefficient as we will need to tag each value with its own depth // also possible w/o reversing on shift/unshift, but array ops on the end tends to be faster function flatten(in
put) { const stack = [...in
put]; const res = []; while(stack.length) { // pop value from stack const next = stack.pop(); if(array.isarray(next)) { // push back array items, won't modify the original in
put stack.push(...next); } else { res.push(next); } } // reverse to restore in
put order return res.reverse(); } const arr = [1, 2, [3, 4, [5, 6]]]; fla...
Array.prototype.forEach() - JavaScript
example code let ratings = [5, 4, 5]; let sum = 0; let sumfunction = async function (a, b) { return a + b } ratings.foreach(async function(rating) { sum = await sumfunction(sum, rating) }) console.log(sum) // naively expected out
put: 14 // actual out
put: 0 examples no operation for uninitialized values (sparse arrays) const arraysparse = [1,3,,7] let numcallbackruns = 0 arraysparse.foreach((element) => { console.log(element) numcallbackruns++ }) console.log("numcallbackruns: ", numcallbackruns) // 1 // 3 // 7 // numcallbackruns: 3 // comment: as you can see the missing value between 3 and 7 didn't invoke callback...
Array.prototype.join() - JavaScript
function f(a, b, c) { var s = array.prototype.join.call(arguments); console.log(s); // '1,a,true' } f(1, 'a', true); //expected out
put: "1,a,true" specifications specification ecmascript (ecma-262)the definition of 'array.prototype.join' in that specification.
Array.prototype.map() - JavaScript
to achieve the above, while avoiding the "gotcha": ['1', '2', '3'].map(number) // [1, 2, 3] // but unlike parseint(), number() will also return a float or (resolved) exponential notation: ['1.1', '2.2e2', '3e300'].map(number) // [1.1, 220, 3e+300] // for comparison, if we use parseint() on the array above: ['1.1', '2.2e2', '3e300'].map( str => parseint(str) ) // [1, 2, 3] one alternative out
put of the map method being called with parseint as a parameter runs as follows: let xs = ['10', '10', '10'] xs = xs.map(parseint) console.log(xs) // actual result of 10,nan,2 may be unexpected based on the above description.
Array.prototype.toString() - JavaScript
examples using tostring const array1 = [1, 2, 'a', '1a']; console.log(array1.tostring()); // expected out
put: "1,2,a,1a" specifications specification ecmascript (ecma-262)the definition of 'array.prototype.tostring' in that specification.
BigInt64Array - JavaScript
bigint64array.prototype.set() stores multiple values in the typed array, reading in
put values from a specified array.
BigUint64Array - JavaScript
biguint64array.prototype.set() stores multiple values in the typed array, reading in
put values from a specified array.
DataView - JavaScript
dataview accessors provide explicit control of how data is accessed, regardless of the executing com
puter's endianness.
Error.prototype.fileName - JavaScript
examples using filename var e = new error('could not parse in
put'); throw e; // e.filename could look like "file:///c:/example.html" specifications not part of any standard.
Error.prototype.lineNumber - JavaScript
examples using linenumber var e = new error('could not parse in
put'); throw e; console.log(e.linenumber) // 2 alternative example using error event window.addeventlistener('error', function(e) { console.log(e.linenumber); // 5 }); var e = new error('could not parse in
put'); throw e; this is not a standard feature and lacks widespread support.
Error.prototype.message - JavaScript
examples throwing a custom error var e = new error('could not parse in
put'); // e.message is 'could not parse in
put' throw e; specifications specification ecmascript (ecma-262)the definition of 'error.prototype.message' in that specification.
Error.prototype.name - JavaScript
examples throwing a custom error var e = new error('malformed in
put'); // e.name is 'error' e.name = 'parseerror'; throw e; // e.tostring() would return 'parseerror: malformed in
put' specifications specification ecmascript (ecma-262)the definition of 'error.prototype.name' in that specification.
Float32Array - JavaScript
float32array.prototype.set() stores multiple values in the typed array, reading in
put values from a specified array.
Float64Array - JavaScript
float64array.prototype.set() stores multiple values in the typed array, reading in
put values from a specified array.
Function.arguments - JavaScript
examples using the arguments object function f(n) { g(n - 1) } function g(n) { console.log('before: ' + g.arguments[0]) if (n > 0) { f(n) } console.log('after: ' + g.arguments[0]) } f(2) console.log('returned: ' + g.arguments) // out
put // before: 1 // before: 0 // after: 0 // after: 1 // returned: null specifications not part of any standard.
Generator.prototype.next() - JavaScript
hod returns: function* gen() { yield 1; yield 2; yield 3; } const g = gen(); // "generator { }" g.next(); // "object { value: 1, done: false }" g.next(); // "object { value: 2, done: false }" g.next(); // "object { value: 3, done: false }" g.next(); // "object { value: undefined, done: true }" using next() with a list function* getpage(pagesize = 1, list) { let out
put = []; let index = 0; while (index < list.length) { out
put = []; for (let i = index; i < index + pagesize; i++) { if (list[i]) { out
put.push(list[i]); } } yield out
put; index += pagesize; } } list = [1, 2, 3, 4, 5, 6, 7, 8] var page = getpage(3, list); // generator { } page.next(); // object {value: (3) [1,...
Int16Array - JavaScript
int16array.prototype.set() stores multiple values in the typed array, reading in
put values from a specified array.
Intl - JavaScript
examples formatting dates and numbers you can use intl to format dates and numbers in a form that's conventional for a specific language and region: const count = 26254.39; const date = new date("2012-05-24"); function log(locale) { console.log( `${new intl.datetimeformat(locale).format(date)} ${new intl.numberformat(locale).format(count)}` ); } log("en-us"); // expected out
put: 5/24/2012 26,254.39 log("de-de"); // expected out
put: 24.5.2012 26.254,39 specifications specification ecmascript internationalization api (ecma-402)the definition of 'intl' in that specification.
Math.log2() - JavaScript
note that it returns imprecise values on some in
puts (like 1 << 29), wrap into math.round() if working with bit masks.
Math.max() - JavaScript
the math.max() function returns the largest of the zero or more numbers given as in
put parameters.
Math - JavaScript
we use our degtorad() function to convert 60 degrees to radians, as math.tan() expects an in
put value in radians.
Number.isNaN() - JavaScript
number.isnan = number.isnan || function isnan(in
put) { return typeof in
put === 'number' && in
put !== in
put; } examples using isnan number.isnan(nan); // true number.isnan(number.nan); // true number.isnan(0 / 0); // true // e.g.
Object.freeze() - JavaScript
var employee = { name: "mayank", designation: "developer", address: { street: "rohini", city: "delhi" } }; object.freeze(employee); employee.name = "dummy"; // fails silently in non-strict mode employee.address.city = "noida"; // attributes of child object can be modified console.log(employee.address.city) // out
put: "noida" to make an object immutable, recursively freeze each property which is of type object (deep freeze).
Object.getOwnPropertyNames() - JavaScript
.prototype.prototypemethod = function() {}; console.log( object.getownpropertynames( new childclass() // ["prop", "method"] ) ); get non-enumerable properties only this uses the array.prototype.filter() function to remove the enumerable keys (obtained with object.keys()) from a list of all keys (obtained with object.getownpropertynames()) thus giving only the non-enumerable keys as out
put.
Object.prototype.toString() - JavaScript
by using radix you can also convert base 10 numbers (like 1,2,3,4,5,.........) to another base numbers, in example below we are converting base 10 number to a base 2 (binary) number let basetenint = 10; console.log(basetenint.tostring(2)); // expected out
put is "1010" and same for big integers let bignum = bigint(20); console.log(bignum.tostring(2)); // expected out
put is "10100" some common radix are 2 for binary numbers, 8 for octal numbers, 10 for decimal numbers, 16 for hexadecimal numbers.
Promise() constructor - JavaScript
the value received by promiseobj.then() is passed to the invocation of handlefulfilled as an in
put parameter (see "chained promises" section).
Promise.allSettled() - JavaScript
at that time, the returned promise's handler is passed as in
put an array containing the outcome of each promise in the original set of promises.
RegExp.prototype.compile() - JavaScript
flags if specified, flags can have any combination of the following values: g global match i ignore case m multiline; treat beginning and end characters (^ and $) as working over multiple lines (i.e., match the beginning or end of each line (delimited by \n or \r), not only the very beginning or end of the whole in
put string) y sticky; matches only from the index indicated by the lastindex property of this regular expression in the target string (and does not attempt to match from any later indexes).
RegExp.prototype.dotAll - JavaScript
examples using dotall var str1 = 'bar\nexample foo example'; var regex1 = new regexp('bar.example','s'); console.log(regex1.dotall); // out
put: true console.log(str1.replace(regex1,'')); // out
put: foo example var str2 = 'bar\nexample foo example'; var regex2 = new regexp('bar.example'); console.log(regex2.dotall); // out
put: false console.log(str2.replace(regex2,'')); // out
put: bar // example foo example specifications specification ecmascript (ecma-262)the definit...
RegExp.prototype.global - JavaScript
examples using global var regex = new regexp('foo', 'g'); console.log(regex.global); // true var str = 'fooexamplefoo'; var str1 = str.replace(regex, ''); console.log(str1); // out
put: example var regex1 = new regexp('foo'); var str2 = str.replace(regex1, ''); console.log(str2); // out
put: examplefoo specifications specification ecmascript (ecma-262)the definition of 'regexp.prototype.global' in that specification.
RegExp.$1-$9 - JavaScript
examples using $n with string.replace the following script uses the replace() method of the string instance to match a name in the format first last and out
put it in the format last, first.
RegExp.prototype.sticky - JavaScript
perhaps because of the bug, the es2015 specification specifically calls out the fact that: when the y flag is used with a pattern, ^ always matches only at the beginning of the in
put, or (if multiline is true) at the beginning of a line.
RegExp.prototype.test() - JavaScript
const str = 'hello world!'; const result = /^hello/.test(str); console.log(result); // true the following example logs a message which depends on the success of the test: function testin
put(re, str) { let midstring; if (re.test(str)) { midstring = 'contains'; } else { midstring = 'does not contain'; } console.log(`${str} ${midstring} ${re.source}`); } using test() on a regex with the "global" flag when a regex has the global flag set, test() will advance the lastindex of the regex.
String.fromCodePoint() - JavaScript
sult + stringfromcharcode.apply(null, codeunits); }; try { // ie 8 only supports `object.defineproperty` on dom elements object.defineproperty(string, "fromcodepoint", { "value": fromcodepoint, "configurable": true, "writable": true }); } catch(e) { string.fromcodepoint = fromcodepoint; } }(string.fromcharcode)); examples using fromcodepoint() valid in
put: string.fromcodepoint(42); // "*" string.fromcodepoint(65, 90); // "az" string.fromcodepoint(0x404); // "\u0404" == "Є" string.fromcodepoint(0x2f804); // "\ud87e\udc04" string.fromcodepoint(194564); // "\ud87e\udc04" string.fromcodepoint(0x1d306, 0x61, 0x1d307); // "\ud834\udf06a\ud834\udf07" invalid in
put: string.fromcodepoint('_'); // rangeerror string.fromcodepoint(infi...
String.prototype.padStart() - JavaScript
"foofoofabc" 'abc'.padstart(6,"123465"); // "123abc" 'abc'.padstart(8, "0"); // "00000abc" 'abc'.padstart(1); // "abc" fixed width string number conversion // javascript version of: (unsigned) // printf "%0*d" width num function leftfillnum(num, targetlength) { return num.tostring().padstart(targetlength, 0); } const num = 123; console.log(leftfillnum(num, 5)); // expected out
put: "00123" specifications specification ecmascript (ecma-262)the definition of 'string.prototype.padstart' in that specification.
String.raw() - JavaScript
// all kinds of escape characters will be ineffective // and backslashes will be present in the out
put string.
Symbol.asyncIterator - JavaScript
const myasynciterable = { async* [symbol.asynciterator]() { yield "hello"; yield "async"; yield "iteration!"; } }; (async () => { for await (const x of myasynciterable) { console.log(x); // expected out
put: // "hello" // "async" // "iteration!" } })(); when creating an api, remember that async iterables are designed to represent something iterable — like a stream of data or a list —, not to completely replace callbacks and events in most situations.
Symbol.iterator - JavaScript
writable no enumerable no configurable no examples user-defined iterables we can make our own iterables like this: var myiterable = {} myiterable[symbol.iterator] = function* () { yield 1; yield 2; yield 3; }; [...myiterable] // [1, 2, 3] or iterables can be defined directly inside a class or object using a com
puted property: class foo { *[symbol.iterator] () { yield 1; yield 2; yield 3; } } const someobj = { *[symbol.iterator] () { yield 'a'; yield 'b'; } } [...new foo] // [ 1, 2, 3 ] [...someobj] // [ 'a', 'b' ] non-well-formed iterables if an iterable's @@iterator method does not return an iterator object, then it is a non-well-formed iterable.
Symbol.replace - JavaScript
bol.replace writable no enumerable no configurable no examples using symbol.replace class customreplacer { constructor(value) { this.value = value; } [symbol.replace](string) { return string.replace(this.value, '#!@?'); } } console.log('football'.replace(new customreplacer('foo'))); // expected out
put: "#!@?tball" specifications specification ecmascript (ecma-262)the definition of 'symbol.replace' in that specification.
Symbol.search - JavaScript
writable no enumerable no configurable no examples custom string search class caseinsensitivesearch { constructor(value) { this.value = value.tolowercase(); } [symbol.search](string) { return string.tolowercase().indexof(this.value); } } console.log('foobar'.search(new caseinsensitivesearch('bar'))); // expected out
put: 3 specifications specification ecmascript (ecma-262)the definition of 'symbol.search' in that specification.
Symbol.split - JavaScript
property attributes of symbol.split writable no enumerable no configurable no examples custom reverse split class reversesplit { [symbol.split](string) { const array = string.split(' '); return array.reverse(); } } console.log('another one bites the dust'.split(new reversesplit())); // expected out
put: [ "dust", "the", "bites", "one", "another" ] specifications specification ecmascript (ecma-262)the definition of 'symbol.split' in that specification.
TypedArray.prototype.subarray() - JavaScript
description the range specified by begin and end is clamped to the valid index range for the current array; if the com
puted length of the new array would be negative, it's clamped to zero.
TypedArray - JavaScript
typedarray.prototype.set() stores multiple values in the typed array, reading in
put values from a specified array.
Uint16Array - JavaScript
uint16array.prototype.set() stores multiple values in the typed array, reading in
put values from a specified array.
Uint32Array - JavaScript
uint32array.prototype.set() stores multiple values in the typed array, reading in
put values from a specified array.
Uint8Array - JavaScript
uint8array.prototype.set() stores multiple values in the typed array, reading in
put values from a specified array.
Uint8ClampedArray - JavaScript
uint8clampedarray.prototype.set() stores multiple values in the typed array, reading in
put values from a specified array.
WebAssembly.Global() constructor - JavaScript
const out
put = document.getelementbyid('out
put'); function asserteq(msg, got, expected) { out
put.innerhtml += `testing ${msg}: `; if (got !== expected) out
put.innerhtml += `fail!<br>got: ${got}<br>expected: ${expected}<br>`; else out
put.innerhtml += `success!
WebAssembly.Global - JavaScript
const out
put = document.getelementbyid('out
put'); function asserteq(msg, got, expected) { out
put.innerhtml += `testing ${msg}: `; if (got !== expected) out
put.innerhtml += `fail!<br>got: ${got}<br>expected: ${expected}<br>`; else out
put.innerhtml += `success!
WebAssembly.Module.exports() - JavaScript
{ imports: { imported_func: function(arg) { console.log(arg); } } }; onmessage = function(e) { console.log('module received from main thread'); var mod = e.data; webassembly.instantiate(mod, importobject).then(function(instance) { instance.exports.exported_func(); }); var exports = webassembly.module.exports(mod); console.log(exports[0]); }; the exports[0] out
put looks like this: { name: "exported_func", kind: "function" } specifications specification webassembly javascript interfacethe definition of 'exports()' in that specification.
WebAssembly.Module.imports() - JavaScript
webassembly.compilestreaming(fetch('simple.wasm')) .then(function(mod) { var imports = webassembly.module.imports(mod); console.log(imports[0]); }); the out
put looks like this: { module: "imports", name: "imported_func", kind: "function" } specifications specification webassembly javascript interfacethe definition of 'imports()' in that specification.
escape() - JavaScript
… the escape() function com
putes a new string in which certain characters have been replaced by a hexadecimal escape sequence.
unescape() - JavaScript
… the unescape() function com
putes a new string in which hexadecimal escape sequences are replaced with the character that it represents.
Exponentiation (**) - JavaScript
that is, you cannot
put a unary operator (+/-/~/!/delete/void/typeof) immediately before the base number; doing so will cause a syntaxerror.
delete operator - JavaScript
var employee = {}; object.defineproperty(employee, 'name', {configurable: false}); console.log(delete employee.name); // returns false var, let, and const create non-configurable properties that cannot be deleted with the delete operator: var nameother = 'xyz'; // we can access this global property using: object.getownpropertydescriptor(window, 'nameother'); // out
put: object {value: "xyz", // writable: true, // enumerable: true, // configurable: false} // since "nameother" is added using with the // var keyword, it is marked as "non-configurable" delete nameother; // return false in strict mode, this would have raised an exception.
void operator - JavaScript
void function iife() { console.log("executed!"); }(); // out
put: "executed!" executing the above function without the void keyword will result in an uncaught syntaxerror.
continue - JavaScript
var i = 0; var j = 8; checkiandj: while (i < 4) { console.log('i: ' + i); i += 1; checkj: while (j > 4) { console.log('j: ' + j); j -= 1; if ((j % 2) == 0) continue checkj; console.log(j + ' is odd.'); } console.log('i = ' + i); console.log('j = ' + j); } out
put: i: 0 // start checkj j: 8 7 is odd.
for await...of - JavaScript
responsesize += chunk.length; } console.log(`response size: ${responsesize} bytes`); // expected out
put: "response size: 1071472" return responsesize; } getresponsesize('https://jsonplaceholder.typicode.com/photos'); iterating over sync iterables and generators for await...of loop also consumes sync iterables and generators.
for - JavaScript
ar oitnode = document.getelementbyid(sid); /* initialization */ oitnode; /* condition */ nleft += oitnode.offsetleft, ntop += oitnode.offsettop, oitnode = oitnode.offsetparent /* final-expression */ ); /* semicolon */ console.log('offset position of \'' + sid + '\' element:\n left: ' + nleft + 'px;\n top: ' + ntop + 'px;'); } /* example call: */ showoffsetpos('content'); // out
put: // "offset position of "content" element: // left: 0px; // top: 153px;" note: this is one of the few cases in javascript where the semicolon is mandatory.
function* - JavaScript
generator as an object method class foo { *generator () { yield 1; yield 2; yield 3; } } const f = new foo (); const gen = f.generator(); console.log(gen.next()); // { value: 1, done: false } console.log(gen.next()); // { value: 2, done: false } console.log(gen.next()); // { value: 3, done: false } console.log(gen.next()); // { value: undefined, done: true } generator as a com
puted property class foo { *[symbol.iterator] () { yield 1; yield 2; } } const someobj = { *[symbol.iterator] () { yield 'a'; yield 'b'; } } console.log(array.from(new foo)); // [ 1, 2 ] console.log(array.from(someobj)); // [ 'a', 'b' ] generators are not constructable function* f() {} var obj = new f; // throws "typeerror: f is not a constructor generator defined in a...
if...else - JavaScript
for example, do not use the following code: if (x = y) { /* do something */ } if you need to use an assignment in a conditional expression, a common practice is to
put additional parentheses around the assignment.
return - JavaScript
function counter() { for (var count = 1; ; count++) { // infinite loop console.log(count + 'a'); // until 5 if (count === 5) { return; } console.log(count + 'b'); // until 4 } console.log(count + 'c'); // never appears } counter(); // out
put: // 1a // 1b // 2a // 2b // 3a // 3b // 4a // 4b // 5a returning a function see also the article about closures.
throw - JavaScript
} else { throw new userexception('invalidmonthno'); } } try { // statements to try var mymonth = 15; // 15 is out of bound to raise the exception var monthname = getmonthname(mymonth); } catch (e) { monthname = 'unknown'; console.error(e.message, e.name); // pass exception object to err handler } another example of throwing an object the following example tests an in
put string for a u.s.
with - JavaScript
the scope chain change required by 'with' is not com
putationally expensive.
JavaScript
we have
put together a course that includes all the essential information you need to work towards your goal.
<mrow> - MathML
it simplifies the interpretation of the expression by automated systems such as com
puter algebra systems and audio renderers.
<ms> - MathML
the mathml <ms> element represents a string literal meant to be interpreted by programming languages and com
puter algebra systems.
<semantics> - MathML
in mathml there are two ways to mark up mathematics: presentation mathml is used to control the layout of equations, whereas content mathml is designed to encode the semantic mathematical meaning and to make expressions understandable to com
puter algebra systems.
MathML
authoring mathml suggestions and tips for writing mathml, including suggested mathml editors and how to integrate their out
put into web content.
Web media technologies
this technique can be used in both standard webgl applications presented on a flat com
puter screen, or in a webxr-generated virtual or augmented reality environment.
Progressive web app structure - Progressive web apps (PWAs)
self.addeventlistener('fetch', function(e) { e.respondwith( caches.match(e.request).then(function(r) { console.log('[service worker] fetching resource: '+e.request.url); return r || fetch(e.request).then(function(response) { return caches.open(cachename).then(function(cache) { console.log('[service worker] caching new resource: '+e.request.url); cache.
put(e.request, response.clone()); return response; }); }); }) ); }); the javascript data the games data is present in the data folder in a form of a javascript object (games.js): var games = [ { slug: 'lost-in-cyberspace', name: 'lost in cyberspace', author: 'zosia and bartek', twitter: 'bartaz', website: '', github:...
Making PWAs work offline with Service workers - Progressive web apps (PWAs)
ng it: self.addeventlistener('fetch', (e) => { e.respondwith( caches.match(e.request).then((r) => { console.log('[service worker] fetching resource: '+e.request.url); return r || fetch(e.request).then((response) => { return caches.open(cachename).then((cache) => { console.log('[service worker] caching new resource: '+e.request.url); cache.
put(e.request, response.clone()); return response; }); }); }) ); }); here, we respond to the fetch event with a function that tries to find the resource in the cache and return the response if it's there.
Structural overview of progressive web apps - Progressive web apps (PWAs)
self.addeventlistener('fetch', function(e) { e.respondwith( caches.match(e.request).then(function(r) { console.log('[service worker] fetching resource: '+e.request.url); return r || fetch(e.request).then(function(response) { return caches.open(cachename).then(function(cache) { console.log('[service worker] caching new resource: '+e.request.url); cache.
put(e.request, response.clone()); return response; }); }); }) ); }); auxiliary javascript file: games.js the games data for this app example is provided in a javascript source file called games.js.
Applying SVG effects to HTML content - SVG: Scalable Vector Graphics
<p class="blur">time to clean my glasses</p> <svg height="0"> <defs> <filter id="wherearemyglasses" x="0" y="0"> <fegaussianblur in="sourcegraphic" stddeviation="1"/> </filter> </defs> </svg> you can apply the svg and the css filter in the same class: .blur { filter: url(#wherearemyglasses); } blurring is com
putation heavy, so ensure to use it sparingly, especially in elements that get scrolled or animated.
SVG Event Attributes - SVG: Scalable Vector Graphics
ocument event attributes onabort, onerror, onresize, onscroll, onunload document element event attributes oncopy, oncut, onpaste global event attributes oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, onin
put, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwa...
bias - SVG: Scalable Vector Graphics
after applying the kernelmatrix of the <feconvolvematrix> element to the in
put image to yield a number and applied the divisor attribute, the bias attribute is added to each component.
divisor - SVG: Scalable Vector Graphics
the divisor attribute specifies the value by which the resulting number of applying the kernelmatrix of a <feconvolvematrix> element to the in
put image color value is divided to yield the destination color value.
k1 - SVG: Scalable Vector Graphics
the pixel composition is com
puted using the following formula: result = k1*i1*i2 + k2*i1 + k3*i2 + k4 only one element is using this attribute: <fecomposite> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="composite1" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" /> </filter> <filter id="composite2" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="10" k2="0" k3="0" k4="0" /> </filter> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0"...
k2 - SVG: Scalable Vector Graphics
the pixel composition is com
puted using the following formula: result = k1*i1*i2 + k2*i1 + k3*i2 + k4 only one element is using this attribute: <fecomposite> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="composite1" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="1" k3="0" k4="0" /> </filter> <filter id="composite2" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="10" k3="0" k4="0" /> </filter> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0"...
k3 - SVG: Scalable Vector Graphics
the pixel composition is com
puted using the following formula: result = k1*i1*i2 + k2*i1 + k3*i2 + k4 only one element is using this attribute: <fecomposite> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="composite1" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="0" k3="1" k4="0" /> </filter> <filter id="composite2" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="0" k3="10" k4="0" /> </filter> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0"...
k4 - SVG: Scalable Vector Graphics
the pixel composition is com
puted using the following formula: result = k1*i1*i2 + k2*i1 + k3*i2 + k4 only one element is using this attribute: <fecomposite> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="composite1" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" /> </filter> <filter id="composite2" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="10" k2="0" k3="0" k4="0.3" /> </filter> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="...
operator - SVG: Scalable Vector Graphics
arithmetic this value indicates that the source graphic defined in the in attribute and the destination graphic defined in the in2 attribute are combined using the following formula: result = k1*i1*i2 + k2*i1 + k3*i2 + k4 where: i1 and i2 indicate the corresponding pixel channel values of the in
put image, which map to in and in2 respectively, and k1,k2,k3,and k4 indicate the values of the attributes with the same name.
path - SVG: Scalable Vector Graphics
the effect of a motion path animation is a translation along the x- and y-axes of the current user coordinate system by the x and y values com
puted over time.
result - SVG: Scalable Vector Graphics
if no value is provided, the out
put will only be available for re-use as the implicit in
put into the next filter primitive if that filter primitive provides no value for its in attribute.
stroke-width - SVG: Scalable Vector Graphics
<!-- stroke width as a number --> <circle cx="15" cy="5" r="3" stroke="green" stroke-width="3" /> <!-- stroke width as a percentage --> <circle cx="25" cy="5" r="3" stroke="green" stroke-width="2%" /> </svg> usage notes value <length> | <percentage> default value 1px animatable yes note: a percentage value is always com
puted as a percentage of the normalized viewbox diagonal length.
SVG Attribute reference - SVG: Scalable Vector Graphics
es animation event attributes onbegin, onend, onrepeat document event attributes onabort, onerror, onresize, onscroll, onunload global event attributes oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, onin
put, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, onvolumechange, onwa...
SVG In HTML Introduction - SVG: Scalable Vector Graphics
e; } body.invalid #err { display:inline; } </style> <script> function signalerror() { document.getelementbyid('body').setattribute("class", "invalid"); } </script> </head> <body id="body" style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;"> <form> <fieldset> <legend>html form</legend> <p><label>enter something:</label> <in
put type="text"> <span id="err">incorrect value!</span></p> <p><in
put type="button" value="activate!" onclick="signalerror();"></p> </fieldset> </form> <svg viewbox="0 0 100 100" preserveaspectratio="xmidymid slice" style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;"> <lineargradient id="gradient"> <stop class="begin" offset="0%"/> <stop class="end"...
SVG fonts - SVG: Scalable Vector Graphics
<hkern u1="a" u2="v" k="20" /> referencing a font when you have
put together your font declaration as described above, you can just use a simple font-family attribute to actually apply the font to some svg text: <font> <font-face font-family="super sans" /> <!-- and so on --> </font> <text font-family="super sans">my text uses super sans</text> however, you are free to combine several methods for great freedom of how and where to define the font.
Texts - SVG: Scalable Vector Graphics
basics we have seen in the introducing example, that the text element can be used to
put arbitrary text in svg documents: <text x="10" y="10">hello world!</text> the x and y attributes determine, where in the viewport the text will appear.
Subdomain takeovers - Web security
put pressure on hosting vendors to close gaps; ask how they verify that someone claiming a virtual host actually has a legitimate claim to the domain name.
Using custom elements - Web Components
this.getattribute('img') : 'img/default.png'; const info = wrapper.appendchild(document.createelement('span')); info.setattribute('class','info'); // take attribute content and
put it inside the info span info.textcontent = this.getattribute('data-text'); // create some css to apply to the shadow dom const style = document.createelement('style'); style.textcontent = '.wrapper {' + // css truncated for brevity // attach the created elements to the shadow dom this.shadowroot.append(style,wrapper); finally, we register our custom element on the customelementregistry using...
lang - XPath
ven this fragment of xml: <p xml:lang="en">i went up a floor.</p> <p xml:lang="en-gb">i took the lift.</p> <p xml:lang="en-us">i rode the elevator.</p> and this part of an xsl template: <xsl:value-of select="count(//p[lang('en')])" /> <xsl:value-of select="count(//p[lang('en-gb')])" /> <xsl:value-of select="count(//p[lang('en-us')])" /> <xsl:value-of select="count(//p[lang('de')])" /> the out
put might be: 3 1 1 0 defined xpath 1.0 4.3 gecko support supported.
substring-after - XPath
examples xpath example out
put substring-after('aa-bb','-') bb substring-after('aa-bb','a') a-bb substring-after('aa-bb','b') b substring-after('aa-bb','q') (empty string) defined xpath 1.0 4.2 gecko support supported.
substring-before - XPath
examples xpath example out
put substring-before('aa-bb','-') aa substring-before('aa-bb','a') (empty string) substring-before('aa-bb','b') aa- substring-before('aa-bb','q') (empty string) defined xpath 1.0 4.2 gecko support supported.