Search completed in 1.02 seconds.
<html>: The HTML Document / Root element - HTML: Hypertext Markup Language
the
html <
html> element represents the root (top-level element) of an
html document, so it is also referred to as the root element.
... the
html <
html> element represents the root (top-level element) of an
html document, so it is also referred to as the root element.
...of an
html document, so it is also referred to as the root element.
...And 16 more matches
HTML documentation index - HTML: Hypertext Markup Language
found 237 pages: # page tags and summary 1
html: hypertext markup language
html,
html5, landing, web, l10n:priority
html (hypertext markup language) is the most basic building block of the web.
... found 237 pages: # page tags and summary 1
html: hypertext markup language
html,
html5, landing, web, l10n:priority
html (hypertext markup language) is the most basic building block of the web.
... landing, web, l10n:priority
html (hypertext markup language) is the most basic building block of the web.
...And 712 more matches
HTML elements reference - HTML: Hypertext Markup Language
this page lists all the
html elements, which are created using tags.
... this page lists all the
html elements, which are created using tags.
... this page lists all the
html elements, which are created using tags.
...And 176 more matches
HTMLHtmlElement - Web APIs
the
htmlhtmlelement interface serves as the root node for a given
html document.
... the
htmlhtmlelement interface serves as the root node for a given
html document.
... the
htmlhtmlelement interface serves as the root node for a given
html document.
...And 23 more matches
Date and time formats used in HTML - HTML: Hypertext Markup Language
certain
html elements use date and/or time values.
...lements, whose datetime attribute specifies the date or date and time at which the insertion or deletion of content occurred.
...he 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.
...And 10 more matches
HTML attribute reference - HTML: Hypertext Markup Language
elements in
html have attributes; these are additional values that configure the elements or adjust their behavior in various ways to meet the criteria the users want.
... note: this is a legacy attribute.
...spot region.
...And 9 more matches
HTML reference - HTML: Hypertext Markup Language
this
html reference describes all elements and attributes of
html, including global attributes that apply to all elements.
... this
html reference describes all elements and attributes of
html, including global attributes that apply to all elements.
... this
html reference describes all elements and attributes of
html, including global attributes that apply to all elements.
...And 7 more matches
<select>: The HTML Select element - HTML: Hypertext Markup Language
the
html <select> element represents a control that provides a menu of options: the source for this interactive example is stored in a github repository.
...ibutes such as required, disabled, autofocus, etc.
...attribute indicating that an option with a non-empty string value must be selected.
...And 6 more matches
HTMLLabelElement.htmlFor - Web APIs
the
htmllabelelement.
htmlfor property reflects the value of the for content property.
... the
htmllabelelement.
htmlfor property reflects the value of the for content property.
... the
htmllabelelement.
htmlfor property reflects the value of the for content property.
...And 5 more matches
<option>: The HTML Option element - HTML: Hypertext Markup Language
the
html <option> element is used to define an item contained in a <select>, an <optgroup>, or a <datalist> element.
... the
html <option> element is used to define an item contained in a <select>, an <optgroup>, or a <datalist> element.
... tag omission the start tag is mandatory.
...And 3 more matches
HTML attribute: rel - HTML: Hypertext Markup Language
link stylesheet imports a style sheet.
... document has no particular relationship with the destination resource other than there being a hyperlink between the two.
...e content in a different format.
...And 2 more matches
HTML attribute: readonly - HTML: Hypertext Markup Language
modify dynamically the value of the readonly attribute is through a script.
...o buttons</legend> <p><label> <input type="radio" name="radio" value="regular"> regular </label></p> <p><label> <input type="radio" name="radio" value="readonly" readonly> readonly </label></p> <p><label> <input type="radio" name="radio" value="disabled" disabled> disabled </label></p> </fieldset> specifications specification status comment
html living standardthe definition of 'readonly attribute' in that specification.
...<label> <input type="radio" name="radio" value="readonly" readonly> readonly </label></p> <p><label> <input type="radio" name="radio" value="disabled" disabled> disabled </label></p> </fieldset> specifications specification status comment
html living standardthe definition of 'readonly attribute' in that specification.
...<p><label> <input type="radio" name="radio" value="disabled" disabled> disabled </label></p> </fieldset> specifications specification status comment
html living standardthe definition of 'readonly attribute' in that specification.
HTML attribute: required - HTML: Hypertext Markup Language
, but adding aria-required="true" doesn't hurt, in case the browser / screen reader combination does not support required yet.
...equired yet.
...ty string, then the element is suffering from valuemissing and the element will match the :invalid pseudo class.
...ed attribute' in that specification.
<datalist>: The HTML Data List element - HTML: Hypertext Markup Language
the
html <datalist> element contains a set of <option> elements that represent the permissible or recommended options available to choose from within other controls.
...egories flow content, phrasing content.
...er">choose a browser from this list:</label> <input 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>' in that specification.
...talist 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>' in that specification.
HTML attribute: accept - HTML: Hypertext Markup Language
the accept attribute takes as its value a comma-separated list of one or more file types, or unique file type specifiers, describing which file types to allow.
...more complete example: <form method="post" enctype="multipart/form-data"> <div> <label for="profile_pic">choose file to upload</label> <input type="file" id="profile_pic" name="profile_pic" accept=".jpg, .jpeg, .png"> </div> <div> <button>submit</button> </div> </form> div { margin-bottom: 10px; } specifications specification status
html living standardthe definition of 'accept attribute' in that specification.
...ic">choose file to upload</label> <input type="file" id="profile_pic" name="profile_pic" accept=".jpg, .jpeg, .png"> </div> <div> <button>submit</button> </div> </form> div { margin-bottom: 10px; } specifications specification status
html living standardthe definition of 'accept attribute' in that specification.
HTML attribute: pattern - HTML: Hypertext Markup Language
de information informing users how to fill out the the control to match the requirements.
... are used by some browsers to populate error messaging, because browsers sometimes also show the title as text on hover, it therefore shows in non-error situations, so be careful not to word titles as if an error has occurred.
...ow the title as text on hover, it therefore shows in non-error situations, so be careful not to word titles as if an error has occurred.
HTML attribute: crossorigin - HTML: Hypertext Markup Language
https://example.com/example-framework.js" crossorigin="anonymous"></script> example: webmanifest with credentials the use-credentials value must be used when fetching a manifest that requires credentials, even if the file is from the same origin.
...use-credentials value must be used when fetching a manifest that requires credentials, even if the file is from the same origin.
HTML attribute: size - HTML: Hypertext Markup Language
="5"> <option>banana</option> <option>cherry</option> <option>strawberry</option> <option>durian</option> <option>blueberry</option> </select> <select name="vegetables" size="5"> <option>carrot</option> <option>cucumber</option> <option>cauliflower</option> <option>celery</option> <option>collard greens</option> </select> specifications specification status
html living standardthe definition of 'size attribute' in that specification.
...option> <option>blueberry</option> </select> <select name="vegetables" size="5"> <option>carrot</option> <option>cucumber</option> <option>cauliflower</option> <option>celery</option> <option>collard greens</option> </select> specifications specification status
html living standardthe definition of 'size attribute' in that specification.
HTML attribute: step - HTML: Hypertext Markup Language
ill only show valid float values of 1.2 and greater note: when the data entered by the user doesn't adhere to the stepping configuration, the value is considered invalid in contraint validation and will match the :invalid and :out-of-range pseudoclasses see client-side validation and stepmismatch for more information.
... to the stepping configuration, the value is considered invalid in contraint validation and will match the :invalid and :out-of-range pseudoclasses see client-side validation and stepmismatch for more information.
HTMLHtmlElement.version - Web APIs
this property has been declared as deprecated by the w3c technical recommendation for
html 4.01 in favor of use of the dtd for obtaining version information for a document.
HTML attribute: capture - HTML: Hypertext Markup Language
type="file" id="videofile" capture="environment" accept="video/*"> </p> <p> <label for="imagefile">upload a photo of yourself:</label> <input type="file" id="imagefile" capture="user" accept="image/*"> </p> note these work better on mobile devices; if your device is a desktop computer, you'll likely get a typical file picker.
The HTML DOM API - Web APIs
the
html dom api is made up of the interfaces that define the functionality of each of the elements in
html, as well as any supporting types and interfaces they rely upon.
... the
html dom api is made up of the interfaces that define the functionality of each of the elements in
html, as well as any supporting types and interfaces they rely upon.
... the
html dom api is made up of the interfaces that define the functionality of each of the elements in
html, as well as any supporting types and interfaces they rely upon.
...And 88 more matches
HTMLMediaElement - Web APIs
the
htmlmediaelement interface adds to
htmlelement the properties and methods needed to support basic media-related capabilities that are common to audio and video.
... the
htmlmediaelement interface adds to
htmlelement the properties and methods needed to support basic media-related capabilities that are common to audio and video.
... the
htmlmediaelement interface adds to
htmlelement the properties and methods needed to support basic media-related capabilities that are common to audio and video.
...And 80 more matches
Properly Using CSS and JavaScript in XHTML Documents - Archive of obsolete content
x
html™ 1.0 the extensible hypertext markup language (second edition) defines x
html to be a reformulation of
html 4 as an xml 1.0 application.
... x
html™ 1.0 the extensible hypertext markup language (second edition) defines x
html to be a reformulation of
html 4 as an xml 1.0 application.
... x
html™ 1.0 the extensible hypertext markup language (second edition) defines x
html to be a reformulation of
html 4 as an xml 1.0 application.
...And 68 more matches
Getting started with HTML - Learn web development
overview: introduction to
html next in this article we cover the absolute basics of
html.
... overview: introduction to
html next in this article we cover the absolute basics of
html.
... overview: introduction to
html next in this article we cover the absolute basics of
html.
...And 68 more matches
HTML parser threading
html parser threading the
html parser parses data received from the network off the main thread.
...
html parser threading the
html parser parses data received from the network off the main thread.
...om the network off the main thread.
...And 61 more matches
Adding HTML Elements - Archive of obsolete content
« previousnext » now that we've added some buttons, let's add some other elements.
... « previousnext » now that we've added some buttons, let's add some other elements.
... « previousnext » now that we've added some buttons, let's add some other elements.
...And 58 more matches
HTMLAnchorElement - Web APIs
the
htmlanchorelement interface represents hyperlink elements and provides special properties and methods (beyond those of the regular
htmlelement object interface that they inherit from) for manipulating the layout and presentation of such elements.
... the
htmlanchorelement interface represents hyperlink elements and provides special properties and methods (beyond those of the regular
htmlelement object interface that they inherit from) for manipulating the layout and presentation of such elements.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...And 58 more matches
HTMLElement - Web APIs
the
htmlelement interface represents any
html element.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
htmlelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits propert...
..." y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
htmlelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent, element, and implements those from documentandelementeventhandlers, elementcssinlinestyle, globaleventhandlers,
htmlorforeignelement and toucheventhandlers.
...And 55 more matches
HTMLSelectElement - Web APIs
the
htmlselectelement interface represents a <select>
html element.
... the
htmlselectelement interface represents a <select>
html element.
... the
htmlselectelement interface represents a <select>
html element.
...And 54 more matches
HTMLObjectElement - Web APIs
the
htmlobjectelement interface provides special properties and methods (beyond those on the
htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of <object> element, representing external resources.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...,monaco,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/
htmlobjectelement" 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">
htmlobjectelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inh...
...And 52 more matches
HTMLAreaElement - Web APIs
the
htmlareaelement interface provides special properties and methods (beyond those of the regular object
htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of <area> elements.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...,monaco,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/
htmlareaelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
htmlareaelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherit...
...And 50 more matches
HTMLImageElement - Web APIs
the
htmlimageelement interface represents an
html <img> element, providing the properties and methods used to manipulate image elements.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...,monaco,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/
htmlimageelement" 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">
htmlimageelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor im...
...And 50 more matches
Writing JavaScript for XHTML - Archive of obsolete content
in practise, very few x
html documents are served over the web with the correct mime media type, application/x
html+xml.
... in practise, very few x
html documents are served over the web with the correct mime media type, application/x
html+xml.
... in practise, very few x
html documents are served over the web with the correct mime media type, application/x
html+xml.
...And 49 more matches
Element.innerHTML - Web APIs
the element property inner
html gets or sets the
html or xml markup contained within the element.
... the element property inner
html gets or sets the
html or xml markup contained within the element.
... the element property inner
html gets or sets the
html or xml markup contained within the element.
...And 46 more matches
HTMLTableElement - Web APIs
the
htmltableelement interface provides special properties and methods (beyond the regular
htmlelement object interface it also has available to it by inheritance) for manipulating the layout and presentation of tables in an
html document.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...,monaco,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/
htmltableelement" 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">
htmltableelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inher...
...And 44 more matches
Handling common HTML and CSS problems - Learn web development
previous overview: cross browser testing next with the scene set, we'll now look specifically at the common cross-browser problems you will come across in
html and css code, and what tools can be used to prevent problems from happening, or fix problems that occur.
...ss-browser problems you will come across in
html and css code, and what tools can be used to prevent problems from happening, or fix problems that occur.
... this includes linting code, handling css prefixes, using browser dev tools to track down problems, using polyfills to add support into browsers, tackling responsive design problems, and more.
...And 43 more matches
HTML: A good basis for accessibility - Learn web development
previous overview: accessibility next a great deal of web content can be made accessible just by making sure the correct hypertext markup language elements are used for the correct purpose at all times.
... previous overview: accessibility next a great deal of web content can be made accessible just by making sure the correct hypertext markup language elements are used for the correct purpose at all times.
... previous overview: accessibility next a great deal of web content can be made accessible just by making sure the correct hypertext markup language elements are used for the correct purpose at all times.
...And 42 more matches
HTML: A good basis for accessibility - Learn web development
previous overview: accessibility next a great deal of web content can be made accessible just by making sure the correct hypertext markup language elements are used for the correct purpose at all times.
... previous overview: accessibility next a great deal of web content can be made accessible just by making sure the correct hypertext markup language elements are used for the correct purpose at all times.
... previous overview: accessibility next a great deal of web content can be made accessible just by making sure the correct hypertext markup language elements are used for the correct purpose at all times.
...And 42 more matches
What’s in the head? Metadata in HTML - Learn web development
previous overview: introduction to
html next the head of an
html document is the part that is not displayed in the web browser when the page is loaded.
... previous overview: introduction to
html next the head of an
html document is the part that is not displayed in the web browser when the page is loaded.
... previous overview: introduction to
html next the head of an
html document is the part that is not displayed in the web browser when the page is loaded.
...And 41 more matches
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
the
html <input> 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 input data and control widgets are available, depending on the device and user agent.
... the
html <input> 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 input data and control widgets are available, depending on the device and user agent.
...of the value attribute, empty by default.
...And 41 more matches
HTML: Hypertext Markup Language
html (hypertext markup language) is the most basic building block of the web.
...
html (hypertext markup language) is the most basic building block of the web.
...o describe a web page's appearance/presentation (css) or functionality/behavior (javascript).
...And 40 more matches
Debugging HTML - Learn web development
previous overview: introduction to
html next writing
html is fine, but what if something goes wrong, and you can't work out where the error in the code is?
... previous overview: introduction to
html next writing
html is fine, but what if something goes wrong, and you can't work out where the error in the code is?
... previous overview: introduction to
html next writing
html is fine, but what if something goes wrong, and you can't work out where the error in the code is?
...And 38 more matches
HTMLFormElement - Web APIs
the
htmlformelement interface represents a <form> element in the dom.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...,monaco,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/
htmlformelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
htmlformelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this in...
...And 38 more matches
HTML text fundamentals - Learn web development
previous overview: introduction to
html next one of
html's main jobs is to give text structure and meaning (also known as semantics) so that a browser can display it correctly.
... previous overview: introduction to
html next one of
html's main jobs is to give text structure and meaning (also known as semantics) so that a browser can display it correctly.
... previous overview: introduction to
html next one of
html's main jobs is to give text structure and meaning (also known as semantics) so that a browser can display it correctly.
...And 36 more matches
Examine and edit HTML - Firefox Developer Tools
you can examine and edit the page's
html in the
html pane.
... you can examine and edit the page's
html in the
html pane.
... you can examine and edit the page's
html in the
html pane.
...And 36 more matches
HTMLButtonElement - Web APIs
the
htmlbuttonelement interface provides properties and methods (beyond the regular
htmlelement interface it also has available to it by inheritance) for manipulating <button> elements.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...,monaco,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/
htmlbuttonelement" 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">
htmlbuttonelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inh...
...And 36 more matches
HTMLIFrameElement - Web APIs
the
htmliframeelement interface provides special properties and methods (beyond those of the
htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of inline frame elements.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...,monaco,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/
htmliframeelement" 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">
htmliframeelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inh...
...And 35 more matches
HTML5 - Developer guides
html5 is the latest evolution of the standard that defines
html.
...
html5 is the latest evolution of the standard that defines
html.
...
html5 is the latest evolution of the standard that defines
html.
...And 35 more matches
HTMLLinkElement - Web APIs
the
htmllinkelement interface represents reference information for external resources and the relationship of those resources to a document and vice-versa (corresponds to <link> element; not to be confused with <a>, which is represented by
htmlanchorelement).
... the
htmllinkelement interface represents reference information for external resources and the relationship of those resources to a document and vice-versa (corresponds to <link> element; not to be confused with <a>, which is represented by
htmlanchorelement).
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...And 31 more matches
HTMLVideoElement - Web APIs
the
htmlvideoelement interface provides special properties and methods for manipulating video objects.
... the
htmlvideoelement interface provides special properties and methods for manipulating video objects.
... the
htmlvideoelement interface provides special properties and methods for manipulating video objects.
...And 31 more matches
HTML5 Parser - Developer guides
gecko 2 introduces a new parser, based on
html5.
... gecko 2 introduces a new parser, based on
html5.
... gecko 2 introduces a new parser, based on
html5.
...And 31 more matches
HTML to DOM - Archive of obsolete content
although you can now natively parse
html using domparser and xmlhttprequest, this is a new feature that is not yet supported by all browsers in use in the wild.
... although you can now natively parse
html using domparser and xmlhttprequest, this is a new feature that is not yet supported by all browsers in use in the wild.
... although you can now natively parse
html using domparser and xmlhttprequest, this is a new feature that is not yet supported by all browsers in use in the wild.
...And 30 more matches
HTML table basics - Learn web development
overview: tables next this article gets you started with
html tables, covering the very basics such as rows and cells, headings, making cells span multiple columns and rows, and how to group together all the cells in a column for styling purposes.
... overview: tables next this article gets you started with
html tables, covering the very basics such as rows and cells, headings, making cells span multiple columns and rows, and how to group together all the cells in a column for styling purposes.
... overview: tables next this article gets you started with
html tables, covering the very basics such as rows and cells, headings, making cells span multiple columns and rows, and how to group together all the cells in a column for styling purposes.
...And 30 more matches
HTML in XUL for rich tooltips - Archive of obsolete content
this example demonstrates the dynamic injection of
html into a xul element.
... this example demonstrates the dynamic injection of
html into a xul element.
... this example demonstrates the dynamic injection of
html into a xul element.
...And 29 more matches
HTML basics - Learn web development
previous overview: getting started with the web next
html (hypertext markup language) is the code that is used to structure a web page and its content.
... previous overview: getting started with the web next
html (hypertext markup language) is the code that is used to structure a web page and its content.
... previous overview: getting started with the web next
html (hypertext markup language) is the code that is used to structure a web page and its content.
...And 28 more matches
nsIHTMLEditor
editor/idl/nsi
htmleditor.idlscriptable please add a summary to this article.
...d dodrag(in nsidomevent aevent); void getalignment(out boolean amixed, out short aalign); astring getbackgroundcolorstate(out boolean amixed); nsidomelement getelementorparentbytagname(in astring atagname, in nsidomnode anode); astring getfontcolorstate(out boolean amixed); astring getfontfacestate(out boolean amixed); astring getheadcontentsas
html(); astring gethighlightcolorstate(out boolean amixed); void getindentstate(out boolean acanindent, out boolean acanoutdent); void getinlineproperty(in nsiatom aproperty, in astring aattribute, in astring avalue, out boolean afirst, out boolean aany, out boolean aall); astring getinlinepropertywithattrvalue(in nsiatom aproperty, in astring aattribute, in astring...
...delement(in astring 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 insert
html(in astring ainputstring); void insert
htmlwithcontext(in astring ainputstring, 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 ...
...And 28 more matches
HTMLScriptElement - Web APIs
html <script> elements expose the
htmlscriptelement interface, which provides special properties and methods for manipulating the behavior and execution of <script> elements (beyond the inherited
htmlelement interface).
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...,monaco,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/
htmlscriptelement" 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">
htmlscriptelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inh...
...And 27 more matches
Global attributes - HTML: Hypertext Markup Language
global attributes are attributes common to all
html elements; they can be used on all elements, though they may have no effect on some elements.
... global attributes are attributes common to all
html elements; they can be used on all elements, though they may have no effect on some elements.
... global attributes are attributes common to all
html elements; they can be used on all elements, though they may have no effect on some elements.
...And 27 more matches
HTMLFieldSetElement - Web APIs
the
htmlfieldsetelement interface provides special properties and methods (beyond the regular
htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of <fieldset> elements.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...,monaco,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/
htmlfieldsetelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
htmlfieldsetelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties ...
...And 26 more matches
HTMLMarqueeElement - Web APIs
the
htmlmarqueeelement interface provides methods to manipulate <marquee> elements.
... the
htmlmarqueeelement interface provides methods to manipulate <marquee> elements.
...inherits properties and methods from the
htmlelement interface.
...And 26 more matches
HTMLOutputElement - Web APIs
the
htmloutputelement interface provides properties and methods (beyond those inherited from
htmlelement) for manipulating the layout and presentation of <output> elements.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...,monaco,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/
htmloutputelement" 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">
htmloutputelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties thi...
...And 26 more matches
HTMLTableCellElement - Web APIs
the
htmltablecellelement interface provides special properties and methods (beyond the regular
htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of table cells, either header or data cells, in an
html document.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...,monaco,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/
htmltablecellelement" target="_top"><rect x="291" y="65" width="200" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
htmltablecellelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} propertie...
...And 26 more matches
Using HTML sections and outlines - Developer guides
important: there are no implementations of the proposed outline algorithm in web browsers nor assistive technology; it was never part of a final w3c specification.
...e structure of documents.
...s and voice assistants.
...And 26 more matches
HTMLOptionElement - Web APIs
the
htmloptionelement interface represents <option> elements and inherits all classes and methods of the
htmlelement interface.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...,monaco,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/
htmloptionelement" 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">
htmloptionelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inh...
...And 23 more matches
HTMLTableRowElement - Web APIs
the
htmltablerowelement interface provides special properties and methods (beyond the
htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of rows in an
html table.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...,monaco,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/
htmltablerowelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
htmltablerowelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties ...
...And 23 more matches
Introduction to HTML5 - Developer guides
html5 is the fifth revision and newest version of the
html standard.
...
html5 is the fifth revision and newest version of the
html standard.
...ewest version of the
html standard.
...And 23 more matches
<object> - HTML: Hypertext Markup Language
the
html <object> element represents an external resource, which can be treated as an image, a nested browsing context, or a resource to be handled by a plugin.
...le form-associated element.
...n transparent.
...And 23 more matches
Using the application cache - HTML: Hypertext Markup Language
using this application cache feature is highly discouraged; it’s in the process of being removed from the web platform.
...benefits: offline browsing users can navigate a site even when they are offline.
...ine browsing users can navigate a site even when they are offline.
...And 23 more matches
Element.outerHTML - Web APIs
the outer
html attribute of the element dom interface gets the serialized
html fragment describing the element including its descendants.
... the outer
html attribute of the element dom interface gets the serialized
html fragment describing the element including its descendants.
... the outer
html attribute of the element dom interface gets the serialized
html fragment describing the element including its descendants.
...And 22 more matches
HTMLInputElement - Web APIs
the
htmlinputelement interface provides special properties and methods for manipulating the options, layout, and presentation of <input> elements.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...,monaco,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/
htmlinputelement" 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">
htmlinputelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties pro...
...And 22 more matches
<nextid>: The NeXT ID element (Obsolete) - HTML: Hypertext Markup Language
<nextid> is an obsolete
html element that served to enable the next web designing tool to generate automatic name labels for its anchors.
... <nextid> is an obsolete
html element that served to enable the next web designing tool to generate automatic name labels for its anchors.
...igning tool to generate automatic name labels for its anchors.
...And 22 more matches
Introduction to HTML - Learn web development
at its heart,
html is a fairly simple language made up of elements, which can be applied to pieces of text to give them different meaning in a document (is it a paragraph?
...m different meaning in a document (is it a paragraph?
...d videos into a page.
...And 21 more matches
Traversing an HTML table with JavaScript and DOM Interfaces - Web APIs
introduction this article is an overview of some powerful, fundamental dom level 1 methods and how to use them from javascript.
... introduction this article is an overview of some powerful, fundamental dom level 1 methods and how to use them from javascript.
...nted here are not specific to
html; they also apply to xml.
...And 21 more matches
HTMLCanvasElement - Web APIs
the
htmlcanvaselement interface provides properties and methods for manipulating the layout and presentation of <canvas> elements.
... the
htmlcanvaselement interface provides properties and methods for manipulating the layout and presentation of <canvas> elements.
... the
htmlcanvaselement interface provides properties and methods for manipulating the layout and presentation of <canvas> elements.
...And 21 more matches
HTMLTextAreaElement - Web APIs
the
htmltextareaelement interface provides special properties and methods for manipulating the layout and presentation of <textarea> elements.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...,monaco,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/
htmltextareaelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
htmltextareaelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties ...
...And 21 more matches
HTML in XMLHttpRequest - Web APIs
the w3c xmlhttprequest specification adds
html parsing support to xmlhttprequest, which originally supported only xml parsing.
... the w3c xmlhttprequest specification adds
html parsing support to xmlhttprequest, which originally supported only xml parsing.
... the w3c xmlhttprequest specification adds
html parsing support to xmlhttprequest, which originally supported only xml parsing.
...And 21 more matches
XHTML - Developer guides
x
html is a term that was historically used to describe
html documents written to conform with xml syntax rules.
... x
html is a term that was historically used to describe
html documents written to conform with xml syntax rules.
... x
html is a term that was historically used to describe
html documents written to conform with xml syntax rules.
...And 21 more matches
Images in HTML - Learn web development
ogical to start with the humble <img> element, used to embed a simple image in a webpage.
... embed a simple image in a webpage.
... to use it in depth, including the basics, annotating it with captions using <figure>, and detailing how it relates to css background images.
...And 20 more matches
HTML table advanced features and accessibility - Learn web development
previous overview: tables next in the second article in this module, we look at some more advanced features of
html tables — such as captions/summaries and grouping your rows into table head, body and footer sections — as well as looking at the accessibility of tables for visually impaired users.
... previous overview: tables next in the second article in this module, we look at some more advanced features of
html tables — such as captions/summaries and grouping your rows into table head, body and footer sections — as well as looking at the accessibility of tables for visually impaired users.
... previous overview: tables next in the second article in this module, we look at some more advanced features of
html tables — such as captions/summaries and grouping your rows into table head, body and footer sections — as well as looking at the accessibility of tables for visually impaired users.
...And 20 more matches
HTMLBodyElement - Web APIs
the
htmlbodyelement interface provides special properties (beyond those inherited from the regular
htmlelement interface) for manipulating <body> elements.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...,monaco,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/
htmlbodyelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
htmlbodyelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherit...
...And 19 more matches
HTMLTableSectionElement - Web APIs
the
htmltablesectionelement interface provides special properties and methods (beyond the
htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of sections, that is headers, footers and bodies, in an
html table.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...,monaco,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/
htmltablesectionelement" target="_top"><rect x="261" y="65" width="230" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="376" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
htmltablesectionelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} pro...
...And 19 more matches
HTMLTrackElement - Web APIs
the
htmltrackelement interface represents an
html <track> element within the dom.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...,monaco,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/
htmltrackelement" 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">
htmltrackelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inher...
...And 19 more matches
HTMLBaseElement - Web APIs
the
htmlbaseelement interface contains the base uri for a document.
... the
htmlbaseelement interface contains the base uri for a document.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...And 18 more matches
HTMLLabelElement - Web APIs
the
htmllabelelement interface gives access to properties specific to <label> elements.
... the
htmllabelelement interface gives access to properties specific to <label> elements.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...And 18 more matches
Generating HTML - Web APIs
generating
html one common application of xslt in the browser is to transform xml into
html on the client.
... generating
html one common application of xslt in the browser is to transform xml into
html on the client.
... generating
html one common application of xslt in the browser is to transform xml into
html on the client.
...And 18 more matches
<tr>: The Table Row element - HTML: Hypertext Markup Language
the
html <tr> element defines a row of cells in a table.
...h> and <td> support the colspan attribute, which lets you specify how many columns wide the cell should be, with the default being 1.
...use the table elements and their attributes to get just the right layout and formatting for your tabular data.
...And 18 more matches
Use HTML to solve common problems - Learn web development
the following links point to solutions to common everyday problems you'll need to solve with
html.
... the following links point to solutions to common everyday problems you'll need to solve with
html.
... the following links point to solutions to common everyday problems you'll need to solve with
html.
...And 17 more matches
HTMLEmbedElement - Web APIs
the
htmlembedelement interface provides special properties (beyond the regular
htmlelement interface it also has available to it by inheritance) for manipulating <embed> elements.
... the
htmlembedelement interface provides special properties (beyond the regular
htmlelement interface it also has available to it by inheritance) for manipulating <embed> elements.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...And 17 more matches
HTMLLegendElement - Web APIs
the
htmllegendelement is an interface allowing to access properties of the <legend> elements.
... the
htmllegendelement is an interface allowing to access properties of the <legend> elements.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...And 17 more matches
HTMLTableColElement - Web APIs
the
htmltablecolelement interface provides special properties (beyond the
htmlelement interface it also has available to it inheritance) for manipulating single or grouped table column elements.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...,monaco,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/
htmltablecolelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
htmltablecolelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties ...
...And 17 more matches
<input type="range"> - HTML: Hypertext Markup Language
n example of how the options on a range are denoted in supported browsers max the greatest value in the range of permitted values.
...ater than or equal to the value of the min attribute.
...positive direction when there are two equally close options.
...And 17 more matches
mozITXTToHTMLConv
the mozitxtto
htmlconv interface is used to convert text into
html format.
... the mozitxtto
htmlconv interface is used to convert text into
html format.
... the mozitxtto
htmlconv interface is used to convert text into
html format.
...And 16 more matches
HTMLStyleElement - Web APIs
the
htmlstyleelement interface represents a <style> element.
... the
htmlstyleelement interface represents a <style> element.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...And 16 more matches
HTMLHyperlinkElementUtils - Web APIs
the
htmlhyperlinkelementutils mixin defines utility methods and properties to work with
htmlanchorelement and
htmlareaelement.
... the
htmlhyperlinkelementutils mixin defines utility methods and properties to work with
htmlanchorelement and
htmlareaelement.
... the
htmlhyperlinkelementutils mixin defines utility methods and properties to work with
htmlanchorelement and
htmlareaelement.
...And 15 more matches
HTMLMeterElement - Web APIs
the
html <meter> elements expose the
htmlmeterelement interface, which provides special properties and methods (beyond the
htmlelement object interface they also have available to them by inheritance) for manipulating the layout and presentation of <meter> elements.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...,monaco,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/
htmlmeterelement" 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">
htmlmeterelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties also ...
...And 15 more matches
HTMLSourceElement - Web APIs
the
htmlsourceelement interface provides special properties (beyond the regular
htmlelement object interface it also has available to it by inheritance) for manipulating <source> elements.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...,monaco,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/
htmlsourceelement" 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">
htmlsourceelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inh...
...And 15 more matches
HTMLTitleElement - Web APIs
the
htmltitleelement interface contains the title for a document.
... the
htmltitleelement interface contains the title for a document.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...And 15 more matches
HTMLAudioElement - Web APIs
the
htmlaudioelement interface provides access to the properties of <audio> elements, as well as methods to manipulate them.
... the
htmlaudioelement interface provides access to the properties of <audio> elements, as well as methods to manipulate them.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...And 14 more matches
HTMLDialogElement - Web APIs
the
htmldialogelement interface provides methods to manipulate <dialog> elements.
... the
htmldialogelement interface provides methods to manipulate <dialog> elements.
...> elements.
...And 14 more matches
HTMLFormControlsCollection - Web APIs
the
htmlformcontrolscollection interface represents a collection of
html form control elements.
... the
htmlformcontrolscollection interface represents a collection of
html form control elements.
... the
htmlformcontrolscollection interface represents a collection of
html form control elements.
...And 14 more matches
HTMLHRElement - Web APIs
the
htmlhrelement interface provides special properties (beyond those of the
htmlelement interface it also has available to it by inheritance) for manipulating <hr> elements.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...,monaco,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/
htmlhrelement" target="_top"><rect x="361" y="65" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="426" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
htmlhrelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits pr...
...And 14 more matches
HTMLHeadElement - Web APIs
the
htmlheadelement interface contains the descriptive information, or metadata, for a document.
... the
htmlheadelement interface contains the descriptive information, or metadata, for a document.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...And 14 more matches
HTMLModElement - Web APIs
the
htmlmodelement interface provides special properties (beyond the regular methods and properties available through the
htmlelement interface they also have available to them by inheritance) for manipulating modification elements, that is <del> and <ins>.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...,monaco,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/
htmlmodelement" target="_top"><rect x="351" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="421" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
htmlmodelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits ...
...And 14 more matches
HTMLSelectElement.selectedOptions - Web APIs
the read-only
htmlselectelement property selectedoptions contains a list of the <option> elements contained within the <select> element that are currently selected.
... the read-only
htmlselectelement property selectedoptions contains a list of the <option> elements contained within the <select> element that are currently selected.
... the read-only
htmlselectelement property selectedoptions contains a list of the <option> elements contained within the <select> element that are currently selected.
...And 14 more matches
<a>: The Anchor element - HTML: Hypertext Markup Language
the
html <a> element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a url can address.
...ing else a url can address.
...hen using target, add rel="noreferrer noopener" to avoid exploitation of the window.opener api; note: in newer browser versions (e.g.
...And 14 more matches
<video>: The Video Embed element - HTML: Hypertext Markup Language
the
html video element (<video>) embeds a media player which supports video playback into the document.
...we want to display inside the src attribute; we can include other attributes to specify information such as video width and height, whether we want it to autoplay and loop, whether we want to show the browser's default video controls, etc.
...playback has stopped because of a temporary lack of data usage notes browsers don't all support the same video formats; you can provide multiple sources inside nested <source> elements, and the browser will then use the first one it understands.
...And 14 more matches
HTMLIsIndexElement - Web APIs
the
htmlisindexelement interface provides special properties (beyond the regular
htmlelement interface it also has available to it by inheritance) for manipulating <isindex> elements.
... the
htmlisindexelement interface provides special properties (beyond the regular
htmlelement interface it also has available to it by inheritance) for manipulating <isindex> elements.
... the
htmlisindexelement interface provides special properties (beyond the regular
htmlelement interface it also has available to it by inheritance) for manipulating <isindex> elements.
...And 13 more matches
HTMLOListElement - Web APIs
the
htmlolistelement interface provides special properties (beyond those defined on the regular
htmlelement interface it also has available to it by inheritance) for manipulating ordered list elements.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...,monaco,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/
htmlolistelement" 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">
htmlolistelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inher...
...And 13 more matches
HTMLParamElement - Web APIs
the
htmlparamelement interface provides special properties (beyond those of the regular
htmlelement object interface it inherits) for manipulating <param> elements, representing a pair of a key and a value that acts as a parameter for an <object> element.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...,monaco,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/
htmlparamelement" 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">
htmlparamelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inher...
...And 13 more matches
DOMImplementation.createHTMLDocument() - Web APIs
the domimplementation.create
htmldocument() method creates a new
html document.
... the domimplementation.create
htmldocument() method creates a new
html document.
... the domimplementation.create
htmldocument() method creates a new
html document.
...And 12 more matches
HTMLCollection - Web APIs
the
htmlcollection interface represents a generic collection (array-like object similar to arguments) of elements (in document order) and offers methods and properties for selecting from the list.
... the
htmlcollection interface represents a generic collection (array-like object similar to arguments) of elements (in document order) and offers methods and properties for selecting from the list.
... the
htmlcollection interface represents a generic collection (array-like object similar to arguments) of elements (in document order) and offers methods and properties for selecting from the list.
...And 12 more matches
HTMLFrameSetElement - Web APIs
the
htmlframesetelement interface provides special properties (beyond those of the regular
htmlelement interface they also inherit) for manipulating <frameset> elements.
... the
htmlframesetelement interface provides special properties (beyond those of the regular
htmlelement interface they also inherit) for manipulating <frameset> elements.
... the
htmlframesetelement interface provides special properties (beyond those of the regular
htmlelement interface they also inherit) for manipulating <frameset> elements.
...And 12 more matches
HTMLImageElement.alt - Web APIs
the
htmlimageelement property alt provides fallback (alternate) text to display when the image specified by the <img> element is not loaded.
...upport visually impaired users.
...like this: when choosing alt strings for your images, imagine what you would say when reading the page to someone over the phone without mentioning that there's an image on the page.
...And 12 more matches
HTMLLIElement - Web APIs
the
htmllielement interface exposes specific properties and methods (beyond those defined by regular
htmlelement interface it also has available to it by inheritance) for manipulating list elements.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...,monaco,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/
htmllielement" target="_top"><rect x="361" y="65" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="426" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
htmllielement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits pr...
...And 12 more matches
HTMLMapElement - Web APIs
the
htmlmapelement interface provides special properties and methods (beyond those of the regular object
htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of map elements.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...,monaco,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/
htmlmapelement" target="_top"><rect x="351" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="421" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
htmlmapelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits ...
...And 12 more matches
HTMLOptGroupElement - Web APIs
the
htmloptgroupelement interface provides special properties and methods (beyond the regular
htmlelement object interface they also have available to them by inheritance) for manipulating the layout and presentation of <optgroup> elements.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...,monaco,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/
htmloptgroupelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
htmloptgroupelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties ...
...And 12 more matches
HTMLOrForeignElement.dataset - Web APIs
the dataset read-only property of the
htmlorforeignelement interface provides read/write access to all the custom data attributes (data-*) set on the element.
... the dataset read-only property of the
htmlorforeignelement interface provides read/write access to all the custom data attributes (data-*) set on the element.
...ributes (data-*) set on the element.
...And 12 more matches
HTMLProgressElement - Web APIs
the
htmlprogresselement interface provides special properties and methods (beyond the regular
htmlelement interface it also has available to it by inheritance) for manipulating the layout and presentation of <progress> elements.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...,monaco,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/
htmlprogresselement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
htmlprogresselement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties ...
...And 12 more matches
HTMLQuoteElement - Web APIs
the
htmlquoteelement interface provides special properties and methods (beyond the regular
htmlelement interface it also has available to it by inheritance) for manipulating quoting elements, like <blockquote> and <q>, but not the <cite> element.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...,monaco,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/
htmlquoteelement" 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">
htmlquoteelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inher...
...And 12 more matches
HTMLTableCaptionElement - Web APIs
the
htmltablecaptionelement interface special properties (beyond the regular
htmlelement interface it also has available to it by inheritance) for manipulating table caption elements.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...,monaco,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/
htmltablecaptionelement" target="_top"><rect x="261" y="65" width="230" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="376" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
htmltablecaptionelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} pro...
...And 12 more matches
<audio>: The Embed Audio element - HTML: Hypertext Markup Language
the
html <audio> element is used to embed sound content in documents.
...stopped because of a temporary lack of data usage notes browsers don't all support the same file types and audio codecs; you can provide multiple sources inside nested <source> elements, and the browser will then use the first one it understands: <audio controls> <source src="myaudio.mp3" type="audio/mpeg"> <source src="myaudio.ogg" type="audio/ogg"> <p>your browser doesn't support
html5 audio.
...tead.</p> </audio> we offer a substantive and thorough guide to media file types and the audio codecs that can be used within them.
...And 12 more matches
data-* - HTML: Hypertext Markup Language
the data-* global attributes form a class of attributes called custom data attributes, that allow proprietary information to be exchanged between the
html and its dom representation by scripts.
...tom data attributes, that allow proprietary information to be exchanged between the
html and its dom representation by scripts.
...anged between the
html and its dom representation by scripts.
...And 12 more matches
title - HTML: Hypertext Markup Language
ment as a fallback for a real <label> labeling controls in data tables additional semantics are attached to the title attributes of the <link>, <abbr>, <input>, and <menuitem> elements.
...account, like <abbr title="this is a multiline title">example</abbr>.</p> result title attribute inheritance if an element has no title attribute, then it inherits it from its parent node, which in turn may inherit it from its parent, and so on.
...agnifiers people experiencing fine motor control impairment people with cognitive concerns this is due to inconsistent browser support, compounded by the additional assistive technology parsing of the browser-rendered page.
...And 12 more matches
Structuring the web with HTML - Learn web development
to build websites, you should know about
html — the fundamental technology used to define the structure of a webpage.
... to build websites, you should know about
html — the fundamental technology used to define the structure of a webpage.
...ork environment set up as detailed in installing basic software, and understand how to create and manage files, as detailed in dealing with files — both are parts of our getting started with the web complete beginner's module.
...And 11 more matches
HTMLDListElement - Web APIs
the
htmldlistelement interface provides special properties (beyond those of the regular
htmlelement interface it also has available to it by inheritance) for manipulating definition list (<dl>) elements.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...,monaco,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/
htmldlistelement" 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">
htmldlistelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inher...
...And 11 more matches
HTMLDivElement - Web APIs
the
htmldivelement interface provides special properties (beyond the regular
htmlelement interface it also has available to it by inheritance) for manipulating <div> elements.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...,monaco,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/
htmldivelement" target="_top"><rect x="351" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="421" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
htmldivelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits ...
...And 11 more matches
HTMLElement.isContentEditable - Web APIs
the
htmlelement.iscontenteditable read-only property returns a boolean that is true if the contents of the element are editable; otherwise it returns false.
... the
htmlelement.iscontenteditable read-only property returns a boolean that is true if the contents of the element are editable; otherwise it returns false.
... the contents of the element are editable; otherwise it returns false.
...And 11 more matches
HTMLHeadingElement - Web APIs
the
htmlheadingelement interface represents the different heading elements, <h1> through <h6>.
... the
htmlheadingelement interface represents the different heading elements, <h1> through <h6>.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...And 11 more matches
HTMLSpanElement - Web APIs
the
htmlspanelement interface represents a <span> element and derives from the
htmlelement interface, but without implementing any additional properties or methods.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...,monaco,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/
htmlspanelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
htmlspanelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this in...
...And 11 more matches
HTMLTimeElement - Web APIs
the
htmltimeelement interface provides special properties (beyond the regular
htmlelement interface it also has available to it by inheritance) for manipulating <time> elements.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...,monaco,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/
htmltimeelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
htmltimeelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherit...
...And 11 more matches
HTMLUListElement - Web APIs
the
htmlulistelement interface provides special properties (beyond those defined on the regular
htmlelement interface it also has available to it by inheritance) for manipulating unordered list elements.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...,monaco,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/
htmlulistelement" 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">
htmlulistelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inher...
...And 11 more matches
<button>: The Button element - HTML: Hypertext Markup Language
the
html <button> element represents a clickable button, used to submit forms or anywhere in a document for accessible, standard button functionality.
... the
html <button> element represents a clickable button, used to submit forms or anywhere in a document for accessible, standard button functionality.
...ent phrasing content but there must be no interactive content tag omission none, both the starting and ending tag are mandatory.
...And 11 more matches
<hgroup> - HTML: Hypertext Markup Language
the
html <hgroup> element represents a multi-level heading for a section of a document.
... flow content, heading content, palpable content.
... tag omission none, both the starting and ending tag are mandatory.
...And 11 more matches
<style>: The Style Information element - HTML: Hypertext Markup Language
the
html <style> element contains style information for a document, or part of a document.
...d this attribute specifies that the styles only apply to the elements of its parent(s) and children.
... this attribute specifies that the styles only apply to the elements of its parent(s) and children.
...And 11 more matches
<template>: The Content Template element - HTML: Hypertext Markup Language
the
html content template (<template>) element is a mechanism for holding
html that is not to be rendered immediately when a page is loaded but may be instantiated subsequently during runtime using javascript.
...ssion none, both the starting and ending tag are mandatory.
...t that accepts metadata content, phrasing content, or script-supporting elements.
...And 11 more matches
HTML forms in legacy browsers - Learn web development
explorer, but they are far from the only ones.
... place, just browse mdn microsoft: internet explorer standards support documentation webkit: because there are several different editions of this engine, things are a little trickier.
... best articles by webkit core developers.
...And 10 more matches
HTMLBRElement - Web APIs
the
htmlbrelement interface represents a
html line break element (<br>).
... the
htmlbrelement interface represents a
html line break element (<br>).
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...And 10 more matches
HTMLBaseFontElement - Web APIs
the
htmlbasefontelement interface provides special properties (beyond the regular
htmlelement interface it also has available to it by inheritance) for manipulating <basefont> elements.
... the
htmlbasefontelement interface provides special properties (beyond the regular
htmlelement interface it also has available to it by inheritance) for manipulating <basefont> elements.
... the
htmlbasefontelement interface provides special properties (beyond the regular
htmlelement interface it also has available to it by inheritance) for manipulating <basefont> elements.
...And 10 more matches
HTMLElement.hidden - Web APIs
the
htmlelement property hidden is a boolean which is true if the element is hidden; otherwise the value is false.
...eeded but is not any longer content that is reused by other parts of the page in a template-like fashion creating an offscreen canvas as a drawing buffer inappropriate use cases include: hiding panels in a tabbed dialog box hiding content in one presentation while intending it to be visible in others elements that are not hidden must not link to elements which are.
...onger content that is reused by other parts of the page in a template-like fashion creating an offscreen canvas as a drawing buffer inappropriate use cases include: hiding panels in a tabbed dialog box hiding content in one presentation while intending it to be visible in others elements that are not hidden must not link to elements which are.
...And 10 more matches
HTMLImageElement.longDesc - Web APIs
the obsolete property longdesc on the
htmlimageelement interface specifies the url of a text or
html file which contains a long-form description of the image.
... the obsolete property longdesc on the
htmlimageelement interface specifies the url of a text or
html file which contains a long-form description of the image.
... the obsolete property longdesc on the
htmlimageelement interface specifies the url of a text or
html file which contains a long-form description of the image.
...And 10 more matches
HTMLMetaElement - Web APIs
the
htmlmetaelement interface contains descriptive metadata about a document.
... the
htmlmetaelement interface contains descriptive metadata about a document.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...And 10 more matches
HTMLParagraphElement - Web APIs
the
htmlparagraphelement interface provides special properties (beyond those of the regular
htmlelement object interface it inherits) for manipulating <p> elements.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...,monaco,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/
htmlparagraphelement" target="_top"><rect x="291" y="65" width="200" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="391" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
htmlparagraphelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} propertie...
...And 10 more matches
HTMLPreElement - Web APIs
the
htmlpreelement interface exposes specific properties and methods (beyond those of the
htmlelement interface it also has available to it by inheritance) for manipulating a block of preformatted text (<pre>).
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...,monaco,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/
htmlpreelement" target="_top"><rect x="351" y="65" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="421" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
htmlpreelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits ...
...And 10 more matches
Adding captions and subtitles to HTML5 video - Developer guides
in other articles we looked at how to build a cross browser video player using the
htmlmediaelement and window.fullscreen apis, and also at how to style the player.
...le will take the same player and show how to add captions and subtitles to it, using the webvtt format and the <track> element.
...fferences if you are not sure what they are.
...And 10 more matches
<form> - HTML: Hypertext Markup Language
the
html <form> element represents a document section containing interactive controls for submitting information.
... content flow content, but not containing <form> elements tag omission none, both the starting and ending tag are mandatory.
...element that accepts flow content implicit aria role form if the form has an accessible name, otherwise no corresponding role permitted aria roles search, none or presentation dom interface
htmlformelement attributes this element includes the global attributes.
...And 10 more matches
<isindex> - HTML: Hypertext Markup Language
summary <isindex> was an obsolete
html element that put a text field in a page for querying the document.
... summary <isindex> was an obsolete
html element that put a text field in a page for querying the document.
... summary <isindex> was an obsolete
html element that put a text field in a page for querying the document.
...And 10 more matches
<th> - HTML: Hypertext Markup Language
the
html <th> element defines a cell as header of a group of table cells.
...content, or heading content descendants.
... header belongs to a rowgroup and relates to all of its cells.
...And 10 more matches
<u>: The Unarticulated Annotation (Underline) element - HTML: Hypertext Markup Language
the
html unarticulated annotation element (<u>) represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation.
... the
html unarticulated annotation element (<u>) represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation.
....
...And 10 more matches
nsIDOMNSHTMLDocument
dom/interfaces/
html/nsidomns
htmldocument.idlscriptable this interface defines methods and properties supported by gecko on the document object that are not part of dom level 2.
... domstring set to "on" or "off" to enable or disable editing for the entire document at once.
... domain domstring initially the host name of the document's url, but may be changed to the parent (but not top-level) domain in order to facilitate data exchange between documents from different sites in the same domain.
...And 9 more matches
HTMLSelectElement.add() - Web APIs
the
htmlselectelement.add() method adds an element to the collection of option elements for this select element.
... the
htmlselectelement.add() method adds an element to the collection of option elements for this select element.
... the
htmlselectelement.add() method adds an element to the collection of option elements for this select element.
...And 9 more matches
HTMLTableElement.insertRow() - Web APIs
the
htmltableelement.insertrow() method inserts a new row (<tr>) in a given <table>, and returns a reference to the new row.
...erted into the last <tbody>.
...rt the row into a specific <tbody>: let specific_tbody = document.getelementbyid(tbody_id); let row = specific_tbody.insertrow(index) note: insertrow() inserts the row directly into the table.
...And 9 more matches
HTMLTableElement.tFoot - Web APIs
the
htmltableelement.tfoot property represents the <tfoot> element of a <table>.
... the
htmltableelement.tfoot property represents the <tfoot> element of a <table>.
... the
htmltableelement.tfoot property represents the <tfoot> element of a <table>.
...And 9 more matches
<area> - HTML: Hypertext Markup Language
the
html <area> element defines a hot-spot region on an image, and optionally associates it with a hypertext link.
...g omission must have a start tag and must not have an end tag.
... of the target object to the link object.
...And 9 more matches
<input type="file"> - HTML: Hypertext Markup Language
ples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...ement properties properties that apply only to elements of type file methods select() value a file input's value attribute contains a domstring that represents the path to the selected file(s).
...mplement them.
...And 9 more matches
<menu> - HTML: Hypertext Markup Language
the
html <menu> element represents a group of commands that a user can perform or activate.
...te only), <menuitem>, <hr>, <script>, and <template>.
...red list of <li> elements, or, if the element has no <li> element children, flow content describing available commands.
...And 9 more matches
<ol>: The Ordered List element - HTML: Hypertext Markup Language
the
html <ol> element represents an ordered list of items — typically rendered as a numbered list.
...ent zero or more <li>, <script> and <template> elements.
...r example: steps in a recipe turn-by-turn directions the list of ingredients in decreasing proportion on nutrition information labels to determine which list to use, try changing the order of the list items; if the meaning changes, use the <ol> element — otherwise you can use <ul>.
...And 9 more matches
Microformats - HTML: Hypertext Markup Language
summary microformats (sometimes abbreviated μf) are standards used to embed semantics & structured data in
html, and provide an api to be used by search engines, aggregators, and other tools.
... summary microformats (sometimes abbreviated μf) are standards used to embed semantics & structured data in
html, and provide an api to be used by search engines, aggregators, and other tools.
...aggregators, and other tools.
...And 9 more matches
Learn to style HTML using CSS - Learn web development
cascading stylesheets — or css — is the first technology you should start learning after
html.
... cascading stylesheets — or css — is the first technology you should start learning after
html.
...y it out.
...And 8 more matches
The HTML5 input types - Learn web development
previous overview: forms next in the previous article we looked at the <input> element, covering the original values of the type attribute available since the early days of
html.
... previous overview: forms next in the previous article we looked at the <input> element, covering the original values of the type attribute available since the early days of
html.
... previous article we looked at the <input> element, covering the original values of the type attribute available since the early days of
html.
...And 8 more matches
L20n HTML Bindings
the l20n
html bindings you can take advantage of
html bindings to localize your
html documents with l20n.
... the l20n
html bindings you can take advantage of
html bindings to localize your
html documents with l20n.
.../head> create manifest use a localization manifest to define available languages and their resource files.
...And 8 more matches
HTMLDataElement - Web APIs
the
htmldataelement interface provides special properties (beyond the regular
htmlelement interface it also has available to it by inheritance) for manipulating <data> elements.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...,monaco,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/
htmldataelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
htmldataelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherit...
...And 8 more matches
HTMLFormElement.elements - Web APIs
the
htmlformelement property elements returns an
htmlformcontrolscollection listing all the form controls contained in the <form> element.
... the
htmlformelement property elements returns an
htmlformcontrolscollection listing all the form controls contained in the <form> element.
... the
htmlformelement property elements returns an
htmlformcontrolscollection listing all the form controls contained in the <form> element.
...And 8 more matches
HTMLInputElement.setSelectionRange() - Web APIs
the
htmlinputelement.setselectionrange() method sets the start and end positions of the current text selection in an <input> or <textarea> element.
...e start and end positions of the current text selection in an <input> or <textarea> element.
... note that accordingly to the whatwg forms spec selectionstart, selectionend properties and setselectionrange method apply only to inputs of types text, search, url, tel and password.
...And 8 more matches
HTMLElement.focus() - Web APIs
the
htmlelement.focus() method sets focus on the specified element, if it can be focused.
... scroll the document to bring the newly-focused element into view.
...cusmethod = function getfocus() { document.getelementbyid("mytextfield").focus(); }
html <input 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="focusmethod()">click me to focus on the button!</button> result focus with focusoption javascript focusscrollmethod = function getfocus() { document.getelementbyid("mybutton").focus({preventscroll:false}); } focusnoscrollmethod = function getfocuswithoutscrolling() { docum...
...And 8 more matches
HTMLSelectElement.type - Web APIs
the
htmlselectelement.type read-only property returns the form control's type.
...ple values can be selected.
...e" if only one value can be selected.
...And 8 more matches
HTMLStyleElement.media - Web APIs
the
htmlstyleelement.media property specifies the intended destination medium for style information.
... the
htmlstyleelement.media property specifies the intended destination medium for style information.
... the
htmlstyleelement.media property specifies the intended destination medium for style information.
...And 8 more matches
HTMLTableElement.tHead - Web APIs
the
htmltableelement.thead represents the <thead> element of a <table> .
... the
htmltableelement.thead represents the <thead> element of a <table> .
... the
htmltableelement.thead represents the <thead> element of a <table> .
...And 8 more matches
HTMLTableRowElement.insertCell() - Web APIs
the
htmltablerowelement.insertcell() method inserts a new cell (<td>) into a table row (<tr>) and returns a reference to the cell.
... a new cell (<td>) into a table row (<tr>) and returns a reference to the cell.
...) and returns a reference to the cell.
...And 8 more matches
HTML Drag and Drop API - Web APIs
html drag and drop interfaces enable applications to use drag-and-drop features in browsers.
...use, drag those elements to a droppable element, and drop them by releasing the mouse button.
...peration.
...And 8 more matches
<canvas>: The Graphics Canvas element - HTML: Hypertext Markup Language
use the
html <canvas> element with either the canvas scripting api or the webgl api to draw graphics and animations.
...ontent descendants except for <a> elements, <button> elements, <input> elements whose type attribute is checkbox, radio, or button.
...ternate content inside the <canvas> block.
...And 8 more matches
<dfn>: The Definition element - HTML: Hypertext Markup Language
the
html definition element (<dfn>) is used to indicate the term being defined within the context of a definition phrase or sentence.
...ries flow content, phrasing content, palpable content.
...sing content, but no <dfn> element must be a descendant.
...And 8 more matches
<kbd>: The Keyboard Input element - HTML: Hypertext Markup Language
the
html keyboard input element (<kbd>) represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device.
... the
html keyboard input element (<kbd>) represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device.
....
...And 8 more matches
<span> - HTML: Hypertext Markup Language
the
html <span> element is a generic inline container for phrasing content, which does not inherently represent anything.
...gories flow content, phrasing content.
...phrasing content.
...And 8 more matches
id - HTML: Hypertext Markup Language
ue must not contain whitespace (spaces, tabs etc.).
... browsers treat non-conforming ids that contain whitespace as if the whitespace is part of the id.
...ute, which allows space-separated values, elements can only have one single id value.
...And 8 more matches
Link types - HTML: Hypertext Markup Language
in
html, link types indicate the relationship between two documents, in which one links to the other using an <a>, <area>, <form>, or <link> element.
... in
html, link types indicate the relationship between two documents, in which one links to the other using an <a>, <area>, <form>, or <link> element.
... if none, it is a permalink for the section that the element is most closely associated to.
...And 8 more matches
HTML Tables - Learn web development
a very common task in
html is structuring tabular data, and it has a number of elements and attributes for just this purpose.
... a very common task in
html is structuring tabular data, and it has a number of elements and attributes for just this purpose.
..., and it has a number of elements and attributes for just this purpose.
...And 7 more matches
Element.insertAdjacentHTML() - Web APIs
the insertadjacent
html() method of the element interface parses the specified text as
html or xml and inserts the resulting nodes into the dom tree at a specified position.
... the insertadjacent
html() method of the element interface parses the specified text as
html or xml and inserts the resulting nodes into the dom tree at a specified position.
...of the element interface parses the specified text as
html or xml and inserts the resulting nodes into the dom tree at a specified position.
...And 7 more matches
HTMLCanvasElement.height - Web APIs
the
htmlcanvaselement.height property is a positive integer reflecting the height
html attribute of the <canvas> element interpreted in css pixels.
... the
htmlcanvaselement.height property is a positive integer reflecting the height
html attribute of the <canvas> element interpreted in css pixels.
...rols the size of the canvas.
...And 7 more matches
HTMLCanvasElement.width - Web APIs
the
htmlcanvaselement.width property is a positive integer reflecting the width
html attribute of the <canvas> element interpreted in css pixels.
... the
htmlcanvaselement.width property is a positive integer reflecting the width
html attribute of the <canvas> element interpreted in css pixels.
...controls the size of the canvas.
...And 7 more matches
HTMLDocument - Web APIs
the
htmldocument interface, which may be accessed through the window.
htmldocument property, extends the window.
htmldocument property to include methods and properties that are specific to
html documents.
...ght="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="306" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">document</text></a><polyline points="346,25 356,20 356,30 346,25" stroke="#d4dde4" fill="none"/><line x1="356" y1="25" x2="386" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmldocument" target="_top"><rect x="386" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="446" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
htmldocument</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} for the purposes of web de...
...y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="446" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
htmldocument</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} for the purposes of web development, you can generally think of
htmldocument as an alias for document, upon which
htmldocument is based.
...And 7 more matches
HTMLFontElement - Web APIs
implements the document object model (dom) representation of the font element.
... implements the document object model (dom) representation of the font element.
... implements the document object model (dom) representation of the font element.
...And 7 more matches
HTMLFormControlsCollection.namedItem() - Web APIs
the
htmlformcontrolscollection.nameditem() method returns the radionodelist or the element in the collection whose name or id match the specified name, or null if no node matches.
... the
htmlformcontrolscollection.nameditem() method returns the radionodelist or the element in the collection whose name or id match the specified name, or null if no node matches.
...version of nameditem() hides the one inherited from
htmlcollection.
...And 7 more matches
HTMLMenuElement - Web APIs
the
htmlmenuelement interface provides special properties (beyond those defined on the regular
htmlelement interface it also has available to it by inheritance) for manipulating <menu> elements.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...,monaco,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/
htmlmenuelement" target="_top"><rect x="341" y="65" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="416" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
htmlmenuelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} propertiesthis inte...
...And 7 more matches
HTMLSelectElement.item() - Web APIs
the
htmlselectelement.item() method returns the element corresponding to the
htmloptionelement whose position in the options list corresponds to the index given in the parameter, or null if there are none.
...lement whose position in the options list corresponds to the index given in the parameter, or null if there are none.
...tions list corresponds to the index given in the parameter, or null if there are none.
...And 7 more matches
HTMLSelectElement.namedItem() - Web APIs
the
htmlselectelement.nameditem() method returns the
htmloptionelement corresponding to the
htmloptionelement whose name or id match the specified name, or null if no option matches.
...mloptionelement corresponding to the
htmloptionelement whose name or id match the specified name, or null if no option matches.
...to the
htmloptionelement whose name or id match the specified name, or null if no option matches.
...And 7 more matches
HTMLTableElement.caption - Web APIs
the
htmltableelement.caption property represents the table caption.
... the
htmltableelement.caption property represents the table caption.
... the
htmltableelement.caption property represents the table caption.
...And 7 more matches
HTMLUnknownElement - Web APIs
the
htmlunknownelement interface represents an invalid
html element and derives from the
htmlelement interface, but without implementing any additional properties or methods.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...,monaco,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/
htmlunknownelement" target="_top"><rect x="311" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
htmlunknownelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties n...
...And 7 more matches
<input type="time"> - HTML: Hypertext Markup Language
a domstring containing the value of the time entered into the input.
...ut is always in 24-hour format that includes leading zeros: hh:mm, regardless of the input format, which is likely to be selected based on the user's locale (or by the user agent).
...n the user's locale (or by the user agent).
...And 7 more matches
<listing> - HTML: Hypertext Markup Language
summary the
html listing element (<listing>) renders text between the start and end tags without interpreting the
html in between and using a monospaced font.
... summary the
html listing element (<listing>) renders text between the start and end tags without interpreting the
html in between and using a monospaced font.
... summary the
html listing element (<listing>) renders text between the start and end tags without interpreting the
html in between and using a monospaced font.
...And 7 more matches
class - HTML: Hypertext Markup Language
e encouraged to use names that describe the semantic purpose of the element, rather than the presentation of the element.
...or example, attribute to describe an attribute rather than italics, although an element of this class may be presented by italics.
...ute to describe an attribute rather than italics, although an element of this class may be presented by italics.
...And 7 more matches
contenteditable - HTML: Hypertext Markup Language
alid, its value is inherited from its parent element: so the element is editable if its parent is editable.
...llowed values include true and false, this attribute is an enumerated one and not a boolean one.
...ude true and false, this attribute is an enumerated one and not a boolean one.
...And 7 more matches
Applying SVG effects to HTML content - SVG: Scalable Vector Graphics
modern browsers support using svg within css styles to apply graphical effects to
html content.
...ternal files must be to the same origin as the referencing document.
...g embedded svg to apply an svg effect using css styles, you first need to create the css style that references the svg to apply.
...And 7 more matches
Test your skills: HTML accessibility - Learn web development
this aim of this skill test is to assess whether you've understood our
html: a good basis for accessibility article.
... assess whether you've understood our
html: a good basis for accessibility article.
...d use an online tool such as codepen, jsfiddle, or glitch to work on the tasks.
...And 6 more matches
HTML Cheatsheet - Learn web development
while using
html it can be very handy to have an easy way to remember how to use
html tags properly and how to apply them.
... while using
html it can be very handy to have an easy way to remember how to use
html tags properly and how to apply them.
... while using
html it can be very handy to have an easy way to remember how to use
html tags properly and how to apply them.
...And 6 more matches
Define terms with HTML - Learn web development
html provides several ways to convey description semantics, whether inline or as structured glossaries.
...
html provides several ways to convey description semantics, whether inline or as structured glossaries.
...y.
...And 6 more matches
nsIScriptableUnescapeHTML
parser/
html/nsiscriptableunescape
html.idlscriptable this interface is a utility interface that exposes the kind of markup parser behavior that the feed service needs.
... obsolete gecko 14.0 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) note: as of firefox 14, this interface is obsolete (but still available for compatibility with legacy extensions) and all its functionality is available with more configuration options via the nsiparserutils interface.
...from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) note: as of firefox 14, this interface is obsolete (but still available for compatibility with legacy extensions) and all its functionality is available with more configuration options via the nsiparserutils interface.
...And 6 more matches
nsITXTToHTMLConv
netwerk/streamconv/public/nsitxtto
htmlconv.idlscriptable this interface allows you to modify the conversion from plain text to
html.
... netwerk/streamconv/public/nsitxtto
htmlconv.idlscriptable this interface allows you to modify the conversion from plain text to
html.
...lconv.idlscriptable this interface allows you to modify the conversion from plain text to
html.
...And 6 more matches
How whitespace is handled by HTML, CSS, and in the DOM - Web APIs
ext composed only of spaces, tabs or line breaks (to be precise, crlf sequences, carriage returns or line feeds).
...(to be precise, crlf sequences, carriage returns or line feeds).
...hese whitespace characters, and we only tend to get rid of it in a production build step to reduce code download sizes.
...And 6 more matches
HTMLCanvasElement.getContext() - Web APIs
the
htmlcanvaselement.getcontext() method returns a drawing context on the canvas, or null if the context identifier is not supported.
...="canvas" width="300" height="300"></canvas> you can get a 2d context of the canvas with the following code: var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); console.log(ctx); // canvasrenderingcontext2d { ...
...nvas> you can get a 2d context of the canvas with the following code: var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); console.log(ctx); // canvasrenderingcontext2d { ...
...And 6 more matches
HTMLCanvasElement.toDataURL() - Web APIs
the
htmlcanvaselement.todataurl() method returns a data uri containing a representation of the image in the format specified by the type parameter (defaults to png).
...nvas.todataurl('image/jpeg', 1.0); // data:image/jpeg;base64,/9j/4aaqskzjrgabaq...9oadambaairaxeapwd/ad/6ap/z" var mediumquality = canvas.todataurl('image/jpeg', 0.5); var lowquality = canvas.todataurl('image/jpeg', 0.1); example: dynamically change images you can use this technique in coordination with mouse events in order to dynamically change images (gray-scale vs.
...ctx.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 living standardthe definition of '
htmlcanvaselement.todataurl' in that specification.
...And 6 more matches
HTMLDataListElement - Web APIs
the
htmldatalistelement interface provides special properties (beyond the
htmlelement object interface it also has available to it by inheritance) to manipulate <datalist> elements and their content.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...,monaco,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/
htmldatalistelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
htmldatalistelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties ...
...And 6 more matches
HTMLImageElement.src - Web APIs
the
htmlimageelement property src, which reflects the
html src attribute, specifies the image to display in the <img> element.
... the
htmlimageelement property src, which reflects the
html src attribute, specifies the image to display in the <img> element.
... the
htmlimageelement property src, which reflects the
html src attribute, specifies the image to display in the <img> element.
...And 6 more matches
HTMLImageElement.srcset - Web APIs
the
htmlimageelement property srcset is a string which identifies one or more image candidate strings, separated using commas (,) each specifying image resources to use under given circumstances.
... url and an optional width or pixel density descriptor that indicates the conditions under which that candidate should be used instead of the image specified by the src property.
...dicates the conditions under which that candidate should be used instead of the image specified by the src property.
...And 6 more matches
HTMLImageElement.x - Web APIs
the read-only
htmlimageelement property x indicates the x-coordinate of the <img> element's left border edge relative to the root element's origin.
...der edge relative to the root element's origin.
... explicitly on it, or it has inherited it from a containing element, or by being located within a column described by either <col> or <colgroup>.
...And 6 more matches
HTMLImageElement.y - Web APIs
the read-only
htmlimageelement property y indicates the y-coordinate of the <img> element's top border edge relative to the root element's origin.
...der edge relative to the root element's origin.
...set explicitly on it, or it has inherited it from a containing element, or by being located within a column described by either <col> or <colgroup>.
...And 6 more matches
HTMLMediaElement.src - Web APIs
the
htmlmediaelement.src property reflects the value of the
html media element's src attribute, which indicates the url of a media resource to use in the element.
....src property reflects the value of the
html media element's src attribute, which indicates the url of a media resource to use in the element.
...indicates the url of a media resource to use in the element.
...And 6 more matches
HTMLSelectElement.remove() - Web APIs
the
htmlselectelement.remove() method removes the element at the specified index from the options collection for this select element.
... the
htmlselectelement.remove() method removes the element at the specified index from the options collection for this select element.
...option value="1">option: value 1</option> <option value="2">option: value 2</option> <option value="3">option: value 3</option> </select> and changes it to: <select id="existinglist" name="existinglist"> <option value="1">option: value 1</option> <option value="3">option: value 3</option> </select> */ specifications specification status comment
html living standardthe definition of '
htmlselectelement.remove()' in that specification.
...And 6 more matches
HTMLTemplateElement - Web APIs
the
htmltemplateelement interface enables access to the contents of an
html <template> element.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...,monaco,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/
htmltemplateelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
htmltemplateelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties ...
...And 6 more matches
HTMLTimeElement.dateTime - Web APIs
the
htmltimeelement.datetime property is a domstring that reflects the datetime
html attribute, containing a machine-readable form of the element's date and time value.
... the
htmltimeelement.datetime property is a domstring that reflects the datetime
html attribute, containing a machine-readable form of the element's date and time value.
...mms.xxxs pthhmmss pthhmms.xs pthhmms.xxs pthhmms.xxxs ww dd hh mm ss p12dt7h12m13s p12dt7h12m13.3s p12dt7h12m13.45s p12dt7h12m13.455s pt7h12m13s pt7h12m13.2s pt7h12m13.56s pt7h12m13.999s 7d 5h 24m 13s syntax datetimestring = timeelt.datetime; timeelt.datetime = datetimestring example // assumes there is <time id="t"> element in the
html var t = document.getelementbyid("t"); t.datetime = "6w 5h 34m 5s"; specifications specification status comment
html living standardthe definition of '
htmltimeelement' in that specification.
...And 6 more matches
<input type="datetime-local"> - HTML: Hypertext Markup Language
supported common attributes autocomplete, list, readonly, and step idl attributes list, value, valueasnumber.
....
...="-09:00">(gmt -9:00) alaska</option> <option value="-08:00">(gmt -8:00) pacific time (us & canada)</option> ...
...And 6 more matches
<input type="email"> - HTML: Hypertext Markup Language
of the text entered into the field is fewer than minlength utf-16 code units long.
... is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content.
...rovides an invalid address.
...And 6 more matches
<noframes>: The Frame Fallback element - HTML: Hypertext Markup Language
the obsolete
html no frames or frame fallback element, <noframes>, provides content to be presented in browsers that don't support (or have disabled support for) the <frame> element.
... the obsolete
html no frames or frame fallback element, <noframes>, provides content to be presented in browsers that don't support (or have disabled support for) the <frame> element.
...nt, <noframes>, provides content to be presented in browsers that don't support (or have disabled support for) the <frame> element.
...And 6 more matches
<p>: The Paragraph element - HTML: Hypertext Markup Language
the
html <p> element represents a paragraph.
... the
html <p> element represents a paragraph.
...h3>, <h4>, <h5>, <h6>, <header>, <hr>, <menu>, <nav>, <ol>, <pre>, <section>, <table>, <ul> or another <p> element, or if there is no more content in the parent element and the parent element is not an <a> element.
...And 6 more matches
<plaintext>: The Plain Text element (Deprecated) - HTML: Hypertext Markup Language
the
html plaintext element (<plaintext>) renders everything following the start tag as raw text, ignoring any following
html.
... the
html plaintext element (<plaintext>) renders everything following the start tag as raw text, ignoring any following
html.
... the
html plaintext element (<plaintext>) renders everything following the start tag as raw text, ignoring any following
html.
...And 6 more matches
<strike> - HTML: Hypertext Markup Language
obsolete since
html5this feature is obsolete.
... obsolete since
html5this feature is obsolete.
... obsolete since
html5this feature is obsolete.
...And 6 more matches
dir - HTML: Hypertext Markup Language
> and <textarea>s in order to assist with authoring content.
...textual menu of input fields while internet explorer and edge use the key combinations ctrl + left shift and ctrl + right shift.
...put fields while internet explorer and edge use the key combinations ctrl + left shift and ctrl + right shift.
...And 6 more matches
tabindex - HTML: Hypertext Markup Language
hould be semantically described using interactive elements (<a>, <button>, <details>, <input>, <select>, <textarea>, etc.) instead.
...tead.
...s have built-in roles and states that communicate status to the accessibility that would otherwise have to be managed by aria.
...And 6 more matches
HTMLCanvasElement.toBlob() - Web APIs
the
htmlcanvaselement.toblob() method creates a blob object representing the image contained in the canvas; this file may be cached on the disk or stored in memory at the discretion of the user agent.
...se.then( function() { console.log('successfully wrote file'); }, function() { console.log('failure writing file') } ); }; r.readasarraybuffer(b); } } canvas.toblob(blobcallback('passthisstring'), 'image/vnd.microsoft.icon', '-moz-parse-options:format=bmp;bpp=32'); specifications specification status comment
html living standardthe definition of '
htmlcanvaselement.toblob' in that specification.
... } ); }; r.readasarraybuffer(b); } } canvas.toblob(blobcallback('passthisstring'), 'image/vnd.microsoft.icon', '-moz-parse-options:format=bmp;bpp=32'); specifications specification status comment
html living standardthe definition of '
htmlcanvaselement.toblob' in that specification.
...And 5 more matches
HTMLDetailsElement - Web APIs
the
htmldetailselement interface provides special properties (beyond the regular
htmlelement interface it also has available to it by inheritance) for manipulating <details> elements.
... also has available to it by inheritance) for manipulating <details> elements.
...absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
htmldetailselement" target="_top"><rect x="1" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="91" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
htmldetailselement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent,
htmlelement.
...And 5 more matches
HTMLImageElement.align - Web APIs
the obsolete align property of the
htmlimageelement interface is a string which indicates how to position the image relative to its container.
... the obsolete align property of the
htmlimageelement interface is a string which indicates how to position the image relative to its container.
...align property of the
htmlimageelement interface is a string which indicates how to position the image relative to its container.
...And 5 more matches
HTMLImageElement.hspace - Web APIs
the obsolete hspace property of the
htmlimageelement interface specifies the number of pixels of empty space to leave empty on the left and right sides of the <img> element when laying out the page.
... the obsolete hspace property of the
htmlimageelement interface specifies the number of pixels of empty space to leave empty on the left and right sides of the <img> element when laying out the page.
... the obsolete hspace property of the
htmlimageelement interface specifies the number of pixels of empty space to leave empty on the left and right sides of the <img> element when laying out the page.
...And 5 more matches
HTMLImageElement.name - Web APIs
the
htmlimageelement interface's deprecated name property specifies a name for the element.
... the
htmlimageelement interface's deprecated name property specifies a name for the element.
... the
htmlimageelement interface's deprecated name property specifies a name for the element.
...And 5 more matches
HTMLImageElement.naturalHeight - Web APIs
the
htmlimageelement interface's naturalheight property is a read-only value which returns the intrinsic (natural), density-corrected height of the image in css pixels.
...erty is a read-only value which returns the intrinsic (natural), density-corrected height of the image in css pixels.
...ted, unlike height.
...And 5 more matches
HTMLImageElement.naturalWidth - Web APIs
the
htmlimageelement interface's read-only naturalwidth property returns the intrinsic (natural), density-corrected width of the image in css pixels.
...image in css pixels.
...ke the value of width.
...And 5 more matches
HTMLImageElement.vspace - Web APIs
the obsolete vspace property of the
htmlimageelement interface specifies the number of pixels of empty space to leave empty on the top and bottom of the <img> element when laying out the page.
... the obsolete vspace property of the
htmlimageelement interface specifies the number of pixels of empty space to leave empty on the top and bottom of the <img> element when laying out the page.
... the obsolete vspace property of the
htmlimageelement interface specifies the number of pixels of empty space to leave empty on the top and bottom of the <img> element when laying out the page.
...And 5 more matches
HTMLLabelElement.control - Web APIs
the read-only
htmllabelelement.control property returns a reference to the control (in the form of an object of type
htmlelement or one of its derivatives) with which the <label> element is associated, or null if the label isn't associated with a control.
... the read-only
htmllabelelement.control property returns a reference to the control (in the form of an object of type
htmlelement or one of its derivatives) with which the <label> element is associated, or null if the label isn't associated with a control.
... the read-only
htmllabelelement.control property returns a reference to the control (in the form of an object of type
htmlelement or one of its derivatives) with which the <label> element is associated, or null if the label isn't associated with a control.
...And 5 more matches
HTMLMediaElement.audioTracks - Web APIs
the read-only audiotracks property on
htmlmediaelement objects returns an audiotracklist object listing all of the audiotrack objects representing the media element's audio tracks.
...lement.audiotracks; value a audiotracklist object representing the list of audio tracks included in the media element.
...iotracks; value a audiotracklist object representing the list of audio tracks included in the media element.
...And 5 more matches
HTMLMediaElement.autoplay - Web APIs
the
htmlmediaelement.autoplay property reflects the autoplay
html attribute, indicating whether playback should automatically begin as soon as enough media is available to do so without interruption.
...y, you should make it opt-in (requiring a user to specifically enable it).
...ally enable it).
...And 5 more matches
HTMLMediaElement.currentTime - Web APIs
the
htmlmediaelement interface's currenttime property specifies the current playback time in seconds.
... the
htmlmediaelement interface's currenttime property specifies the current playback time in seconds.
... the
htmlmediaelement interface's currenttime property specifies the current playback time in seconds.
...And 5 more matches
HTMLMediaElement.networkState - Web APIs
the
htmlmediaelement.networkstate property indicates the current state of the fetching of media over the network.
... the
htmlmediaelement.networkstate property indicates the current state of the fetching of media over the network.
...networkstate = audioorvideo.networkstate; value an unsigned short.
...And 5 more matches
HTMLMediaElement.textTracks - Web APIs
the read-only texttracks property on
htmlmediaelement objects returns a texttracklist object listing all of the texttrack objects representing the media element's text tracks, in the same order as in the list of text tracks.
...ist object listing all of the texttrack objects representing the media element's text tracks, in the same order as in the list of text tracks.
...ang="en"> <track kind="subtitles" src="samplesubtitles_ja.vtt" srclang="ja"> <track kind="subtitles" src="samplesubtitles_oz.vtt" srclang="oz"> <track kind="metadata" src="keystage1.vtt" srclang="en" label="key stage 1"> <track kind="metadata" src="keystage2.vtt" srclang="en" label="key stage 2"> <track kind="metadata" src="keystage3.vtt" srclang="en" label="key stage 3"> </video> the
htmlmediaelement.texttracks returns a texttrackslist thru which we can iterate.
...And 5 more matches
HTMLOrForeignElement - Web APIs
the
htmlorforeignelement mixin describes several features common to the
htmlelement, svgelement and mathmlelement interfaces.
... the
htmlorforeignelement mixin describes several features common to the
htmlelement, svgelement and mathmlelement interfaces.
... the
htmlorforeignelement mixin describes several features common to the
htmlelement, svgelement and mathmlelement interfaces.
...And 5 more matches
HTMLSlotElement - Web APIs
the
htmlslotelement interface of the shadow dom api enables access to the name and assigned nodes of an
html <slot> element.
... the
htmlslotelement interface of the shadow dom api enables access to the name and assigned nodes of an
html <slot> element.
... the
htmlslotelement interface of the shadow dom api enables access to the name and assigned nodes of an
html <slot> element.
...And 5 more matches
Block-level elements - HTML: Hypertext Markup Language
html (hypertext markup language) elements historically were categorized as either "block-level" elements or "inline-level" elements.
...his means.
...ck-level elements may contain inline elements and (sometimes) other block-level elements.
...And 5 more matches
<details>: The Details disclosure element - HTML: Hypertext Markup Language
the
html details element (<details>) creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state.
...nt, sectioning root, interactive content, palpable content.
...d aria roles no role permitted dom interface
htmldetailselement attributes this element includes the global attributes.
...And 5 more matches
<font> - HTML: Hypertext Markup Language
summary the
html font element (<font>) defines the font size, color and face for its content.
... summary the
html font element (<font>) defines the font size, color and face for its content.
... summary the
html font element (<font>) defines the font size, color and face for its content.
...And 5 more matches
<input type="checkbox"> - HTML: Hypertext Markup Language
the string to use as the value of the checkbox when submitting the form, if the checkbox is currently toggled on checked a boolean attribute indicating whether or not this checkbox is checked by default (when the page loads).
...ding</label> </div> <div> <input type="checkbox" id="music" name="interest" value="music"> <label for="music">music</label> </div> </fieldset> providing a bigger hit area for your checkboxes in the above examples, you may have noticed that you can toggle a checkbox by clicking on its associated <label> element as well as on the checkbox itself.
...ally on small-screen devices like smartphones.
...And 5 more matches
<input type="date"> - HTML: Hypertext Markup Language
e and input supported common attributes autocomplete, list, readonly, and step idl attributes list, value, valueasdate, valueasnumber.
...support).
...ted content is placed inside the form control, and can't be styled or shown effectively.
...And 5 more matches
<input type="month"> - HTML: Hypertext Markup Language
s value methods select(), stepdown(), stepup().
...isplayed date format differs from the actual value; most user agents display the month and year in a locale-appropriate form, based on the set locale of the user's operating system, whereas the date value is always formatted yyyy-mm.
...ecified for min that isn't a valid year and month string, the input has no minimum value.
...And 5 more matches
<input type="number"> - HTML: Hypertext Markup Language
is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content.
...omatic validation that the entered text is a number, and usually a set of up and down buttons to step the value up and down.
...een 0.0 and 10.0, with decimals to two places.
...And 5 more matches
<input type="tel"> - HTML: Hypertext Markup Language
is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content.
...d to show only filtered matching values.
... touched on before, it's quite difficult to provide a one-size-fits-all client-side validation solution for phone numbers.
...And 5 more matches
<label> - HTML: Hypertext Markup Language
the
html <label> element represents a caption for an item in a user interface.
...k me</label> <input type="text" id="username"> accessibility concerns interactive content don't place interactive elements such as anchors or buttons inside a label.
...to activate the form input associated with the label.
...And 5 more matches
<shadow>: The obsolete Shadow Root element - HTML: Hypertext Markup Language
the
html <shadow> element—an obsolete part of the web components technology suite—was intended to be used as a shadow dom insertion point.
... the
html <shadow> element—an obsolete part of the web components technology suite—was intended to be used as a shadow dom insertion point.
...u have created multiple shadow roots under a shadow host.
...And 5 more matches
<strong>: The Strong Importance element - HTML: Hypertext Markup Language
the
html strong importance element (<strong>) indicates that its contents have strong importance, seriousness, or urgency.
...w content, phrasing content, palpable content.
...re perhaps one of the most common sources of confusion, causing developers to ask "should i use <b> or <strong>?
...And 5 more matches
<tbody>: The Table Body element - HTML: Hypertext Markup Language
the
html table body element (<tbody>) encapsulates a set of table rows (<tr> elements), indicating that they comprise the body of the table (<table>).
...nt <table> element to graphically render.
...es into sections, each of which may be separately formatted if so desired.
...And 5 more matches
accesskey - HTML: Hypertext Markup Language
they are aware of the functionality.
...ecause of these issues, it is generally advised not to use accesskeys for most general-purpose websites and web apps.
...webaim: keyboard accessibility - accesskey specifications specification status comment
html 5.2the definition of 'accesskey' in that specification.
...And 5 more matches
lang - HTML: Hypertext Markup Language
even if the lang attribute is set, it may not be taken into account, as the xml:lang attribute has priority.
...pseudo-class :lang, two invalid language names are different if their names are different.
..., two invalid language names are different if their names are different.
...And 5 more matches
Communication between HTML and your extension - Archive of obsolete content
see also interaction between privileged and non-privileged pages.
... see also interaction between privileged and non-privileged pages.
...i gather, xbl components are more designed for creating custom components and their specific component behavior rather than trying to impose some kind of messaging on existing components.
...And 4 more matches
What HTML features promote accessibility? - Learn web development
the following content describes specific features of
html that can be used to make a web page more accessible to people with different disabilities.
... the following content describes specific features of
html that can be used to make a web page more accessible to people with different disabilities.
...sed to make a web page more accessible to people with different disabilities.
...And 4 more matches
HTMLCanvasElement.transferControlToOffscreen() - Web APIs
the
htmlcanvaselement.transfercontroltooffscreen() method transfers control to an offscreencanvas object, either on the main thread or on a worker.
... the
htmlcanvaselement.transfercontroltooffscreen() method transfers control to an offscreencanvas object, either on the main thread or on a worker.
... the
htmlcanvaselement.transfercontroltooffscreen() method transfers control to an offscreencanvas object, either on the main thread or on a worker.
...And 4 more matches
HTMLCollection.item - Web APIs
the
htmlcollection method item() returns the node located at the specified offset into the collection.
... the
htmlcollection method item() returns the node located at the specified offset into the collection.
... the
htmlcollection method item() returns the node located at the specified offset into the collection.
...And 4 more matches
HTMLFormElement.submit() - Web APIs
the
htmlformelement.submit() method submits a given <form>.
... the
htmlformelement.submit() method submits a given <form>.
...andler is not run.
...And 4 more matches
HTMLImageElement.border - Web APIs
the obsolete
htmlimageelement property border specifies the number of pixels thick the border surrounding the image should be.
...g options to it.
...led using the writing-mode aware border-block-start-width, border-block-end-width, border-inline-start-width, and border-inline-end-width properties.
...And 4 more matches
HTMLImageElement.height - Web APIs
the height property of the
htmlimageelement interface indicates the height at which the image is drawn, in css pixels if the image is being drawn or rendered to any visual medium such as the screen or a printer; otherwise, it's the natural, pixel density corrected height of the image.
... the height property of the
htmlimageelement interface indicates the height at which the image is drawn, in css pixels if the image is being drawn or rendered to any visual medium such as the screen or a printer; otherwise, it's the natural, pixel density corrected height of the image.
... the height property of the
htmlimageelement interface indicates the height at which the image is drawn, in css pixels if the image is being drawn or rendered to any visual medium such as the screen or a printer; otherwise, it's the natural, pixel density corrected height of the image.
...And 4 more matches
HTMLImageElement.lowSrc - Web APIs
the
htmlimageelement interface's obsolete lowsrc property can be used to specify the url of a reduced-quality or otherwise faster-loading version of the image specified by the src property.
... the
htmlimageelement interface's obsolete lowsrc property can be used to specify the url of a reduced-quality or otherwise faster-loading version of the image specified by the src property.
... the
htmlimageelement interface's obsolete lowsrc property can be used to specify the url of a reduced-quality or otherwise faster-loading version of the image specified by the src property.
...And 4 more matches
HTMLImageElement.useMap - Web APIs
the usemap property on the
htmlimageelement interface reflects the value of the
html usemap attribute, which is a string providing the name of the client-side image map to apply to the image.
... the usemap property on the
htmlimageelement interface reflects the value of the
html usemap attribute, which is a string providing the name of the client-side image map to apply to the image.
... the usemap property on the
htmlimageelement interface reflects the value of the
html usemap attribute, which is a string providing the name of the client-side image map to apply to the image.
...And 4 more matches
HTMLImageElement.width - Web APIs
the width property of the
htmlimageelement interface indicates the width at which the image is drawn, in css pixels if the image is being drawn or rendered to any visual medium such as the screen or a printer; otherwise, it's the natural, pixel density corrected width of the image.
... the width property of the
htmlimageelement interface indicates the width at which the image is drawn, in css pixels if the image is being drawn or rendered to any visual medium such as the screen or a printer; otherwise, it's the natural, pixel density corrected width of the image.
... the width property of the
htmlimageelement interface indicates the width at which the image is drawn, in css pixels if the image is being drawn or rendered to any visual medium such as the screen or a printer; otherwise, it's the natural, pixel density corrected width of the image.
...And 4 more matches
HTMLKeygenElement - Web APIs
note: this page describes the keygen element interface as specified, not as currently implemented by gecko.
...ly implemented by gecko.
...l properties and methods (beyond the regular element object interface they also have available to them by inheritance) for manipulating the layout and presentation of keygen elements.
...And 4 more matches
HTMLMediaElement.currentSrc - Web APIs
the
htmlmediaelement.currentsrc property contains the absolute url of the chosen media resource.
...le, if the web server selects a media file based on the resolution of the user's display.
...hosen media source; this may be an empty string if networkstate is empty; otherwise, it will be one of the resources listed by the
htmlsourceelement contained within the media element, or the value or src if no <source> element is provided.
...And 4 more matches
HTMLMediaElement.defaultMuted - Web APIs
the
htmlmediaelement.defaultmuted property reflects the muted
html attribute, which indicates whether the media element's audio output should be muted by default.
... should be muted by default.
... the muted property.
...And 4 more matches
HTMLMediaElement.seekable - Web APIs
the seekable read-only property of the
htmlmediaelement returns a timeranges object that contains the time ranges that the user is able to seek to, if any.
...meranges object.
... document.queryselector("video"); var timerangesobject = video.seekable; var timeranges = []; //go through the object and output 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.
...And 4 more matches
HTMLOptionsCollection - Web APIs
the
htmloptionscollection interface represents a collection of <option>
html elements (in document order) and offers methods and properties for selecting from the list as well as optionally altering its items.
...his object is returned only by the options property of select.
...sition: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/
htmlcollection" target="_top"><rect x="1" y="1" width="140" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="71" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
htmlcollection</text></a><polyline points="141,25 151,20 151,30 141,25" stroke="#d4dde4" fill="none"/><line x1="151" y1="25" x2="181" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmloptionscollection" target="_top"><rect x="181" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="286" y="30" font-size="12px" font-family="consolas,monaco,andale mon...
...And 4 more matches
HTMLPictureElement - Web APIs
the
htmlpictureelement interface represents a <picture>
html element.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...,monaco,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/
htmlpictureelement" target="_top"><rect x="311" y="65" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
htmlpictureelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties n...
...And 4 more matches
HTMLSelectElement.checkValidity() - Web APIs
the
htmlselectelement.checkvalidity() method checks whether the element has any constraints and whether it satisfies them.
... the
htmlselectelement.checkvalidity() method checks whether the element has any constraints and whether it satisfies them.
...
htmlselectelement.checkvalidity() method checks whether the element has any constraints and whether it satisfies them.
...And 4 more matches
HTMLSelectElement.selectedIndex - Web APIs
the
htmlselectelement.selectedindex is a long that reflects the index of the first or last selected <option> element, depending on the value of multiple.
... the
htmlselectelement.selectedindex is a long that reflects the index of the first or last selected <option> element, depending on the value of multiple.
...> <option>option b</option> <option>option c</option> <option>option d</option> <option>option e</option> </select> javascript var selectelem = document.getelementbyid('select') var pelem = document.getelementbyid('p') // when a new <option> is selected selectelem.addeventlistener('change', function() { var index = selectelem.selectedindex; // add that data to the <p> pelem.inner
html = 'selectedindex: ' + index; }) specifications specification status comment
html living standardthe definition of '
htmlselectelement' in that specification.
...And 4 more matches
HTMLSelectElement.setCustomValidity() - Web APIs
the
htmlselectelement.setcustomvalidity() method sets the custom validity message for the selection element to the specified message.
...electelement.setcustomvalidity() method sets the custom validity message for the selection element to the specified message.
... sets the custom validity message for the selection element to the specified message.
...And 4 more matches
HTMLTableElement.rows - Web APIs
the read-only
htmltableelement property rows returns a live
htmlcollection of all the rows in the table, including the rows contained within any <thead>, <tfoot>, and <tbody> elements.
... the read-only
htmltableelement property rows returns a live
htmlcollection of all the rows in the table, including the rows contained within any <thead>, <tfoot>, and <tbody> elements.
... the read-only
htmltableelement property rows returns a live
htmlcollection of all the rows in the table, including the rows contained within any <thead>, <tfoot>, and <tbody> elements.
...And 4 more matches
HTMLTableElement.tBodies - Web APIs
the
htmltableelement.tbodies read-only property returns a live
htmlcollection of the bodies in a <table>.
... the
htmltableelement.tbodies read-only property returns a live
htmlcollection of the bodies in a <table>.
... the
htmltableelement.tbodies read-only property returns a live
htmlcollection of the bodies in a <table>.
...And 4 more matches
HTMLTrackElement.src - Web APIs
the
htmltrackelement.src property reflects the value of the <track> element's src attribute, which indicates the url of the text track's data.
... the
htmltrackelement.src property reflects the value of the <track> element's src attribute, which indicates the url of the text track's data.
... the
htmltrackelement.src property reflects the value of the <track> element's src attribute, which indicates the url of the text track's data.
...And 4 more matches
HTMLVideoElement.videoHeight - Web APIs
the
htmlvideoelement interface's read-only videoheight property indicates the intrinsic height of the video, expressed in css pixels.
... the
htmlvideoelement interface's read-only videoheight property indicates the intrinsic height of the video, expressed in css pixels.
...terface's read-only videoheight property indicates the intrinsic height of the video, expressed in css pixels.
...And 4 more matches
HTMLVideoElement.videoWidth - Web APIs
the
htmlvideoelement interface's read-only videowidth property indicates the intrinsic width of the video, expressed in css pixels.
... the
htmlvideoelement interface's read-only videowidth property indicates the intrinsic width of the video, expressed in css pixels.
...ent interface's read-only videowidth property indicates the intrinsic width of the video, expressed in css pixels.
...And 4 more matches
Allowing cross-origin use of images and canvas - HTML: Hypertext Markup Language
html provides a crossorigin attribute for images that, in combination with an appropriate cors header, allows images defined by the <img> element that are loaded from foreign origins to be used in a <canvas> as if they had been loaded from the current origin.
... other hosts, it's inevitable that security problems may arise.
... the canvas becomes tainted.
...And 4 more matches
<basefont> - HTML: Hypertext Markup Language
the obsolete
html base font element (<basefont>) sets a default font face, size, and color for the other elements which are descended from its parent element.
...ize, and color for the other elements which are descended from its parent element.
...rowser supports.
...And 4 more matches
<input type="text"> - HTML: Hypertext Markup Language
is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content.
... placeholder="lower case, all one word" size="30"> </div> <div> <button>submit</button> </div> </form> validation <input> elements of type text have no automatic validation applied to them (since a basic text input needs to be capable of accepting any arbitrary string), but there are some client-side validation options available, which we'll discuss below.
... text have no automatic validation applied to them (since a basic text input needs to be capable of accepting any arbitrary string), but there are some client-side validation options available, which we'll discuss below.
...And 4 more matches
<input type="url"> - HTML: Hypertext Markup Language
is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content.
...eir web site's address, or provides an invalid one.
..."w3c"> </datalist> validation there are two levels of content validation available for url inputs.
...And 4 more matches
<input type="week"> - HTML: Hypertext Markup Language
autocomplete, list, readonly, and step idl attributes value, valueasdate, valueasnumber, and list.
...than this, the element fails constraint validation.
...eek" type="week" name="week" min="2017-w01" max="2017-w52" required> <span class="validity"></span> </div> <div> <input type="submit" value="submit form"> </div> </form> if you try to submit the form with no value, the browser displays an error.
...And 4 more matches
<li> - HTML: Hypertext Markup Language
the
html <li> element is used to represent an item in a list.
...ontent in its parent element.
...e indicates the current ordinal value of the list item as defined by the <ol> element.
...And 4 more matches
<map> - HTML: Hypertext Markup Language
the
html <map> element is used with <area> elements to define an image map (a clickable link area).
...ategories flow content, phrasing content, palpable content.
...e must be present and must have a non-empty value with no space characters.
...And 4 more matches
<menuitem> - HTML: Hypertext Markup Language
the
html <menuitem> element represents a command that a user is able to invoke through a popup menu.
... tag omission must have a start tag and must not have an end tag.
...he type attribute is radio.
...And 4 more matches
<textarea> - HTML: Hypertext Markup Language
the
html <textarea> element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.
...zontally scrollable.
... styling with css <textarea> is a replaced element — it has intrinsic dimensions, like a raster image.
...And 4 more matches
<tt>: The Teletype Text element (obsolete) - HTML: Hypertext Markup Language
the obsolete
html teletype text element (<tt>) creates inline text which is presented using the user agent's default monospace font face.
...ss.
...g at the telnet command prompt: <code>set localecho</code><br /> the telnet client should display: <tt>local echo is on</tt></p> result overriding the default font you can override the browser's default font—if the browser permits you to do so, which it isn't required to do—using css: css tt { font-family: "lucida console", "menlo", "monaco", "courier", monospace; }
html <p>enter the following at the telnet command prompt: <code>set localecho</code><br /> the telnet client should display: <tt>local echo is on</tt></p> result usage notes the <tt> element is, by default, rendered using the browser's default non-proportional font.
...And 4 more matches
itemprop - HTML: Hypertext Markup Language
the itemprop global attribute is used to add properties to an item.
...one or more properties forms an item.
...et of elements marked up with itemprop attributes, followed by a table showing the resulting structured data.
...And 4 more matches
itemscope - HTML: Hypertext Markup Language
iated metadata.
...cabulary (such as schema.org) that describes the item and its properties context.
...br> </span> <p> ingredients:<br> <span itemprop="recipeingredient">thinly-sliced apples: 6 cups<br></span> <span itemprop="recipeingredient">white sugar: 3/4 cup<br></span> ...
...And 4 more matches
itemtype - HTML: Hypertext Markup Language
ion.
...ltiple items with the same id.
...cope itemtype="http://schema.org/organization"> <span itemprop="name">executive objects<br></span> </span> condition: <link itemprop="itemcondition" href="http://schema.org/usedcondition"/>previously owned, in excellent condition<br> <link itemprop="availability" href="http://schema.org/instock"/>in stock!
...And 4 more matches
Microdata - HTML: Hypertext Markup Language
microdata is part of the whatwg
html standard and is used to nest metadata within existing content on web pages.
...sing experience for users.
...ension was made to solve transliteration problems between the cyrillic and latin alphabets.
...And 4 more matches
Using images in HTML - Web media technologies
the
html <img> element lets you embed images into an
html document, while the <picture> element enables responsive images.
... the
html <img> element lets you embed images into an
html document, while the <picture> element enables responsive images.
... the
html <img> element lets you embed images into an
html document, while the <picture> element enables responsive images.
...And 4 more matches
SVG In HTML Introduction - SVG: Scalable Vector Graphics
overview this article and its associated example shows how to use inline svg to provide a background picture for a form.
... overview this article and its associated example shows how to use inline svg to provide a background picture for a form.
... body.invalid stop.end { stop-color:red; } #err { display:none; } 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> <input type="text"> <span id="err">incorrect value!</span></p> <p><input 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="gradie...
...And 4 more matches
HTML Imports - Web Components
obsolete since google chrome 73 this feature is obsolete.
...feature is obsolete.
...t could be removed at any time.
...And 4 more matches
HTMLContentElement - Web APIs
the
htmlcontentelement interface represents a <content>
html element, which is used in shadow dom.
... the
htmlcontentelement interface represents a <content>
html element, which is used in shadow dom.
... the
htmlcontentelement interface represents a <content>
html element, which is used in shadow dom.
...And 3 more matches
HTMLDataElement.value - Web APIs
the value property of the
htmldataelement interface returns a domstring reflecting the value
html attribute.
... the value property of the
htmldataelement interface returns a domstring reflecting the value
html attribute.
... the value property of the
htmldataelement interface returns a domstring reflecting the value
html attribute.
...And 3 more matches
HTMLDialogElement.close() - Web APIs
the close() method of the
htmldialogelement interface closes the dialog.
... the close() method of the
htmldialogelement interface closes the dialog.
... dialoginstance.close(returnvalue); parameters returnvalue optional a domstring representing an updated value for the
htmldialogelement.returnvalue of the dialog.
...And 3 more matches
HTMLDialogElement.open - Web APIs
the open property of the
htmldialogelement interface is a boolean reflecting the open
html attribute, indicating whether the dialog is available for interaction.
... the open property of the
htmldialogelement interface is a boolean reflecting the open
html attribute, indicating whether the dialog is available for interaction.
...alog is shown.
...And 3 more matches
HTMLElement.innerText - Web APIs
the innertext property of the
htmlelement interface represents the "rendered" text content of a node and its descendants.
...ants.
...approximates the text the user would get if they highlighted the contents of the element with the cursor and then copied it to the clipboard.
...And 3 more matches
HTMLFormElement.length - Web APIs
the
htmlformelement.length read-only property returns the number of controls in the <form> element.
... the
htmlformelement.length read-only property returns the number of controls in the <form> element.
... the
htmlformelement.length read-only property returns the number of controls in the <form> element.
...And 3 more matches
HTMLFormElement.reportValidity() - Web APIs
the
htmlformelement.reportvalidity() method returns true if the element's child controls satisfy their validation constraints.
... the
htmlformelement.reportvalidity() method returns true if the element's child controls satisfy their validation constraints.
... false is returned, cancelable invalid events are fired for each invalid child and validation problems are reported to the user.
...And 3 more matches
HTMLImageElement.crossOrigin - Web APIs
the
htmlimageelement interface's crossorigin attribute is a string which specifies the cross-origin resource sharing (cors) setting to use when retrieving the image.
... the
htmlimageelement interface's crossorigin attribute is a string which specifies the cross-origin resource sharing (cors) setting to use when retrieving the image.
... the
htmlimageelement interface's crossorigin attribute is a string which specifies the cross-origin resource sharing (cors) setting to use when retrieving the image.
...And 3 more matches
HTMLImageElement.currentSrc - Web APIs
the read-only
htmlimageelement property currentsrc indicates the url of the image which is currently presented in the <img> element it represents.
... the read-only
htmlimageelement property currentsrc indicates the url of the image which is currently presented in the <img> element it represents.
... the read-only
htmlimageelement property currentsrc indicates the url of the image which is currently presented in the <img> element it represents.
...And 3 more matches
HTMLImageElement.sizes - Web APIs
the
htmlimageelement property sizes allows you to specify the layout width of the image for each of a list of media conditions.
...es allows you to specify the layout width of the image for each of a list of media conditions.
... the layout width of the image for each of a list of media conditions.
...And 3 more matches
HTMLInputElement.setRangeText() - Web APIs
the
htmlinputelement.setrangetext() method replaces a range of text in an <input> or <textarea> element with a new string.
... "select" selects the newly inserted text.
...afterwards.
...And 3 more matches
HTMLInputElement.stepDown() - Web APIs
the
htmlinputelement.stepdown([n]) method decrements the value of a numeric type of <input> 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.
...h the constraints set by the step attribute, invoking the stepdown() method will return a value that does match the form controls constraints.
...parameters stepdecrement the optional stepdecrement paremeter is a numeric value.
...And 3 more matches
HTMLMediaElement.buffered - Web APIs
the
htmlmediaelement.buffered read-only property returns a new timeranges object that indicates the ranges of the media source that the browser has buffered (if any) at the moment the buffered property is accessed.
...merange = audioobject.buffered value a timeranges object.
...a timeranges object.
...And 3 more matches
HTMLMediaElement.controls - Web APIs
the
htmlmediaelement.controls property reflects the controls
html attribute, which controls whether user interface controls for playing the media item will be displayed.
...cts the controls
html attribute, which controls whether user interface controls for playing the media item will be displayed.
...controls whether user interface controls for playing the media item will be displayed.
...And 3 more matches
HTMLMediaElement.crossOrigin - Web APIs
the
htmlmediaelement.crossorigin property is the cors setting for this image element.
... the
htmlmediaelement.crossorigin property is the cors setting for this image element.
... the
htmlmediaelement.crossorigin property is the cors setting for this image element.
...And 3 more matches
HTMLMediaElement.duration - Web APIs
the read-only
htmlmediaelement property duration indicates the length of the element's media in seconds.
... the read-only
htmlmediaelement property duration indicates the length of the element's media in seconds.
...int value indicating the duration of the media in seconds.
...And 3 more matches
HTMLMediaElement.ended - Web APIs
the
htmlmediaelement.ended indicates whether the media element has ended playback.
... the
htmlmediaelement.ended indicates whether the media element has ended playback.
...ended =
htmlmediaelement.ended value a boolean which is true if the media contained in the element has finished playing.
...And 3 more matches
HTMLMediaElement.error - Web APIs
the
htmlmediaelement.error is the mediaerror object for the most recent error, or null if there has not been an error.
... the
htmlmediaelement.error is the mediaerror object for the most recent error, or null if there has not been an error.
...d adds an error handler to it; the error handler simply logs the details to console.
...And 3 more matches
HTMLMediaElement.playbackRate - Web APIs
the
htmlmediaelement.playbackrate property sets the rate at which the media is being played back.
...n the current rate, so a value of 1.0 indicates normal speed.
...ideo video.playbackrate = 1.5; // audio audio.playbackrate = 1.0; value a double.
...And 3 more matches
HTMLObjectElement.typeMustMatch - Web APIs
the
htmlobjectelement.typemustmatch property is a boolean that reflects the typemustmatch attribute of the <object> element.
... the
htmlobjectelement.typemustmatch property is a boolean that reflects the typemustmatch attribute of the <object> element.
... the
htmlobjectelement.typemustmatch property is a boolean that reflects the typemustmatch attribute of the <object> element.
...And 3 more matches
HTMLElement.blur() - Web APIs
the
htmlelement.blur() method removes keyboard focus from the current element.
... the
htmlelement.blur() method removes keyboard focus from the current element.
...> <br><br> <button type="button" onclick="focusinput()">click me to gain focus</button> <button type="button" onclick="blurinput()">click me to lose focus</button> javascript function focusinput() { document.getelementbyid('mytext').focus(); } function blurinput() { document.getelementbyid('mytext').blur(); } result specification specification status comment
html living standardthe definition of 'blur' in that specification.
...And 3 more matches
HTMLSelectElement.disabled - Web APIs
the
htmlselectelement.disabled is a boolean that reflects the disabled
html attribute, which indicates whether the control is disabled.
... the
htmlselectelement.disabled is a boolean that reflects the disabled
html attribute, which indicates whether the control is disabled.
...ipt var allowdrinkscheckbox = document.getelementbyid("allow-drinks"); var drinkselect = document.getelementbyid("drink-select"); allowdrinkscheckbox.addeventlistener("change", function(event) { if (event.target.checked) { drinkselect.disabled = false; } else { drinkselect.disabled = true; } }, false); result specifications specification status comment
html living standardthe definition of 'disabled' in that specification.
...And 3 more matches
HTMLSelectElement.form - Web APIs
the
htmlselectelement.form read-only property returns a
htmlformelement representing the form that this element is associated with.
... the
htmlselectelement.form read-only property returns a
htmlformelement representing the form that this element is associated with.
... code gives all select elements in a particular form a css class of "selectclass": <script type="text/javascript"> var form_element = document.getelementbyid('subscribe_form'); var vist = form_element.style; if (vist.display=='' || vist.display=='none') { vist.display = 'block'; } else { vist.display = 'none'; } </script> specifications specification status comment
html living standardthe definition of 'form' in that specification.
...And 3 more matches
HTMLShadowElement - Web APIs
the
htmlshadowelement interface represents a <shadow>
html element, which is used in shadow dom.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...,monaco,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/
htmlshadowelement" 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">
htmlshadowelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties thi...
...And 3 more matches
HTMLTableElement.border - Web APIs
the
htmltableelement.border property represents the border width of the <table> element.
... the
htmltableelement.border property represents the border width of the <table> element.
... the
htmltableelement.border property represents the border width of the <table> element.
...And 3 more matches
HTMLTableElement.createCaption() - Web APIs
the
htmltableelement.createcaption() method returns the <caption> element associated with a given <table>.
...ns the <caption> element associated with a given <table>.
... if no <caption> element exists on the table, this method creates it, and then returns it.
...And 3 more matches
<acronym> - HTML: Hypertext Markup Language
summary the
html acronym element (<acronym>) allows authors to clearly indicate a sequence of characters that compose an acronym or abbreviation for a word.
... summary the
html acronym element (<acronym>) allows authors to clearly indicate a sequence of characters that compose an acronym or abbreviation for a word.
...ment (<acronym>) allows authors to clearly indicate a sequence of characters that compose an acronym or abbreviation for a word.
...And 3 more matches
<address>: The Contact Address element - HTML: Hypertext Markup Language
the
html <address> element indicates that the enclosed
html provides contact information for a person or people, or for an organization.
...parents any element that accepts flow content, but always excluding <address> elements (according to the logical principle of symmetry, if <address> tag, as a parent, can not have nested <address> element, then the same <address> content can not have <address> tag as its parent).
...ents (according to the logical principle of symmetry, if <address> tag, as a parent, can not have nested <address> element, then the same <address> content can not have <address> tag as its parent).
...And 3 more matches
<article>: The Article Contents element - HTML: Hypertext Markup Language
the
html <article> element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication).
...w content.
...> elements nested in the <article> representing the blog post.
...And 3 more matches
<big>: The Bigger Text element - HTML: Hypertext Markup Language
the obsolete
html big element (<big>) renders the enclosed text at a font size one level larger than the surrounding text (medium becomes large, for example).
... the obsolete
html big element (<big>) renders the enclosed text at a font size one level larger than the surrounding text (medium becomes large, for example).
... font-size property to adjust the font size.
...And 3 more matches
<dd>: The Description Details element - HTML: Hypertext Markup Language
the
html <dd> element provides the description, definition, or value for the preceding term (<dt>) in a description list (<dl>).
...nteractive-examples and send us a pull request.
...e <dd> element is immediately followed by another <dd> element or a <dt> element, or if there is no more content in the parent element.
...And 3 more matches
<figure>: The Figure with Optional Caption element - HTML: Hypertext Markup Language
the
html <figure> (figure with optional caption) element represents self-contained content, potentially with an optional caption, which is specified using the (<figcaption>) element.
...wed by flow content; or flow content followed by a <figcaption> element; or flow content.
... 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>, by william shakespeare</figcaption> </figure> specifications specification status comment
html living standardthe definition of '<figure>' in that specification.
...And 3 more matches
<header> - HTML: Hypertext Markup Language
the
html <header> element represents introductory content, typically a group of introductory or navigational aids.
...e that a <header> element must not be a descendant of an <address>, <footer> or another <header> element.
... dom interface
htmlelement usage notes the <header> element is not sectioning content and therefore does not introduce a new section in the outline.
...And 3 more matches
<i>: The Idiomatic Text element - HTML: Hypertext Markup Language
the
html idiomatic text element (<i>) represents a range of text that is set off from the normal text for some reason, such as idiomatic text, technical terms, taxonomical designations, among others.
....
...age (such as "et cetera"); these should include the lang attribute to identify the language technical terms transliterations thoughts (such as "she wondered,what is this writer talking about, anyway?") ship or vessel names in western writing systems (such as "they searched the docks for the empress of the galaxy, the ship to which they were assigned.") in earlier versions of the
html specification, the <i> element was merely a presentational element used to display text in italics, much like the <b> element was used to display text in bold letters.
...And 3 more matches
<input type="password"> - HTML: Hypertext Markup Language
ically useful as other ways to explain your form, and can cause unexpected technical issues with your content.
...east four and no more than eight digits.
... additionally, disabled field values aren't submitted with the form.
...And 3 more matches
<main> - HTML: Hypertext Markup Language
the
html <main> element represents the dominant content of the <body> of a document.
...tegories flow content, palpable content.
... </main> </body> webaim: "skip navigation" links reader mode browser reader mode functionality looks for the presence of the <main> element, as well as heading and content sectioning elements when converting content into a specialized reader view.
...And 3 more matches
<meta>: The Document-level Metadata element - HTML: Hypertext Markup Language
the
html <meta> element represents metadata that cannot be represented by other
html meta-related elements, like <base>, <link>, <script>, <style> or <title>.
...art tag must be present and the end tag must not be present.
...p-equiv(alent) because all the allowed values are names of particular http headers: content-security-policy allows page authors to define a content policy for the current page.
...And 3 more matches
<noscript> - HTML: Hypertext Markup Language
the
html <noscript> element defines a section of
html to be inserted if a script type on the page is unsupported or if scripting is currently turned off in the browser.
...scendant of the <head> element: any transparent content, but no <noscript> element must be among its descendants.
... starting and ending tag are mandatory.
...And 3 more matches
<small>: the side comment element - HTML: Hypertext Markup Language
the
html <small> element represents side-comments and small print, like copyright and legal text, independent of its styled presentation.
...nt categories flow content, phrasing content permitted content phrasing content tag omission none, must have both a start tag and an end tag.
... attributes this element only includes the global attributes.
...And 3 more matches
<xmp> - HTML: Hypertext Markup Language
summary the
html example element (<xmp>) renders text between the start and end tags without interpreting the
html in between and using a monospaced font.
... summary the
html example element (<xmp>) renders text between the start and end tags without interpreting the
html in between and using a monospaced font.
... summary the
html example element (<xmp>) renders text between the start and end tags without interpreting the
html in between and using a monospaced font.
...And 3 more matches
contextmenu - HTML: Hypertext Markup Language
the contextmenu attribute is obsolete and will be removed from all browsers the contextmenu global attribute is the id of a <menu> to use as the contextual menu for this element.
... the contextmenu attribute is obsolete and will be removed from all browsers the contextmenu global attribute is the id of a <menu> to use as the contextual menu for this element.
...item label="change image" onclick="changeimage()"></menuitem> </menu> </li> </ol> </body> javascript function shareviatwitter() { window.open("https://twitter.com/intent/tweet?text=" + "hurray!
...And 3 more matches
draggable - HTML: Hypertext Markup Language
the draggable global attribute is an enumerated attribute that indicates whether the element can be dragged, either with native browser behavior or the
html drag and drop api.
...ge is <img draggable="false">.
...ult browser behavior: only text selections, images, and links can be dragged.
...And 3 more matches
Preloading content with rel="preload" - HTML: Hypertext Markup Language
the preload value of the <link> element's rel attribute lets you declare fetch requests in the
html's <head>, specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle, before browsers' main rendering machinery kicks in.
...href="style.css"> </head> <body> <h1>bouncing balls</h1> <canvas></canvas> <script src="main.js" defer></script> </body> here we preload our css and javascript files so they will be available as soon as they are required for the rendering of the page later on.
...ng more accurately.
...And 3 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 input types article.
...kill test is to assess whether you've understood our the
html5 input types article.
...he
html5 input types article.
...And 2 more matches
Test your skills: HTML images - Learn web development
this aim of this skill test is to assess whether you've understood our images in
html article.
... this skill test is to assess whether you've understood our images in
html article.
...people that cannot see it.
...And 2 more matches
HTML performance features - Learn web development
previous overview: performance next
html is by default fast and accessible.
... previous overview: performance next
html is by default fast and accessible.
... previous overview: performance next
html is by default fast and accessible.
...And 2 more matches
nsIDOMHTMLTimeRanges
the nsidom
htmltimeranges interface represents a set of time ranges in media; it's primarily used by the nsidom
htmlmediaelement interface, and implements the dom timeranges interface.
... the nsidom
htmltimeranges interface represents a set of time ranges in media; it's primarily used by the nsidom
htmlmediaelement interface, and implements the dom timeranges interface.
...s interface represents a set of time ranges in media; it's primarily used by the nsidom
htmlmediaelement interface, and implements the dom timeranges interface.
...And 2 more matches
HTMLDialogElement.showModal() - Web APIs
the showmodal() method of the
htmldialogelement interface displays the dialog as a modal, over the top of any other dialogs that might be present.
...al(); parameters none.
...pens a modal dialog updatebutton.addeventlistener('click', function() { dialog.showmodal(); opencheck(dialog); }); // form cancel button closes the dialog box cancelbutton.addeventlistener('click', function() { dialog.close('animalnotchosen'); opencheck(dialog); }); })(); </script> note: you can find this example on github as
htmldialogelement-basic (see it live also).
...And 2 more matches
HTMLElement.dir - Web APIs
the
htmlelement.dir property gets or sets the text writing directionality of the content of the current element.
... the
htmlelement.dir property gets or sets the text writing directionality of the content of the current element.
...ble values for dir are ltr, for left-to-right, rtl, for right-to-left, and auto for specifying that the direction of the element must be determined based on the contents of the element.
...And 2 more matches
HTMLFormElement: reset event - Web APIs
he reset event fires when a <form> is reset.
...r><br> <button type="reset">reset form</button> </form> <p id="log"></p> javascript function logreset(event) { log.textcontent = `form reset!
...ent) { log.textcontent = `form reset!
...And 2 more matches
HTMLFormElement: submit event - Web APIs
ethod directly.
...it form</button> </form> <p id="log"></p> javascript function logsubmit(event) { log.textcontent = `form submitted!
...submitted!
...And 2 more matches
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 output).
... the target property of the
htmlformelement interface represents the target of the form's action (i.e., the frame in which to render its output).
... the target property of the
htmlformelement interface represents the target of the form's action (i.e., the frame in which to render its output).
...And 2 more matches
HTMLHyperlinkElementUtils.toString() - Web APIs
the
htmlhyperlinkelementutils.tostring() stringifier method returns a usvstring containing the whole url.
... the
htmlhyperlinkelementutils.tostring() stringifier method returns a usvstring containing the whole url.
... the
htmlhyperlinkelementutils.tostring() stringifier method returns a usvstring containing the whole url.
...And 2 more matches
HTMLImageElement.isMap - Web APIs
the
htmlimageelement proeprty ismap is a boolean value which indicates that the image is to be used by a server-side image map.
... the
htmlimageelement proeprty ismap is a boolean value which indicates that the image is to be used by a server-side image map.
...ement proeprty ismap is a boolean value which indicates that the image is to be used by a server-side image map.
...And 2 more matches
HTMLInputElement.select() - Web APIs
the
htmlinputelement.select() method selects all the text in a <textarea> element or in an <input> element that includes a text field.
... the
htmlinputelement.select() method selects all the text in a <textarea> element or in an <input> element that includes a text field.
...lect all the text in the <input> element.
...And 2 more matches
HTMLInputElement.stepUp() - Web APIs
the
htmlinputelement.stepup() method increments the value of a numeric type of <input> element by the value of the step attribute, or the default step value if the step attribute is not explicitly set.
... input types in the the table above), or if the step value is set to any, an invalidstateerror exception is thrown.
...e stepup will not allow the input to out of range, in this case stopping when it reaches 400, and rounding down any floats that are passed as a parameter.
...And 2 more matches
HTMLLabelElement.form - Web APIs
the read-only
htmllabelelement.form property returns an
htmlformelement object which represents the form of which the label's associated control is a part, or null if there is either no associated control, or if that control isn't in a form.
... the read-only
htmllabelelement.form property returns an
htmlformelement object which represents the form of which the label's associated control is a part, or null if there is either no associated control, or if that control isn't in a form.
... the read-only
htmllabelelement.form property returns an
htmlformelement object which represents the form of which the label's associated control is a part, or null if there is either no associated control, or if that control isn't in a form.
...And 2 more matches
HTMLMediaElement: ended event - Web APIs
the ended event is fired when playback or streaming has stopped because the end of the media was reached or because no further data is available.
...because no further data is available.
...e end of the media.
...And 2 more matches
HTMLMediaElement.load() - Web APIs
the
htmlmediaelement method load() resets the media element to its initial state and begins the process of selecting a media source and loading the media in preparation for playback to begin at the beginning.
....
...ding is ready to begin, the loadstart event is delivered.
...And 2 more matches
HTMLMediaElement.loop - Web APIs
the
htmlmediaelement.loop property reflects the loop
html attribute, which controls whether the media element should start over when it reaches the end.
... the
htmlmediaelement.loop property reflects the loop
html attribute, which controls whether the media element should start over when it reaches the end.
...aelement.loop property reflects the loop
html attribute, which controls whether the media element should start over when it reaches the end.
...And 2 more matches
HTMLMediaElement.muted - Web APIs
the
htmlmediaelement.muted indicates whether the media element muted.
... the
htmlmediaelement.muted indicates whether the media element muted.
... the
htmlmediaelement.muted indicates whether the media element muted.
...And 2 more matches
HTMLMediaElement.paused - Web APIs
the read-only
htmlmediaelement.paused property tells whether the media element is paused.
... the read-only
htmlmediaelement.paused property tells whether the media element is paused.
... the read-only
htmlmediaelement.paused property tells whether the media element is paused.
...And 2 more matches
HTMLMediaElement.readyState - Web APIs
the
htmlmediaelement.readystate property indicates the readiness state of the media.
...east the current playback position has been loaded.
...been loaded.
...And 2 more matches
HTMLMediaElement.srcObject - Web APIs
the srcobject property of the
htmlmediaelement interface sets or returns the object which serves as the source of the media associated with the
htmlmediaelement.
...serves as the source of the media associated with the
htmlmediaelement.
...bject can be a mediastream, a mediasource, a blob, or a file (which inherits from blob).
...And 2 more matches
HTMLMediaElement.volume - Web APIs
the
htmlmediaelement.volume property sets the volume at which the media will be played.
...volume property sets the volume at which the media will be played.
...h the media will be played.
...And 2 more matches
HTMLMenuItemElement - Web APIs
the
htmlmenuitemelement interface provides special properties (beyond those defined on the regular
htmlelement interface it also has available to it by inheritance) for manipulating <menuitem> elements.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...,monaco,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/
htmlmenuitemelement" target="_top"><rect x="301" y="65" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="396" y="94" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">
htmlmenuitemelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} propertiest...
...And 2 more matches
HTMLObjectElement.form - Web APIs
the form read-only property of the
htmlobjectelement interface retuns a
htmlformelement representing the object element's form owner, or null if there isn't one.
... the form read-only property of the
htmlobjectelement interface retuns a
htmlformelement representing the object element's form owner, or null if there isn't one.
... the form read-only property of the
htmlobjectelement interface retuns a
htmlformelement representing the object element's form owner, or null if there isn't one.
...And 2 more matches
HTMLSelectElement.options - Web APIs
the
htmlselectelement.options read-only property returns a
htmloptionscollection of the <option> elements contained by the <select> element.
... the
htmlselectelement.options read-only property returns a
htmloptionscollection of the <option> elements contained by the <select> element.
... the
htmlselectelement.options read-only property returns a
htmloptionscollection of the <option> elements contained by the <select> element.
...And 2 more matches
HTMLSlotElement.name - Web APIs
the name property of the
htmlslotelement interface returns or sets the slot name.
... the name property of the
htmlslotelement interface returns or sets the slot name.
... the name property of the
htmlslotelement interface returns or sets the slot name.
...And 2 more matches
HTMLTableElement.align - Web APIs
the
htmltableelement.align property represents the alignment of the table.
... the
htmltableelement.align property represents the alignment of the table.
... the
htmltableelement.align property represents the alignment of the table.
...And 2 more matches
HTMLTableElement.cellPadding - Web APIs
the
htmltableelement.cellpadding property represents the padding around the individual cells of the table.
... the
htmltableelement.cellpadding property represents the padding around the individual cells of the table.
... the
htmltableelement.cellpadding property represents the padding around the individual cells of the table.
...And 2 more matches
HTMLTableElement.cellSpacing - Web APIs
while you should instead use the css border-spacing property, the obsolete
htmltableelement interface's cellspacing property represents the spacing around the individual <th> and <td> elements representing a table's cells.
... while you should instead use the css border-spacing property, the obsolete
htmltableelement interface's cellspacing property represents the spacing around the individual <th> and <td> elements representing a table's cells.
... while you should instead use the css border-spacing property, the obsolete
htmltableelement interface's cellspacing property represents the spacing around the individual <th> and <td> elements representing a table's cells.
...And 2 more matches
HTMLTableElement.createTFoot() - Web APIs
the
htmltableelement.createtfoot() method returns the <tfoot> element associated with a given <table>.
...foot() method returns the <tfoot> element associated with a given <table>.
...ven <table>.
...And 2 more matches
HTMLTableElement.createTHead() - Web APIs
the
htmltableelement.createthead() method returns the <thead> element associated with a given <table>.
...thead() method returns the <thead> element associated with a given <table>.
...iven <table>.
...And 2 more matches
HTMLTableElement.deleteCaption() - Web APIs
the
htmltableelement.deletecaption() method removes the <caption> element from a given <table>.
... the
htmltableelement.deletecaption() method removes the <caption> element from a given <table>.
... the
htmltableelement.deletecaption() method removes the <caption> element from a given <table>.
...And 2 more matches
HTMLTableElement.deleteRow() - Web APIs
the
htmltableelement.deleterow() method removes a specific row (<tr>) from a given <table>.
... the
htmltableelement.deleterow() method removes a specific row (<tr>) from a given <table>.
...y last row of a table.
...And 2 more matches
HTMLTableElement.deleteTFoot() - Web APIs
the
htmltableelement.deletetfoot() method removes the <tfoot> element from a given <table>.
... the
htmltableelement.deletetfoot() method removes the <tfoot> element from a given <table>.
... the
htmltableelement.deletetfoot() method removes the <tfoot> element from a given <table>.
...And 2 more matches
HTMLTableElement.deleteTHead() - Web APIs
the
htmltableelement.deletethead() removes the <thead> element from a given <table>.
... the
htmltableelement.deletethead() removes the <thead> element from a given <table>.
... the
htmltableelement.deletethead() removes the <thead> element from a given <table>.
...And 2 more matches
HTMLTableElement.summary - Web APIs
the
htmltableelement.summary property represents the table description.
... the
htmltableelement.summary property represents the table description.
... the
htmltableelement.summary property represents the table description.
...And 2 more matches
HTMLTemplateElement.content - Web APIs
the
htmltemplateelement.content property returns a <template> element's template contents (a documentfragment).
... the
htmltemplateelement.content property returns a <template> element's template contents (a documentfragment).
...tmltemplateelement.content property returns a <template> element's template contents (a documentfragment).
...And 2 more matches
<caption>: The Table Caption element - HTML: Hypertext Markup Language
the
html <caption> element specifies the caption (or title) of a table.
...nt categories none.
... </tr> <tr> <td>user2</td> <td>user2@sample.com</td> </tr> </table> caption { caption-side: top; align: right; } table { border-collapse: collapse; border-spacing: 0px; } table, th, td { border: 1px solid black; } table {background: red;} do not alter caption.
...And 2 more matches
<center>: The Centered Text element (obsolete) - HTML: Hypertext Markup Language
the obsolete
html center element (<center>) is a block-level element that displays its block-level or inline contents centered horizontally within its containing element.
... the obsolete
html center element (<center>) is a block-level element that displays its block-level or inline contents centered horizontally within its containing element.
... the obsolete
html center element (<center>) is a block-level element that displays its block-level or inline contents centered horizontally within its containing element.
...And 2 more matches
<col> - HTML: Hypertext Markup Language
the
html <col> element defines a column within a table and is used for defining common semantics on all common cells.
..., it is an empty element.
...to the standard pixel and percentage values, this attribute might take the special form 0*, which means that the width of each column in the group should be the minimum width necessary to hold the column's contents.
...And 2 more matches
<dir>: The Directory element (obsolete) - HTML: Hypertext Markup Language
the obsolete
html directory element (<dir>) is used as a container for a directory of files and/or folders, potentially with styles and icons applied by the user agent.
... the obsolete
html directory element (<dir>) is used as a container for a directory of files and/or folders, potentially with styles and icons applied by the user agent.
... the obsolete
html directory element (<dir>) is used as a container for a directory of files and/or folders, potentially with styles and icons applied by the user agent.
...And 2 more matches
<footer> - HTML: Hypertext Markup Language
the
html <footer> element represents a footer for its nearest sectioning content or sectioning root element.
...t a <footer> element must not be a descendant of an <address>, <header> or another <footer> element.
...herefore doesn't introduce a new section in the outline.
...And 2 more matches
<input type="button"> - HTML: Hypertext Markup Language
re on a webpage as required when assigned an event handler function (typically for the click event).
...if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
...const paragraph = document.queryselector('p'); button.addeventlistener('click', updatebutton); function updatebutton() { if (button.value === 'start machine') { button.value = 'stop machine'; paragraph.textcontent = 'the machine has started!'; } else { button.value = 'start machine'; paragraph.textcontent = 'the machine is stopped.'; } } the script gets a reference to the
htmlinputelement object representing the <input> in the dom, saving this refence in the variable button.
...And 2 more matches
<input type="color"> - HTML: Hypertext Markup Language
it will be stored in lower-case form.
...o be invalid if the user agent is unable to convert the user's input into seven-character lower-case hexadecimal notation.
...id if the user agent is unable to convert the user's input into seven-character lower-case hexadecimal notation.
...And 2 more matches
<input type="hidden"> - HTML: Hypertext Markup Language
ent one of the most common uses for hidden inputs is to keep track of what database record needs to be updated when an edit form is submitted.
...eed to use well-designed secrets to actually secure your website.
...log post"> </div> <div> <label for="content">post content:</label> <textarea id="content" name="content" cols="60" rows="5"> this is the content of my excellent blog post.
...And 2 more matches
<ins> - HTML: Hypertext Markup Language
the
html <ins> element represents a range of text that has been added to a document.
...end us a pull request.
...t that creates extra verbosity.
...And 2 more matches
<keygen> - HTML: Hypertext Markup Language
the
html <keygen> element exists to facilitate generation of key material, and submission of the public key as part of an
html form.
... the
html <keygen> element exists to facilitate generation of key material, and submission of the public key as part of an
html form.
... phrasing content, interactive content, listed, labelable, submittable, resettable form-associated element, palpable content.
...And 2 more matches
<legend> - HTML: Hypertext Markup Language
the
html <legend> element represents a caption for the content of its parent <fieldset>.
...tent categories none.
...s a <fieldset> whose first child is this <legend> element implicit aria role no corresponding role permitted aria roles no role permitted dom interface
htmllegendelement attributes this element only includes the global attributes.
...And 2 more matches
<optgroup> - HTML: Hypertext Markup Language
the
html <optgroup> element creates a grouping of options within a <select> element.
...ontent zero or more <option> elements.
...1"> <option>option 1.1</option> </optgroup> <optgroup label="group 2"> <option>option 2.1</option> <option>option 2.2</option> </optgroup> <optgroup label="group 3" disabled> <option>option 3.1</option> <option>option 3.2</option> <option>option 3.3</option> </optgroup> </select> result specifications specification status comment
html living standardthe definition of '<optgroup>' in that specification.
...And 2 more matches
<rb>: The Ruby Base element - HTML: Hypertext Markup Language
the
html ruby base (<rb>) element is used to delimit the base text component of a <ruby> annotation, i.e.
... the
html ruby base (<rb>) element is used to delimit the base text component of a <ruby> annotation, i.e.
...t categories none.
...And 2 more matches
<rp>: The Ruby Fallback Parenthesis element - HTML: Hypertext Markup Language
the
html ruby fallback parenthesis (<rp>) element is used to provide fall-back parentheses for browsers that do not support display of ruby annotations using the <ruby> element.
...mission the end tag can be omitted if the element is immediately followed by an <rt> or another <rp> element, or if there is no more content in the parent element.
...tent provides what should be displayed in order to indicate the presence of a ruby annotation, usually parentheses.
...And 2 more matches
<s> - HTML: Hypertext Markup Language
the
html <s> element renders text with a strikethrough, or a line through it.
...s a pull request.
... none, both the starting and ending tag are mandatory.
...And 2 more matches
<section>: The Generic Section element - HTML: Hypertext Markup Language
the
html <section> element represents a standalone section — which doesn't have a more specific semantic element to represent it — contained within an
html document.
...ement must not be a descendant of an <address> element.
... is for, especially when the sectioning is only for styling purposes.
...And 2 more matches
<source>: The Media or Image Source element - HTML: Hypertext Markup Language
the
html <source> element specifies multiple media resources for the <picture>, the <audio> element, or the <video> element.
... must have a start tag, but must not have an end tag.
...ext of a <picture> element, the browser will fall back to using the image specified by the <picture> element's <img> child if it is unable to find a suitable image to use after examing every provided <source>.
...And 2 more matches
<wbr> - HTML: Hypertext Markup Language
the
html <wbr> element represents a word break opportunity—a position within text where the browser may optionally break a line, though its line-breaking rules would not otherwise create a break at that location.
...uest.
...ing: <div dir=rtl>123,<wbr>456</div> displays, when not broken on two lines, 123,456 and not 456,123.
...And 2 more matches
hidden - HTML: Hypertext Markup Language
as an off-screen buffer, and a form control could refer to a hidden form element using its form attribute.
...the value of the css display property on an element with the hidden attribute overrides the behavior.
...ss display property on an element with the hidden attribute overrides the behavior.
...And 2 more matches
DHTML - MDN Web Docs Glossary: Definitions of Web-related terms
d
html (dynamic
html) refers to the code behind interactive webpages that need no plugins like flash or java.
... d
html (dynamic
html) refers to the code behind interactive webpages that need no plugins like flash or java.
... d
html (dynamic
html) refers to the code behind interactive webpages that need no plugins like flash or java.
... d
html (dynamic
html) refers to the code behind interactive webpages that need no plugins like flash or java.
HTMLIFrameElement.executeScript()
warning: removed in firefox 65.
...rning: removed in firefox 65.
...n onerror handler if not.
...t the script is being executed in the expected context: origin: an origin, e.g.
nsIDOMHTMLAudioElement
the nsidom
htmlaudioelement interface is used to implement the
html5 <audio> element.
... the nsidom
htmlaudioelement interface is used to implement the
html5 <audio> element.
... the nsidom
htmlaudioelement interface is used to implement the
html5 <audio> element.
... the nsidom
htmlaudioelement interface is used to implement the
html5 <audio> element.
nsIDOMHTMLMediaElement
dom/interfaces/
html/nsidom
htmlmediaelement.idlscriptable the basis for the nsidom
htmlaudioelement and nsidom
htmlvideoelement interfaces, which in turn implement the <audio> and <video>
html5 elements.
... dom/interfaces/
html/nsidom
htmlmediaelement.idlscriptable the basis for the nsidom
htmlaudioelement and nsidom
htmlvideoelement interfaces, which in turn implement the <audio> and <video>
html5 elements.
... dom/interfaces/
html/nsidom
htmlmediaelement.idlscriptable the basis for the nsidom
htmlaudioelement and nsidom
htmlvideoelement interfaces, which in turn implement the <audio> and <video>
html5 elements.
... dom/interfaces/
html/nsidom
htmlmediaelement.idlscriptable the basis for the nsidom
htmlaudioelement and nsidom
htmlvideoelement interfaces, which in turn implement the <audio> and <video>
html5 elements.
nsIDOMHTMLSourceElement
the nsidom
htmlsourceelement interface is the dom interface to the source child of the audio and video media elements in
html.
... the nsidom
htmlsourceelement interface is the dom interface to the source child of the audio and video media elements in
html.
... the nsidom
htmlsourceelement interface is the dom interface to the source child of the audio and video media elements in
html.
... the nsidom
htmlsourceelement interface is the dom interface to the source child of the audio and video media elements in
html.
HTMLAnchorElement.rel - Web APIs
the
htmlanchorelement.rel property reflects the rel attribute.
...cating the relationship between the resource represented by the <a> element and the current document.
...nchorelt.rel = relstr; example var anchors = document.getelementsbytagname("a"); var length = anchors.length; for (var i = 0; i < length; i++) { alert("rel: " + anchors[i].rel); } specifications specification status comment
html living standardthe definition of 'rel' in that specification.
...entsbytagname("a"); var length = anchors.length; for (var i = 0; i < length; i++) { alert("rel: " + anchors[i].rel); } specifications specification status comment
html living standardthe definition of 'rel' in that specification.
HTMLDialogElement.returnValue - Web APIs
the returnvalue property of the
htmldialogelement interface gets or sets the return value for the <dialog>, usually to indicate which button the user pressed to close it.
...== 'confirm') { // user chose a favorite animal, do something with it } } // “update details” button opens the <dialog> modally updatebutton.addeventlistener('click', function() { dialog.showmodal(); opencheck(dialog); handleuserinput(dialog.returnvalue); }); })(); </script> note: you can find this example on github as
htmldialogelement-basic (see it live also).
...etails” button opens the <dialog> modally updatebutton.addeventlistener('click', function() { dialog.showmodal(); opencheck(dialog); handleuserinput(dialog.returnvalue); }); })(); </script> note: you can find this example on github as
htmldialogelement-basic (see it live also).
... dialog.showmodal(); opencheck(dialog); handleuserinput(dialog.returnvalue); }); })(); </script> note: you can find this example on github as
htmldialogelement-basic (see it live also).
HTMLDialogElement.show() - Web APIs
the show() method of the
htmldialogelement interface displays the dialog modelessly, i.e.
...ialogelement interface displays the dialog modelessly, i.e.
...pdatebutton.addeventlistener('click', function() { dialog.showmodal(); opencheck(dialog); }); // form cancel button closes the dialog box cancelbutton.addeventlistener('click', function() { dialog.close('animalnotchosen'); opencheck(dialog); }); })(); </script> specifications specification status comment
html living standardthe definition of 'show()' in that specification.
...); }); // form cancel button closes the dialog box cancelbutton.addeventlistener('click', function() { dialog.close('animalnotchosen'); opencheck(dialog); }); })(); </script> specifications specification status comment
html living standardthe definition of 'show()' in that specification.
HTMLElement: change event - Web APIs
he 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 <input type="date">, by selecting a file in the file picker for <input 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 <input type="text">).
...ick, by selecting a date from a date picker for <input type="date">, by selecting a file in the file picker for <input 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 <input type="text">).
...ment.addeventlistener('change', (event) => { const result = document.queryselector('.result'); result.textcontent = `you like ${event.target.value}`; }); result text input element for some elements, including <input type="text">, the change event doesn't fire until the control loses focus.
...mewhere else to trigger the event.
HTMLElement.lang - Web APIs
the
htmlelement.lang property gets or sets the base language of an element's attribute values and text content.
...ing variable that gets the language in which the text of the current element is written.
... a string variable with its value setting the language in which the text of the current element is written.
...this snippet compares the base language and // redirects to another url based on language if (document.documentelement.lang === "en") { window.location.href = "some_document.
html.en"; } else if (document.documentelement.lang === "ru") { window.location.href = "some_document.
html.ru"; } specification specification status comment document object model (dom) level 2
html specificationthe definition of 'lang' in that specification.
HTMLElement.title - Web APIs
the
htmlelement.title property represents the title of the element: the text usually displayed in a 'tooltip' popup when the mouse is over the node.
... of the element: the text usually displayed in a 'tooltip' popup when the mouse is over the node.
...tle = str; example const link = document.createelement('a'); link.innertext = 'grapes'; link.href = 'https://en.wikipedia.org/wiki/grape'; link.title = 'wikipedia page on grapes'; specifications specification status comment
html living standardthe definition of 'title' in that specification.
...ink.innertext = 'grapes'; link.href = 'https://en.wikipedia.org/wiki/grape'; link.title = 'wikipedia page on grapes'; specifications specification status comment
html living standardthe definition of 'title' in that specification.
HTMLFormElement.enctype - Web APIs
the
htmlformelement.enctype property is the mime type of content that is used to submit the form to the server.
... the
htmlformelement.enctype property is the mime type of content that is used to submit the form to the server.
...ata: the type that allows file <input> element(s) to upload file data.
...element(s) to upload file data.
HTMLFormElement.reset() - Web APIs
the
htmlformelement.reset() method restores a form element's default values.
... the
htmlformelement.reset() method restores a form element's default values.
...ethod does the same thing as clicking the form's reset button.
...he form's reset button.
HTMLHyperlinkElementUtils.hash - Web APIs
the
htmlhyperlinkelementutils.hash property returns a usvstring containing a '#' followed by the fragment identifier of the url.
... the
htmlhyperlinkelementutils.hash property returns a usvstring containing a '#' followed by the fragment identifier of the url.
...ent identifier, this property contains an empty string, "".
...an empty string, "".
HTMLHyperlinkElementUtils.host - Web APIs
the
htmlhyperlinkelementutils.host property is a usvstring containing the host, that is the hostname, and then, if the port of the url is nonempty, a ':', and the port of the url.
... the
htmlhyperlinkelementutils.host property is a usvstring containing the host, that is the hostname, and then, if the port of the url is nonempty, a ':', and the port of the url.
...ring containing the host, that is the hostname, and then, if the port of the url is nonempty, a ':', and the port of the url.
...hor = document.createelement("a"); anchor.href = "https://developer.mozilla.org/
htmlhyperlinkelementutils.host" anchor.host == "developer.mozilla.org" anchor.href = "https://developer.mozilla.org:443/
htmlhyperlinkelementutils.host" anchor.host == "developer.mozilla.org" // the port number is not included because 443 is the scheme's default port anchor.href = "https://developer.mozilla.org:4097/
htmlhyperlinkelementutils.host" anchor.host == "developer.mozilla.org:4097" specifications specification status comment
html living standardthe definition of '
htmlhyperlinkelementutils.host' in that specification.
HTMLHyperlinkElementUtils.hostname - Web APIs
the
htmlhyperlinkelementutils.hostname property is a usvstring containing the domain of the url.
... the
htmlhyperlinkelementutils.hostname property is a usvstring containing the domain of the url.
...he url.
...me; object.hostname = string; examples // let's an <a id="myanchor" href="https://developer.mozilla.org/docs/
htmlhyperlinkelementutils.hostname"> element be in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.hostname; // returns:'developer.mozilla.org' specifications specification status comment
html living standardthe definition of '
htmlhyperlinkelementutils.hostname' in that specification.
HTMLHyperlinkElementUtils.href - Web APIs
the
htmlhyperlinkelementutils.href property is a stringifier that returns a usvstring containing the whole url, and allows the href to be updated.
... the
htmlhyperlinkelementutils.href property is a stringifier that returns a usvstring containing the whole url, and allows the href to be updated.
...at returns a usvstring containing the whole url, and allows the href to be updated.
...bject.href; object.href = string; examples // lets imagine an <a id="myanchor" href="https://developer.mozilla.org/
htmlhyperlinkelementutils/href"> element is in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.href; // returns: 'https://developer.mozilla.org/
htmlhyperlinkelementutils/href' specifications specification status comment
html living standardthe definition of '
htmlhyperlinkelementutils.href' in that specification.
HTMLHyperlinkElementUtils.password - Web APIs
the
htmlhyperlinkelementutils.password property is a usvstring containing the password specified before the domain name.
... the
htmlhyperlinkelementutils.password property is a usvstring containing the password specified before the domain name.
...lently fails.
...password; object.password = string; examples // let's <a id="myanchor" href="https://anonymous:flabada@developer.mozilla.org/docs/
htmlhyperlinkelementutils.username"> be in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.password; // returns:'flabada' specifications specification status comment
html living standardthe definition of '
htmlhyperlinkelementutils.password' in that specification.
HTMLHyperlinkElementUtils.pathname - Web APIs
the
htmlhyperlinkelementutils.pathname property is a usvstring containing an initial '/' followed by the path of the url (or the empty string if there is no path).
... the
htmlhyperlinkelementutils.pathname property is a usvstring containing an initial '/' followed by the path of the url (or the empty string if there is no path).
...ning an initial '/' followed by the path of the url (or the empty string if there is no path).
...ing = object.pathname; object.pathname = string; examples // let's an <a id="myanchor" href="https://developer.mozilla.org/docs/
htmlhyperlinkelementutils.pathname"> element be in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.pathname; // returns:'/docs/
htmlhyperlinkelementutils.pathname' specifications specification status comment
html living standardthe definition of '
htmlhyperlinkelementutils.pathname' in that specification.
HTMLHyperlinkElementUtils.port - Web APIs
the
htmlhyperlinkelementutils.port property is a usvstring containing the port number of the url.
... the
htmlhyperlinkelementutils.port property is a usvstring containing the port number of the url.
...t port number, it will be set to ''.
...yntax string = object.port; object.port = string; examples // let's an <a id="myanchor" href="https://developer.mozilla.org:443/docs/
htmlhyperlinkelementutils.port"> element be in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.port; // returns:'443' specifications specification status comment
html living standardthe definition of '
htmlhyperlinkelementutils.port' in that specification.
HTMLHyperlinkElementUtils.protocol - Web APIs
the
htmlhyperlinkelementutils.protocol property is a usvstring representing the protocol scheme of the url, including the final ':'.
... the
htmlhyperlinkelementutils.protocol property is a usvstring representing the protocol scheme of the url, including the final ':'.
..., including the final ':'.
...ing = object.protocol; object.protocol = string; examples // let's an <a id="myanchor" href="https://developer.mozilla.org/
htmlhyperlinkelementutils.protocol"> element be in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.protocol; // returns:'https:' specifications specification status comment
html living standardthe definition of '
htmlhyperlinkelementutils.protocol' in that specification.
HTMLHyperlinkElementUtils.username - Web APIs
the
htmlhyperlinkelementutils.username property is a usvstring containing the username specified before the domain name.
... the
htmlhyperlinkelementutils.username property is a usvstring containing the username specified before the domain name.
...omain name.
...ername; object.username = string; examples // let's <a id="myanchor" href="https://anonymous:flabada@developer.mozilla.org/docs/
htmlhyperlinkelementutils.username"> be in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.username; // returns:'anonymous' specifications specification status comment
html living standardthe definition of '
htmlhyperlinkelementutils.username' in that specification.
HTMLIFrameElement.allowPaymentRequest - Web APIs
the allowpaymentrequest property of the
htmliframeelement interface returns a boolean indicating whether the payment request api may be invoked on a cross-origin iframe.
... the allowpaymentrequest property of the
htmliframeelement interface returns a boolean indicating whether the payment request api may be invoked on a cross-origin iframe.
... a boolean indicating whether the payment request api may be invoked on a cross-origin iframe.
...nt request api may be invoked on a cross-origin iframe.
HTMLIFrameElement.referrerPolicy - Web APIs
the
htmliframeelement.referrerpolicy property reflects the
html referrerpolicy attribute of the <iframe> element defining which referrer is sent when fetching the resource.
...equests.
...ferrerpolicy = "unsafe-url"; var body = document.getelementsbytagname("body")[0]; body.appendchild(iframe); // fetch the image using the complete url as the referrer specifications specification status comment referrer policythe definition of 'referrerpolicy attribute' in that specification.
... document.getelementsbytagname("body")[0]; body.appendchild(iframe); // fetch the image using the complete url as the referrer specifications specification status comment referrer policythe definition of 'referrerpolicy attribute' in that specification.
HTMLImageElement.complete - Web APIs
the read-only
htmlimageelement interface's complete attribute is a boolean value which indicates whether or not the image has completely loaded.
... the read-only
htmlimageelement interface's complete attribute is a boolean value which indicates whether or not the image has completely loaded.
...//somesite.net/huge-image.jpg", lightboximgelem); lightboxcontrolselem.disabled = false; } /* ...
...ximgelem); lightboxcontrolselem.disabled = false; } /* ...
HTMLImageElement.decode() - Web APIs
the decode() method of the
htmlimageelement interface returns a promise that resolves when the image is decoded and it is safe to append the image to the dom.
...pend the image to the dom.
...age data is ready to be used.
... the image to the dom in a load event handler, such as by using the img.onload event handler, and by handling the error in the error event's handler.
HTMLImageElement.loading - Web APIs
the
htmlimageelement property loading is a string whose value provides a hint to the user agent that tells the browser how to handle loading images which are currently outside the window's visual viewport.
...operty loading is a string whose value provides a hint to the user agent that tells the browser how to handle loading images which are currently outside the window's visual viewport.
... whose value provides a hint to the user agent that tells the browser how to handle loading images which are currently outside the window's visual viewport.
...ument.queryselector("div.photo-list"); let newitem = document.createelement("div"); newitem.classname = "photo-item"; let newimg = document.createelement("img"); newimg.loading = "lazy"; newimg.width = 320; newimg.height = 240; newimg.src = url; newitem.appendchild(newimg); list.appendchild(newitem); } specifications specification status comment
html living standardthe definition of '
htmlimageelement.loading' in that specification.
HTMLInputElement: invalid event - Web APIs
or after the checkvalidity() method of the element or its owner <form> is called.
..." required></label></li> <li><input type="submit" value="submit"></li> </ul> </form><p id="log"></p> javascript const input = document.queryselector('input') const log = document.getelementbyid('log') input.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.
...avascript const input = document.queryselector('input') const log = document.getelementbyid('log') input.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.
...g') input.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.
HTMLInputElement.labels - Web APIs
the
htmlinputelement.labels read-only property returns a nodelist of the <label> elements associated with the <input> element.
... the
htmlinputelement.labels read-only property returns a nodelist of the <label> elements associated with the <input> element.
...</label> <input id="test"/> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const input = document.getelementbyid("test"); for(var i = 0; i < input.labels.length; i++) { console.log(input.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment
html living standardthe definition of 'labels' in that specification.
...("domcontentloaded", function() { const input = document.getelementbyid("test"); for(var i = 0; i < input.labels.length; i++) { console.log(input.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment
html living standardthe definition of 'labels' in that specification.
HTMLInputElement.webkitdirectory - Web APIs
the
htmlinputelement.webkitdirectory is a property that reflects the webkitdirectory
html attribute and indicates that the <input> element should let the user select directories instead of files.
...element.webkitdirectory is a property that reflects the webkitdirectory
html attribute and indicates that the <input> element should let the user select directories instead of files.
... the hierarchy even though the filelist is flat.
... content <input type="file" id="filepicker" name="filelist" webkitdirectory multiple /> <ul id="listing"></ul> javascript content document.getelementbyid("filepicker").addeventlistener("change", function(event) { let output = document.getelementbyid("listing"); let files = event.target.files; for (let i=0; i<files.length; i++) { let item = document.createelement("li"); item.inner
html = files[i].webkitrelativepath; output.appendchild(item); }; }, false); result specifications specification status comment file and directory entries apithe definition of 'webkitdirectory' in that specification.
HTMLLinkElement.rel - Web APIs
the
htmllinkelement.rel property reflects the rel attribute.
...the property is set to stylesheet, and the href attribute is set to the url of an external style sheet to format the page.
...tr = linkelt.rel; linkelt.rel = relstr; example var links = document.getelementsbytagname('link'); var length = links.length; for (var i = 0; i < length; i++) { alert(links[i]); } specifications specification status comment
html living standardthe definition of 'rel' in that specification.
...ocument.getelementsbytagname('link'); var length = links.length; for (var i = 0; i < length; i++) { alert(links[i]); } specifications specification status comment
html living standardthe definition of 'rel' in that specification.
HTMLMediaElement.canPlayType() - Web APIs
the
htmlmediaelement method canplaytype() reports how likely it is that the current browser will be able to play media of a given mime type.
...enough information is available to determine for sure whether or not the media will play until playback is actually attempted.
...actually attempted.
...(empty string) media of the given type definitely can't be played on the current device.
HTMLMediaElement: canplay event - Web APIs
user agent can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.
...n loaded to play the media up to its end without having to stop for further buffering of content.
...ryselector('video'); video.addeventlistener('canplay', (event) => { console.log('video can start, but not sure it will play through.'); }); using the oncanplay event handler property: const video = document.queryselector('video'); video.oncanplay = (event) => { console.log('video can start, but not sure it will play through.'); }; specifications specification status
html living standardthe definition of 'canplay media event' in that specification.
...re it will play through.'); }); using the oncanplay event handler property: const video = document.queryselector('video'); video.oncanplay = (event) => { console.log('video can start, but not sure it will play through.'); }; specifications specification status
html living standardthe definition of 'canplay media event' in that specification.
HTMLMediaElement: canplaythrough event - Web APIs
er agent can play the media, and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content.
...d to play the media up to its end without having to stop for further buffering of content.
... play through the entire ' + ' video without ever having to stop to buffer.'); }); using the oncanplaythrough event handler property: const video = document.queryselector('video'); video.oncanplaythrough = (event) => { console.log('i think i can play thru the entire ' + ' video without ever having to stop to buffer.'); }; specifications specification status
html living standardthe definition of 'canplaythrough media event' in that specification.
...vent handler property: const video = document.queryselector('video'); video.oncanplaythrough = (event) => { console.log('i think i can play thru the entire ' + ' video without ever having to stop to buffer.'); }; specifications specification status
html living standardthe definition of 'canplaythrough media event' in that specification.
HTMLMediaElement: durationchange event - Web APIs
the durationchange event is fired when the duration attribute has been updated.
... the durationchange event is fired when the duration attribute has been updated.
...eventlistener('durationchange', (event) => { console.log('not sure why, but the duration of the video has changed.'); }); using the ondurationchange event handler property: const video = document.queryselector('video'); video.ondurationchange = (event) => { console.log('not sure why, but the duration of the video has changed.'); }; specifications specification status
html living standardthe definition of 'durationchange media event' in that specification.
...; }); using the ondurationchange event handler property: const video = document.queryselector('video'); video.ondurationchange = (event) => { console.log('not sure why, but the duration of the video has changed.'); }; specifications specification status
html living standardthe definition of 'durationchange media event' in that specification.
HTMLMediaElement: emptied event - Web APIs
when the media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to reload it.
...edia has already been loaded (or partially loaded), and the load() method is called to reload it.
...ment.queryselector('video'); video.addeventlistener('emptied', (event) => { console.log('uh oh.
... empty.
HTMLMediaElement.fastSeek() - Web APIs
the
htmlmediaelement.fastseek() method quickly seeks the media to the new time with precision tradeoff.
... the
htmlmediaelement.fastseek() method quickly seeks the media to the new time with precision tradeoff.
... the
htmlmediaelement.fastseek() method quickly seeks the media to the new time with precision tradeoff.
...k with precision, you should set
htmlmediaelement.currenttime instead.
HTMLMediaElement: loadeddata event - Web APIs
the loadeddata event is fired when the frame at the current playback position of the media has finished loading; often the first frame.
... bubbles no cancelable no interface event target element default action none event handler property globaleventhandlers.onloadeddata specification
html5 media note that this event will not fire in mobile/tablet devices if data-saver is on in browser settings.
...ate just increased to ' + 'have_current_data or greater for the first time.'); }); using the onloadeddata event handler property: const video = document.queryselector('video'); video.onloadeddata = (event) => { console.log('yay!
...event handler property: const video = document.queryselector('video'); video.onloadeddata = (event) => { console.log('yay!
HTMLMediaElement: loadedmetadata event - Web APIs
the loadedmetadata event is fired when the metadata has been loaded.
...ification
html5 media additional properties property type description mozchannels read only int the number of channels.
... console.log('the duration and dimensions ' + ' of the media and tracks are now known.
...edmetadata event handler property: const video = document.queryselector('video'); video.onloadedmetadata = (event) => { console.log('the duration and dimensions ' + ' of the media and tracks are now known.
HTMLMediaElement.pause() - Web APIs
the
htmlmediaelement.pause() method will pause playback of the media, if the media is already in a paused state this method will have no effect.
... the
htmlmediaelement.pause() method will pause playback of the media, if the media is already in a paused state this method will have no effect.
... the
htmlmediaelement.pause() method will pause playback of the media, if the media is already in a paused state this method will have no effect.
...ack of the media, if the media is already in a paused state this method will have no effect.
HTMLMediaElement: pause event - Web APIs
call to the element's pause() method.
...ethod returns and after the media element's paused property has been changed to true.
...ause() method was called or the autoplay attribute was toggled.'); }); using the onpause event handler property: const video = document.queryselector('video'); video.onpause = (event) => { console.log('the boolean paused property is now true.
...rty: const video = document.queryselector('video'); video.onpause = (event) => { console.log('the boolean paused property is now true.
HTMLMediaElement.play() - Web APIs
the
htmlmediaelement play() method attempts to begin playback of the media.
... the
htmlmediaelement play() method attempts to begin playback of the media.
... it begins by collecting references to the <video> element as well as the <button> used to toggle playback on and off.
... handler for the click event on the play toggle button and attempts to automatically begin playback by calling playvideo().
HTMLMediaElement: play event - Web APIs
the play event is fired when the paused property is changed from true to false, as a result of the play method, or the autoplay attribute.
...d property is changed from true to false, as a result of the play method, or the autoplay attribute.
...+ 'play() method was called or the autoplay attribute was toggled.'); }); using the onplay event handler property: const video = document.queryselector('video'); video.onplay = (event) => { console.log('the boolean paused property is now false.
...property: const video = document.queryselector('video'); video.onplay = (event) => { console.log('the boolean paused property is now false.
HTMLMediaElement: playing event - Web APIs
the playing event is fired when playback is ready to start after having been paused or delayed due to lack of data.
...is fired when playback is ready to start after having been paused or delayed due to lack of data.
...addeventlistener(): const video = document.queryselector('video'); video.addeventlistener('playing', (event) => { console.log('video is no longer paused'); }); using the onplaying event handler property: const video = document.queryselector('video'); video.onplaying = (event) => { console.log('video is no longer paused.'); }; specifications specification status
html living standardthe definition of 'playing media event' in that specification.
...=> { console.log('video is no longer paused'); }); using the onplaying event handler property: const video = document.queryselector('video'); video.onplaying = (event) => { console.log('video is no longer paused.'); }; specifications specification status
html living standardthe definition of 'playing media event' in that specification.
HTMLMediaElement: ratechange event - Web APIs
the ratechange event is fired when the playback rate has changed.
... the ratechange event is fired when the playback rate has changed.
...ntlistener(): const video = document.queryselector('video'); video.addeventlistener('ratechange', (event) => { console.log('the playback rate changed.'); }); using the onratechange event handler property: const video = document.queryselector('video'); video.onratechange = (event) => { console.log('the playback rate changed.'); }; specifications specification status
html living standardthe definition of 'ratechange media event' in that specification.
... console.log('the playback rate changed.'); }); using the onratechange event handler property: const video = document.queryselector('video'); video.onratechange = (event) => { console.log('the playback rate changed.'); }; specifications specification status
html living standardthe definition of 'ratechange media event' in that specification.
HTMLMediaElement: seeked event - Web APIs
the seeked event is fired when a seek operation completed, the current playback position has changed, and the boolean seeking attribute is changed to false.
... the current playback position has changed, and the boolean seeking attribute is changed to false.
...yselector('video'); video.addeventlistener('seeked', (event) => { console.log('video found the playback position it was looking for.'); }); using the onseeked event handler property: const video = document.queryselector('video'); video.onseeked = (event) => { console.log('video found the playback position it was looking for.'); }; specifications specification status
html living standardthe definition of 'seeked media event' in that specification.
...ition it was looking for.'); }); using the onseeked event handler property: const video = document.queryselector('video'); video.onseeked = (event) => { console.log('video found the playback position it was looking for.'); }; specifications specification status
html living standardthe definition of 'seeked media event' in that specification.
HTMLMediaElement: seeking event - Web APIs
the seeking event is fired when a seek operation starts, meaning the boolean seeking attribute has changed to true and the media is seeking a new position.
...eaning the boolean seeking attribute has changed to true and the media is seeking a new position.
...istener(): const video = document.queryselector('video'); video.addeventlistener('seeking', (event) => { console.log('video is seeking a new position.'); }); using the onseeking event handler property: const video = document.queryselector('video'); video.onseeking = (event) => { console.log('video is seeking a new position.'); }; specifications specification status
html living standardthe definition of 'seeking media event' in that specification.
...nsole.log('video is seeking a new position.'); }); using the onseeking event handler property: const video = document.queryselector('video'); video.onseeking = (event) => { console.log('video is seeking a new position.'); }; specifications specification status
html living standardthe definition of 'seeking media event' in that specification.
HTMLMediaElement: stalled event - Web APIs
the stalled event is fired when the user agent is trying to fetch media data, but data is unexpectedly not forthcoming.
...ired when the user agent is trying to fetch media data, but data is unexpectedly not forthcoming.
...tener(): const video = document.queryselector('video'); video.addeventlistener('stalled', (event) => { console.log('failed to fetch data, but trying.'); }); using the onstalled event handler property: const video = document.queryselector('video'); video.onstalled = (event) => { console.log('failed to fetch data, but trying.'); }; specifications specification status
html living standardthe definition of 'stalled media event' in that specification.
...ole.log('failed to fetch data, but trying.'); }); using the onstalled event handler property: const video = document.queryselector('video'); video.onstalled = (event) => { console.log('failed to fetch data, but trying.'); }; specifications specification status
html living standardthe definition of 'stalled media event' in that specification.
HTMLMediaElement: suspend event - Web APIs
the suspend event is fired when media data loading has been suspended.
... the suspend event is fired when media data loading has been suspended.
...istener(): const video = document.queryselector('video'); video.addeventlistener('suspend', (event) => { console.log('data loading has been suspended.'); }); using the onsuspend event handler property: const video = document.queryselector('video'); video.onsuspend = (event) => { console.log('data loading has been suspended.'); }; specifications specification status
html living standardthe definition of 'suspend media event' in that specification.
...nsole.log('data loading has been suspended.'); }); using the onsuspend event handler property: const video = document.queryselector('video'); video.onsuspend = (event) => { console.log('data loading has been suspended.'); }; specifications specification status
html living standardthe definition of 'suspend media event' in that specification.
HTMLMediaElement: timeupdate event - Web APIs
he average cost of processing the event each time, so that the ui updates are not any more frequent than the user agent can comfortably handle while decoding the video.
...are not any more frequent than the user agent can comfortably handle while decoding the video.
...'video'); video.addeventlistener('timeupdate', (event) => { console.log('the currenttime attribute has been updated.
...ated.
HTMLMediaElement.videoTracks - Web APIs
the read-only videotracks property on
htmlmediaelement objects returns a videotracklist object listing all of the videotrack objects representing the media element's video tracks.
...acks = mediaelement.videotracks; value a videotracklist object representing the list of video tracks included in the media element.
... a videotracklist object representing the list of video tracks included in the media element.
...ent.
HTMLMediaElement: volumechange event - Web APIs
the volumechange event is fired when the volume has changed.
... the volumechange event is fired when the volume has changed.
...deventlistener(): const video = document.queryselector('video'); video.addeventlistener('volumechange', (event) => { console.log('the volume changed.'); }); using the onvolumechange event handler property: const video = document.queryselector('video'); video.onvolumechange = (event) => { console.log('the volume changed.'); }; specifications specification status
html living standardthe definition of 'volumechange media event' in that specification.
... { console.log('the volume changed.'); }); using the onvolumechange event handler property: const video = document.queryselector('video'); video.onvolumechange = (event) => { console.log('the volume changed.'); }; specifications specification status
html living standardthe definition of 'volumechange media event' in that specification.
HTMLMediaElement: waiting event - Web APIs
the waiting event is fired when playback has stopped because of a temporary lack of data.
... the waiting event is fired when playback has stopped because of a temporary lack of data.
...tener(): const video = document.queryselector('video'); video.addeventlistener('waiting', (event) => { console.log('video is waiting for more data.'); }); using the onwaiting event handler property: const video = document.queryselector('video'); video.onwaiting = (event) => { console.log('video is waiting for more data.'); }; specifications specification status
html living standardthe definition of 'waiting media event' in that specification.
...ole.log('video is waiting for more data.'); }); using the onwaiting event handler property: const video = document.queryselector('video'); video.onwaiting = (event) => { console.log('video is waiting for more data.'); }; specifications specification status
html living standardthe definition of 'waiting media event' in that specification.
HTMLMeterElement.labels - Web APIs
the
htmlmeterelement.labels read-only property returns a nodelist of the <label> elements associated with the <meter> element.
... the
htmlmeterelement.labels read-only property returns a nodelist of the <label> elements associated with the <meter> element.
..."100" value="70">70</meter> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const meter = document.getelementbyid("test"); for(var i = 0; i < meter.labels.length; i++) { console.log(meter.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment
html living standardthe definition of 'labels' in that specification.
...("domcontentloaded", function() { const meter = document.getelementbyid("test"); for(var i = 0; i < meter.labels.length; i++) { console.log(meter.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment
html living standardthe definition of 'labels' in that specification.
HTMLObjectElement.data - Web APIs
the data property of the
htmlobjectelement interface returns a domstring that reflects the data
html attribute, specifying the address of a resource's data.
... the data property of the
htmlobjectelement interface returns a domstring that reflects the data
html attribute, specifying the address of a resource's data.
... the data property of the
htmlobjectelement interface returns a domstring that reflects the data
html attribute, specifying the address of a resource's data.
... the data property of the
htmlobjectelement interface returns a domstring that reflects the data
html attribute, specifying the address of a resource's data.
HTMLObjectElement.height - Web APIs
the height property of the
htmlobjectelement interface returns a domstring that reflects the height
html attribute, specifying the displayed height of the resource in css pixels.
... the height property of the
htmlobjectelement interface returns a domstring that reflects the height
html attribute, specifying the displayed height of the resource in css pixels.
... the height property of the
htmlobjectelement interface returns a domstring that reflects the height
html attribute, specifying the displayed height of the resource in css pixels.
... the height property of the
htmlobjectelement interface returns a domstring that reflects the height
html attribute, specifying the displayed height of the resource in css pixels.
HTMLObjectElement.name - Web APIs
the name property of the
htmlobjectelement interface returns a domstring that reflects the name
html attribute, specifying the name of the browsing context.
... the name property of the
htmlobjectelement interface returns a domstring that reflects the name
html attribute, specifying the name of the browsing context.
... the name property of the
htmlobjectelement interface returns a domstring that reflects the name
html attribute, specifying the name of the browsing context.
... the name property of the
htmlobjectelement interface returns a domstring that reflects the name
html attribute, specifying the name of the browsing context.
HTMLObjectElement.type - Web APIs
the type property of the
htmlobjectelement interface returns a domstring that reflects the type
html attribute, specifying the mime type of the resource.
... the type property of the
htmlobjectelement interface returns a domstring that reflects the type
html attribute, specifying the mime type of the resource.
... the type property of the
htmlobjectelement interface returns a domstring that reflects the type
html attribute, specifying the mime type of the resource.
... the type property of the
htmlobjectelement interface returns a domstring that reflects the type
html attribute, specifying the mime type of the resource.
HTMLObjectElement.useMap - Web APIs
the usemap property of the
htmlobjectelement interface returns a domstring that reflects the usemap
html attribute, specifying a <map> element to use.
... the usemap property of the
htmlobjectelement interface returns a domstring that reflects the usemap
html attribute, specifying a <map> element to use.
... the usemap property of the
htmlobjectelement interface returns a domstring that reflects the usemap
html attribute, specifying a <map> element to use.
... the usemap property of the
htmlobjectelement interface returns a domstring that reflects the usemap
html attribute, specifying a <map> element to use.
HTMLObjectElement.width - Web APIs
the width property of the
htmlobjectelement interface returns a domstring that reflects the width
html attribute, specifying the displayed width of the resource in css pixels.
... the width property of the
htmlobjectelement interface returns a domstring that reflects the width
html attribute, specifying the displayed width of the resource in css pixels.
... the width property of the
htmlobjectelement interface returns a domstring that reflects the width
html attribute, specifying the displayed width of the resource in css pixels.
... the width property of the
htmlobjectelement interface returns a domstring that reflects the width
html attribute, specifying the displayed width of the resource in css pixels.
HTMLObjectElement.willValidate - Web APIs
the willvalidate read-only property of the
htmlobjectelement interface returns a boolean that indicates whether the element is a candidate for constraint validation.
... the willvalidate read-only property of the
htmlobjectelement interface returns a boolean that indicates whether the element is a candidate for constraint validation.
... the willvalidate read-only property of the
htmlobjectelement interface returns a boolean that indicates whether the element is a candidate for constraint validation.
... the willvalidate read-only property of the
htmlobjectelement interface returns a boolean that indicates whether the element is a candidate for constraint validation.
HTMLOrForeignElement.tabIndex - Web APIs
the tabindex property of the
htmlorforeignelement interface represents the tab order of the current element.
... values don't need to be sequential, nor must they begin with any particular value.
...ge values.
....tabindex; value index is an integer example const b1 = document.getelementbyid('button1'); b1.tabindex = 1; specifications specification status comment
html living standardthe definition of 'tabindex' in that specification.
HTMLOutputElement.labels - Web APIs
the
htmloutputelement.labels read-only property returns a nodelist of the <label> elements associated with the <output> element.
... the
htmloutputelement.labels read-only property returns a nodelist of the <label> elements associated with the <output> element.
...d="test">output</output> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const output = document.getelementbyid("test"); for(var i = 0; i < output.labels.length; i++) { console.log(output.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment
html living standardthe definition of 'labels' in that specification.
...omcontentloaded", function() { const output = document.getelementbyid("test"); for(var i = 0; i < output.labels.length; i++) { console.log(output.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment
html living standardthe definition of 'labels' in that specification.
HTMLProgressElement.labels - Web APIs
the
htmlprogresselement.labels read-only property returns a nodelist of the <label> elements associated with the <progress> element.
... the
htmlprogresselement.labels read-only property returns a nodelist of the <label> elements associated with the <progress> element.
...00">70%</progress> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const progress = document.getelementbyid("test"); for(var i = 0; i < progress.labels.length; i++) { console.log(progress.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment
html living standardthe definition of 'labels' in that specification.
...entloaded", function() { const progress = document.getelementbyid("test"); for(var i = 0; i < progress.labels.length; i++) { console.log(progress.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment
html living standardthe definition of 'labels' in that specification.
HTMLScriptElement.referrerPolicy - Web APIs
the referrerpolicy property of the
htmlscriptelement interface reflects the
html referrerpolicy of the <script> element and fetches made by that script, defining which referrer is sent when fetching the resource.
... no-referrer-when-downgrade (default) this is the user agent's default behavior if no policy is specified.
...de.
...nt.createelement("script"); scriptelem.src = "/"; scriptelem.referrerpolicy = "unsafe-url"; document.body.appendchild(script); specifications specification status comment referrer policythe definition of 'referrerpolicy attribute' in that specification.
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 input focus when the page loads, unless the user overrides it.
...'t set the focus to the associated <select> element: it merely tells the browser to focus to it when the element is inserted in the document.
...lue of autofocus aselectelement.autofocus = abool; // set the value of autofocus example
html <select id="myselect" autofocus> <option>option 1</option> <option>option 2</option> </select> javascript // check if the autofocus attribute on the <select> var hasautofocus = document.getelementbyid('myselect').autofocus; specifications specification status comment
html living standardthe definition of 'autofocus' in that specification.
... id="myselect" autofocus> <option>option 1</option> <option>option 2</option> </select> javascript // check if the autofocus attribute on the <select> var hasautofocus = document.getelementbyid('myselect').autofocus; specifications specification status comment
html living standardthe definition of 'autofocus' in that specification.
HTMLSelectElement.labels - Web APIs
the
htmlselectelement.labels read-only property returns a nodelist of the <label> elements associated with the <select> element.
... the
htmlselectelement.labels read-only property returns a nodelist of the <label> elements associated with the <select> element.
...ion 2</option> </select> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const select = document.getelementbyid("test"); for(var i = 0; i < select.labels.length; i++) { console.log(select.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment
html living standardthe definition of 'labels' in that specification.
...omcontentloaded", function() { const select = document.getelementbyid("test"); for(var i = 0; i < select.labels.length; i++) { console.log(select.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment
html living standardthe definition of 'labels' in that specification.
HTMLSlotElement.assignedNodes() - Web APIs
the assignednodes() property of the
htmlslotelement interface returns a sequence of the nodes assigned to this slot, and if the flatten option is set to true, the assigned nodes of any other slots that are descendants of this slot.
... the assignednodes() property of the
htmlslotelement interface returns a sequence of the nodes assigned to this slot, and if the flatten option is set to true, the assigned nodes of any other slots that are descendants of this slot.
...) or not (false).
...nces to all the slots, then add a slotchange event listener to the 2nd slot in the template — which is the one that keeps having its contents changed in the example.
HTMLTableElement.bgColor - Web APIs
the
htmltableelement.bgcolor property represents the background color of the table.
... the
htmltableelement.bgcolor property represents the background color of the table.
...d be used instead by modifying the element's style object or using a style rule.
...used instead by modifying the element's style object or using a style rule.
HTMLTableElement.frame - Web APIs
the
htmltableelement interface's frame property is a string that indicates which of the table's exterior borders should be drawn.
... the
htmltableelement interface's frame property is a string that indicates which of the table's exterior borders should be drawn.
... the
htmltableelement interface's frame property is a string that indicates which of the table's exterior borders should be drawn.
...es.
HTMLTableElement.rules - Web APIs
the
htmltableelement.rules property indicates which cell borders to render in the table.
... the
htmltableelement.rules property indicates which cell borders to render in the table.
... the
htmltableelement.rules property indicates which cell borders to render in the table.
...t.rules = rules; var rules =
htmltableelement.rules; parameters rules is a string with one of the following values: none no rules groups lines between groups only rows lines between rows cols lines between cols all lines between all cells example // turn on all the internal borders of a table var t = document.getelementbyid("tableid"); t.rules = "all"; specification w3c dom 2
html specification ...
HTMLTableRowElement.rowIndex - Web APIs
the
htmltablerowelement.rowindex read-only property represents the position of a row in relation to the whole <table>.
... the
htmltablerowelement.rowindex read-only property represents the position of a row in relation to the whole <table>.
... the
htmltablerowelement.rowindex read-only property represents the position of a row in relation to the whole <table>.
...<thead>, <tbody>, and <tfoot> elements are out of order in the
html, browsers render the table in the right order.
HTMLTextAreaElement.labels - Web APIs
the
htmltextareaelement.labels read-only property returns a nodelist of the <label> elements associated with the <textarea> element.
... the
htmltextareaelement.labels read-only property returns a nodelist of the <label> elements associated with the <textarea> element.
...me text</textarea> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const textarea = document.getelementbyid("test"); for(var i = 0; i < textarea.labels.length; i++) { console.log(textarea.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment
html living standardthe definition of 'labels' in that specification.
...entloaded", function() { const textarea = document.getelementbyid("test"); for(var i = 0; i < textarea.labels.length; i++) { console.log(textarea.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment
html living standardthe definition of 'labels' in that specification.
ShadowRoot.innerHTML - Web APIs
the inner
html property of the shadowroot interface sets or returns a reference to the dom tree inside the shadowroot.
... the inner
html property of the shadowroot interface sets or returns a reference to the dom tree inside the shadowroot.
... the inner
html property of the shadowroot interface sets or returns a reference to the dom tree inside the shadowroot.
... the inner
html property of the shadowroot interface sets or returns a reference to the dom tree inside the shadowroot.
<aside>: The Aside element - HTML: Hypertext Markup Language
the
html <aside> element represents a portion of a document whose content is only indirectly related to the document's main content.
...tent flow content.
...irectly related to the main article content: <article> <p> the disney movie <cite>the little mermaid</cite> was first released to theatres in 1989.
...maid</cite> was first released to theatres in 1989.
<figcaption>: The Figure Caption element - HTML: Hypertext Markup Language
the
html <figcaption> or figure caption element represents a caption or legend describing the rest of the contents of its parent <figure> element.
... content categories none.
...ent must be its first or last child.
... aria roles group, none, presentation dom interface
htmlelement attributes this element only includes the global attributes.
<frame> - HTML: Hypertext Markup Language
<frame> is an
html element which defines a particular area in which another
html document can be displayed.
...ame> is an
html element which defines a particular area in which another
html document can be displayed.
...n it is not necessary and "no" for forcing no scrollbar even when it is necessary.
...sary.
<frameset> - HTML: Hypertext Markup Language
the
html <frameset> element is used to contain <frame> elements.
... the
html <frameset> element is used to contain <frame> elements.
...nt is not typically used by modern web sites.
...elements, this element supports the global attributes.
<mark>: The Mark Text element - HTML: Hypertext Markup Language
the
html mark text element (<mark>) represents text which is marked or highlighted for reference or notation purposes, due to the marked passage's relevance or importance in the enclosing context.
....
...hat creates extra verbosity.
...ly it in situations where not knowing content has been highlighted would adversely affect understanding.
<marquee>: The Marquee element (Obsolete) - HTML: Hypertext Markup Language
the
html <marquee> element is used to insert a scrolling area of text.
... the
html <marquee> element is used to insert a scrolling area of text.
...examples <marquee>this text will scroll from right to left</marquee> <marquee direction="up">this text will scroll from bottom to top</marquee> <marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid"> <marquee behavior="alternate"> this text will bounce </marquee> </marquee> specifications specification status comment
html living standardthe definition of '<marquee>' in that specification.
... text will bounce </marquee> </marquee> specifications specification status comment
html living standardthe definition of '<marquee>' in that specification.
Standard metadata names - HTML: Hypertext Markup Language
the <meta> element can be used to provide document metadata in terms of name-value pairs, with the name attribute giving the metadata name, and the content attribute giving the value.
... the <meta> element can be used to provide document metadata in terms of name-value pairs, with the name attribute giving the metadata name, and the content attribute giving the value.
... but only after the robot visits the page again.
... some values are mutually exclusive, like index and noindex, or follow and nofollow.
<nav>: The Navigation Section element - HTML: Hypertext Markup Language
the
html <nav> element represents a section of a page whose purpose is to provide navigation links, either within the current document or to other documents.
...est.
...n this example, a <nav> block is used to contain an unordered list (<ul>) of links.
...bar, navigation bar, or drop-down menu.
<output>: The Output element - HTML: Hypertext Markup Language
the
html output element (<output>) is a container element into which a site or app can inject the results of a calculation or the outcome of a user action.
...ontent, phrasing content, listed, labelable, resettable form-associated element, palpable content.
... <output name="result" for="a b">60</output> </form> accessibility concerns many browsers implement this element as an aria-live region.
...t this element as an aria-live region.
<progress>: The Progress Indicator element - HTML: Hypertext Markup Language
the
html <progress> element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
...alpable content.
...n be used to match against indeterminate progress bars.
...giving it a value you must remove the value attribute with element.removeattribute('value').
<rt>: The Ruby Text element - HTML: Hypertext Markup Language
the
html ruby text (<rt>) element specifies the ruby text component of a ruby annotation, which is used to provide pronunciation, translation, or transliteration information for east asian typography.
...s none.
...transliteration for the kanji characters within the <ruby> element: <ruby> 漢 <rt>kan</rt> 字 <rt>ji</rt> </ruby> body { font-size: 22px; } the output 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.
......
<ruby> - HTML: Hypertext Markup Language
the
html <ruby> element represents a ruby annotation.
....
...ia roles any dom interface
htmlelement attributes this element only includes the global attributes.
...e global attributes.
<sub>: The Subscript element - HTML: Hypertext Markup Language
the
html subscript element (<sub>) specifies inline text which should be displayed as subscript for solely typographical reasons.
....
...epresented using a subscripted number; in the case of water, the subscripted "2" indicates that there are two atoms of hydrogen in the molecule.
...toms of hydrogen in the molecule.
<table>: The Table element - HTML: Hypertext Markup Language
the
html <table> element represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.
...following: zero or more <tbody> elements one or more <tr> elements an optional <tfoot> element tag omission none, both the starting and ending tag are mandatory.
...associate each table cell with the header(s) the cell is associated with.
... users tables with multi-level headers • tables • w3c wai web accessibility tutorials h43: using id and headers attributes to associate data cells with header cells in data tables | techniques for w3c wcag 2.0 specifications specification status comment
html living standardthe definition of 'table element' in that specification.
spellcheck - HTML: Hypertext Markup Language
s only if its nearest ancestor has a spellcheck state of true.
...t required to check for spelling errors.
...k for spelling errors.
...n if the spellcheck attribute is set to true and the browser supports spellchecking.
translate - HTML: Hypertext Markup Language
s such it's important that web authors use this attribute to mark content that should not be translated.
...mple, the translate attribute is used to ask translation tools not to translate the company's brand name in the footer.
...e attribute is used to ask translation tools not to translate the company's brand name in the footer.
...footer.
Inline elements - HTML: Hypertext Markup Language
html (hypertext markup language) elements historically were categorized as either "block-level" elements or "inline-level" elements.
... (hypertext markup language) elements historically were categorized as either "block-level" elements or "inline-level" elements.
...put block elements inside inline elements.
...ite> <code> <data> <datalist> <del> <dfn> <em> <embed> <i> <iframe> <img> <input> <ins> <kbd> <label> <map> <mark> <meter> <noscript> <object> <output> <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 ...
HTML5 - MDN Web Docs Glossary: Definitions of Web-related terms
the latest stable release of
html,
html5 takes
html from a simple markup for structuring a document to a full app development platform.
... the latest stable release of
html,
html5 takes
html from a simple markup for structuring a document to a full app development platform.
... the latest stable release of
html,
html5 takes
html from a simple markup for structuring a document to a full app development platform.
HTMLIFrameElement.getMuted()
non-standard this feature is non-standard and is not on a standards track.
... do not use it on production sites facing the web: it will not work for every user.
...rk for every user.
HTMLIFrameElement.getVolume()
non-standard this feature is non-standard and is not on a standards track.
...ds track.
...l not work for every user.
HTMLIFrameElement.purgeHistory()
warning: removed in firefox 65.
...purgehistory() method of the
htmliframeelement interface is used to clear the browsing history associated with the browser <iframe>.
...t interface is used to clear the browsing history associated with the browser <iframe>.
HTMLButtonElement.labels - Web APIs
the
htmlbuttonelement.labels read-only property returns a nodelist of the <label> elements associated with the <button> element.
... the
htmlbuttonelement.labels read-only property returns a nodelist of the <label> elements associated with the <button> element.
...d="test">button</button> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const button = document.getelementbyid("test"); for(var i = 0; i < button.labels.length; i++) { console.log(button.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status comment
html living standardthe definition of 'labels' in that specification.
HTMLDialogElement: close event - Web APIs
the close event is fired on an
htmldialogelement object when the dialog it represents has been closed.
... the close event is fired on an
htmldialogelement object when the dialog it represents has been closed.
... { if (typeof dialog.showmodal === 'function') { dialog.showmodal(); result.textcontent = ''; } else { result.textcontent = 'the dialog api is not supported by this browser'; } }); const closebutton = document.queryselector('.close'); closebutton.addeventlistener('click', () => { dialog.close(); }); result specifications specification status
html living standardthe definition of 'close' in that specification.
HTMLElement.click() - Web APIs
the
htmlelement.click() method simulates a mouse click on an element.
... the
htmlelement.click() method simulates a mouse click on an element.
...ample simulate a mouse-click when moving the mouse pointer over a checkbox:
html <form> <input 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.contentEditable - Web APIs
the contenteditable property of the
htmlelement interface specifies whether or not the element is editable.
... the contenteditable property of the
htmlelement interface specifies whether or not the element is editable.
...table.
HTMLElement: input event - Web APIs
e enabled, and to any element when designmode is turned on.
...se the change event instead for elements of these types.
...value of the <input> element.
HTMLFontElement.color - Web APIs
the obsolete
htmlfontelement.color property is a domstring that reflects the color
html attribute, containing either a named color or a color specified in the hexadecimal #rrggbb format.
... the obsolete
htmlfontelement.color property is a domstring that reflects the color
html attribute, containing either a named color or a color specified in the hexadecimal #rrggbb format.
...ples valid name color string nameofcolor (case insensitive) green green green valid hex color string in rgb format: #rrggbb #008000 rgb using decimal values rgb(x,x,x) (x in 0-255 range) rgb(0,128,0) syntax colorstring = fontobj.color; fontobj.color = colorstring; examples // assumes there is <font id="f"> element in the
html var f = document.getelementbyid("f"); f.color = "green"; specifications the <font> tag is not supported in
html5 and as a result neither is <font>.color.
HTMLFontElement.face - Web APIs
the obsolete
htmlfontelement.face property is a domstring that reflects the face
html attribute, containing a comma-separated list of one or more font names.
...s the face
html attribute, containing a comma-separated list of one or more font names.
...the format of the string must follow one of the following
html microsyntax: microsyntax description examples list of one or more valid font family names a list of font names, that have to be present on the local system courier,verdana syntax facestring = fontobj.face; fontobj.face = facestring; examples // assumes there is <font id="f"> element in the
html var f = document.getelementbyid("f"); f.face = "arial"; specifications the <font> tag is not supported in
html5 and as a result neither is <font>.face .
HTMLFontElement.size - Web APIs
the obsolete
htmlfontelement.size property is a domstring that reflects the size
html attribute.
... the obsolete
htmlfontelement.size property is a domstring that reflects the size
html attribute.
... valid size number string integer number in the range of 1-7 6 relative size string +x or -x, where x is the number relative to the value of the size attribute of the <basefont> element (the result should be in the same range of 1-7) +2 -1 syntax sizestring = fontobj.size; fontobj.size = sizestring; examples // assumes there is <font id="f"> element in the
html var f = document.getelementbyid("f"); f.size = "6"; specifications the <font> tag is not supported in
html5 and as a result neither is <font>.size .
HTMLFormElement.acceptCharset - Web APIs
the
htmlformelement.acceptcharset property represents a list of the supported character encodings for the given <form> element.
... the
htmlformelement.acceptcharset property represents a list of the supported character encodings for the given <form> element.
...charset property represents a list of the supported character encodings for the given <form> element.
HTMLFormElement.action - Web APIs
the
htmlformelement.action property represents the action of the <form> element.
... the
htmlformelement.action property represents the action of the <form> element.
...erty represents the action of the <form> element.
HTMLFormElement.method - Web APIs
the
htmlformelement.method property represents the http method used to submit the <form>.
... unless explicitly specified, the default method is 'get'.
...ult method is 'get'.
HTMLFormElement.name - Web APIs
the
htmlformelement.name property represents the name of the current <form> element as a string.
...ow the name attribute of an element created using createelement() to be set or modified using the name property.
...ated using createelement() to be set or modified using the name property.
HTMLFormElement.requestSubmit() - Web APIs
the
htmlformelement method requestsubmit() requests that the form be submitted using a specific submit button.
... the
htmlformelement method requestsubmit() requests that the form be submitted using a specific submit button.
...is code falls back to calling the form's submit() method.
HTMLHyperlinkElementUtils.origin - Web APIs
the
htmlhyperlinkelementutils.origin read-only property is a usvstring containing the unicode serialization of the origin of the represented url; that is: for url using the http or https, the scheme followed by '://', followed by the domain, followed by ':', followed by the port (the default port, 80 and 443 respectively, if explicitely specified); for url using file: scheme, the value is browser dependant; for url using the blob: scheme, the origin of the url following blob:.
... blob: scheme, the origin of the url following blob:.
...llowing blob:.
HTMLHyperlinkElementUtils.search - Web APIs
the
htmlhyperlinkelementutils.search property is a search string, also called a query string, that is usvstring containing a '?' followed by the parameters of the url.
...rch property is a search string, also called a query string, that is usvstring containing a '?' followed by the parameters of the url.
...ttps://developer.mozilla.org/docs/
htmlhyperlinkelementutils.search?q=123"> element be in the document var anchor = document.getelementbyid("myanchor"); var querystring = anchor.search; // returns:'?q=123' // further parsing: let params = new urlsearchparams(querystring); let q = parseint(params.get("q")); // is the number 123 specifications specification status comment
html living standardthe definition of '
htmlhyperlinkelementutils.search' in that specification.
HTMLIFrameElement.contentWindow - Web APIs
the contentwindow property returns the window object of an
htmliframeelement.
...read-only, but its properties can be manipulated like the global window object.
...nipulated like the global window object.
HTMLIFrameElement.csp - Web APIs
the csp property of the
htmliframeelement interface specifies the content security policy that an embedded document must agree to enforce upon itself.
... the csp property of the
htmliframeelement interface specifies the content security policy that an embedded document must agree to enforce upon itself.
... the csp property of the
htmliframeelement interface specifies the content security policy that an embedded document must agree to enforce upon itself.
HTMLIFrameElement.src - Web APIs
the
htmliframeelement.src property reflects the
html referrerpolicy attribute of the <iframe> element defining which referrer is sent when fetching the resource.
...ning which referrer is sent when fetching the resource.
...ng the resource.
HTMLInputElement.webkitEntries - Web APIs
the read-only webkitentries property of the
htmlinputelement interface contains an array of file system entries (as objects based on filesystementry) representing files and/or directories selected by the user using an <input> 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).
... file in the dialog will leave the property empty (bug 1326031).
...ies; value an array of objects based on filesystementry, each representing one file which is selected in the <input> element.
HTMLLinkElement.as - Web APIs
the as property of the
htmllinkelement interface returns a domstring representing the type of content being loaded by the
html link, one of "script", "style", "image", "video", "audio", "track", "font", "fetch".
... the as property of the
htmllinkelement interface returns a domstring representing the type of content being loaded by the
html link, one of "script", "style", "image", "video", "audio", "track", "font", "fetch".
... the as property of the
htmllinkelement interface returns a domstring representing the type of content being loaded by the
html link, one of "script", "style", "image", "video", "audio", "track", "font", "fetch".
HTMLMediaElement.controller - Web APIs
the
htmlmediaelement.controller property represents the media controller assigned to the element.
... the
htmlmediaelement.controller property represents the media controller assigned to the element.
... the
htmlmediaelement.controller property represents the media controller assigned to the element.
HTMLMediaElement.initialTime - Web APIs
the
htmlmediaelement.initialtime is the initial playback position in seconds.
... the
htmlmediaelement.initialtime is the initial playback position in seconds.
... the
htmlmediaelement.initialtime is the initial playback position in seconds.
HTMLMediaElement: loadstart event - Web APIs
the loadstart event is fired when the browser has started to load a resource.
...ad(); } else { loadvideo.textcontent = "reset example"; source = document.createelement('source'); source.setattribute('src', 'https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm'); source.setattribute('type', 'video/webm'); video.appendchild(source); } }); result specifications specification status
html living standardthe definition of 'loadstart media event' in that specification.
...ce'); source.setattribute('src', 'https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm'); source.setattribute('type', 'video/webm'); video.appendchild(source); } }); result specifications specification status
html living standardthe definition of 'loadstart media event' in that specification.
HTMLMediaElement.mediaGroup - Web APIs
the
htmlmediaelement.mediagroup property reflects the mediagroup
html attribute, which indicates the name of the group of elements it belongs to.
... the
htmlmediaelement.mediagroup property reflects the mediagroup
html attribute, which indicates the name of the group of elements it belongs to.
... the
htmlmediaelement.mediagroup property reflects the mediagroup
html attribute, which indicates the name of the group of elements it belongs to.
HTMLMediaElement.msInsertAudioEffect() - Web APIs
non-standard this feature is non-standard and is not on a standards track.
...k.
...ect(activatableclassid: domstring, effectrequired: boolean, config); parameters activatableclassid a domstring defining the audio effects class.
HTMLMediaElement.onencrypted - Web APIs
the onencrypted property of the
htmlmediaelement is an event handler, fired whenever an encrypted event occurs, denoting the media is encrypted.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...,monaco,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/
htmlmediaelement" 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">
htmlmediaelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} syntax
htmlmedia...
HTMLMediaElement.onerror - Web APIs
the onerror property of the
htmlmediaelement interface is the eventhandler for processing error events.
... the onerror property of the
htmlmediaelement interface is the eventhandler for processing error events.
...s.
HTMLMediaElement.onwaitingforkey - Web APIs
the onwaitingforkey property of the
htmlmediaelement is an event handler, fired when a waitingforkey event occurs, when playback is blocked while waiting for an encryption key.
...ht="50" fill="#fff" stroke="#d4dde4" 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">element</text></a><polyline points="341,25 351,20 351,30 341,25" stroke="#d4dde4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/
htmlelement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="436" y="30" font-size="12px" font-family="consolas,monaco,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=...
...,monaco,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/
htmlmediaelement" 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">
htmlmediaelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} syntax
htmlmedia...
HTMLMediaElement: progress event - Web APIs
the progress event is fired periodically as the browser loads a resource.
...reload(); } else { loadvideo.textcontent = "reset example"; source = document.createelement('source'); source.setattribute('src', 'https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm'); source.setattribute('type', 'video/webm'); video.appendchild(source); } }); result specifications specification status
html living standardthe definition of 'progress media event' in that specification.
...'source'); source.setattribute('src', 'https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm'); source.setattribute('type', 'video/webm'); video.appendchild(source); } }); result specifications specification status
html living standardthe definition of 'progress media event' in that specification.
HTMLMediaElement.seekToNextFrame() - Web APIs
the
htmlmediaelement.seektonextframe() method asynchronously advances the the current play position to the next frame in the media.
...er is called when the seek operation is complete.
...is complete.
HTMLMediaElement.setMediaKeys() - Web APIs
the setmediakeys() property of the
htmlmediaelement interface returns a promise that resolves to the passed mediakeys, which are those used to decrypt media during playback.
... the setmediakeys() property of the
htmlmediaelement interface returns a promise that resolves to the passed mediakeys, which are those used to decrypt media during playback.
... the setmediakeys() property of the
htmlmediaelement interface returns a promise that resolves to the passed mediakeys, which are those used to decrypt media during playback.
HTMLObjectElement.checkValidity - Web APIs
the checkvalidity() method of the
htmlobjectelement interface returns a boolean that always is true, because object objects are never candidates for constraint validation.
... the checkvalidity() method of the
htmlobjectelement interface returns a boolean that always is true, because object objects are never candidates for constraint validation.
... the checkvalidity() method of the
htmlobjectelement interface returns a boolean that always is true, because object objects are never candidates for constraint validation.
HTMLObjectElement.contentDocument - Web APIs
the contentdocument read-only property of the
htmlobjectelement interface returns a document representing the active document of the object element's nested browsing context, if any; otherwise null.
... the contentdocument read-only property of the
htmlobjectelement interface returns a document representing the active document of the object element's nested browsing context, if any; otherwise null.
... the contentdocument read-only property of the
htmlobjectelement interface returns a document representing the active document of the object element's nested browsing context, if any; otherwise null.
HTMLObjectElement.contentWindow - Web APIs
the contentwindow read-only property of the
htmlobjectelement interface returns a windowproxy representing the window proxy of the object element's nested browsing context, if any; otherwise null.
... the contentwindow read-only property of the
htmlobjectelement interface returns a windowproxy representing the window proxy of the object element's nested browsing context, if any; otherwise null.
... the contentwindow read-only property of the
htmlobjectelement interface returns a windowproxy representing the window proxy of the object element's nested browsing context, if any; otherwise null.
HTMLObjectElement.setCustomValidity - Web APIs
the setcustomvalidity() method of the
htmlobjectelement interface sets a custom validity message for the element.
... the setcustomvalidity() method of the
htmlobjectelement interface sets a custom validity message for the element.
...ow) { input.setcustomvalidity('thats too high!'); input.reportvalidity(); } else { input.setcustomvalidity(''); input.reportvalidity(); } } it's vital to set the message to an empty string if there are no errors.
HTMLObjectElement.validationMessage - Web APIs
the validationmessage read-only property of the
htmlobjectelement interface returns a domstring representing a localized message that describes the validation constraints that the control does not satisfy (if any).
... the validationmessage read-only property of the
htmlobjectelement interface returns a domstring representing a localized message that describes the validation constraints that the control does not satisfy (if any).
... a localized message that describes the validation constraints that the control does not satisfy (if any).
HTMLObjectElement.validity - Web APIs
the validity read-only property of the
htmlobjectelement interface returns a validitystate with the validity states that this element is in.
... the validity read-only property of the
htmlobjectelement interface returns a validitystate with the validity states that this element is in.
... the validity read-only property of the
htmlobjectelement interface returns a validitystate with the validity states that this element is in.
HTMLSlotElement.assignedElements() - Web APIs
the assignedelements() property of the
htmlslotelement interface returns a sequence of the elements assigned to this slot (and no other nodes).
... the assignedelements() property of the
htmlslotelement interface returns a sequence of the elements assigned to this slot (and no other nodes).
...ions are: flatten: a boolean indicating whether to return the assigned elements of any available child <slot> elements (true) or not (false).
HTMLTableElement.width - Web APIs
the
htmltableelement.width property represents the desired width of the table.
... the
htmltableelement.width property represents the desired width of the table.
... the
htmltableelement.width property represents the desired width of the table.
HTMLTrackElement: cuechange event - Web APIs
the cuechange event fires when a texttrack has changed the currently displaying cues.
... cues } on the track element the underlying texttrack, indicated by the track property, receives a cuechange event every time the currently-presented cue is changed.
...etelementbyid("texttrack"); texttrackelem.addeventlistener("cuechange", (event) => { let cues = event.target.track.activecues; }); in addition, you can use the oncuechange event handler: let texttrackelem = document.getelementbyid("texttrack"); texttrackelem.oncuechange = (event) => { let cues = event.target.track.activecues; }); specifications specification status
html living standardthe definition of 'cuechange' in that specification.
HTMLSlotElement.assignedSlot - Web APIs
the assignedslot property of the text interface returns the
htmlslotelement object associated with the element.
... the assignedslot property of the text interface returns the
htmlslotelement object associated with the element.
... the assignedslot property of the text interface returns the
htmlslotelement object associated with the element.
HTML To MSAA - Accessibility
remarks the table below shows how gecko maps
html elements to msaa.
... remarks the table below shows how gecko maps
html elements to msaa.
...text n/a value property of input dom element state_system_ readonly if @readonly attribute is used n/a "activate" n/a input @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 input 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 is changed input 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...
disabled - HTML: Hypertext Markup Language
led 3.2</option> <option>disabled 3.3</option> </optgroup> </select> </label> </p> <fieldset disabled> <legend>disabled fieldset</legend> <p> <label>name: <input type="name" name="radio" value="regular"> regular </label> </p> <p> <label>number: <input type="number"></label> </p> </fieldset> specifications specification status comment
html living standardthe definition of 'disabled attribute' in that specification.
...d> <legend>disabled fieldset</legend> <p> <label>name: <input type="name" name="radio" value="regular"> regular </label> </p> <p> <label>number: <input type="number"></label> </p> </fieldset> specifications specification status comment
html living standardthe definition of 'disabled attribute' in that specification.
...e="regular"> regular </label> </p> <p> <label>number: <input type="number"></label> </p> </fieldset> specifications specification status comment
html living standardthe definition of 'disabled attribute' in that specification.
manifest - HTML: Hypertext Markup Language
the manifest attribute of <
html> element specifies a url of a application cache manifest that is downloaded in the early stages of page load.
...fest that is downloaded in the early stages of page load.
...n the early stages of page load.
<input type="datetime"> - HTML: Hypertext Markup Language
the
html <input type="datetime"> was a control for entering a date and time (hour, minute, second, and fraction of a second) as well as a timezone.
... the
html <input type="datetime"> was a control for entering a date and time (hour, minute, second, and fraction of a second) as well as a timezone.
...nd fraction of a second) as well as a timezone.
<picture>: The Picture element - HTML: Hypertext Markup Language
the
html <picture> element contains zero or more <source> elements and one <img> element to offer alternative versions of an image for different display/device scenarios.
... zero or more <source> elements, followed by one <img> element, optionally intermixed with script-supporting elements.
...cture> the type attribute the type attribute specifies a mime type for the resource url(s) in the <source> element's srcset attribute.
<slot> - HTML: Hypertext Markup Language
the
html <slot> element—part of the web components technology suite—is a placeholder inside a web component that you can fill with your own markup, which lets you create separate dom trees and present them together.
...t categories flow content, phrasing content permitted content transparent events slotchange tag omission none, both the starting and ending tag are mandatory.
... </summary> <div class="attributes"> <h4>attributes</h4> <slot name="attributes"><p>none</p></slot> </div> </details> <hr> </template> note: you can see this complete example in action at element-details (see it running live).
dropzone - HTML: Hypertext Markup Language
the dropzone global attribute is an enumerated attribute indicating what types of content can be dropped on an element, using the
html drag and drop api.
... dropped on an element, using the
html drag and drop api.
... copy, which indicates that dropping will create a copy of the element that was dragged.
is - HTML: Hypertext Markup Language
the is global attribute allows you to specify that a standard
html element should behave like a defined custom built-in element (see using custom elements for more details).
...uilt-in element (see using custom elements for more details).
...ss for the element class wordcount extends
htmlparagraphelement { constructor() { // always call super first in constructor super(); // constructor contents ommitted for brevity ...
itemref - HTML: Hypertext Markup Language
ribute specified.
...mscope itemref="c"></div> <div id="c"> <p>band: <span itemprop="name">jazz band</span> </p> <p>size: <span itemprop="size">12</span> players</p> </div> structured data (in json-ld format) { "@id": "amanda", "name": "amanda", "band": { "@id": "b", "name": "jazz band", "size": 12 } } result specifications specification status comment
html microdatathe definition of 'itemref' in that specification.
... <p>size: <span itemprop="size">12</span> players</p> </div> structured data (in json-ld format) { "@id": "amanda", "name": "amanda", "band": { "@id": "b", "name": "jazz band", "size": 12 } } result specifications specification status comment
html microdatathe definition of 'itemref' in that specification.
HTMLIFrameElement.findAll()
warning: removed in firefox 65.
...e first instance of the string relative to the caret position will be highlighted.
HTMLIFrameElement.findNext()
warning: removed in firefox 65.
...revious instance of a search result after a findall() search has been carried out.
HTMLIFrameElement.getActive()
non-standard this feature is non-standard and is not on a standards track.
...ndard and is not on a standards track.
HTMLIFrameElement.unmute()
non-standard this feature is non-standard and is not on a standards track.
... non-standard this feature is non-standard and is not on a standards track.
HTMLAnchorElement.download - Web APIs
the
htmlanchorelement.download property is a domstring indicating that the linked resource is intended to be downloaded rather than displayed in the browser.
...eling the resource in a local file system.
HTMLAnchorElement.relList - Web APIs
the
htmlanchorelement.rellist read-only property reflects the rel attribute.
...s = document.getelementsbytagname("a"); var length = anchors.length; for (var i = 0; i < length; i++) { var list = anchors[i].rellist; var listlength = list.length; console.log("new anchor node found with", listlength, "link types in rellist."); for (var j = 0; j < listlength; j++) { console.log(list[j]); } } specifications specification status comment
html living standardthe definition of 'rellist' in that specification.
HTMLAreaElement.rel - Web APIs
the
htmlareaelement.rel property reflects the rel attribute.
...indicating the relationship between the resource represented by the <area> element and the current document.
HTMLAreaElement.relList - Web APIs
the
htmlareaelement.rellist read-only property reflects the rel attribute.
...var relstr = areaelt.rellist; example var areas = document.getelementsbytagname("area"); var length = areas.length; for (var i = 0; i < length; i++) { var list = areas[i].rellist; var listlength = list.length; console.log("new area found."); for (var j = 0; j < listlength; j++) { console.log(list[j]); } } specifications specification status comment
html living standardthe definition of 'rellist' in that specification.
HTMLCanvasElement.captureStream() - Web APIs
the
htmlcanvaselement capturestream() method returns a mediastream which includes a canvascapturemediastreamtrack containing a real-time video capture of the canvas's contents.
...t = document.queryselector('canvas'); // get the stream var stream = canvaselt.capturestream(25); // 25 fps // do things to the stream // e.g.
HTMLCanvasElement.mozGetAsFile() - Web APIs
the non-standard, firefox-specific the
htmlcanvaselement method mozgetasfile() returns a memory-based file object representing the image contained in the canvas.
...is image/png.
HTMLCanvasElement.mozOpaque - Web APIs
the non-standard
htmlcanvaselement.mozopaque property is a boolean reflecting the moz-opaque
html attribute of the <canvas> element.
... the non-standard
htmlcanvaselement.mozopaque property is a boolean reflecting the moz-opaque
html attribute of the <canvas> element.
HTMLDetailsElement: toggle event - Web APIs
the toggle event fires when the open/closed state of a <details> element is toggled.
...3em; } #summaries { flex-grow: 1; } javascript function logitem(e) { const item = document.queryselector(`[data-id=${e.target.id}]`); item.toggleattribute('hidden'); } const chapters = document.queryselectorall('details'); chapters.foreach((chapter) => { chapter.addeventlistener('toggle', logitem); }); result specifications specification status comment
html living standardthe definition of 'toggle event' in that specification.
HTMLDialogElement: cancel event - Web APIs
res on a <dialog> when the user instructs the browser that they wish to dismiss the current open dialog.
... if (typeof dialog.showmodal === 'function') { dialog.showmodal(); result.textcontent = ''; } else { result.textcontent = 'the dialog api is not supported by this browser'; } }); const closebutton = document.queryselector('.close'); closebutton.addeventlistener('click', () => { dialog.close(); }); result specifications specification status
html living standardthe definition of 'cancel' in that specification.
HTMLElement.offsetHeight - Web APIs
the
htmlelement.offsetheight read-only property returns the height of an element, including vertical padding and borders, as an integer.
...ollable elements; consequently, these non-scrollable elements may be completely or partly invisible, depending on the scrolltop setting of the scrollable container.
HTMLElement.offsetParent - Web APIs
the
htmlelement.offsetparent read-only property returns a reference to the element which is the closest (nearest in the containment hierarchy) positioned ancestor element.
... there is no positioned ancestor element, the nearest ancestor td, th, table will be returned, or the body if there are no ancestor table elements either.
HTMLElement.offsetWidth - Web APIs
the
htmlelement.offsetwidth read-only property returns the layout width of an element as an integer.
...etwidth property is a read-only.
HTMLElement.oncopy - Web APIs
the oncopy property of the
htmlelement interface is an eventhandler that processes copy events.
...opy property of the
htmlelement interface is an eventhandler that processes copy events.
HTMLElement.oncut - Web APIs
the
htmlelement.oncut property of the
htmlelement interface is an eventhandler that processes cut events.
... that processes cut events.
HTMLElement.onpaste - Web APIs
the
htmlelement.onpaste property of the
htmlelement interface is an eventhandler that processes paste events.
...paste text.
HTMLIFrameElement.featurePolicy - Web APIs
the featurepolicy read-only property of the
htmliframeelement interface returns the featurepolicy interface which provides a simple api for introspecting the feature policies applied to a specific frame.
... the featurepolicy read-only property of the
htmliframeelement interface returns the featurepolicy interface which provides a simple api for introspecting the feature policies applied to a specific frame.
HTMLImageElement.decoding - Web APIs
the decoding property of the
htmlimageelement interface represents a hint given to the browser on how it should decode the image.
... try to parallelize loading your image.
HTMLLinkElement.referrerPolicy - Web APIs
the
htmllinkelement.referrerpolicy property reflect the
html referrerpolicy attribute of the <link> element defining which referrer is sent when fetching the resource.
... the
htmllinkelement.referrerpolicy property reflect the
html referrerpolicy attribute of the <link> element defining which referrer is sent when fetching the resource.
HTMLLinkElement.relList - Web APIs
the
htmllinkelement.rellist read-only property reflects the rel attribute.
... var relstr = linkelt.rellist; example var links = document.getelementsbytagname("link"); var length = links.length; for (var i = 0; i < length; i++) { var list = links[i].rellist; var listlength = list.length; console.log("new link found."); for (var j = 0; j < listlength; j++) { console.log(list[j]); } } specifications specification status comment
html living standardthe definition of 'rellist' in that specification.
HTMLMediaElement.controlsList - Web APIs
the controlslist property of the
htmlmediaelement interface returns a domtokenlist that helps the user agent select what controls to show on the media element whenever the user agent shows its own set of controls.
... the controlslist property of the
htmlmediaelement interface returns a domtokenlist that helps the user agent select what controls to show on the media element whenever the user agent shows its own set of controls.
HTMLMediaElement.setSinkId() - Web APIs
the
htmlmediaelement.setsinkid() method sets the id of the audio device to use for output and returns a promise.
... the
htmlmediaelement.setsinkid() method sets the id of the audio device to use for output and returns a promise.
HTMLMediaElement.sinkId - Web APIs
the
htmlmediaelement.sinkid read-only property returns a domstring that is the unique id of the audio device delivering output.
... the
htmlmediaelement.sinkid read-only property returns a domstring that is the unique id of the audio device delivering output.
HTMLOrForeignElement.nonce - Web APIs
the nonce property of the
htmlorforeignelement interface returns the cryptographic number used once that is used by content security policy to determine whether a given fetch will be allowed to proceed.
...ccessed this way (an empty string will be returned).
HTMLSlotElement: slotchange event - Web APIs
the slotchange event is fired on an
htmlslotelement instance (<slot> element) when the node(s) contained in that slot change.
...assignedslot = $slot element.removeattribute('slot'); // element.assignedslot = null the following snippet is taken from our slotchange example (see it live also).
HTMLVideoElement.getVideoPlaybackQuality() - Web APIs
the
htmlvideoelement method getvideoplaybackquality() creates and returns a videoplaybackquality object containing metrics including how many frames have been lost.
...d or corrupted frames, so it's not the same as "total number of frames played." var videoelem = document.getelementbyid("my_vid"); var counterelem = document.getelementbyid("counter"); var quality = videoelem.getvideoplaybackquality(); counterelem.innertext = quality.totalvideoframes; specifications specification status comment media playback qualitythe definition of '
htmlvideoelement.getvideoplaybackquality()' in that specification.
HTMLElement: animationcancel event - Web APIs
ted'); animated.addeventlistener('animationcancel', () => { console.log('animation canceled'); }); animated.style.display = 'none'; the same, but using the onanimationcancel property instead of addeventlistener(): const animated = document.queryselector('.animated'); animated.onanimationcancel = () => { console.log('animation canceled'); }; animated.style.display = 'none'; live example
html <div class="animation-example"> <div class="container"> <p class="animation">you chose a cold night to visit our planet.</p> </div> <button class="activate" type="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding...
HTMLElement: animationend event - Web APIs
animated and listens for the animationend event: const animated = document.queryselector('.animated'); animated.addeventlistener('animationend', () => { console.log('animation ended'); }); the same, but using the onanimationend event handler property: const animated = document.queryselector('.animated'); animated.onanimationend = () => { console.log('animation ended'); }; live example
html <div class="animation-example"> <div class="container"> <p class="animation">you chose a cold night to visit our planet.</p> </div> <button class="activate" type="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: .2rem; padding:...
HTMLElement: animationiteration event - Web APIs
niteration', () => { iterationcount++; console.log(`animation iteration count: ${iterationcount}`); }); the same, but using the onanimationiteration event handler property: const animated = document.queryselector('.animated'); let iterationcount = 0; animated.onanimationiteration = () => { iterationcount++; console.log(`animation iteration count: ${iterationcount}`); }; live example
html <div class="animation-example"> <div class="container"> <p class="animation">you chose a cold night to visit our planet.</p> </div> <button class="activate" type="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding...
HTMLElement: animationstart event - Web APIs
or the animationstart event and logs a message when it is fired: const animated = document.queryselector('.animated'); animated.addeventlistener('animationstart', () => { console.log('animation started'); }); the same, but using onanimationstart: const animated = document.queryselector('.animated'); animated.onanimationstart = () => { console.log('animation started'); }; live example
html <div class="animation-example"> <div class="container"> <p class="animation">you chose a cold night to visit our planet.</p> </div> <button class="activate" type="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding...
HTMLElement.forceSpellCheck() - Web APIs
the forcespellcheck() method of the
htmlelement interface forces a spelling and grammar check on
html elements, even if the user has not focused on the elements.
HTMLElement.offsetLeft - Web APIs
the
htmlelement.offsetleft read-only property returns the number of pixels that the upper left corner of the current element is offset to the left within the
htmlelement.offsetparent node.
HTMLElement.offsetTop - Web APIs
the
htmlelement.offsettop read-only property returns the distance of the current element relative to the top of the offsetparent node.
HTMLFormElement: formdata event - Web APIs
m.onformdata = (e) => { console.log('formdata fired'); // get the form data from the event object let data = e.formdata; for (var value of data.values()) { console.log(value); } // submit the data via xhr var request = new xmlhttprequest(); request.open("post", "/formhandler"); request.send(data); }; specifications specification status comment
html living standardthe definition of 'formdata' in that specification.
HTMLImageElement.referrerPolicy - Web APIs
the
htmlimageelement.referrerpolicy property reflects the
html referrerpolicy attribute of the <img> element defining which referrer is sent when fetching the resource.
Index - Web APIs
undefined 184 audioscheduledsourcenode.stop() api, audio, audioscheduledsourcenode, media, method, reference, web audio api, sound, stop the stop() method on audioscheduledsourcenode schedules a sound to cease playback at the specified time.
...fined 184 audioscheduledsourcenode.stop() api, audio, audioscheduledsourcenode, media, method, reference, web audio api, sound, stop the stop() method on audioscheduledsourcenode schedules a sound to cease playback at the specified time.
...me.
...And 1901 more matches
Index - Learn web development
found 348 pages: # page tags and summary 1 learn web development beginner, css,
html, index, intro, landing, learn, web welcome to the mdn learning area.
...pages: # page tags and summary 1 learn web development beginner, css,
html, index, intro, landing, learn, web welcome to the mdn learning area.
...earn web development beginner, css,
html, index, intro, landing, learn, web welcome to the mdn learning area.
...And 195 more matches
Mozilla's DOCTYPE sniffing - Archive of obsolete content
obsolete since gecko 2 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) this feature is obsolete.
... obsolete since gecko 2 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) this feature is obsolete.
... declaration to determine strict mode vs.
...And 88 more matches
Examples - Archive of obsolete content
this page contains the source code of the examples related to the "properly using css and javascript in x
html documents" article.
...me extension (it is written at the beginning of the code).
...the file to a web server and you're done.
...And 86 more matches
Gecko info for Windows accessibility vendors
cessibility), external readonly dom support, and the keyboard api/user interface.
...lity), external readonly dom support, and the keyboard api/user interface.
...y because changes to the dom in firefox must occur on the main thread.
...And 77 more matches
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
s a result, mozilla is not fully backwards-compatible with netscape navigator 4.x and microsoft internet explorer legacy code; for example, mozilla does not support <layer> as i will discuss later.
...t before the conception of w3c standards inherited many quirks.
... conception of w3c standards inherited many quirks.
...And 66 more matches
Authoring MathML - MathML
this page explains how to write mathematics using the mathml language.
... this page explains how to write mathematics using the mathml language.
...ribe some tools below.
...And 51 more matches
Advanced text formatting - Learn web development
previous overview: introduction to
html next there are many other elements in
html for formatting text, which we didn't get to in the
html text fundamentals article.
..., which we didn't get to in the
html text fundamentals article.
...s article.
...And 46 more matches
Introduction to XUL - Archive of obsolete content
the application, but loaded from a separate ui description.
...f mozilla's windows (and dialogs) will be described using this mechanism.
...d short for "xml user interface language") is our name for the language in which these ui descriptions are built.
...And 43 more matches
Event reference
define the event.
...pithe definition of 'audioprocess' in that specification.
... audioend event web speech api the user agent has finished capturing audio for speech recognition.
...And 43 more matches
Creating hyperlinks - Learn web development
previous overview: introduction to
html next hyperlinks are really important — they are what makes the web a web.
... previous overview: introduction to
html next hyperlinks are really important — they are what makes the web a web.
... previous overview: introduction to
html next hyperlinks are really important — they are what makes the web a web.
...And 42 more matches
Mozilla Web Developer FAQ
irks mode—for the purpose of backwards compatibility—gecko mimics some behaviors of legacy browsers in ways that are spec violations.
...legacy browsers in ways that are spec violations.
...almost standards mode is like the standards mode except it addresses the issue of the next question by rendering table cells with images in the traditional way.
...And 41 more matches
Client-Server Overview - Learn web development
e, irrespective of which programming language or web framework you select.
...request to the server.
...en only use the (more "expensive") get request to download the resource if it has changed.
...And 38 more matches
Plug-in Basics - Plugins
s of independent software vendors who are creating new and innovative plug-ins.
...r starts, it enumerates the available plug-ins (this step varies according to platform), reads resources from each plug-in file to determine the mime types for that plug-in, and registers each plug-in library for its mime types.
...that do not require a window to draw into.
...And 35 more matches
How CSS is structured - Learn web development
previous overview: first steps next now that you are beginning to understanding the purpose and use of css, let's examine the structure of css.
... previous overview: first steps next now that you are beginning to understanding the purpose and use of css, let's examine the structure of css.
...now that you are beginning to understanding the purpose and use of css, let's examine the structure of css.
...And 34 more matches
Handling common accessibility problems - Learn web development
previous overview: cross browser testing next next we turn our attention to accessibility, providing information on common problems, how to do simple testing, and how to make use of auditing/automation tools for finding accessibility issues.
...tes are going in the right direction.
...n the right direction.
...And 34 more matches
panel - Archive of obsolete content
creates transient dialogs to implement part of an add-on's user interface.
... creates transient dialogs to implement part of an add-on's user interface.
...el is shown or hidden by listening to its show and hide events.
...And 33 more matches
What is JavaScript? - Learn web development
overview: first steps next welcome to the mdn beginner's javascript course!
...o implement complex features on web pages — every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, interactive maps, animated 2d/3d graphics, scrolling video jukeboxes, etc.
...there and display static information for you to look at — displaying timely content updates, interactive maps, animated 2d/3d graphics, scrolling video jukeboxes, etc.
...And 33 more matches
XML in Mozilla - Archive of obsolete content
his feature is used mainly to localize mozilla to different languages (the ui strings are stored in external dtd files).
..., and general entities.
...stylesheets with xml documents w3c recommendation styling xml documents with css manipulating xml documents with scripts through dom serializing xml dom trees to javascript object trees (jxon) other supported xml w3c recommendations specification or technology documentation x
html w3c recommendation xml base w3c recommendation xlink (simple xlinks only) obsolete since gecko 2.0 w3c recommendation fixptr obsolete since gecko 1.9.1 w3c "proposal" xpointer framework obsolete since gecko 1.9.1 w3c recommendation xpointer element() scheme obsolete since gecko 1.9.1 ...
...And 32 more matches
Browser API
the
html browser api is an extension of the
html <iframe> element that allows web apps to implement browsers or browser-like applications.
...s: by adding a mozbrowser attribute to the <iframe> element we can make it appear like a top-level browser window to the embedded content.
...ndow to the embedded content.
...And 32 more matches
reftest opportunities files - Archive of obsolete content
ntroduction these are files in the mozilla source that may be usable for reftest.
...but one presumes that something needed to be checked.
...ayout regression test tool, which has been described as difficult to use and it apparently reported a lot of regressions that were not errors.
...And 31 more matches
Introduction to the DOM - Web APIs
the document object model (dom) is the data representation of the objects that comprise the structure and content of a document on the web.
...e document object model (dom) is the data representation of the objects that comprise the structure and content of a document on the web.
...the dom?
...And 31 more matches
Accessibility documentation index - Accessibility
veloper network.
...enabling as many people as possible to use web sites, even when those people's abilities are limited in some way.
...ccessibility, forms, web you have a form — a contact form, for example — that you want to put some accessible error checking into.
...And 31 more matches
Browser Detection and Cross Browser Support - Archive of obsolete content
sense approach to browser detection.
... many web developers are aware of firefox, mozilla, and netscape browsers, far fewer are aware that these browsers are members of an entire family of user agents based upon the gecko layout engine which includes the commercial browser compuserve 7, and open source browsers such as epiphany, galeon, camino, kmeleon, and seamonkey.
...e differing implementations of modern browsers while at the same time supporting (to a lesser degree) older and less capable browsers.
...And 30 more matches
Implementing feature detection - Learn web development
different code depending on whether it does (or doesn't), so that the browser can always provide a working experience rather than crashing/erroring in some browsers.
... browser; for browsers that support the newest flexbox spec, we could use a flexible and robust flex layout.
...sers that don't, we could use a floated layout that works ok, although it is slightly more brittle and hacky, and not as cool-looking.
...And 30 more matches
Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
e presentation can give your web applications new continuity, precision and control.
...o the current web page.
...pertext approach to developing web pages, in which developers format text layouts into pages and link those pages to related content, is analogous to a book or a magazine: readers view pages, go to other pages for more information, and view resources listed as references on that page.
...And 29 more matches
Getting started with CSS - Learn web development
previous overview: first steps next in this article we will take a simple
html document and apply css to it, learning some practical things about the language along the way.
... previous overview: first steps next in this article we will take a simple
html document and apply css to it, learning some practical things about the language along the way.
... previous overview: first steps next in this article we will take a simple
html document and apply css to it, learning some practical things about the language along the way.
...And 29 more matches
Index
o 26 using jss jss newsgroup: mozilla.dev.tech.crypto 27 jss 4.4.0 release notes d the java security services (jss) team has released jss 4.4.0, which is a minor release.
...on of cryptography.
...pkcs10 csr generates encryption/mac keys and outputs public key as pkcs11 certificate signing request 172 encdecmac using token object - sample 3 encdecmac,
html, ncc, ncc article, web, web development no summary!
...And 27 more matches
WAI-ARIA basics - Learn web development
previous overview: accessibility next following on from the previous article, sometimes making complex ui controls that involve unsemantic
html and dynamic javascript-updated content can be difficult.
...
html and dynamic javascript-updated content can be difficult.
...to gain familiarity with wai-aria, and how it can be used to provide useful additional semantics to enhance accessibility where required.
...And 26 more matches
Video and Audio APIs - Learn web development
previous overview: client-side web apis next
html5 comes with elements for embedding rich media in documents — <video> and <audio> — which in turn come with their own apis for controlling playback, seeking, etc.
...hich in turn come with their own apis for controlling playback, seeking, etc.
...use browser apis to control video and audio playback.
...And 26 more matches
Index
me as properties, etc.
...toragevacuumparticipant to create an instance of this interface, use the category manger, with the category "vacuum-participant".
...instance of this interface, use the category manger, with the category "vacuum-participant".
...And 26 more matches
Building accessible custom components in XUL - Archive of obsolete content
introduction d
html accessibility is a new technology which enables developers to construct accessible controls within (x)
html pages.
... introduction d
html accessibility is a new technology which enables developers to construct accessible controls within (x)
html pages.
...ve been doing this for some time, but the resulting controls were never as accessible as similar controls in desktop applications.
...And 24 more matches
Introduction to automated testing - Learn web development
ces, several times per day, can get tedious, and time-consuming.
...cts", "main": "index.js", "scripts": { "test": "test" }, "author": "chris mills", "license": "mit" } with this, you are ready to move on.
..., "license": "mit" } with this, you are ready to move on.
...And 24 more matches
JavaScript-DOM Prototypes in Mozilla
object which is not really that special.
...s prototype (obj.__proto__) that xpconnect sets up when exposing the first image in document to javascript.
...properties of obj's prototype: obj.__proto__ parentnode (getter function) src (getter and setter functions) getelementsbytagname (function) text_node (number property, constant) ...
...And 24 more matches
Creating localizable web applications
ftentimes, it is better to slightly simplify the localized version of your web application than to serve a mix of localized and english content.
... of localized and english content.
... not all the pages of your website are going to be localized, you may consider removing links to the english-only pages from the navigation (headers, footers, sidebars) in the localized versions.
...And 23 more matches
nsIPlacesImportExportService
toolkit/components/places/nsiplacesimportexportservice.idlscriptable provides methods for exporting places data.
... kept for compatibility reasons for code using the export service.
...rt service.
...And 23 more matches
DOMParser - Web APIs
the domparser interface provides the ability to parse xml or
html source code from a string into a dom document.
... the domparser interface provides the ability to parse xml or
html source code from a string into a dom document.
... the domparser interface provides the ability to parse xml or
html source code from a string into a dom document.
...And 23 more matches
ui/sidebar - Archive of obsolete content
experimental enables you to create sidebars.
...e the sidebar: the sidebar generates a show event when it is shown and a hide event when it is hidden.
... specified using
html, which is loaded from the url supplied in the url option to the sidebar's constructor.
...And 22 more matches
Table Layout Regression Tests - Archive of obsolete content
sites in order to run these tests, you will need to have: make sure that your build is a debug build (in short you need ac_add_options --enable-debug in your .mozconfig file).
...-debug in your .mozconfig file).
...be a much better place if we could first fix those assertions.
...And 21 more matches
Accessible multimedia - Learn web development
previous overview: accessibility next another category of content that can create accessibility problems is multimedia — video, audio, and image content need to be given proper textual alternatives so they can be understood by assistive technologies and their users.
...sure accessibility for — multimedia.
...for — multimedia.
...And 21 more matches
ui/frame - Archive of obsolete content
experimental create
html iframes, using bundled
html, css and javascript, that can be added to a designated area of the firefox user interface.
... add frames to a toolbar.
...ich can be used to create frame components.
...And 20 more matches
CSS FAQ - Learn web development
ntly-asked questions (faqs) about css, along with answers that may help you on your quest to become a web developer.
...wards-compatibility mode, allows legacy webpages to be rendered as their authors intended, following the non-standard rendering rules used by older browsers.
...ictly.
...And 20 more matches
Dealing with files - Learn web development
eb servers, and programming languages do not handle spaces consistently.
...rogramming languages do not handle spaces consistently.
... the habit of writing your folder and file names lowercase with no spaces and with words separated by dashes, at least until you know what you're doing.
...And 20 more matches
Document and website structure - Learn web development
previous overview: introduction to
html next in addition to defining individual parts of your page (such as "a paragraph" or "an image"),
html also boasts a number of block level elements used to define areas of your website (such as "the header", "the navigation menu", "the main content column").
... previous overview: introduction to
html next in addition to defining individual parts of your page (such as "a paragraph" or "an image"),
html also boasts a number of block level elements used to define areas of your website (such as "the header", "the navigation menu", "the main content column").
... in addition to defining individual parts of your page (such as "a paragraph" or "an image"),
html also boasts a number of block level elements used to define areas of your website (such as "the header", "the navigation menu", "the main content column").
...And 20 more matches
Drawing graphics - Learn web development
previous overview: client-side web apis next the browser contains some very powerful graphics programming tools, from the scalable vector graphics (svg) language, to apis for drawing on
html <canvas> elements, (see the canvas api and webgl).
...nvas api and webgl).
...3d scene more easily, and you can find a tutorial covering raw webgl elsewhere — see getting started with webgl.
...And 20 more matches
nsIAccessibleRole
of a or iframe.
...er.
...bar, which is an area at the bottom of a window that displays information about the current operation, state of the application, or selected object.
...And 20 more matches
Examples of web and XML development using the DOM - Web APIs
this chapter provides some longer examples of web and xml development using the dom.
... this chapter provides some longer examples of web and xml development using the dom.
...ies 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 objoutput = document.getelementbyid("output"); var str
html = "<ul>"; for (var i = 0; i < arrimages.length; i++) { str
html += "<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>"; } str
html += "<\/ul>"; objoutput.inner
html = str
html; } </scri...
...And 20 more matches
XUL Structure - Archive of obsolete content
« previousnext » we'll begin by looking at how the xul is handled in mozilla.
... « previousnext » we'll begin by looking at how the xul is handled in mozilla.
... « previousnext » we'll begin by looking at how the xul is handled in mozilla.
...And 19 more matches
Legacy layout methods - Learn web development
d before css grid layout they tended to be implemented using floats or other layout features.
...d to be implemented using floats or other layout features.
...tems.
...And 19 more matches
Manipulating documents - Learn web development
previous overview: client-side web apis next when writing web pages and apps, one of the most common things you'll want to do is manipulate the document structure in some way.
...y.
... javascript, this is represented by the navigator object.
...And 19 more matches
List of default Accept values - HTTP
this article documents the default values for the http accept header for specific inputs and browser versions.
...e http accept header for specific inputs and browser versions.
...er for specific inputs and browser versions.
...And 19 more matches
CSS basics - Learn web development
previous overview: getting started with the web next css (cascading style sheets) is the code that styles web content.
...hrough what you need to get started.
...s is a style sheet language.
...And 18 more matches
Index - Developer guides
javascript, webmechanics, xmlhttprequest this article guides you through the ajax basics and gives you some simple hands-on examples to get you started.
...ript, webmechanics, xmlhttprequest this article guides you through the ajax basics and gives you some simple hands-on examples to get you started.
...king them available through the browser's <audio> and <video> elements remains pretty much the same.
...And 18 more matches
XForms Custom Controls - Archive of obsolete content
forms controls as rendered by the mozilla xforms processor do not provide the right look and feel for you.
...sion we will render a combobox widget when appearance='minimal' on a select1 control.
...ormswidget-select1-compact'); } the mediatype attribute can be used by the form author to align the type of presentation with the type of data that the bound instance node contains.
...And 17 more matches
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 computer activities.
... i have heard it is an excruciating game of whack-a-mole.
....
...And 17 more matches
CSS and JavaScript accessibility best practices - Learn web development
next css and javascript, when used properly, also have the potential to allow for accessible web experiences ...
... computer literacy, a basic understanding of
html, css, and javascript, and understanding of what accessibility is.
...as
html, but they are still able to help or damage accessibility, depending on how they are used.
...And 17 more matches
Your first form - Learn web development
overview: forms next the first article in our series provides you with your very first experience of creating a web form, including designing a simple form, implementing it using the right
html form controls and other
html elements, adding some very simple styling via css, and describing how data is sent to a server.
... first experience of creating a web form, including designing a simple form, implementing it using the right
html form controls and other
html elements, adding some very simple styling via css, and describing how data is sent to a server.
...ents, adding some very simple styling via css, and describing how data is sent to a server.
...And 17 more matches
Video and audio content - Learn web development
previous overview: multimedia and embedding next now that we are comfortable with adding simple images to a webpage, the next step is to start adding video and audio players to your
html documents!
...es to a webpage, the next step is to start adding video and audio players to your
html documents!
...o and audio players to your
html documents!
...And 17 more matches
Introduction to client-side frameworks - Learn web development
overview: client-side javascript frameworks next we begin our look at frameworks with a general overview of the area, looking at a brief history of javascript and frameworks, why frameworks exist and what they give us, how to start thinking about choosing a framework to learn, and what alternatives there are to client-side frameworks.
...t, and some clever coding principles.
...nslates the templates to optimized javascript instructions.
...And 17 more matches
Mozilla’s UAAG evaluation report
ate recommendation of uaag 1.0.
... onblur: cannot be activated with pointer 1.3 provide text messages.
... line and alert boxes used to convey messages and alerts guideline 2.
...And 17 more matches
Document - Web APIs
roke-width="2px" /><text x="306" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">document</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} the document interface describes the common properties and methods for any kind of document.
...e="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">document</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} the document interface describes the common properties and methods for any kind of document.
...andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">document</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} the document interface describes the common properties and methods for any kind of document.
...And 17 more matches
Audio and Video Delivery - Developer guides
upports via feature detection (usually a choice of two, as stated above).
...<source src="audiofile.ogg" type="audio/ogg"> <!-- fallback for browsers that don't support audio tag --> <a href="audiofile.mp3">download audio</a> </audio> the code above will create an audio player that attempts to preload as much audio as possible for smooth playback.
...gg" type="audio/ogg"> <!-- fallback for browsers that don't support audio tag --> <a href="audiofile.mp3">download audio</a> </audio> the code above will create an audio player that attempts to preload as much audio as possible for smooth playback.
...And 17 more matches
Rich-Text Editing in Mozilla - Developer guides
note: this document is out-of-date; you are advised to consult the more up-to-date document available at making content editable.
... once designmode has been set to "on", the document becomes a rich-text editing area and the user can type into it as if it were a textarea.
...(bold, italics, etc), while others insert new elements (adding a link) or affect an entire line (indenting).
...And 17 more matches
Populating the page: how browsers work - Web Performance
as well as other actions.
..., a secure connection is worth the latency expense, as the data transmitted between the browser and the web server cannot be decrypted by a third party.
...not be decrypted by a third party.
...And 17 more matches
widget - Archive of obsolete content
th of a widget, but the height is fixed so as to fit in the add-on bar.
...tp://www.mozilla.org/favicon.ico" }); you can make contenturl point to an
html or icon file which you have packaged inside your add-on.
...user interface as a widget hosting an array of buttons to control play/pause/stop functions.
...And 16 more matches
Elements - Archive of obsolete content
namespace prefixes used in your binding.
...es used in your binding.
... bindings contains zero or more binding elements as children.
...And 16 more matches
Processing XML with E4X - Archive of obsolete content
pt language, and adds syntax for embedding literal xml documents in javascript code.
...pt object, the two are not the same thing.
...x is designed to be familiar to javascript programmers, but e4x does not provide a direct mapping from xml to native javascript objects; just the illusion of one.
...And 16 more matches
Introduction to CSS layout - Learn web development
overview: css layout next this article will recap some of the css layout features we've already touched upon in previous modules — such as different display values — and introduce some of the concepts we'll be covering throughout this module.
... overview: css layout next this article will recap some of the css layout features we've already touched upon in previous modules — such as different display values — and introduce some of the concepts we'll be covering throughout this module.
...e display property flexbox grid floats positioning table layout multiple-column layout each technique has its uses, advantages, and disadvantages, and no technique is designed to be used in isolation.
...And 16 more matches
Fundamental text and font styling - Learn web development
overview: styling text next in this article we'll start you on your journey towards mastering text styling with css.
...text next in this article we'll start you on your journey towards mastering text styling with css.
...nment and other effects, and line and letter spacing.
...And 16 more matches
JavaScript basics - Learn web development
prehensive database-driven apps, and much more!
... browsers, providing functionality such as dynamically creating
html and setting css styles; collecting and manipulating a video stream from a user's webcam, or generating 3d graphics and audio samples.
...s some aspects of the core language, and offers an opportunity to play with a few browser api features too.
...And 16 more matches
Marking up a letter - Learn web development
previous overview: introduction to
html next we all learn to write a letter sooner or later; it is also a useful example to test our text formatting skills.
... previous overview: introduction to
html next we all learn to write a letter sooner or later; it is also a useful example to test our text formatting skills.
... previous overview: introduction to
html next we all learn to write a letter sooner or later; it is also a useful example to test our text formatting skills.
...And 16 more matches
Introduction to events - Learn web development
d.
...ly taken (that is, some code running) when the event occurs.
...owing works just the same: const btn = document.queryselector('button'); function bgchange() { const rndcol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; document.body.style.backgroundcolor = rndcol; } btn.onclick = bgchange; there are many different event handler properties available.
...And 16 more matches
Looping code - Learn web development
w: building blocks next programming languages are very useful for rapidly completing repetitive tasks, from multiple basic calculations to just about any other situation where you've got a lot of similar items of work to complete.
...t — if you've got a lot of different calculations to do, you want to do each different one, not the same one over and over again!
...f you've got a lot of different calculations to do, you want to do each different one, not the same one over and over again!
...And 16 more matches
Getting started with React - Learn web development
previous overview: client-side javascript frameworks next in this article we will say hello to react.
...llo to react.
...cases, set up a basic react toolchain on our local computer, and create and play with a simple starter app — learning a bit about how react works in the process.
...And 16 more matches
Handling common JavaScript problems - Learn web development
previous overview: cross browser testing next now we'll look at common cross-browser javascript problems and how to fix them.
...ck browsers from running code they could otherwise use just fine.
...ue is what you intended.
...And 16 more matches
Using images - Web APIs
mages.
...o a canvas is basically a two step process: get a reference to an
htmlimageelement object or to another canvas element as a source.
...iding a url.
...And 16 more matches
Element - Web APIs
element is the most general base class from which all element objects (i.e.
... element is the most general base class from which all element objects (i.e.
... a:hover text { fill: #0095dd; pointer-events: all;} properties inherits properties from its parent interface, node, and by extension that interface's parent, eventtarget.
...And 16 more matches
Using files from web applications - Web APIs
using the file api, which was added to the dom in
html5, it's now possible for web content to ask the user to select local files and then read the contents of those files.
... using the file api, which was added to the dom in
html5, it's now possible for web content to ask the user to select local files and then read the contents of those files.
...s and then read the contents of those files.
...And 16 more matches
Working with the History API - Web APIs
html5 introduced the pushstate() and replacestate() methods for add and modifying history entries, respectively.
... conjunction with the onpopstate event.
...that gets used in the http header for xmlhttprequest objects created after you change the state.
...And 16 more matches
DOM onevent handlers - Developer guides
es, forms, and so forth) or non-interactive (such as the base <body> element).
...ly halts the processing of the event by calling stoppropagation() on the event object itself.
...f the event by calling stoppropagation() on the event object itself.
...And 16 more matches
Web Components
ents is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.
...d as desired in your user interface.
...he customelementregistry.define() method, passing it the element name to be defined, the class or function in which its functionality is specified, and optionally, what element it inherits from.
...And 16 more matches
How to structure a web form - Learn web development
previous overview: forms next with the basics out of the way, we'll now look in more detail at the elements used to provide structure and meaning to the different parts of a form.
... previous overview: forms next with the basics out of the way, we'll now look in more detail at the elements used to provide structure and meaning to the different parts of a form.
...ook in more detail at the elements used to provide structure and meaning to the different parts of a form.
...And 15 more matches
Getting started with Svelte - Learn web development
work.
...k into a compile step that happens only when you build your app, producing highly-optimized vanilla javascript.
...ild your app, producing highly-optimized vanilla javascript.
...And 15 more matches
Package management basics - Learn web development
previous overview: understanding client-side tools next in this article we'll look at package managers in some detail to understand how we can use them in our own projects — to install project tool dependencies, keep them up-to-date, and more.
...you can recreate the same set up by running the command npm install, and npm will look at the dependencies and install them for you.
...in a different directory.
...And 15 more matches
Accessibility API cross-reference
this cross-reference helps us see the difference between today's accessibility api's.
...le object roles, or general types, such as button, menu item, text, etc.
...possible object states, such as focused, read-only, checked, etc.
...And 15 more matches
display - CSS: Cascading Style Sheets
and whether it is itself participating in a block or inline formatting context, it either establishes a new block formatting context (bfc) for its contents or integrates its contents into its parent formatting context.
...> elements.
...of block.
...And 15 more matches
Tutorials
ctices for web development and that provide or allow translations, through an open content license such as creative commons.
...nslations, through an open content license such as creative commons.
... getting started with the web getting started with the web is a concise series introducing you to the practicalities of web development.
...And 15 more matches
Introduction to using XPath in JavaScript - XPath
this document describes the interface for using xpath in javascript internally, in extensions, and from websites.
...ce for using xpath in javascript internally, in extensions, and from websites.
...hich returns a string representing the namespace uri associated with that prefix.
...And 15 more matches
JXON - Archive of obsolete content
tes.
...he constructor's argument can be the entire xml document, a documentfragment or simply an element node of it.
...efix, as suggested by the badgerfish convention.
...And 14 more matches
XML - Archive of obsolete content
the relationship of xul to xml, its parent language.
...k of implicit functionality -- the lack ofintuition, you might say, that xul has in interpreting what it is you want.
...t world with uppercase verbs (e.g., onclick, onload) -- must be lowercase or they are invalid.
...And 14 more matches
Windows Media in Netscape - Archive of obsolete content
player also interact closely with the scripts in a web page.
...the strings gecko/ and (ax should provide for the ability to detect any gecko-based browsers which supports geckoactivexobject which may be introduced in the future.
...excontrolevent"> script elements.
...And 14 more matches
Debugging CSS - Learn web development
or should match an element, but nothing happens, or a box is a different size than you expected.
...hing happens, or a box is a different size than you expected.
...l features of the firefox devtools for working with css.
...And 14 more matches
Positioning - Learn web development
previous overview: css layout next positioning allows you to take elements out of the normal document layout flow, and make them behave differently; for example sitting on top of one another, or always remaining in the same place inside the browser viewport.
...revious overview: css layout next positioning allows you to take elements out of the normal document layout flow, and make them behave differently; for example sitting on top of one another, or always remaining in the same place inside the browser viewport.
...wser viewport.
...And 14 more matches
Practical positioning examples - Learn web development
this article shows how to build some real world examples to illustrate what kinds of things you can do with positioning.
... this article shows how to build some real world examples to illustrate what kinds of things you can do with positioning.
...area.
...And 14 more matches
How to build custom form controls - Learn web development
there are some cases where the available native
html form controls may seem like they are not enough.
... states and behavior are well known, so that you can simply mimic those as much as possible.
...sible.
...And 14 more matches
The web and web standards - Learn web development
9, and timbl wrote information management: a proposal and hypertext at cern; these two publications together provided the background for how the web would work.
... these standards exist as long technical documents called specifications, which detail exactly how the technology should work.
...cuments called specifications, which detail exactly how the technology should work.
...And 14 more matches
Build your own function - Learn web development
previous overview: building blocks next with most of the essential theory dealt with in the previous article, this article provides practical experience.
...exercise in a modern browser like firefox, opera, or chrome.
...rome.
...And 14 more matches
Mozilla DOM Hacking Guide
ed in the idl and easily coded.
...interface the method is defined.
...he init() method.
...And 14 more matches
Using Web Workers - Web APIs
le (run shared worker): this is very similar to the basic dedicated worker example, except that it has two functions available handled by different script files: multiplying two numbers, or squaring a number.
... browsing contexts, all those browsing contexts must share the exact same origin (same protocol, host, and port).
...ts, all those browsing contexts must share the exact same origin (same protocol, host, and port).
...And 14 more matches
MIME types (IANA media types) - HTTP
ich, when concatenated with a slash (/) between them, comprise a mime type.
...hen concatenated with a slash (/) between them, comprise a mime type.
...rmats such as animated gif or apng.
...And 14 more matches
Using the Editor from XUL - Archive of obsolete content
element with document.getelementbyid("content-frame"), and to style it from css.
...elementbyid("content-frame"), and to style it from css.
...s an nseditorshell, and holds the owning reference to it.
...And 13 more matches
Adobe Flash - Archive of obsolete content
blocks certain flash modules that have little or no user-noticeable impact from being used.
... fingerprinting and http_cookie#supercookie modules.
...reproduced using modern web apis.
...And 13 more matches
XForms Input Element - Archive of obsolete content
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.
... any data type except xsd:base64binary, xsd:hexbinray or any data type derived from these.
... type derived from these.
...And 13 more matches
Game distribution - Game development
you've followed a tutorial or two and created an
html5 game — that's great!
... you've followed a tutorial or two and created an
html5 game — that's great!
...'ve followed a tutorial or two and created an
html5 game — that's great!
...And 13 more matches
Styling links - Learn web development
previous overview: styling text next when styling links, it is important to understand how to make use of pseudo-classes to style link states effectively, and how to style links for use in common varied interface features such as navigation menus and tabs.
... previous overview: styling text next when styling links, it is important to understand how to make use of pseudo-classes to style link states effectively, and how to style links for use in common varied interface features such as navigation menus and tabs.
...in this article.
...And 13 more matches
Constraint validation API - Web APIs
the constraint validation api enables checking values that users have entered into form controls, before submitting the values to the server.
...t's value fails to validate.
...validate.
...And 13 more matches
Web-based protocol handlers - Web APIs
his code, it should display a prompt to the user, asking permission to allow the web application to register as a handler for the protocol.
.../handle_mailto/%s, but not for http://example.org/handle_mailto/%s.
...t for http://example.org/handle_mailto/%s.
...And 13 more matches
clip-path - CSS: Cascading Style Sheets
ercentage> | closest-side | farthest-side<position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
...mparison of
html and svg <svg class="defs"> <defs> <clippath id="mypath" clippathunits="objectboundingbox"> <path d="m0.5,1 c0.5,1,0,0.7,0,0.3 a0.25,0.25,1,1,1,0.5,0.3 a0.25,0.25,1,1,1,1,0.3 c1,0.7,0.5,1,0.5,1 z" /> </clippath> </defs> </svg> <div class="grid"> <div class="col"> <div class="note">clip-path: none</div> <div class="row"> <div class="cell"> <span>
html</span> <div class="container"> <p class="none"> i love<br><em>clipping</em> </p> </div> </div> <div class="cell"> <span>svg</span> <div class="container viewbox"> <svg viewbox="0 0 192 192"> <g class="none"> <rect x="24" y="24" width="144" height="144" /> <text x="96" y="91">i lov...
...th)<br><br> assuming the following clippath definition: <pre> <svg> <clippath id="mypath" clippathunits="objectboundingbox"> <path d="m0.5,1 c 0.5,1,0,0.7,0,0.3 a 0.25,0.25,1,1,1,0.5,0.3 a 0.25,0.25,1,1,1,1,0.3 c 1,0.7,0.5,1,0.5,1 z" /> </clippath> </svg></pre> </div> <div class="row"> <div class="cell"> <span>
html</span> <div class="container"> <p class="svg"> i love<br><em>clipping</em> </p> </div> </div> <div class="cell"> <span>svg</span> <div class="container viewbox"> <svg viewbox="0 0 192 192"> <g class="svg"> <rect x="24" y="24" width="144" height="144" /> <text x="96" y="91">i love<...
...And 13 more matches
Performance fundamentals - Web Performance
of how firefox/gecko contributes to performance generally, below the level of all applications.
... does the platform do for you?" web technologies the web platform provides many tools, some better suited for particular jobs than others.
...rm provides many tools, some better suited for particular jobs than others.
...And 13 more matches
dev/panel - Archive of obsolete content
irefox developer tools are hosted in a ui component called the toolbox.
... up manually if you like, or you can use the add-on sdk core/heritage module to simplify the mechanics of inheriting from panel.
...y in the toolbox toolbar.
...And 12 more matches
editor - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a frame which is expected to contain an editable document.
... « xul reference home [ examples | attributes | properties | methods | related ] a frame which is expected to contain an editable document.
...l from a web server will not be able to access most of the features of the editor.
...And 12 more matches
Styling tables - Learn web development
previous overview: building blocks next styling an
html table isn't the most glamorous job in the world, but sometimes we all have to do it.
... previous overview: building blocks next styling an
html table isn't the most glamorous job in the world, but sometimes we all have to do it.
... previous overview: building blocks next styling an
html table isn't the most glamorous job in the world, but sometimes we all have to do it.
...And 12 more matches
Client-side storage - Learn web development
to store application data.
...er's data!
...d example let's apply this new-found knowledge by writing a simple working example to give you an idea of how web storage can be used.
...And 12 more matches
Using the Browser API
non-standard this feature is non-standard and is not on a standards track.
... non-standard this feature is non-standard and is not on a standards track.
...s: by adding a mozbrowser attribute to the <iframe> element we can make it appear like a top-level browser window to the embedded content.
...And 12 more matches
Creating a cross-browser video player - Developer guides
this article describes a simple
html5 video player that uses the media and fullscreen apis and works across most major desktop and mobile browsers.
...he player controls themselves won't be styled beyond the basics required to get them working; full styling of the player will be taken care of in a future article.
...basics required to get them working; full styling of the player will be taken care of in a future article.
...And 12 more matches
Evolution of HTTP - HTTP
wide web in 1989, while he was working at cern, tim berners-lee wrote a proposal to build a hypertext system over the internet.
...ne-line protocol the initial version of http had no version number; it has been later called 0.9 to differentiate it from the later versions.
...er called 0.9 to differentiate it from the later versions.
...And 12 more matches
SVG documentation index - SVG: Scalable Vector Graphics
es: # page tags and summary 1 svg: scalable vector graphics 2d graphics, graphics, icons, images, reference, responsive design, svg, scalable graphics, scalable images, vector graphics, web, l10n:priority scalable vector graphics (svg) are an xml-based markup language for describing two-dimensional based vector graphics.xml 2 applying svg effects to
html content css, guide,
html, svg modern browsers support using svg within css styles to apply graphical effects to
html content.
...ributes: 4 content type needstechnicalreview, svg, types, data types svg makes use of a number of data types.
...ersions of svg viewers prior to the release of firefox 1.5 unfortunately paid scant attention to namespaces, but they are essential to multi-xml dialect supporting user agents such as gecko-based browsers which must be very strict.
...And 12 more matches
Using the WebAssembly JavaScript API - WebAssembly
ples let’s run through some examples that explain how to use the webassembly javascript api, and how to use it to load a wasm module in a web page.
...gh some examples that explain how to use the webassembly javascript api, and how to use it to load a wasm module in a web page.
...ported_func") (param i32)) (func (export "exported_func") i32.const 42 call $i)) in the second line, you will see that the import has a two-level namespace — the internal function $i is imported from imports.imported_func.
...And 12 more matches
Communicating With Other Scripts - Archive of obsolete content
te that before firefox 31 code in content scripts can't use window to access postmessage() and addeventlistener() and instead must use document.defaultview.
...ript suppose we have a page called "listen.
html" hosted at "my-domain.org", and we want to send messages from the add-on to a script embedded in that page.
...mod.pagemod({ include: "http://my-domain.org/listen.
html", contentscriptfile: data.url("talk.js") }); the "talk.js" content script uses window.postmessage() to send the message to the page: // content-script (talk.js) window.postmessage("message from content script", "http://my-domain.org/"); the second argument may be '*' which will allow communication with any domain.
...And 11 more matches
Extension Versioning, Update and Compatibility - Archive of obsolete content
.5</em:minversion> <em:maxversion>2.0.0.*</em:maxversion> <!-- this is where this version of the add-on will be downloaded from --> <em:updatelink>https://www.mysite.com/foobar2.2.xpi</em:updatelink> <!-- a page describing what is new in this updated version --> <em:updateinfourl>http://www.mysite.com/updateinfo2.2.x
html</em:updateinfourl> </rdf:description> </em:targetapplication> </rdf:description> </rdf:li> <rdf:li> <rdf:description> <em:version>2.5</em:version> <em:targetapplication> <rdf:description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minversion>1.5</em:m...
...you must add an updateinfourl entry to the update manifest (see the example above).
...the example above).
...And 11 more matches
Web fonts - Learn web development
previous overview: styling text next in the first article of the module, we explored the basic css features available for styling fonts and text.
...ling text next in the first article of the module, we explored the basic css features available for styling fonts and text.
...prerequisites: basic computer literacy,
html basics (study introduction to
html), css basics (study introduction to css), css text and font fundamentals.
...And 11 more matches
Styling web forms - Learn web development
previous overview: forms next in the previous few articles we looked at all the
html you'll need to create and structure your web forms.
...eb forms.
...ier as old browsers are retired and modern browsers give us more features to use.
...And 11 more matches
UI pseudo-classes - Learn web development
ing of various form controls, in a general manner.
...ocused (i.e.
...s we'll be looking at are: :required and :optional: targets required or optional form controls.
...And 11 more matches
Silly story generator - Learn web development
that generates random silly stories.
...requisites: before attempting this assessment you should have already worked through all the articles in this module.
...opy of it as index.
html in a new directory somewhere on your computer, and do the assessment locally to begin with.
...And 11 more matches
Getting started with Vue - Learn web development
xt now let's introduce vue, the third of our frameworks.
... high-level structure of the whole project and an individual component, see how to run the project locally, and get it prepared to start building our example.
... or render functions), you'll need a terminal with node + npm installed.
...And 11 more matches
Gecko's "Almost Standards" Mode
en if their font size is larger (if they have no descendants, they are zero-height positioned at their baseline) other than this one difference, "almost standards" and "standards" modes are exactly the same in terms of layout and other behaviors.
...ey are zero-height positioned at their baseline) other than this one difference, "almost standards" and "standards" modes are exactly the same in terms of layout and other behaviors.
...an this one difference, "almost standards" and "standards" modes are exactly the same in terms of layout and other behaviors.
...And 11 more matches
nsITransferable
ion is needed here.
...e.
... common mime types some of these need better descriptions, especially the mozilla-specific ones.
...And 11 more matches
Using the Web Speech API - Web APIs
indows 10, android speech, etc.
... a web service for recognition processing, so it won't work offline.
...dex file in a supporting desktop browser, or navigate to the live demo url in a supporting mobile browser like chrome.
...And 11 more matches
<color> - CSS: Cascading Style Sheets
lor> can be defined in any of the following ways: using a keyword (such as blue or transparent) using the rgb cubic-coordinate system (via the #-hexadecimal or the rgb() and rgba() functional notations) using the hsl cylindrical-coordinate system (via the hsl() and hsla() functional notations) note: this article describes the <color> data type in detail.
...f the following ways: using a keyword (such as blue or transparent) using the rgb cubic-coordinate system (via the #-hexadecimal or the rgb() and rgba() functional notations) using the hsl cylindrical-coordinate system (via the hsl() and hsla() functional notations) note: this article describes the <color> data type in detail.
...support output devices' color profiles.
...And 11 more matches
Introduction to Web development - Developer guides
whether you're just getting started with web development, or are just expanding your horizons into new realms of web awesomeness, the links here should help you get started.
...ted with web development, or are just expanding your horizons into new realms of web awesomeness, the links here should help you get started.
...or are just expanding your horizons into new realms of web awesomeness, the links here should help you get started.
...And 11 more matches
Using custom elements - Web Components
one of the key features of the web components standard is the ability to create custom elements that encapsulate your functionality on an
html page, rather than having to make do with a long, nested batch of elements that together provide a custom page feature.
...ion below).
... each time the custom element is appended into a document-connected element, while attributechangedcallback is invoked when one of the custom element's attributes is added, removed, or changed.
...And 11 more matches
Storing annotations - Archive of obsolete content
this.annotationtext = annotationtext; this.url = anchor[0]; this.ancestorid = anchor[1]; this.anchortext = anchor[2]; } now we need to link this code to the annotation editor, so that when the user presses the return key in the editor, we create and store the new annotation: var annotationeditor = panels.panel({ width: 220, height: 220, contenturl: data.url('editor/annotation-editor.
html'), contentscriptfile: data.url('editor/annotation-editor.js'), onmessage: function(annotationtext) { if (annotationtext) handlenewannotation(annotationtext, this.annotationanchor); annotationeditor.hide(); }, onshow: function() { this.postmessage('focus'); } }); listing stored annotations to prove that this works, let's implement the part of the add-on that displays ...
...ion() { this.postmessage('focus'); } }); listing stored annotations to prove that this works, let's implement the part of the add-on that displays all the previously entered annotations.
...e some basic styling.
...And 10 more matches
Embedding SVG - Archive of obsolete content
svg is an xml based makeup language and can be embedded into other markup languages, like x
html and xul.
... svg is an xml based makeup language and can be embedded into other markup languages, like x
html and xul.
... svg is an xml based makeup language and can be embedded into other markup languages, like x
html and xul.
...And 10 more matches
jspage - Archive of obsolete content
bkit)?window["[[domelement.prototype]]"]:{}; }a.document.window=a;return $extend(a,window.prototype);},afterimplement:function(b,a){window[b]=window.prototype[b]=a;}});window.prototype={$family:{name:"window"}}; new window(window);var document=new native({name:"document",legacy:(browser.engine.trident)?null:window.document,initialize:function(a){$uid(a);a.head=a.getelementsbytagname("head")[0]; a.
html=a.getelementsbytagname("
html")[0];if(browser.engine.trident&&browser.engine.version<=4){$try(function(){a.execcommand("backgroundimagecache",false,true); });}if(browser.engine.trident){a.window.attachevent("onunload",function(){a.window.detachevent("onunload",arguments.callee);a.head=a.
html=a.window=null; });}return $extend(a,document.prototype);},afterimplement:function(b,a){document[b]=document...
...ent;a=a||f.event;if(a.$extended){return a;}this.$extended=true;var j=a.type; var g=a.target||a.srcelement;while(g&&g.nodetype==3){g=g.parentnode;}if(j.test(/key/)){var b=a.which||a.keycode;var m=event.keys.keyof(b);if(j=="keydown"){var d=b-111; if(d>0&&d<13){m="f"+d;}}m=m||string.fromcharcode(b).tolowercase();}else{if(j.match(/(click|mouse|menu)/i)){k=(!k.compatmode||k.compatmode=="css1compat")?k.
html:k.body; var i={x:a.pagex||a.clientx+k.scrollleft,y:a.pagey||a.clienty+k.scrolltop};var c={x:(a.pagex)?a.pagex-f.pagexoffset:a.clientx,y:(a.pagey)?a.pagey-f.pageyoffset:a.clienty}; if(j.match(/dommousescroll|mousewheel/)){var h=(a.wheeldelta)?a.wheeldelta/120:-(a.detail||0)/3;}var e=(a.which==3)||(a.button==2);var l=null;if(j.match(/over|out/)){switch(j){case"mouseover":l=a.relatedtarget||a.fromel...
...,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={input:"checked",option:"selected",textarea:(browser.engine.webkit&&browser.engine.version<420)?"inner
html":"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.tagname)){for(var o in n){if(typeof n[o]=="function"){n[o]=$empty; }}element.dispose(n);}}if(!m){return;}...
...And 10 more matches
What are browser developer tools? - Learn web development
every modern web browser includes a powerful suite of developer tools.
...lick an item on a webpage (ctrl-click on the mac), and choose inspect element from the context menu that appears.
...traight-away highlights the code of the element you right-clicked.) the inspector: dom explorer and css editor the developer tools usually open by default to the inspector, which looks something like the following screenshot.
...And 10 more matches
Adding vector graphics to the Web - Learn web development
previous overview: multimedia and embedding next vector graphics are very useful in many circumstances — they have small file sizes and are highly scalable, so they don't pixelate when zoomed in or blown up to a large size.
...hms — a vector image file contains shape and path definitions that the computer can use to work out what the image should look like when rendered on the screen.
...er continues to look nice and crisp, because no matter what size it is, the algorithms are used to work out the shapes in the image, with the values simply being scaled as it gets bigger.
...And 10 more matches
Properly configuring server MIME types - Learn web development
jor source of problems for users of gecko-based browsers, which respect the mime types as reported by web servers and web applications.
...isconfigured, e.g.
...d not guess mime types apart from violating the http specification, it is a bad strategy for browsers to guess mime types for the following reasons: loss of control if the browser ignores the reported mime type, web administrators and authors no longer have control over how their content is to be processed.
...And 10 more matches
Server-side web frameworks - Learn web development
ic modules.
...how this criteria is passed to the filter() function as an argument with field name and match type separated by double underscores: team_level__exact).
...list_teams = team.objects.filter(team_level__exact="u09") context = {'youngest_teams': list_teams} return render(request, 'best/index.
html', context) rendering data web frameworks often provide templating systems.
...And 10 more matches
Ember app structure and componentization - Learn web development
previous overview: client-side javascript frameworks next in this article we'll get right on with planning out the structure of our todomvc ember app, adding in the
html for it, and then breaking that
html structure into components.
... previous overview: client-side javascript frameworks next in this article we'll get right on with planning out the structure of our todomvc ember app, adding in the
html for it, and then breaking that
html structure into components.
...avascript features (such as classes, modules, etc), will be extremely beneficial, as ember makes heavy use of them.
...And 10 more matches
Beginning our React todo list - Learn web development
structure and styling in place, ready for individual component definition and interactivity, which we'll add later.
...ide two things: an app() function to replace the one you have now, and some css to style your app.
... </div> <h2 id="list-heading"> 3 tasks remaining </h2> <ul role="list" classname="todo-list stack-large stack-exception" aria-labelledby="list-heading" > <li classname="todo stack-small"> <div classname="c-cb"> <input id="todo-0" type="checkbox" defaultchecked={true} /> <label classname="todo-label"
htmlfor="todo-0"> eat </label> </div> <div classname="btn-group"> <button type="button" classname="btn"> edit <span classname="visually-hidden">eat</span> </button> <button type="button" classname="btn btn__danger"> delete <span classname="visually-hidden">eat</span> </button> ...
...And 10 more matches
Mozilla accessibility architecture
sdocaccessible.
... accessible/public common interfaces shared by all toolkits accessible/public/msaa custom com interfaces that we use to extend msaa's iaccessible accessible/public/atk internal xpcom atk interfaces accessible/src/base common implementations shared by
html and xul implementations accessible/src/
html/ document and
html object implementations accessible/src/xul/ user interface and xul object implementations accessible/src/msaa/ windows implementations accessible/src/atk/ atk implementations, may eventually be used on platforms other than linux and unix accessible/src/mac/ empty implementations of plat...
...ult implementations use a class called nsaccessibletreewalker to do the real work.
...And 10 more matches
nsINavBookmarksService
anewuri); long long createdynamiccontainer(in long long aparentfolder, in autf8string aname, in astring acontractid, in long aindex); note: renamed from createcontainer in gecko 1.9 obsolete since gecko 13.0 long long createfolder(in long long aparentfolder, in autf8string name, in long index); void endupdatebatch(); obsolete since gecko 1.9 void exportbookmarks
html(in nsifile file); obsolete since gecko 1.9 nsiuri getbookmarkedurifor(in nsiuri auri); void getbookmarkfolderstarray(in nsiuri auri, in print64array aresult); native code only!
...unsigned short getitemtype(in long long aitemid); astring getkeywordforbookmark(in long long aitemid); obsolete since gecko 40.0 astring getkeywordforuri(in nsiuri auri); obsolete since gecko 40.0 nsitransaction getremovefoldertransaction(in long long aitemid); nsiuri geturiforkeyword(in astring keyword); obsolete since gecko 40.0 void importbookmarks
html(in nsiuri url); obsolete since gecko 1.9 void importbookmarks
htmltofolder(in nsiuri url, in print64 folder); obsolete since gecko 1.9 print32 indexoffolder(in print64 parent, in print64 folder); obsolete since gecko 1.9 print32 indexofitem(in print64 folder, in nsiuri uri); obsolete since gecko 1.9 long long insertbookmark(in long long aparentid, in nsiuri auri...
...ault_index to append to the end of the list.
...And 10 more matches
Index - Firefox Developer Tools
found 158 pages: # page tags and summary 1 firefox developer tools developing mozilla, guide, tools, web development, web development:tools, l10n:priority firefox developer tools is a set of web developer tools built into firefox.
... found 158 pages: # page tags and summary 1 firefox developer tools developing mozilla, guide, tools, web development, web development:tools, l10n:priority firefox developer tools is a set of web developer tools built into firefox.
...iority firefox developer tools is a set of web developer tools built into firefox.
...And 10 more matches
Migrating from Firebug - Firefox Developer Tools
rmal command line smartly enters a line break when it recognizes an unfinished command like document.
...there is a preview tab when a network request logged to the console is expanded in firebug.
...work request logged to the console is expanded in firebug.
...And 10 more matches
History.replaceState() - Web APIs
gnore this parameter, although they may use it in the future.
...nst future changes to the method.
...l; otherwise replacestate throws an exception.
...And 10 more matches
ARIA - Accessibility
accessible rich internet applications (aria) is a set of attributes that define ways to make web content and web applications (especially those developed with javascript) more accessible to people with disabilities.
...) is a set of attributes that define ways to make web content and web applications (especially those developed with javascript) more accessible to people with disabilities.
...to people with disabilities.
...And 10 more matches
<display-internal> - CSS: Cascading Style Sheets
some layout models such as table and ruby have a complex internal structure, with several different roles that their children and descendants can fill.
...e and ruby have a complex internal structure, with several different roles that their children and descendants can fill.
...les that their children and descendants can fill.
...And 10 more matches
Constraint validation - Developer guides
the creation of web forms has always been a complex task.
...types for the <input> element and constraint validation to ease the work of checking the form content on the client side.
...traints can be tested using the constraint validation api.
...And 10 more matches
Parsing and serializing XML - Developer guides
l file into a dom tree: var xhr = new xmlhttprequest(); xhr.onload = function() { dump(xhr.responsexml.documentelement.nodename); } xhr.onerror = function() { dump("error while getting xml."); } xhr.open("get", "example.xml"); xhr.responsetype = "document"; xhr.send(); the value returned in the xhr object's responsexml field is a document constructed by parsing the xml.
...rned in the xhr object's responsexml field is a document constructed by parsing the xml.
...e xml document you created in the previous section.
...And 10 more matches
clipboard - Archive of obsolete content
interact with the system clipboard, setting and getting its contents.
... interact with the system clipboard, setting and getting its contents.
...l (a string of
html) image (a base-64 encoded png) if no data type is provided, then the module will detect it for you.
...And 9 more matches
Creating annotations - Archive of obsolete content
ew add-on, you will have to choose between 2 review tracks: full review and preliminary review.
... elements and send information about them to the main add-on code.
...-on code.
...And 9 more matches
Localization - Archive of obsolete content
the sdk supports localization of strings appearing in: your main add-on's javascript code
html files packaged with your add-on the title, description and homepage fields of your add-on's metadata the title and description fields of your add-on's preferences.
...localizable string, represented in english as "hello!", and you want to supply us english and french french localizations.
... my-addon/ data lib locale/ en-us.properties fr.properties "en-us.properties" contains this: hello_id= hello!
...And 9 more matches
Creating a Help Content Pack - Archive of obsolete content
were simply introduced without explanation, and i've tried to go through things a bit more slowly with better descriptions.
...ion as necessary".
... x
html, a content pack descriptor file written in rdf, and a table of contents, index, and glossary (also written in rdf).
...And 9 more matches
Template Builder Interface - Archive of obsolete content
t that does not have a builder will have this property set to null.
...or an element applies both when an element is created when the window is loaded and when an element is inserted dynamically.
...an only be used in xul documents, however, there is no requirement that the templates generate xul elements.
...And 9 more matches
Gecko FAQ - Gecko Redirect 1
what is gecko?
...tiple browsers, including mozilla firefox, seamonkey, and others.
...g.
...And 9 more matches
How CSS works - Learn web development
previous overview: first steps next we have learned the basics of css, what it is for and how to write simple stylesheets.
... previous overview: first steps next we have learned the basics of css, what it is for and how to write simple stylesheets.
... previous overview: first steps next we have learned the basics of css, what it is for and how to write simple stylesheets.
...And 9 more matches
Front-end web developer - Learn web development
ont-end web developer.
...-browser compatibility)
html, the language that gives web content structure and meaning css, the language used to style web pages javascript, the scripting language used to create dynamic functionality on the web tooling that is used to facilitate modern client-side web development.
...w i'm ready to move on?
...And 9 more matches
Responsive images - Learn web development
previous overview: multimedia and embedding next in this article, we'll learn about the concept of responsive images — images that work well on devices with widely differing screen sizes, resolutions, and other such features — and look at what tools
html provides to help implement them.
...es — images that work well on devices with widely differing screen sizes, resolutions, and other such features — and look at what tools
html provides to help implement them.
...ce allocations (art direction).
...And 9 more matches
Introduction to web APIs - Learn web development
overview: client-side web apis next first up, we'll start by looking at apis from a high level — what are they, how do they work, how to use them in your code, and how are they structured?
...isplay your latest tweets on your web page).
...iety of things in your code.
...And 9 more matches
Experimental features in Firefox
thing will still work with the latest web technology capabilities.
...e latest web technology capabilities.
...ures, you need to download firefox nightly or firefox developer edition.
...And 9 more matches
Observer Notifications
wsing enter sent when private browsing mode is activated.
...activated.
...re-begin json sent just before bookmarks are restored from json.
...And 9 more matches
Using the clipboard
d object to copy the data using the transferring object.
...ing object.
...on the clipboard.
...And 9 more matches
Validators - Firefox Developer Tools
la context menu that allows you to run whatever page you're on through one of (currently) 18 different online validaton and analysis services.
...ows you to run whatever page you're on through one of (currently) 18 different online validaton and analysis services.
...y) 18 different online validaton and analysis services.
...And 9 more matches
Getting Started - Developer guides
this article guides you through the ajax basics and gives you some simple hands-on examples to get you started.
...ote that the steps above are valid only if you used an asynchronous request (the third parameter of open() was unspecified or set to true).
...bove are valid only if you used an asynchronous request (the third parameter of open() was unspecified or set to true).
...And 9 more matches
Web media technologies
over the years, the web's ability to present, create, and manage audio, video, and other media has grown at an increasing pace.
...a has grown at an increasing pace.
...g pace.
...And 9 more matches
Critical rendering path - Web Performance
the critical rendering path is the sequence of steps the browser goes through to convert the
html, css, and javascript into pixels on the screen.
... the critical rendering path is the sequence of steps the browser goes through to convert the
html, css, and javascript into pixels on the screen.
... the critical rendering path is the sequence of steps the browser goes through to convert the
html, css, and javascript into pixels on the screen.
...And 9 more matches
Cross-domain Content Scripts - Archive of obsolete content
example.com/"] } the domains listed must include the scheme and fully qualified domain name, and these must exactly match the domains serving the content - so in the example above, the content script will not be allowed to access content served from https://example.com/.
...he domains serving the content - so in the example above, the content script will not be allowed to access content served from https://example.com/.
...content - so in the example above, the content script will not be allowed to access content served from https://example.com/.
...And 8 more matches
Content Scripts - Archive of obsolete content
nd content scripts to communicate with each other this complete add-on illustrates all of these principles.
...an attach() function to attach a content script to the tab.
...e available as complete, but minimal, add-ons in the addon-sdk-content-scripts repository on github.
...And 8 more matches
page-worker - Archive of obsolete content
constructor function page, which constructs a new page worker.
...d, after which its memory is freed, and you must create a new instance to load another page.
...pt: "console.log(document.body.inner
html);", contenturl: "http://en.wikipedia.org/wiki/internet" }); it can also point to an
html file which you've packaged with your add-on.
...And 8 more matches
ui/toolbar - Archive of obsolete content
experimental add a toolbar to the firefox user interface.
... require("sdk/ui/toolbar"); var { frame } = require("sdk/ui/frame"); var previous = actionbutton({ id: "previous", label: "previous", icon: "./icons/previous.png" }); var next = actionbutton({ id: "next", label: "next", icon: "./icons/next.png" }); var play = actionbutton({ id: "play", label: "play", icon: "./icons/play.png" }); var frame = new frame({ url: "./frame-player.
html" }); var toolbar = toolbar({ title: "player", items: [previous, next, play, frame] }); the toolbar appears just above the content window: to destroy a toolbar call its destroy() method.
... be supplied, and must contain at least object.
...And 8 more matches
Bootstrapped extensions - Archive of obsolete content
in: locale name_of_your_addon en-us locale/ here is an example: github :: l10n-properties - on startup of this add-on it will show a prompt saying usa or great britain, which ever it deems closest to your locale.
... example: github :: l10n-properties - on startup of this add-on it will show a prompt saying usa or great britain, which ever it deems closest to your locale.
...closest to your locale.
...And 8 more matches
Creating reusable content with CSS and XBL - Archive of obsolete content
ge).
... to link selected elements to their own: stylesheets content properties and methods event handlers because you avoid linking everything at the document level, you can make self-contained parts that are easy to maintain and reuse.
...content properties and methods event handlers because you avoid linking everything at the document level, you can make self-contained parts that are easy to maintain and reuse.
...And 8 more matches
XForms Select1 Element - Archive of obsolete content
ion happens when the itemset element specifies the item value using a copy (see spec) element.
...value using a copy (see spec) element.
...copy element can be used to add a subtree of nodes underneath the element that the select1 control is bound to.
...And 8 more matches
Create the Canvas and draw on it - Game development
« previousnext » this is the 1st step out of 10 of the gamedev canvas tutorial.
... « previousnext » this is the 1st step out of 10 of the gamedev canvas tutorial.
... « previousnext » this is the 1st step out of 10 of the gamedev canvas tutorial.
...And 8 more matches
Initialize the framework - Game development
« previousnext » this is the first of 16 tutorials to learn how to use gamedev phaser.
... « previousnext » this is the first of 16 tutorials to learn how to use gamedev phaser.
...orials to learn how to use gamedev phaser.
...And 8 more matches
Styling lists - Learn web development
previous overview: styling text next lists behave like any other text for the most part, but there are some css properties specific to lists that you need to know about, and some best practices to consider.
... previous overview: styling text next lists behave like any other text for the most part, but there are some css properties specific to lists that you need to know about, and some best practices to consider.
...est practices and properties related to styling lists.
...And 8 more matches
Web forms — Working with user data - Learn web development
b forms.
...forms including marking up their
html structure, styling form controls, validating form data, and submitting data to the server.
...a course that includes all the essential information you need to work towards your goal.
...And 8 more matches
A first splash into JavaScript - Learn web development
previous overview: first steps next now you've learned something about the theory of javascript, and what you can do with it, we are going to give you a crash course in the basic features of javascript via a completely practical tutorial.
...e will give you plenty of opportunity to practice thinking like a programmer throughout the course.
...give you plenty of opportunity to practice thinking like a programmer throughout the course.
...And 8 more matches
Framework main features - Learn web development
script frameworks next each major javascript framework has a different approach to updating the dom, handling browser events, and providing an enjoyable developer experience.
....
...ow how to read data variables, and this data can be used to streamline the process of writing your ui.
...And 8 more matches
nsIFeedTextConstruct
toolkit/components/feeds/public/nsifeedtextconstruct.idlscriptable this interface represents rss or atom feed text fields that may contain plain text,
html, or x
html.
...er feed-related interfaces, such as nsifeed, nsifeedentry, and nsifeedcontainer have attributes that return objects implementing nsifeedtextconstruct.
...elated interfaces, such as nsifeed, nsifeedentry, and nsifeedcontainer have attributes that return objects implementing nsifeedtextconstruct.
...And 8 more matches
XUL Overlays
d attributes bases and overlays are merged when they share the same id attribute.
...s are merged when they share the same id attribute.
....css, and is located in the skin/default subdirectory.
...And 8 more matches
Element.localName - Web APIs
the element.localname read-only property returns the local part of the qualified name of an element.
...he element.localname read-only property returns the local part of the qualified name of an element.
...rty returns the local part of the qualified name of an element.
...And 8 more matches
Using IndexedDB - Web APIs
and what it is: locale (returns the locale if any, or null if none is specified) and isautolocale (returns true if the index was created with an auto locale, meaning that the platform's default locale is used, false otherwise.) note: this feature is currently hidden behind a flag — to enable it and experiment, go to about:config and enable dom.indexeddb.experimental.
... == current_view_pub_key) return; current_view_pub_key = key; var store = getobjectstore(db_store_name, 'readonly'); getblob(key, store, function(blob) { console.log("setinviewer blob:", blob); var iframe = newviewerframe(); // it is not possible to set a direct link to the // blob to provide a mean to directly download it.
...e(db_store_name, 'readonly'); getblob(key, store, function(blob) { console.log("setinviewer blob:", blob); var iframe = newviewerframe(); // it is not possible to set a direct link to the // blob to provide a mean to directly download it.
...And 8 more matches
Node.localName - Web APIs
the node.localname read-only property returns the local part of the qualified name of this node.
... the node.localname read-only property returns the local part of the qualified name of this node.
....localname read-only property returns the local part of the qualified name of this node.
...And 8 more matches
Node - Web APIs
ow dom.
...hild node of the node, or null if the node has no child.
...ns a node representing the previous node in the tree, or null if there isn't such node.
...And 8 more matches
filter - CSS: Cascading Style Sheets
ussianblur in="sourcegraphic" stddeviation="3.5"/> </filter> <image xlink:href="/files/3710/test_form_2.jpeg" filter="url(#svgblur)" width="212px" height="161px"/> </svg> </div> </td> <td><img alt="test_form_s.jpg" id="img4" class="internal default" src="/files/3711/test_form_2_s.jpg" style="width: 100%;" /></td> </tr> </tbody> </table>
html { height:100%; } body { font: 14px/1.286 "lucida grande", "lucida sans unicode", "dejavu sans", lucida, arial, helvetica, sans-serif; color: rgb(51, 51, 51); height:100%; overflow:hidden; } #img2 { width:100%; height:auto; -webkit-filter:blur(5px); -ms-filter:blur(5px); filter:blur(5px); } table.standard-table { border: 1px solid rgb(187, 187, 187); border-collapse: collap...
...g type="linear" slope="2"/> <fefuncb type="linear" slope="2"/> </fecomponenttransfer> </filter> <image xlink:href="/files/3708/test_form.jpg" filter="url(#brightness)" width="286px" height="217px" /> </svg><div></td> <td><img alt="test_form_s.jpg" id="img4" class="internal default" src="/files/3709/test_form_s.jpg" style="width: 100%;" /></td> </tr> </tbody> </table>
html { height:100%; } body { font: 14px/1.286 "lucida grande","lucida sans unicode","dejavu sans",lucida,arial,helvetica,sans-serif; color: rgb(51, 51, 51); height:100%; overflow:hidden; } #img2 { width:100%; height:auto; -moz-filter:brightness(2); -webkit-filter:brightness(2); -ms-filter:brightness(2); filter:brightness(2); } table.standard-table { border: 1px solid rgb(187, 1...
...="-0.5"/> <fefuncb type="linear" slope="2" intercept="-0.5"/> </fecomponenttransfer> </filter> <image xlink:href="/files/3712/test_form_3.jpeg" filter="url(#contrast)" width="240px" height="151px" /> </svg><div></td> <td><img alt="test_form_s.jpg" id="img4" class="internal default" src="/files/3713/test_form_3_s.jpg" style="width: 100%;" /></td> </tr> </tbody> </table>
html { height:100%; } body { font: 14px/1.286 "lucida grande","lucida sans unicode","dejavu sans",lucida,arial,helvetica,sans-serif; color: rgb(51, 51, 51); height:100%; overflow:hidden; } #img2 { width:100%; height:auto; -moz-filter:contrast(200%); -webkit-filter:contrast(200%); -ms-filter:contrast(200%); filter:contrast(200%); } table.standard-table { border: 1px solid rgb(18...
...And 8 more matches
Printing - Developer guides
nafterprint to assign handlers for these events, but using eventtarget.addeventlistener() is preferred.
...rint to assign handlers for these events, but using eventtarget.addeventlistener() is preferred.
...et.addeventlistener() is preferred.
...And 8 more matches
JavaScript technologies overview - JavaScript
introduction whereas
html defines a webpage's structure and content and css sets the formatting and appearance, javascript adds interactivity to a webpage and creates rich web applications.
...the internationalization specification is nowadays also ratified on a yearly basis and browsers constantly improve their implementation.
...ernationalization specification is nowadays also ratified on a yearly basis and browsers constantly improve their implementation.
...And 8 more matches
Same-origin policy - Web security
ls have the same origin if the protocol, port (if specified), and host are the same for both.
...r both.
...is a set of items that together comprise a whole — a generic form for double/triple/quadruple/quintuple/etc.) the following table gives examples of origin comparisons with the url http://store.company.com/dir/page.
html: url outcome reason http://store.company.com/dir2/other.
html same origin only the path differs http://store.company.com/dir/inner/another.
html same origin only the path differs https://store.company.com/page.
html failure different protocol http://store.company.com:81/dir/page.
html failure different port (http:// is port 80 by default) http://news.company.com/dir/page.
html failure different host inherited origins scripts executed from pages with an about:blank or javascript: url ...
...And 8 more matches
Displaying annotations - Archive of obsolete content
essage(simplestorage.storage.annotations); }); } function handlenewannotation(annotationtext, anchor) { var newannotation = new annotation(annotationtext, anchor); simplestorage.storage.annotations.push(newannotation); updatematchers(); } annotation panel the annotation panel just shows the content of an annotation.
...torage.annotations.push(newannotation); updatematchers(); } annotation panel the annotation panel just shows the content of an annotation.
...ns.push(newannotation); updatematchers(); } annotation panel the annotation panel just shows the content of an annotation.
...And 7 more matches
Examples and demos from articles - Archive of obsolete content
what follows is a brief list of examples and demos from our theoretical articles.
...ef list of examples and demos from our theoretical articles.
...ach to solve this problem is to nest all the informations needed by each animation to start, stop, etc.
...And 7 more matches
Rosetta - Archive of obsolete content
by default, the only possible standardized scripting language for
html is ecmascript.
...ence, if you are going to use another scripting language you might expect that most of the browsers will not recognize it.
... "use strict"; /*\ |*| |*| :: rosetta.js :: |*| |*| a possible, extensible collection of compilers to native ecmascript.
...And 7 more matches
Using XML Data Islands in Mozilla - Archive of obsolete content
internet explorer had an "xml data islands" feature that allows web authors include xml data inline in
html documents using the <xml> tag.
... internet explorer had an "xml data islands" feature that allows web authors include xml data inline in
html documents using the <xml> tag.
...m> <name>line item 2</name> <price>2.48</price> </lineitem> </purchaseorder> </script> the xml source text can then be retrieved like this: var ordersource = document.getelementbyid("purchase-order").textcontent; the xml source text can be parsed into a dom tree using the domparser api: var parser = new domparser(); var doc = parser.parsefromstring(ordersource, "application/xml"); the
html5 data block-based way shown here works in firefox, opera, webkit-based browsers such as chrome and safari, and ie9 while ie's xml data islands work only in ie.
...And 7 more matches
Selection - Archive of obsolete content
note: this page documents the jetpack prototype, which is no longer under active development.
...s a method for detecting the selections made by the user.
....selection.
...And 7 more matches
Selection - Archive of obsolete content
jetpack's selection api provides a method for detecting the selections made by the user.
...s a method for detecting the selections made by the user.
...lection.
...And 7 more matches
Selection - Archive of obsolete content
jetpack's selection api provides a method for detecting the selections made by the user.
...s a method for detecting the selections made by the user.
...lection.
...And 7 more matches
Anonymous Content - Archive of obsolete content
introduction a binding can specify an anonymous content template using the content element.
...clared in a bound document using a single tag can then be constructed out of multiple child elements, and this implementation is hidden from the bound document.
...ng a single tag can then be constructed out of multiple child elements, and this implementation is hidden from the bound document.
...And 7 more matches
What is CSS? - Learn web development
overview: first steps next css (cascading style sheets) allows you to create great-looking web pages, but how does it work under the hood?
...steps next css (cascading style sheets) allows you to create great-looking web pages, but how does it work under the hood?
... pages, but how does it work under the hood?
...And 7 more matches
Other form controls - Learn web development
previous overview: forms next we now look at the functionality of non-<input> form elements in detail, from other control types such as drop-down lists and multi-line text fields, to other useful form features such as the <output> element (which we saw in action in the previous article), and progress bars.
...etail, from other control types such as drop-down lists and multi-line text fields, to other useful form features such as the <output> element (which we saw in action in the previous article), and progress bars.
...urn) that will be included when the data is submitted.
...And 7 more matches
Structuring a page of content - Learn web development
previous overview: introduction to
html structuring a page of content ready for laying it out using css is a very important skill to master, so in this assessment you'll be tested on your ability to think about how a page might end up looking, and choose appropriate structural semantics to build a layout on top of.
... have already worked through the rest of the course, with a particular emphasis on document and website structure.
...ntain image thumbnails.
...And 7 more matches
Useful string methods - Learn web development
st steps next now that we've looked at the very basics of strings, let's move up a gear and start thinking about what useful operations we can do on strings with built-in methods, such as finding the length of a text string, joining and splitting strings, substituting one character in a string for another, and more.
...l to a certain result.
...st needs to go inside the parentheses // in the line below, replacing what's currently there if (greetings[i]) { let listitem = document.createelement('li'); listitem.textcontent = input; list.appendchild(listitem); } } </textarea> <div class="playable-buttons"> <input id="reset" type="button" value="reset"> <input id="solution" type="button" value="show solution"> </div>
html { font-family: sans-serif; } h2 { font-size: 16px; } .a11y-label { margin: 0; text-align: right; font-size: 0.7rem; width: 98%; } body { margin: 10px; background: #f5f9fa; } const textarea = document.getelementbyid('code'); const reset = document.getelementbyid('reset'); const solution = document.getelementbyid('solution'); let code = textarea.value; let userentry = textarea.v...
...And 7 more matches
Android-specific test suites
d emulator.
...c android integration works.
...c class testpermissions { @ignore @test public void testsuccessrunnableisexecutedifpermissionsaregranted() { ...
...And 7 more matches
Mozilla Quirks Mode Behavior
or is being removed in firefox 27, for interoperability.
...the topmargin, bottommargin, leftmargin, and rightmargin attributes on body are supported only in quirks mode (bug 9258).
...argin, leftmargin, and rightmargin attributes on body are supported only in quirks mode (bug 9258).
...And 7 more matches
Basic usage of canvas - Web APIs
« previousnext » let's start this tutorial by looking at the <canvas>
html element itself.
...y by css, but during rendering the image is scaled to fit its layout size: if the css sizing doesn't respect the ratio of the initial canvas, it will appear distorted.
...scaled to fit its layout size: if the css sizing doesn't respect the ratio of the initial canvas, it will appear distorted.
...And 7 more matches
Document.forms - Web APIs
the forms read-only property of the document interface returns an
htmlcollection listing all the <form> elements contained in the document.
... the forms read-only property of the document interface returns an
htmlcollection listing all the <form> elements contained in the document.
... the forms read-only property of the document interface returns an
htmlcollection listing all the <form> elements contained in the document.
...And 7 more matches
Recommended Drag Types - Web APIs
the
html drag and drop api supports dragging various types of data, including plain text, urls,
html code, files, etc.
...ill set the value of the text/uri-list type instead.
...lue of the text/uri-list type instead.
...And 7 more matches
Pointer events - Web APIs
c pointer event.
...ndler; el.onpointermove = move_handler; el.onpointerup = up_handler; el.onpointercancel = cancel_handler; el.onpointerout = out_handler; el.onpointerleave = leave_handler; el.gotpointercapture = gotcapture_handler; el.lostpointercapture = lostcapture_handler; } </script> <body onload="init();"> <div id="target"> touch me ...
...rcancel = cancel_handler; el.onpointerout = out_handler; el.onpointerleave = leave_handler; el.gotpointercapture = gotcapture_handler; el.lostpointercapture = lostcapture_handler; } </script> <body onload="init();"> <div id="target"> touch me ...
...And 7 more matches
WebGLRenderingContext.texImage2D() - Web APIs
the webglrenderingcontext.teximage2d() method of the webgl api specifies a two-dimensional texture image.
...-dimensional texture image.
...rmat, width, height, border, format, type, arraybufferview?
...And 7 more matches
ARIA: cell role - Accessibility
="cell">67 million</span> </div> a better, more semantic way of writing the cells above would be to use the semantic <td> element.
...ion, use the colheader or rowheader roles, respecitively.
...ithin a tabular structure.
...And 7 more matches
Specificity - CSS: Cascading Style Sheets
ptions the matches-any pseudo-class :is() and the negation pseudo-class :not() are not considered a pseudo-class in the specificity calculation.
...ke this: the :where() exception the specificity-adjustment pseudo-class :where() always has its specificity replaced with zero.
...en used with this markup ...
...And 7 more matches
pointer-events - CSS: Cascading Style Sheets
fect.
...ter events; however, pointer events may target its descendant elements if those descendants have pointer-events set to some other value.
...ll) of the element.
...And 7 more matches
Content Security Policy (CSP) - HTTP
csp makes it possible for server administrators to reduce or eliminate the vectors by which xss can occur by specifying the domains that the browser should consider to be valid sources of executable scripts.
...nts to ensure that all its content is loaded using tls, in order to prevent attackers from eavesdropping on requests.
... in which the violation occurred.
...And 7 more matches
Content-Disposition - HTTP
ta.
...e="filename.jpg" directives name is followed by a string containing the name of the
html field in the form that the content of this subpart refers to.
...r an eventual "save as" dialog presented to the user.
...And 7 more matches
Error.prototype.stack - JavaScript
ese for breaking the line into its component parts.
...refox 14 and later this is less of an issue.
...demonstrates the use of stack property.
...And 7 more matches
Linking - SVG: Scalable Vector Graphics
the target attribute on the svg <a> element doesn't work in mozilla firefox 1.5.
... the target attribute on the svg <a> element doesn't work in mozilla firefox 1.5.
... the target attribute on the svg <a> element doesn't work in mozilla firefox 1.5.
...And 7 more matches
Getting started - SVG: Scalable Vector Graphics
reen" /> <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">svg</text> </svg> copy the code and paste it in a file demo1.svg.
...n to ensure the final result is aesthetically pleasing.
... pleasing.
...And 7 more matches
Case Sensitivity in class and id Names - Archive of obsolete content
summary: although css is itself case-insensitive, class and id names are defined to be case-sensitive in
html 4.01.
... summary: although css is itself case-insensitive, class and id names are defined to be case-sensitive in
html 4.01.
...discovered, however, that many authors are running into trouble with class and id names because they're used to the bugs of browsers that don't fully support open standards.
...And 6 more matches
Introducing the Audio API extension - Archive of obsolete content
the audio data api extension extends the
html5 specification of the <audio> and <video> media elements by exposing audio metadata and raw audio data.
...data of the media element is available, it triggers a loadedmetadata event.
... the media element is available, it triggers a loadedmetadata event.
...And 6 more matches
A XUL Bestiary - Archive of obsolete content
d placed within a xul file as simple elements: <menu>, <toolbar>, and so on.
...the tree of nodes that is the dom sits the window object itself.
... nodes, and so on, all of which are accessible programmatically.
...And 6 more matches
Things I've tried to do with XUL - Archive of obsolete content
een, red, and blue inside boxes always maintaining a 30%-20%-50% ratio to the height of the parent vbox.
...="1" style="background: blue;"/> </vbox> workaround: no real good ones; the closest i've gotten is to use a div instead of a box container: <
html:div style="-moz-box-flex: 1; width: 100%; height: 100%;"> <box style="height: 30%" flex="1" style="background: green;"/> <box style="height: 20%" flex="1" style="background: green;"/> <box style="height: 50%" flex="1" style="background: green;"/> </
html:div> using flex="3" flex="2" flex="5" would give the right display visually for the empty boxes; however, flex only applies to how empty space is allocated.
...each box that is sharing the space, current gecko will quite happily split the space out according to flex, ignoring the contents of each box, as desired.
...And 6 more matches
window - Archive of obsolete content
y silently fail to load and the only error message will be an undefined entity error on the next xul element.
...related elements prefwindow, dialog, dialogheader related topics user notes to change the icon to a window's title bar check this page on window icons.
..., dialog, dialogheader related topics user notes to change the icon to a window's title bar check this page on window icons.
...And 6 more matches
Extentsions FAQ - Archive of obsolete content
toolbar button to coexist in a toolbar palette and status bar?
... "lets you put toolbar buttons at either end of the status-bar.
...tomisation window, like you would when adding buttons to the toolbars." option #4 install toolbar control <http://webdesigns.ms11.net/chromeditp.
html> asking for help with getting an extension to process windows messages.
...And 6 more matches
2006-09-29 - Archive of obsolete content
summary: mozilla.dev.tech.layout september 22-29, 2006 announcements no announcements for this week.
... summary: mozilla.dev.tech.layout september 22-29, 2006 announcements no announcements for this week.
... summary: mozilla.dev.tech.layout september 22-29, 2006 announcements no announcements for this week.
...And 6 more matches
Common Firefox theme issues and solutions - Archive of obsolete content
markup panel buttons on its toolbar.
...e design view responsive design view is missing background for unused area the responsive design view tool (tools > web developer > responsive design view) needs background styling for the unused area of the content window.
...ve design view is missing background for unused area the responsive design view tool (tools > web developer > responsive design view) needs background styling for the unused area of the content window.
...And 6 more matches
XForms Output Element - Archive of obsolete content
introduction serves to show the instance data that the element is bound to in a read-only manner (see the spec).
...then the value attribute is is ignored.
...tput element can be bound to a node containing simple content of any data type.
...And 6 more matches
GLSL Shaders - Game development
raw webgl, you'd have to write a lot of extra code to actually make it work.
...rite a lot of extra code to actually make it work.
...ke it work.
...And 6 more matches
Mobile accessibility - Learn web development
view: accessibility next with web access on mobile devices being so popular and renowned platforms such as ios and android having full-fledged accessibility tools, it is important to consider the accessibility of your web content on these platforms.
...events).
...ng the element the handler is set on, tabbing to it and pressing enter/return, or tapping it on a touchscreen device.
...And 6 more matches
Flexbox - Learn web development
previous overview: css layout next flexbox is a one-dimensional layout method for laying out items in rows or columns.
... previous overview: css layout next flexbox is a one-dimensional layout method for laying out items in rows or columns.
...me height even if they contain a different amount of content.
...And 6 more matches
Floats - Learn web development
previous overview: css layout next originally for floating images inside blocks of text, the float property became one of the most commonly used tools for creating multiple column layouts on webpages.
... previous overview: css layout next originally for floating images inside blocks of text, the float property became one of the most commonly used tools for creating multiple column layouts on webpages.
...ce).
...And 6 more matches
Advanced form styling - Learn web development
in this article, we will see what can be done with css to style the types of form control that are more difficult to style — the "bad" and "ugly" categories.
... firefox 57 (windows 10) chrome 77 (macos), safari 13, opera chrome 63 (windows 10) internet explorer 11 (windows 10) edge 16 (windows 10) using appearence: none on radios/checkboxes as we showed before, you can remove the default appearance of a checkbox or radio button altogether with appearance:none; let's take this example
html: <form> <fieldset> <legend>fruit preferences</legend> <p> <label> <input type="checkbox" name="fruit-1" value="cherry"> i like cherry </label> </p> <p> <label> <input type="checkbox" name="fruit-2" value="banana" disabled> i can't like banana </label> </p> <p> <label> <input type="checkbox" name="fru...
...inear-gradient(to bottom, #eee, #ccc); border: 1px solid rgb(169, 169, 169); border-radius: 5px; text-align: center; line-height: 1.5; } label[for="file"]:hover { background: linear-gradient(to bottom, #fff, #ddd); } label[for="file"]:active { box-shadow: inset 1px 1px 3px #ccc; } you can see the result of the above css styling in the below live example (see also styled-file-picker.
html live, and the source code).
...And 6 more matches
Mozilla splash page - Learn web development
ge of some of the techniques discussed in this module's articles, getting you to add some images and video to a funky splash page all about mozilla!
...o a funky splash page all about mozilla!
...ld have already worked through the rest of the multimedia and embedding module.
...And 6 more matches
Assessment: Structuring planet data - Learn web development
previous overview: tables in our table assessment, we provide you with some data on the planets in our solar system, and get you to structure it into an
html table.
... previous overview: tables in our table assessment, we provide you with some data on the planets in our solar system, and get you to structure it into an
html table.
...th some data on the planets in our solar system, and get you to structure it into an
html table.
...And 6 more matches
Componentizing our React app - Learn web development
t frameworks next at this point, our app is a monolith.
...k so far, but our component has to return something!
...: when you're in the middle of a jsx expression, you use curly braces to inject the value of a variable.
...And 6 more matches
Introducing a complete toolchain - Learn web development
ough the process of building up a sample case study toolchain.
...potentially brittle it is — for example it might be more complex to configure, and easier to break.
...sider if there's any upgrades or changes you should introduce, but this shouldn't be required too often.
...And 6 more matches
Embedding the editor
bes the current state of editor embeddability, problems with the existing implementation, some possible embedding scenarios that we need to deal with, and an embedding solution that will fulfill them.
... and an embedding solution that will fulfill them.
...ion are described.
...And 6 more matches
Localization formats
warning: this document pertains to the development of mozilla web sites and not to the development of gecko-based extensions or applications.
...r the launch?
...as every new web-dev project takes shape, a project manager should ask themselves these questions and have the answers ready before starting the web l10n process.
...And 6 more matches
nsIMsgWindow
firefox 8 / thunderbird 8 / seamonkey 2.5) implemented by: @mozilla.org/messenger/msgwindow;1.
...ed (e.g for quoting).
...opped boolean check if a running url been stopped.
...And 6 more matches
nsIParserUtils
parser/
html/nsiparserutils.idlscriptable provides non-web
html parsing functionality to firefox extensions and xulrunner applications.
...: urls for embedded content.
...4) flag for sanitizer: drops forms and form controls (excluding <fieldset> and <legend>.
...And 6 more matches
DataTransfer.clearData() - Web APIs
t's the only time the drag operation's data store is writeable.
...t">drop zone</span> <div>status: <span id="status">drag to start</span></div> <div>data is: <span id="data">uninitialized</span></div> css span.tweaked { display: inline-block; margin: 1em 0; padding: 1em 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } javascript window.addeventlistener('domcontentloaded', function () { // select
html elements var draggable = document.getelementbyid('source'); var dropable = document.getelementbyid('target'); var status = document.getelementbyid('status'); var data = document.getelementbyid('data'); var dropped = false; // register event handlers draggable.addeventlistener('dragstart', dragstarthandler); draggable.addeventlistener('dragend', dragendhandler); dropable.addeven...
...ta'); var dropped = false; // register event handlers draggable.addeventlistener('dragstart', dragstarthandler); draggable.addeventlistener('dragend', dragendhandler); dropable.addeventlistener('dragover', dragoverhandler); dropable.addeventlistener('dragleave', dragleavehandler); dropable.addeventlistener('drop', drophandler); function dragstarthandler (event) { status.inner
html = 'drag in process'; // change target element's border to signify drag has started event.currenttarget.style.border = '1px dashed blue'; // start by clearing existing clipboards; this will affect all types since we // don't give a specific type.
...And 6 more matches
Document.createElement() - Web APIs
in an
html document, the document.createelement() method creates the
html element specified by tagname, or an
htmlunknownelement if tagname isn't recognized.
... the document.createelement() method creates the
html element specified by tagname, or an
htmlunknownelement if tagname isn't recognized.
...the
html element specified by tagname, or an
htmlunknownelement if tagname isn't recognized.
...And 6 more matches
Document.createElementNS() - Web APIs
ationoptions object containing a single property named is, whose value is the tag name for a custom element previously defined using customelements.define().
... instead of an object, where the string's value is the custom element's tag name.
...he string's value is the custom element's tag name.
...And 6 more matches
Document.write() - Web APIs
ite() method writes a string of text to a document stream opened by document.open().
...meters markup a string containing the text to be written to the document.
... the text you write is parsed into the document's structure model.
...And 6 more matches
Using the W3C DOM Level 1 Core - Web APIs
the w3c's dom level 1 core is an api for manipulating the dom trees of
html and xml documents (among other tree-like types of documents).
... the w3c's dom level 1 core is an api for manipulating the dom trees of
html and xml documents (among other tree-like types of documents).
...i for manipulating the dom trees of
html and xml documents (among other tree-like types of documents).
...And 6 more matches
EventTarget.addEventListener() - Web APIs
nd we pass false as the value of the usecapture parameter.
...ntbyid("outside"); el.addeventlistener("click", modifytext, false); in this code, modifytext() is a listener for click events registered using addeventlistener().
...ck", function(){modifytext("four")}, false); notice that the listener is an anonymous function that encapsulates code that is then, in turn, able to send parameters to the modifytext() function, which is responsible for actually responding to the event.
...And 6 more matches
GlobalEventHandlers - Web APIs
the globaleventhandlers mixin describes the event handlers common to several interfaces like
htmlelement, document, or window.
...rse, add more event handlers in addition to the ones listed below.
... comment selection apithe definition of 'extension to globaleventhandlers' in that specification.
...And 6 more matches
accessKeyLabel - Web APIs
the
htmlelement.accesskeylabel read-only property returns a string that represents the element's assigned access key (if any); otherwise it returns an empty string.
...urns an empty string.
... node.title += ' [' + node.accesskeylabel + ']'; } else { node.title += ' [' + node.accesskey + ']'; } node.onclick = function () { var p = document.createelement('p'); p.textcontent = 'clicked!'; node.parentnode.appendchild(p); };
html <button accesskey="h" title="caption" id="btn1">hover me</button> result specifications specification status comment
html living standardthe definition of '
htmlelement.accesskeylabel' in that specification.
...And 6 more matches
Ajax navigation example - Web APIs
om/giabao/mdn-ajax-nav-example.git ): note: for fully integrating the <form> elements within this mechanism, please take a look at the paragraph submitting forms and uploading files.
...ao/mdn-ajax-nav-example.git ): note: for fully integrating the <form> elements within this mechanism, please take a look at the paragraph submitting forms and uploading files.
...tent"> <?php } ?> <p>this is the content of <strong>first_page.php</strong>.</p> <?php if ($as_json) { echo json_encode(array("page" => $page_title, "content" => ob_get_clean())); } else { ?> </div> <p>this paragraph is shown only when the navigation starts from <strong>first_page.php</strong>.</p> <?php include "include/after_content.php"; echo "</body>\n</
html>"; } ?> second_page.php: <?php $page_title = "second page"; $as_json = false; if (isset($_get["view_as"]) && $_get["view_as"] == "json") { $as_json = true; ob_start(); } else { ?> <!doctype
html> <
html> <head> <?php include "include/header.php"; echo "<title>" .
...And 6 more matches
MediaElementAudioSourceNode - Web APIs
the mediaelementaudiosourcenode interface represents an audio source consisting of an
html5 <audio> or <video> element.
...ediaelementaudiosourcenode interface represents an audio source consisting of an
html5 <audio> or <video> element.
...nsisting of an
html5 <audio> or <video> element.
...And 6 more matches
Microsoft API extensions - Web APIs
soft edge) support a number of special microsoft extensions to the otherwise standard dom apis.
...pecial microsoft extensions to the otherwise standard dom apis.
...herwise standard dom apis.
...And 6 more matches
Node.textContent - Web APIs
the textcontent property of the node interface represents the text content of the node and its descendants.
...urns the concatenation of the textcontent of every child node, excluding comments and processing instructions.
...les.
...And 6 more matches
ValidityState - Web APIs
eudo-classes.
...ismatch read only a boolean that is true if the value does not fit the rules determined by the step attribute (that is, it's not evenly divisible by the step value), or false if it does fit the step rule.
...r
htmltextareaelement objects, or false if its length is less than or equal to the maximum length.
...And 6 more matches
WebGLRenderingContext.texSubImage2D() - Web APIs
ebglrenderingcontext.texsubimage2d() method of the webgl api specifies a sub-rectangle of the current texture.
...rrent texture.
... height, format, type, arraybufferview?
...And 6 more matches
WebGL best practices - Web APIs
per shader just because it works on your machine!
..., causing a pipeline flush.
...ple/blend/rasterization state) in webgl: ...
...And 6 more matches
Taking still photos with WebRTC - Web APIs
this article shows how to use webrtc to access the camera on a computer or mobile phone with webrtc support and take a photo with it.
... this article shows how to use webrtc to access the camera on a computer or mobile phone with webrtc support and take a photo with it.
...canvas with display:none, to avoid cluttering up the screen — the user does not need to see this intermediate stage.
...And 6 more matches
ARIA: textbox role - Accessibility
e, use an <input> element with type="text", for single-line input, or a <textarea> element for multi-line input.
...-line input.
... role, the browser sends an accessible textbox event to assistive technologies, which can then notify the user about it.
...And 6 more matches
WAI-ARIA Roles - Accessibility
een dynamically updated.
...y.aria: comment rolethe comment landmark role semantically denotes a comment/reaction to some content on the page, or to a previous comment.aria: complementary rolethe complementary landmark role is used to designate a supporting section that relates to the main content, yet can stand alone when separated.
...ently presented as sidebars or call-out boxes.
...And 6 more matches
@namespace - CSS: Cascading Style Sheets
pace "xml-namespace-url"; /* prefixed namespace */ @namespace prefix url(xml-namespace-url); @namespace prefix "xml-namespace-url"; description the defined namespaces can be used to restrict the universal, type, and attribute selectors to only select elements within that namespace.
...efault namespace is defined, all universal and type selectors (but not attribute selectors, see note below) apply only to elements in that namespace.
...s, see note below) apply only to elements in that namespace.
...And 6 more matches
Cross-browser audio basics - Developer guides
this article provides: a basic guide to creating 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 basic audio example the code below is an example of a basic audio implementation using
html5: <audio controls> <source src="audiofile.mp3" type="audio/mpeg"> <source src="audiofile.ogg" type="audio/ogg"> <!-- fallback for non supporting browsers goes here --> <p>your browser does not support
html5 audio, but you can still <a href="audiofile.mp3">download the music</a>.</p> </audio> note: you can also use an mp4 file instead of mp3.
...ack controls.
...e to create your own controls and program their functionality using the media api (see below).
...And 6 more matches
Firefox user agent string reference - HTTP
agent string phone mozilla/5.0 (android 4.4; mobile; rv:41.0) gecko/41.0 firefox/41.0 tablet mozilla/5.0 (android 4.4; tablet; rv:41.0) gecko/41.0 firefox/41.0 focus for android from version 1, focus is powered by android webview and uses the following user agent string format: mozilla/5.0 (linux; <android version> <build tag etc.>) applewebkit/<webkit rev> (k
html, like gecko) version/4.0 focus/<focusversion> chrome/<chrome rev> mobile safari/<webkit rev> tablet versions on webview mirror mobile, but do not contain a mobile token.
...let versions on webview mirror mobile, but do not contain a mobile token.
...dden preference: it uses a geckoview ua string to advertise gecko compatibility.
...And 6 more matches
<math> - MathML
s in addition to the following attributes, the <math> element accepts any attributes of the <mstyle> element.
...ttributes of the <mstyle> element.
...meaning of that text.
...And 6 more matches
Mobile first - Progressive web apps (PWAs)
an install button that works for firefox os, firefox aurora, chrome and ios app installs (as explained on the install github page).
...s, firefox aurora, chrome and ios app installs (as explained on the install github page).
...all-btn.
...And 6 more matches
selection - Archive of obsolete content
get and set text and
html selections in the current web page.
...() { console.log("a selection has been made."); } var selection = require("sdk/selection"); selection.on('select', mylistener); // you can remove listeners too.
...hosted by private browser windows.
...And 5 more matches
Display a Popup - Archive of obsolete content
to follow this tutorial you'll need to have learned the basics of jpm.
... element: when the user presses the return key, the contents of the <textarea> is sent to the main add-on code.
...y, the contents of the <textarea> is sent to the main add-on code.
...And 5 more matches
Index of archived content - Archive of obsolete content
s canvas code snippets cookies customizing the download progress bar delayed execution dialogs and prompts downloading files drag & drop embedding svg examples and demos from articles file i/o finding window handles forms related code snippets
html in xul for rich tooltips
html to dom isdefaultnamespace js xpcom javascript debugger service javascript timers javascript daemons management label and description lookupnamespaceuri lookupprefix miscellaneous m...
... tabbox toolbar tree uri parsing view source for xul applications windows xml-related code snippets xml:base support in old browsers xpath getattributens common pitfalls communication between
html and your extension creating custom firefox extensions with the mozilla build system custom about: urls default preferences deploying a plugin as an extension developing add-ons displaying web content in an extension without security issues downloading json and javascript in extensions enhanced extension installation ...
...dding toolbars and toolbar buttons adding menus and submenus adding sidebars adding windows and dialogs appendix a: add-on performance appendix b: install and uninstall scripts appendix c: avoiding using eval in add-ons appendix d: loading scripts appendix e: dom building and insertion (
html & xul) appendix f: monitoring dom changes connecting to remote content custom xul elements with xbl getting started with firefox extensions handling preferences intercepting page loads introduction javascript object management local storage mozilla documentat...
...And 5 more matches
MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
abstract this document is a concrete example of a centralized auto-configuration of mozilla apps, that are; firefox, thunderbird, mozilla suite 1.x.x, seamonkey and for the record, old netscape 4.x.
...er/omni.ja | grep defaults/pr warning [/usr/lib/firefox/browser/omni.ja]: 3598815 extra bytes at beginning or within zipfile (attempting to process anyway) error [/usr/lib/firefox/browser/omni.ja]: reported length of central directory is -3598815 bytes too long (atari stzip zipfile?
... (not relocatable) version : 2.0.0.2 vendor: remi collet release : 1.fc6.remi build date: sat 24 feb 2007 01:45:37 pm cet install date: tue 20 mar 2007 02:47:27 pm cet build host: remi.famillecollet.com packager : http://remi.collet.free.fr/ references other documents about autoconfig http://mit.edu/~firefox/www/maintain...utoconfig.
html http://www.alain.knaff.lu/howto/mozi...ion/index.
html http://thegoldenear.org/toolbox/wind...re-config.
html http://ilias.ca/blog/2005/03/locking...efox-settings/ compile on windows: http://forums.mozillazine.org/viewtopic.php?t=276014 http://www.mozilla.org/community/dev...er-forums.
html http://forums.mozillazine.org/viewto...config#2090731 http://forums.mozillazine.org/viewto...config#13...
...And 5 more matches
Style System Overview - Archive of obsolete content
n: right text-indent: 0 css style rule representation problem: the rule structures use too much memory (a few hundred kilobytes for all our chrome), and require large numbers of allocations to construct.
...le rule representation problem: the rule structures use too much memory (a few hundred kilobytes for all our chrome), and require large numbers of allocations to construct.
... detail: !important declarations cause an extra rule object cssimportantrule to be created since they are in a separate part of the cascade other nsistylerule implementations ns
htmlmappedattributes represents stylistic
html attributes turned into a style rule (one instance per unique set of attributes) bodyrule handles marginwidth/marginheight mixes on body and on frame.
...And 5 more matches
Example Sticky Notes - Archive of obsolete content
notes.
html all parts are made and commented by vk [schools_ring@yahoo.com].
... notes.
html all parts are made and commented by vk [schools_ring@yahoo.com].
... notes.
html all parts are made and commented by vk [schools_ring@yahoo.com].
...And 5 more matches
Input Controls - Archive of obsolete content
« previousnext » xul has elements that are similar to the
html form controls.
... « previousnext » xul has elements that are similar to the
html form controls.
... « previousnext » xul has elements that are similar to the
html form controls.
...And 5 more matches
background-size - Archive of obsolete content
ons of this browser) installed.
...page with both rules - the css is derived from the code on the page here, this is what it looks like in 3.6a2pre on linux, the background image appears on the whole page, and then again behind the main content.
...ode on the page here, this is what it looks like in 3.6a2pre on linux, the background image appears on the whole page, and then again behind the main content.
...And 5 more matches
Audio for Web games - Game development
he user should be in control of the volume at the os level and this shouldn't be overridden.
...lume adjusting preload chrome (android) 69+ y y y y firefox (android) 62+ y y y y edge mobile y y y y opera mobile 46+ y y y y safari (ios) 7+ y/n* n n y android browser 67+ y y y y there's a full compatibility chart for mobile and desktop
htmlmediaelement support here.
...); myaudio.pause(); you'll need to sample the current time to know when to stop.
...And 5 more matches
2D maze game with device orientation - Game development
in this tutorial we’ll go through the process of building an
html5 mobile game that uses the device orientation and vibration apis to enhance the gameplay and is built using the phaser framework.
...at uses the device orientation and vibration apis to enhance the gameplay and is built using the phaser framework.
... documentation and go through the big collection of examples.
...And 5 more matches
Accessibility - Learn web development
learning some
html, css, and javascript is useful if you want to become a web developer.
... learning some
html, css, and javascript is useful if you want to become a web developer.
...o keyboard, mouse, and touch screen users, and any other way users access the web, including screen readers and voice assistants like alexa and google home.
...And 5 more matches
Pseudo-classes and pseudo-elements - Learn web development
hese, and they often serve quite specific purposes.
...ecific purposes.
...class, as shown in the first example below: however, this could be annoying to maintain — what if a new paragraph got added to the top of the document?
...And 5 more matches
CSS values and units - Learn web development
css has a value or set of values that are allowed for that property, and taking a look at any property page on mdn will help you understand the values that are valid for any particular property.
...at are allowed for that property, and taking a look at any property page on mdn will help you understand the values that are valid for any particular property.
...s values referred to as data types.
...And 5 more matches
Responsive design - Learn web development
izes became available, the concept of responsive web design (rwd) appeared, a set of practices that allows web pages to alter their layout and appearance to suit different screen widths, resolutions, etc.
...of responsive web design (rwd) appeared, a set of practices that allows web pages to alter their layout and appearance to suit different screen widths, resolutions, etc.
...age is best suited for), and the browser will choose the most appropriate image for each device, ensuring that a user will download an image size appropriate for the device they are using.
...And 5 more matches
What is a URL? - Learn web development
is and how it works on the web.
.../developer.mozilla.org https://developer.mozilla.org/docs/learn/ https://developer.mozilla.org/search?q=url any of those urls can be typed into your browser's address bar to tell it to load the associated page (resource).
...e to directly use an ip address, but because it is less convenient, it is not often used on the web.
...And 5 more matches
Arrays - Learn web development
previous overview: first steps next in the final article of this module, we'll look at arrays — a neat way of storing a list of data items under a single variable name.
...put" style="min-height: 150px;"> <ul> </ul> <p></p> </div> <h2>editable code</h2> <p class="a11y-label">press esc to move focus away from the code area (tab inserts a tab character).</p> <textarea id="code" class="playable-code" style="height: 410px;width: 95%"> const list = document.queryselector('.output ul'); const totalbox = document.queryselector('.output p'); let total = 0; list.inner
html = ''; totalbox.textcontent = ''; // number 1 'underpants:6.99' 'socks:5.99' 't-shirt:14.99' 'trousers:31.99' 'shoes:23.99'; for (let i = 0; i <= 0; i++) { // number 2 // number 3 // number 4 // number 5 let itemtext = 0; const listitem = document.createelement('li'); listitem.textcontent = itemtext; ...
...lick', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); const jssolution = 'const list = document.queryselector(\'.output ul\');\nconst totalbox = document.queryselector(\'.output p\');\nlet total = 0;\nlist.inner
html = \'\';\ntotalbox.textcontent = \'\';\n\nlet products = [\'underpants:6.99\',\n \'socks:5.99\',\n \'t-shirt:14.99\',\n \'trousers:31.99\',\n \'shoes:23.99\'];\n\nfor(let i = 0; i < products.length; i++) {\n let subarray = products[i].split(\':\');\n let name = subarray[0];\n let price = number(subarray[1]);\n total += price;\n let itemtext = name + \' — $\' + price;\n\n let listitem =...
...And 5 more matches
Working with JSON - Learn web development
in web applications (e.g., sending some data from the server to the client, so it can be displayed on a web page, or vice versa).
...rs contains an array populated by objects.
...mple, a single string or number would be a valid json object.
...And 5 more matches
Introduction to the server side - Learn web development
erstanding of what a web server is.
...p post method), or in associated cookies.
... document from its file system and returns an http response containing the document and a success status (usually 200 ok).
...And 5 more matches
Learn web development
he essential information you need to work towards your goal.
...goal.
..., we'd recommend that you start by working through our getting started with the web module, which provides a practical introduction to web development.
...And 5 more matches
Security best practices for Firefox front-end engineers
this article will help firefox developers understand the security controls in place and avoid common pitfalls when developing front-end code for firefox.
... this article will help firefox developers understand the security controls in place and avoid common pitfalls when developing front-end code for firefox.
...ion, optgroup, select, button, datalist).
...And 5 more matches
nsIWebBrowserPersist
be.
... persister is ready to save data.
...rsist_state_saving 2 persister is saving data.
...And 5 more matches
View Source - Firefox Developer Tools
view source lets you look at the
html or xml source for the page you're viewing.
... the lines in a file, you receive an error message.
... see the source for the selection.
...And 5 more matches
Attr.localName - Web APIs
the attr.localname read-only property returns the local part of the qualified name of an attribute.
... const attribute = element.attributes[0]; alert(attribute.localname); }); notes the local name of an attribute is the part of the attribute's qualified name that comes after the colon.
...= element.attributes[0]; alert(attribute.localname); }); notes the local name of an attribute is the part of the attribute's qualified name that comes after the colon.
...And 5 more matches
Using dynamic styling information - Web APIs
insertrule, selectortext, and parentstylesheet for accessing and manipulating the individual style rules that make up a css stylesheet.
...rule with cssom <
html> <head> <title>modifying a stylesheet rule with cssom</title> <style type="text/css"> body { background-color: red; } </style> <script type="text/javascript"> var stylesheet = document.stylesheets[0]; stylesheet.cssrules[0].style.backgroundcolor="blue"; </script> </head> <body> the stylesheet declaration for the body's background color is modified via javascript.
...lesheet.cssrules[0].style.backgroundcolor="blue"; </script> </head> <body> the stylesheet declaration for the body's background color is modified via javascript.
...And 5 more matches
Canvas API - Web APIs
the canvas api provides a means for drawing graphics via javascript and the
html <canvas> element.
...ascript and the
html <canvas> element.
...sualization, photo manipulation, and real-time video processing.
...And 5 more matches
DataTransferItemList.add() - Web APIs
em may be a file or a string of a given type.
...ed data.
... { border: 1px solid black; } javascript function dragstart_handler(ev) { console.log("dragstart"); // add this element's id to the drag payload so the drop handler will // know which element to add to its tree var datalist = ev.datatransfer.items; datalist.add(ev.target.id, "text/plain"); // add some other items to the drag payload datalist.add("<p>...
...And 5 more matches
Document.getElementsByTagName() - Web APIs
the getelementsbytagname method of document interface returns an
htmlcollection of elements with the given tag name.
... the getelementsbytagname method of document interface returns an
htmlcollection of elements with the given tag name.
...ument interface returns an
htmlcollection of elements with the given tag name.
...And 5 more matches
Document.getElementsByTagNameNS() - Web APIs
a live nodelist (but see the note below) of found elements in the order they appear in the tree.
...ok for (see element.namespaceuri).
...m a particular parent element, and searches topdown recursively through the dom from that parent element, looking for child elements matching the tag name parameter.
...And 5 more matches
Element.getElementsByTagName() - Web APIs
the element.getelementsbytagname() method returns a live
htmlcollection of elements with the given tag name.
...live
htmlcollection of elements with the given tag name.
... of elements with the given tag name.
...And 5 more matches
Element.getElementsByTagNameNS() - Web APIs
the element.getelementsbytagnamens() method returns a live
htmlcollection of elements with the given tag name belonging to the given namespace.
... the element.getelementsbytagnamens() method returns a live
htmlcollection of elements with the given tag name belonging to the given namespace.
...me) elements is a live
htmlcollection of found elements in the order they appear in the tree.
...And 5 more matches
GlobalEventHandlers.onanimationcancel - Web APIs
at the animation is removed, or when the animating node is hidden—either directly or because any of its containing nodes are hidden—using css.
...on is removed, or when the animating node is hidden—either directly or because any of its containing nodes are hidden—using css.
...mationcancel; target.onanimationcancel = function value a function to be called when an animationcancel event occurs indicating that a css animation has begun on the target, where the target object is an
html element (
htmlelement), document (document), or window (window).
...And 5 more matches
Image() - Web APIs
the image() constructor creates a new
htmlimageelement instance.
... the image() constructor creates a new
htmlimageelement instance.
...tion.
...And 5 more matches
Using the Screen Capture API - Web APIs
r the start and stop buttons startelem.addeventlistener("click", function(evt) { startcapture(); }, false); stopelem.addeventlistener("click", function(evt) { stopcapture(); }, false); logging content to make logging of errors and other issues easy, this example overrides certain console methods to output their messages to the <pre> block whose id is log.
...lick", function(evt) { startcapture(); }, false); stopelem.addeventlistener("click", function(evt) { stopcapture(); }, false); logging content to make logging of errors and other issues easy, this example overrides certain console methods to output their messages to the <pre> block whose id is log.
...k", function(evt) { stopcapture(); }, false); logging content to make logging of errors and other issues easy, this example overrides certain console methods to output their messages to the <pre> block whose id is log.
...And 5 more matches
TextRange - Web APIs
t binds the textrange object and the left edge that completely contains the textrange object.
...t and the left edge that completely contains the textrange object.
...ment.
...And 5 more matches
WindowEventHandlers - Web APIs
the windoweventhandlers mixin describes the event handlers common to several interfaces like window, or
htmlbodyelement and
htmlframesetelement.
...thandler representing the code to be called when the unhandledrejection event is raised, indicating that a promise was rejected but the rejection was not handled.
...ion was not handled.
...And 5 more matches
WindowOrWorkerGlobalScope.setTimeout() - Web APIs
different objects use separate pools of ids.
...!'); } function clearalert() { window.cleartimeout(timeoutid); } result see also cleartimeout() example.
...wsers which don't support sending additional arguments using either settimeout() or setinterval() (e.g., internet explorer 9 and below), you can include this polyfill to enable the
html5 standard arguments-passing functionality.
...And 5 more matches
ARIA: form role - Accessibility
the form landmark role can be used to identify a group of elements on a page that provide equivalent functionality to an
html form.
... the form landmark role can be used to identify a group of elements on a page that provide equivalent functionality to an
html form.
...a group of elements on a page that provide equivalent functionality to an
html form.
...And 5 more matches
ARIA: row role - Accessibility
span> </div> <div role="row"> <span role="cell">france</span> <span role="cell">67 million</span> </div> </div> </div> description the element role="row" is a row within a grid, table or treegrid, and optionally within a rowgroup, that is a container for one or more cells, gridcells, columnheaders, or rowheaders within a static tabular structure.
...eractive widget that has a tabular structure, use the grid pattern instead.
...d instead.
...And 5 more matches
An overview of accessible web applications and widgets - Accessibility
most javascript libraries offer a library of client-side widgets that mimic the behavior of familiar desktop interfaces.
... most javascript libraries offer a library of client-side widgets that mimic the behavior of familiar desktop interfaces.
...goes here</div> <div id="quizpanel">quiz content goes here</div> </div> example 2: how the tabs widget might be styled visually.
...And 5 more matches
Stacking context example 3 - CSS: Cascading Style Sheets
« css « understanding css z-index stacking context example 3 this last example shows problems that arise when mixing several positioned elements in a multi-level
html hierarchy and when z-indexes are assigned using class selectors.
...ndex: 1) level #3 ...
...enus, or by using individual (and different) z-index values assigned through the id selector instead of class selector, or by flattening the
html hierarchy.
...And 5 more matches
Block formatting context - Developer guides
a block formatting context is a part of a visual css rendering of a web page.
...interact with other elements.
...ng: the root element of the document (<
html>).
...And 5 more matches
Browser detection using the user agent - HTTP
atures but that you know will work.
...l depending on which browser is being used?
...bkit applewebkit/xyz pay attention, webkit browsers add a 'like gecko' string that may trigger false positive for gecko if the detection is not careful.
...And 5 more matches
The arguments object - JavaScript
is function.
...turns "red, orange, blue" myconcat(', ', 'red', 'orange', 'blue'); // returns "elephant; giraffe; lion; cheetah" myconcat('; ', 'elephant', 'giraffe', 'lion', 'cheetah'); // returns "sage.
...'sage', 'basil', 'oregano', 'pepper', 'parsley'); defining a function that creates
html lists this example defines a function that creates a string containing
html for a list.
...And 5 more matches
MathML documentation index - MathML
# page tags and summary 1 mathml landing, mathml, reference, web, xml mathematical markup language (mathml) is a dialect of xml for describing mathematical notation and capturing both its structure and content.
...athml landing, mathml, reference, web, xml mathematical markup language (mathml) is a dialect of xml for describing mathematical notation and capturing both its structure and content.
...ther content management systems to help writing web pages.
...And 5 more matches
Progressive loading - Progressive web apps (PWAs)
page to load, the bigger the chance they will leave before waiting for everything to finish.
...ossible styles of every version of the site: mobile, tablet, desktop, print only, etc.
... paint their rendered results onto the screen.
...And 5 more matches
Using templates and slots - Web Components
mplate> and <slot> elements to create a flexible template that can then be used to populate the shadow dom of a web component.
...body.appendchild(templatecontent); although trivial, you can already start to see how this could be useful.
...nformation inside the template in a <style> element, which is then encapsulated inside the custom element.
...And 5 more matches
page-mod - Archive of obsolete content
dd-on displays an alert whenever the user visits any page hosted at "mozilla.org": var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*.mozilla.org", contentscript: 'window.alert("page matches ruleset");' }); you can modify the document in your script: var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "*.mozilla.org", contentscript: 'document.body.inner
html = ' + ' "<h1>page matches ruleset</h1>";' }); you can supply the content script(s) in one of two ways: as a string literal, or an array of string literals, assigned to the contentscript option, as above as separate files supplied in your add-on's "data" directory.
...load, but you can communicate between your add-on and its content scripts by exchanging messages.
...iggered every time the page-mod's content script is attached to a document.
...And 4 more matches
passwords - Archive of obsolete content
ain both the properties you should define on credential objects and the properties you can expect on credential objects returned by the api.
... you can use this as a name for the credential, to distinguish it from any other credentials you've stored.
...redential, to distinguish it from any other credentials you've stored.
...And 4 more matches
Interaction between privileged and non-privileged pages - Archive of obsolete content
.queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsidomwindow); mainwindow.document.addeventlistener("myextensionevent", function(e) { myextension.mylistener(e); }, false, true); if you need to to pass lots of data, consider using cdata sections instead of the simple attributes on a custom element.
...e1") + "/" + evt.target.getattribute("attribute2")); /* the extension answers the page*/ evt.target.setattribute("attribute3", "the extension"); var doc = evt.target.ownerdocument; var answerevt = doc.createelement("myextensionanswer"); answerevt.setattribute("part1", "answers this."); doc.documentelement.appendchild(answerevt); var event = doc.createevent("
htmlevents"); event.initevent("myanswerevent", true, false); answerevt.dispatchevent(event); } } document.addeventlistener("myextensionevent", function(e) { myextension.mylistener(e); }, false, true); // the last value is a mozilla-specific value to indicate untrusted content is allowed to trigger the event.
...tevent("myextensionevent", true, false); element.dispatchevent(evt); } function extensionanswer(evtanswer) { alert(element.getattribute("attribute3") + " " + evtanswer.target.getattribute("part1")); } basic example of similar idea, extension passes information via attributes and fires event on div in page, here.
...And 4 more matches
Venkman Introduction - Archive of obsolete content
are not running javascript and click the stop button, it will display "...", as in the figure 4, to indicate that the debugger will stop at the next instruction, but doesn't have anywhere to stop yet.
...s view, and when unloaded it will be removed.
...new scripts in—say from a web page you are trying to troubleshoot—you can do so by simply opening that web page in the regular browser window, at which point the compiler gets the javascript source and populates the loaded scripts window with the new entry.
...And 4 more matches
textbox - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] an input field where the user can enter text.
...ed with spaces strip pastes the text with the newlines removed stripsurroundingwhitespace pastes the text with newlines and adjacent whitespace removed onblur type: script code this event is sent when a textbox loses keyboard focus.
...when a textbox loses keyboard focus.
...And 4 more matches
Theme changes in Firefox 2 - Archive of obsolete content
le lists both the changed xul file and the theme's corresponding css file that you might need to update.
...s for plugins, the fifth is for updates, and the sixth is for installs.
...dates, and the sixth is for installs.
...And 4 more matches
Using the W3C DOM - Archive of obsolete content
dom standard forms collection) scripts that use these properties will throw errors in most standards-compliant browsers.
...ements with the w3c dom the basic method for referencing elements in an
html page is document.getelementbyid().
...g new elements and inserting them in a document, for creating attributes, new content, for traversing the content tree and for handling events dispatched as the user interacts with the document itself.
...And 4 more matches
Popup Window Controls - Archive of obsolete content
ction, such as clicking on a hyperlink, should succeed in opening popup windows even if the user has popup controls enabled on your site.
...ull rather than a reference to the opened window.
...d your site to the list of sites which are allowed to use unsolicited popup windows.
...And 4 more matches
Introduction to game development for the Web - Game development
ible to make stunning, top-notch games for the web.
...we're not talking about simple card games or multi-player social games that have in the olden days been done using flash®.
... function technology audio web audio api graphics webgl (opengl es 2.0) input 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 large game studio, you want to know why it makes sense to target the web with your next game project.
...And 4 more matches
Building up a basic demo with Three.js - Game development
tem, a camera to actually see them, lights and materials to make it look better, animations to make it look alive, etc.
...ronment setup to start developing with three.js, you don't need much.
...eloping with three.js, you don't need much.
...And 4 more matches
Semantics - MDN Web Docs Glossary: Definitions of Web-related terms
in programming, semantics refers to the meaning of a piece of code — for example "what effect does running that line of javascript have?", or "what purpose or role does that
html element have" (rather than "what does it look like?".) semantics in javascript in javascript, consider a function that takes a string parameter, and returns an <li> element with that string as its textcontent.
...li> element with that string as its textcontent.
...nt with that string as its textcontent.
...And 4 more matches
Assessment: Accessibility troubleshooting - Learn web development
previous overview: accessibility in the assessment for this module, we present to you a simple site with a number of accessibility issues that you need to diagnose and fix.
...course.
...it has a number of accessibility issues — your task is to explore the existing site and fix them to the best of your abilities, answering the questions given below.
...And 4 more matches
Advanced styling effects - Learn web development
this article acts as a box of tricks, providing an introduction to some interesting advanced styling features such as box shadows, blend modes, and filters.
... this article acts as a box of tricks, providing an introduction to some interesting advanced styling features such as box shadows, blend modes, and filters.
....
...And 4 more matches
Images, media, and form elements - Learn web development
images, other media, and form elements behave a little differently in terms of your ability to style them with css than regular boxes.
...ents behave a little differently in terms of your ability to style them with css than regular boxes.
...ng with css, and the web forms module contains detailed guides to the trickier aspects of styling form elements, which i will not fully reproduce here.
...And 4 more matches
Beginner's guide to media queries - Learn web development
e size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse.
...n also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse.
... lot of layout for small devices — order your source well and you will have a readable layout by default.
...And 4 more matches
Common questions - Learn web development
this section of the learning area is designed to provide answers to common questions that may come up, which are not necessarily part of the structured core learning pathways (e.g.
...ing or your costs may go through the roof.
...layouts.
...And 4 more matches
Multimedia and Embedding - Learn web development
we've looked at a lot of text so far in this course, but the web would be really boring only using text.
... pages, including the different ways that images can be included, and how to embed video, audio, and even entire webpages.
...s can be included, and how to embed video, audio, and even entire webpages.
...And 4 more matches
Function return values - Learn web development
there's one last essential concept about functions for us to discuss — return values.
...values that need to be calculated by a function.
...tes the value, it can return the result so it can be stored in a variable; and you can use this variable in the next stage of the calculation.
...And 4 more matches
Deploying our app - Learn web development
previous overview: understanding client-side tools in the final article in our series, we take the example toolchain we built up in the previous article and add to it so that we can deploy our sample app.
...y trigger the entire build routine.
...we get a live change deployed automatically.
...And 4 more matches
Midas
introduction midas is the code name for gecko's built-in rich text editor.
... introduction midas is the code name for gecko's built-in rich text editor.
...indow that refers to the window object inside the inline frame.
...And 4 more matches
Feed content access API
receive messages during the parsing process.
...ng process.
...cribes the result of parsing a feed.
...And 4 more matches
Plug-in Development Overview - Plugins
e chapters for all of the major functional areas of the plug-in api.
...i.
...ptable for more information about making plug-ins accessible from the browser.
...And 4 more matches
DOMTokenList - Web APIs
the domtokenlist interface represents a set of space-separated tokens.
... the domtokenlist interface represents a set of space-separated tokens.
... the domtokenlist interface represents a set of space-separated tokens.
...And 4 more matches
DataTransferItemList.clear() - Web APIs
st, leaving the list empty.
... border: 1px solid black; } javascript function dragstart_handler(ev) { console.log("dragstart"); // add this element's id to the drag payload so the drop handler will // know which element to add to its tree var datalist = ev.datatransfer.items; datalist.add(ev.target.id, "text/plain"); // add some other items to the drag payload datalist.add("<p>...
...items; // loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/
html'))) { // drag data item is
html data[i].getasstring(function (s){ console.log("...
...And 4 more matches
DataTransferItemList.length - Web APIs
the use of the length property.
...items; // loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/
html'))) { // drag data item is
html data[i].getasstring(function (s){ console.log("...
...ata[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/
html'))) { // drag data item is
html data[i].getasstring(function (s){ console.log("...
...And 4 more matches
DataTransferItemList.remove() - Web APIs
the use of the remove() method.
...items; // loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/
html'))) { // drag data item is
html data[i].getasstring(function (s){ console.log("...
...ata[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/
html'))) { // drag data item is
html data[i].getasstring(function (s){ console.log("...
...And 4 more matches
Document.anchors - Web APIs
the anchors read-only property of the document interface returns a list of all of the anchors in the document.
... the anchors read-only property of the document interface returns a list of all of the anchors in the document.
... the anchors read-only property of the document interface returns a list of all of the anchors in the document.
...And 4 more matches
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 inputs or contenteditable elements.
...on or at the insertion point.
...lection spans multiple lines at different levels of indentation, only the least indented lines in the selection will be indented.
...And 4 more matches
Document.getElementsByName() - Web APIs
) method of the document object returns a nodelist collection of elements with a given name in the document.
...d of the document object returns a nodelist collection of elements with a given name in the document.
...me are added to/removed from the document.
...And 4 more matches
Document.title - Web APIs
ns that value.
...s the title specified in the markup (see the notes below).
...itle specified in the markup (see the notes below).
...And 4 more matches
Document Object Model (DOM) - Web APIs
the document object model (dom) connects web pages to scripts or programming languages by representing the structure of a document—such as the
html representing a web page—in memory.
... the document object model (dom) connects web pages to scripts or programming languages by representing the structure of a document—such as the
html representing a web page—in memory.
...ent handlers get executed.
...And 4 more matches
FileList - Web APIs
an object of this type is returned by the files property of the
html <input> element; this lets you access the list of files selected with the <input type="file"> element.
...lement only supported a single file being selected at a time, meaning that the filelist would contain only one file.
...e list.
...And 4 more matches
Using the Gamepad API - Web APIs
html5 introduced many of the necessary components for rich, interactive game development.
...d event to check for a gamepad being connected.
...id + ".
...And 4 more matches
Media Source API - Web APIs
o dash is not suitable for real time communication like webrtc is.
... significantly more client connections than webrtc.
... to be played via an
htmlmediaelement object.
...And 4 more matches
SVGAElement - Web APIs
the svgaelement interface provides access to the properties of <a> element, as well as methods to manipulate them.
... the svgaelement interface provides access to the properties of <a> element, as well as methods to manipulate them.
... the svgaelement interface provides access to the properties of <a> element, as well as methods to manipulate them.
...And 4 more matches
Movement, orientation, and motion: A WebXR example - Web APIs
amerequestid = xrsession.requestanimationframe(drawframe); }); return xrsession; } after storing the newly-created xrsession object into xrsession, the label of the button is set to "exit webxr" to indicate its new function after starting the scene, and a handler is installed for the end event, so we get notified when the xrsession ends.
...code is derived.
...nt matrices used while rendering the scene.
...And 4 more matches
window.location - Web APIs
initialpage); } example #4: display the properties of the current url in an alert dialog: function showloc() { var olocation = location, alog = ["property (typeof): value", "location (" + (typeof olocation) + "): " + olocation ]; for (var sprop in olocation){ alog.push(sprop + " (" + (typeof olocation[sprop]) + "): " + (olocation[sprop] || "n/a")); } alert(alog.join("\n")); } // in
html: <button onclick="showloc();">show location properties</button> example #5: send a string of data to the server by modifying the search property: function senddata (sdata) { location.search = sdata; } // in
html: <button onclick="senddata('some data');">send data</button> the current url with "?some%20data" appended is sent to the server (if no action is taken by the server, the current d...
...e search property: function senddata (sdata) { location.search = sdata; } // in
html: <button onclick="senddata('some data');">send data</button> the current url with "?some%20data" appended is sent to the server (if no action is taken by the server, the current document is reloaded with the modified search string).
...h property: function senddata (sdata) { location.search = sdata; } // in
html: <button onclick="senddata('some data');">send data</button> the current url with "?some%20data" appended is sent to the server (if no action is taken by the server, the current document is reloaded with the modified search string).
...And 4 more matches
ARIA: figure role - Accessibility
="image.png" alt="full alternative image description"> <p id="caption">figure 1: the caption</p> </div> in the above example, we have a figure that consists of two separate content items — an image and a caption.
...en reference that id inside an appropriate attribute on the figure to associate the figure with the label: <div role="figure" aria-labelledby="figure-1"> ...
...text that describes the figure."> ...
...And 4 more matches
ARIA: gridcell role - Accessibility
the gridcell role is used to make a cell in a grid or treegrid.
...ormation.
...plied to them must be the child of an element with a role of row.
...And 4 more matches
ARIA: button role - Accessibility
hould returns to the button that opened the dialog unless the function performed in the dialog context logically leads to a different element.
...ement look like a button, and to provide visual cues when the button has focus.
... // add the new name to the list.
...And 4 more matches
ARIA: listbox role - Accessibility
the listbox role is used for lists from which a user may select one or more items which are static and, unlike
html <select> elements, may contain images.
... the listbox role is used for lists from which a user may select one or more items which are static and, unlike
html <select> elements, may contain images.
...or more items which are static and, unlike
html <select> elements, may contain images.
...And 4 more matches
Keyboard - Accessibility
ning assistive technology to a non-interactive state (often called "browse mode").
... handlers keyboard events.
...r, which is based on the ordering of elements in the
html document.
...And 4 more matches
Stacking context example 2 - CSS: Cascading Style Sheets
same stacking context.
...ng context hierarchy: root stacking context div #2 (z-index 2) div #3 (z-index 1) div #4 (z-index 10) note: it is worth remembering that in general the
html hierarchy is different from the stacking context hierarchy.
...oot stacking context div #2 (z-index 2) div #3 (z-index 1) div #4 (z-index 10) note: it is worth remembering that in general the
html hierarchy is different from the stacking context hierarchy.
...And 4 more matches
content - CSS: Cascading Style Sheets
text for generated content, added in the level 3 specification */ content: url("http://www.example.com/test.png") / "this is the alt text"; /* values below can only be applied to generated content using ::before and ::after */ /* <string> value */ content: "prefix"; /* <counter> values */ content: counter(chapter_counter); content: counters(section_counter, "."); /* attr() value linked to the
html attribute value */ content: attr(value string); /* language- and position-dependent keywords */ content: open-quote; content: close-quote; content: no-open-quote; content: no-close-quote; /* except for normal and none, several values can be used simultaneously */ content: open-quote chapter_counter; /* global values */ content: inherit; content: initial; content: unset; syntax values non...
...ercentage> = <length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples headings and quotes this example inserts quotation marks around quotes, and adds the word "chapter" before headings.
...nt> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples headings and quotes this example inserts quotation marks around quotes, and adds the word "chapter" before headings.
...And 4 more matches
font-size - CSS: Cascading Style Sheets
smaller relative to the parent element's font size, roughly by the ratio used to separate the absolute-size keywords above.
...ically adapts its length relative to the font that the reader chooses to use.
...ts length relative to the font that the reader chooses to use.
...And 4 more matches
Data URLs - HTTP
s here and here.
...lo%2c%20world!
...of percent-encoding (url-encoding) for the quote and space characters.
...And 4 more matches
Cross-Origin Resource Sharing (CORS) - HTTP
xhr.send(); this performs a simple exchange between the client and the server, using cors headers to handle the privileges: let's look at what the browser will send to the server in this case, and let's see how the server responds: get /resources/public-data/ http/1.1 host: bar.other user-agent: mozilla/5.0 (macintosh; intel mac os x 10.14; rv:71.0) gecko/20100101 firefox/71.0 accept: text/
html,application/x
html+xml,application/xml;q=0.9,*/*;q=0.8 accept-language: en-us,en;q=0.5 accept-encoding: gzip,deflate connection: keep-alive origin: https://foo.example the request header of note is origin, which shows that the invocation is coming from https://foo.example.
...ribed below, the actual post request does not include the access-control-request-* headers; they are needed only for the options request.
...ctual post request does not include the access-control-request-* headers; they are needed only for the options request.
...And 4 more matches
Redirections in HTTP - HTTP
special redirections 304 (not modified) redirects a page to the locally cached copy (that was stale), and 300 (multiple choice) is a manual redirection: the body, presented by the browser as a web page, lists the possible redirections and the user clicks on one to select it.
...listed in an
html page in the body.
... sent as link headers with rel=alternate.
...And 4 more matches
JavaScript modules - JavaScript
en draw (and report information about) different shapes on the canvas.
...e: although imported features are available in the file, they are read only views of the feature that was exported.
...hey are read only views of the feature that was exported.
...And 4 more matches
JavaScript language resources - JavaScript
ecmascript is the scripting language that forms the basis of javascript.
...standards organization in the ecma-262 and ecma-402 specifications.
...corresponds to javascript 1.5.
...And 4 more matches
Media - Progressive web apps (PWAs)
tics.
...a types are: screen color device display print printed paged media projection projected display all all media (the default) more details there are other ways to specify the media type for a set of rules.
... about user interfaces in css, see user interface in the css specification.
...And 4 more matches
The building blocks of responsive design - Progressive web apps (PWAs)
rems to size your containers and text, not fixed widths such as pixels.
...hat we didn't want the brick css and javascript files being applied to the markup unless we were looking at the mobile app view.
...sive mechanism — most old school sites that don't have media queries would look terrible when rendered at say, 320px or 480px wide.
...And 4 more matches
d - SVG: Scalable Vector Graphics
the d attribute defines a path to be drawn.
...neto (l) command(s) (see below).
...ula: po′ = pn = {xo, y} v dy+ draw a vertical line from the current point to the end point, which is specified by the current point shifted by dy along the y-axis and the current point's x coordinate.
...And 4 more matches
transform - SVG: Scalable Vector Graphics
the transform attribute defines a list of transform definitions that are applied to an element and the element's children.
...thrm{newcoordsys}} \\ y_{\mathrm{newcoordsys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x_{\mathrm{prevcoordsys}} \\ y_{\mathrm{prevcoordsys}} \\ 1 \end{pmatrix} = \begin{pmatrix} a x_{\mathrm{prevcoordsys}} + c y_{\mathrm{prevcoordsys}} + e \\ b x_{\mathrm{prevcoordsys}} + d y_{\mathrm{prevcoordsys}} + f \\ 1 \end{pmatrix} example
html,body,svg { height:100% } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="30" height="20" fill="green" /> <!-- in the following example we are applying the matrix: [a c e] [3 -1 30] [b d f] => [1 3 40] [0 0 1] [0 0 1] which transform the rectangle as such: top left corner: oldx=10 oldy=10 newx = a * oldx + c * oldy + e = 3 ...
... * 30 + 30 = 120 newy = b * oldx + d * oldy + f = 1 * 40 + 3 * 30 + 40 = 170 --> <rect x="10" y="10" width="30" height="20" fill="red" transform="matrix(3 1 -1 3 30 40)" /> </svg> translate the translate(<x> [<y>]) transform function moves the object by x and y.
...And 4 more matches
Using shadow DOM - Web Components
firefox (63 and onwards), chrome, opera, and safari.
...5 and onwards) supports it too; the old edge didn't.
... too; the old edge didn't.
...And 4 more matches
ui - Archive of obsolete content
when the user clicks the button, and the icon gets a "pressed" look when the button is checked.
...tton, and the icon gets a "pressed" look when the button is checked.
... 30 onwards, you can attach panels to toggle buttons, by passing the button into the panel's constructor or its show() method: frame a frame enables you to create an
html iframe, using bundled
html, css and javascript.
...And 3 more matches
util/match-pattern - Archive of obsolete content
with an http, https, or ftp scheme.
..., or ftp scheme.
...://foo.com/*" https://foo.com/ https://foo.com/bar http://foo.com/ https://foo.com https://bar.foo.com/ a scheme followed by an asterisk matches all urls with that scheme.
...And 3 more matches
LookupPrefix - Archive of obsolete content
here is an implementation of lookupprefix which should work cross-browser.
... here is an implementation of lookupprefix which should work cross-browser.
...ding firefox) support node.lookupprefix.
...And 3 more matches
Tabbed browser - Archive of obsolete content
ectedtab = gbrowser.addtab("http://www.google.com/"); manipulating content of a new tab if you want to work on the content of the newly opened tab, you'll need to wait until the content has finished loading.
...ng.
...actice to try to re-use an existing tab which already displays the desired url--if one is already open.
...And 3 more matches
List of Mozilla-Based Applications - Archive of obsolete content
lrunner camino browser 2.5m downloads and ~400,000 active users ...
... enlis genome personal genome browser esxx javascript application server uses mozilla rhino etna xml wysiwyg editor eudora mail and news application the upcoming version 8 will be based on thunderbird evergreen library automation system evolution email client uses nss exe elearning x
html editor seems to be using xul for some of their webui facebook open platform facebook open platform the fbml parser used in the platform is based on mozilla code fennec browser for mobiles as mark notes: fennec is not firefox, it’s a completely different application findthatfont!
... hacketyhack little coders helma web application framework uses mozilla rhino holt mcdougal cd-roms educational cd-roms activity generator and lab generator are both based on custom firefox distributions houdini 3d animation tools uses gecko in embedded help viewer httpunit automated testing framework uses mozilla rhino
htmlunit browser for java programs uses mozilla rhino hyperinfo web application plat form uses goeckofx ibm websphere lombardi edition business process management system uses mozilla rhino and mozilla xpcom eclipse plug-in.
...And 3 more matches
Defining Cross-Browser Tooltips - Archive of obsolete content
owsers.
...he element (e.g., a text-mode browser that cannot display images).
...of editing a large collection of legacy documents should be able to convert their documents using a batch find-and-replace operation, for example substituting alt= for title=.
...And 3 more matches
Monitoring WiFi access points - Archive of obsolete content
code with universalxpconnect privileges can monitor the list of available wifi access points to obtain information about them including their ssid, mac address, and signal strength.
... to be used by geolocation services.
... points.
...And 3 more matches
Progress Meters - Archive of obsolete content
the download file dialog as the size of the file is known.
...log.
...bel="find" default="true"/> the value has been set to 50% so that we can see the meter on the window.
...And 3 more matches
Splitters - Archive of obsolete content
ide the splitter which the user can use to collapse the element.
...hen the splitter is dragged.
...sizebefore and resizeafter attributes.
...And 3 more matches
-ms-filter - Archive of obsolete content
)' ] <-ms-filter-function-legacy> = <ident-token> | <function-token> <any-value> ')' the <string> contains the list of filters, transitions, and procedural surfaces.
...er 8.
...orm.microsoft.basicimage(mirror=1)'; the following example shows how to use an inline style sheet to set the filter on an image.
...And 3 more matches
XForms Select Element - Archive of obsolete content
elaxation happens when the itemset element specifies the item value using a copy (see spec) element.
... item value using a copy (see spec) element.
...ment can be used to add a subtree of nodes underneath the element that the select control is bound to.
...And 3 more matches
XUL Parser in Python - Archive of obsolete content
warning: the content of this article may be out of date.
...one can instantiate the parser from their own scripts and use it more flexibly: >>> import xultool >>> myxp = xulparser() >>> chrome_dir = 'd:\src\mozilla\xpfe' >>> res = myxp.parsexul(chrome_dir, 'window', 'id') where something like the above would write out all the xul window ids in the build.
... chrome_dir = 'd:\src\mozilla\xpfe' >>> res = myxp.parsexul(chrome_dir, 'window', 'id') where something like the above would write out all the xul window ids in the build.
...And 3 more matches
Empty element - MDN Web Docs Glossary: Definitions of Web-related terms
an empty element is an element from
html, svg, or mathml that cannot have any child nodes (i.e., nested elements or text nodes).
... an empty element is an element from
html, svg, or mathml that cannot have any child nodes (i.e., nested elements or text nodes).
... an empty element is an element from
html, svg, or mathml that cannot have any child nodes (i.e., nested elements or text nodes).
...And 3 more matches
Making asynchronous programming easier with async and await - Learn web development
l; document.body.appendchild(image); }) .catch((e) => console.log(e) ); this is because the .catch() block will catch errors occurring in both the async function call and the promise chain.
...le.log(e) ); this is because the .catch() block will catch errors occurring in both the async function call and the promise chain.
... is for the promises to begin processing simultaneously, like they would do if we weren't using async/await.
...And 3 more matches
Graceful asynchronous programming with Promises - Learn web development
le we looked at in the first article of the series, but we'll do it a bit differently as we get you building your own promise-based code.
... your own promise-based code.
...ge.src = objecturl; document.body.appendchild(image); here we are running the url.createobjecturl() method, passing it as a parameter the blob returned when the second promise fulfills.
...And 3 more matches
Deployment and next steps - Learn web development
icle we learning about svelte's typescript support, and how to use it to make your application more robust.
... rollup that allow you to customize its behavior.
...build our application.
...And 3 more matches
Styling Vue components with CSS - Learn web development
previous overview: client-side javascript frameworks next the time has finally come to make our app look a bit nicer.
...orks next the time has finally come to make our app look a bit nicer.
...se css pre-processors (like scss) or post-processors (like postcss).
...And 3 more matches
Accessibility Features in Firefox
small fonts.
... also, usercontent.css allows users knowledgeable about cascading style sheets to customize the appearance of all pages that are displayed.
...ideas, documentation, answering questions in the support forums -- and nearly any kind of community involvement resulting in a browser built for a broader audience of users and developers.
...And 3 more matches
Links and Resources
nd summary to be written.
...r) from webaim and sponsored by temple university institute on disabilities wave 3.0 is another powerful, mature, free online webpage accessibility validation service that identifies accessibility errors and reports accessibility warnings about webpage related to section 508 standards and/or the wcag guidelines.
... 3.0 is another powerful, mature, free online webpage accessibility validation service that identifies accessibility errors and reports accessibility warnings about webpage related to section 508 standards and/or the wcag guidelines.
...And 3 more matches
Application cache implementation overview
with offline cache this happens between document load start and the first sub-resource download start and is not about associating nsiapplicationcache object with the channel, but with the document object the load is performed for.
...happens between document load start and the first sub-resource download start and is not about associating nsiapplicationcache object with the channel, but with the document object the load is performed for.
...th the channel, but with the document object the load is performed for.
...And 3 more matches
Debugging Frame Reflow
ving stdout to a file.
... on mac this is accomplished with: $ env dyld_library_path="`pwd`/obj-ff-dbg/dist/nightlydebug.app/contents/macos" \ ./obj-ff-dbg/dist/nightlydebug.app/contents/macos/firefox-bin > logfile.txt after loading your testcase, the log file will contain the promised information.
...lished with: $ env dyld_library_path="`pwd`/obj-ff-dbg/dist/nightlydebug.app/contents/macos" \ ./obj-ff-dbg/dist/nightlydebug.app/contents/macos/firefox-bin > logfile.txt after loading your testcase, the log file will contain the promised information.
...And 3 more matches
IME handling guide
mitation of handling composition currently, editorbase touches undo stack at receiving every widgetcompositionevent.
...red ime state from the editor and returns the result.
...om the editor and returns the result.
...And 3 more matches
NSS tools : signtool
mation if you don't need to specify any metadata other than an installer script.
...signing certificates, including issuing cas.
...alid, the list will so specify.
...And 3 more matches
AT APIs Support
ow makers of screen readers, voice dictation packages, onscreen keyboards, magnification software and other assitive technologies can support gecko-based software.
...pt and the w3c dom.
...ways to create application: embedded clients embedded clients use gecko only in the content window, at the moment for
html and generic xml only.
...And 3 more matches
XForms Accessibility
dled in gecko for xforms..
...e are two approaches to test xforms accessibility.
...e 1.0 specs or 1.1 specs) but rich schwerdtfeger (distinguished engineer, swg accessibility architect/strategist chair, ibm accessibility architecture review board) gave some clarification about navindex.
...And 3 more matches
nsIDOMWindowUtils
troduced gecko 1.8 inherits from: nsisupports last changed in gecko 49.0 (firefox 49.0 / thunderbird 49.0 / seamonkey 2.46) implemented by: window.
... from: nsisupports last changed in gecko 49.0 (firefox 49.0 / thunderbird 49.0 / seamonkey 2.46) implemented by: window.
...ch have been restyled for the current document.
...And 3 more matches
nsIEditorMailSupport
editor/idl/nsieditormailsupport.idlscriptable provides simple editing actions for the thunderbird mail editor.
...s none.
...tation() insert a string as quoted text (whose representation is dependent on the editor type), replacing the selected text (if any), including, if possible, a "cite" attribute.
...And 3 more matches
Filelink Providers
additional details in order to connect to the service.
...heir nsimsgcloudfileprovider implementation to a chrome url for an x
html page that contains a form with the extra information.
... set to "return false;".
...And 3 more matches
Standard OS Libraries
deprecated, see below for gdk 3.0 example.
...#gdk-get-default-root-window var gdk_get_default_root_window = gdk.declare('gdk_get_default_root_window', ctypes.default_abi, gdkwindow.ptr // return - the root window, which is top most parent of all windows ); // in gdk2 we have to use gdk_window_get_pointer, but in gdk3 it was deprecated and have to use gdk_window_get_device_position https://developer.gnome.org/gdk3/stable/gdk3-windows.
html#gdk-window-get-pointer var gdk_window_get_pointer = gdk.declare('gdk_window_get_pointer', ctypes.default_abi, gdkwindow.ptr, // return - the window containing the pointer (as with gdk_window_at_pointer()), or null if the window containing the pointer isn’t known to gdk.
...en('libgdk-x11-2.0.so.0'); var gdk3 = ctypes.open('libgdk-3.so.0'); // types var gint = ctypes.int; var gdkdevice = ctypes.structtype('gdkdevice'); var gdkdevicemanager = ctypes.structtype('gdkdevicemanager'); var gdkdisplay = ctypes.structtype('gdkdisplay'); var gdkmodifiertype = ctypes.int; var gdkwindow = ctypes.structtype('gdkwindow'); // https://developer.gnome.org/gdk3/stable/gdk3-windows.
html#gdk-get-default-root-window var gdk_get_default_root_window = gdk.declare('gdk_get_default_root_window', ctypes.default_abi, gdkwindow.ptr // return - the root window, which is top most parent of all windows ); // in gdk2 we have to use gdk_window_get_pointer, but in gdk3 it was deprecated and have to use gdk_window_get_device_position // https://developer.gnome.org/gdk3/stable/gdk3-windo...
...And 3 more matches
CSS Grid Inspector: Examine grid layouts - Firefox Developer Tools
ector allows you to examine css grid layouts using the firefox devtools, discovering grids present on a page, examining and modifying them, debugging layout issues, and more.
... and more.
... the examples shown in the screenshots appearing in this article are jen simmons' futurismo and variations on a grid experiments, and a live named grid area example from rachel andrew.
...And 3 more matches
AbstractRange - Web APIs
ddle of the first child of the span, and then the range is used to copy the contents of the range.
...f the dom in order to define a range of characters within a document in a way that is able to span across zero or more node boundaries, and which is as resilient as possible to changes to the dom, you can't simply specify the offset to the first and last characters in the
html.
...fine the start and end positions will generally be easier to make perform well.
...And 3 more matches
AudioContext.createMediaElementSource() - Web APIs
the createmediaelementsource() method of the audiocontext interface is used to create a new mediaelementaudiosourcenode object, given an existing
html <audio> or <video> element, the audio from which can then be played and manipulated.
...iaelementaudiosourcenode object, given an existing
html <audio> or <video> element, the audio from which can then be played and manipulated.
...therefore increase and decrease the volume of the playing music by moving the mouse pointer up and down.
...And 3 more matches
Using the CSS Painting API - Web APIs
nsional canvas that will be our image.
...ption with the contextoptions() function: we returned a simple object stating alpha transparency is allowed.
...ault size and placement of the yellow box we created in our paint worklet.
...And 3 more matches
CanvasRenderingContext2D.drawImage() - Web APIs
i provides different ways to draw an image onto the canvas.
...e onto the canvas.
...yntax void ctx.drawimage(image, dx, dy); void ctx.drawimage(image, dx, dy, dwidth, dheight); void ctx.drawimage(image, sx, sy, swidth, sheight, dx, dy, dwidth, dheight); parameters image an element to draw into the context.
...And 3 more matches
Manipulating video using canvas - Web APIs
by combining the capabilities of the video element with a canvas, you can manipulate video data in real time to incorporate a variety of visual effects to the video being displayed.
... combining the capabilities of the video element with a canvas, you can manipulate video data in real time to incorporate a variety of visual effects to the video being displayed.
...ing the capabilities of the video element with a canvas, you can manipulate video data in real time to incorporate a variety of visual effects to the video being displayed.
...And 3 more matches
CustomElementRegistry.define() - Web APIs
the define() method of the customelementregistry interface defines a new custom element.
... the define() method of the customelementregistry interface defines a new custom element.
... the referenced constructor is not a constructor.
...And 3 more matches
DataTransferItem.type - Web APIs
the read-only datatransferitem.type property returns the type (format) of the datatransferitem object representing the drag data item.
...efault(); var data = ev.datatransfer.items; for (var i = 0; i < data.length; i += 1) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/
html'))) { // drag data item is
html console.log("...
....length; i += 1) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/
html'))) { // drag data item is
html console.log("...
...And 3 more matches
Document.writeln() - Web APIs
writes a string of text followed by a newline character to a document.
... string containing a line of text.
...nter password:</p>"); notes document.writeln is the same as document.write but adds a newline.
...And 3 more matches
DocumentType - Web APIs
ts properties from its parent, node, and implements the childnode interface.
...ts parent, node, and implements the childnode interface.
...rnalsubset read only a domstring of the internal subset, or null if there is none.
...And 3 more matches
Element.tagName - Web APIs
the tagname read-only property of the element interface returns the tag name of the element on which it's called.
... the tagname read-only property of the element interface returns the tag name of the element on which it's called.
... interface returns the tag name of the element on which it's called.
...And 3 more matches
Event.composed - Web APIs
w> and <closed-shadow>, both of which take the contents of their text attribute and insert them into the element's shadow dom as the text content of a <p> element.
...ment.createelement('p'); pelem.textcontent = this.getattribute('text'); let shadowroot = this.attachshadow({mode: 'open'}) .appendchild(pelem); } }); we then insert one of each element into our page: <open-shadow text="i have an open shadow root"></open-shadow> <closed-shadow text="i have a closed shadow root"></closed-shadow> then include a click event listener on the <
html> element: document.queryselector('
html').addeventlistener('click',function(e) { console.log(e.composed); console.log(e.composedpath()); }); when you click on the <open-shadow> element and then the <closed-shadow> element, you'll notice two things.
... when you click on the <open-shadow> element and then the <closed-shadow> element, you'll notice two things.
...And 3 more matches
Event.composedPath() - Web APIs
w> and <closed-shadow>, both of which take the contents of their text attribute and insert them into the element's shadow dom as the text content of a <p> element.
...ment.createelement('p'); pelem.textcontent = this.getattribute('text'); let shadowroot = this.attachshadow({mode: 'open'}) .appendchild(pelem); } }); we then insert one of each element into our page: <open-shadow text="i have an open shadow root"></open-shadow> <closed-shadow text="i have a closed shadow root"></closed-shadow> then include a click event listener on the <
html> element: document.queryselector('
html').addeventlistener('click',function(e) { console.log(e.composed); console.log(e.composedpath()); }); when you click on the <open-shadow> element and then the <closed-shadow> element, you'll notice two things.
...u click on the <open-shadow> element and then the <closed-shadow> element, you'll notice two things.
...And 3 more matches
GlobalEventHandlers.onanimationend - Web APIs
nt fires when a css animation reaches the end of its active period (which is calculated as animation-duration * animation-iteration-count) + animation-delay).
...a css animation reaches the end of its active period (which is calculated as animation-duration * animation-iteration-count) + animation-delay).
...et.onanimationend; target.onanimationend = function value a function to be called when an animationend event occurs indicating that a css animation has begun on the target, where the target object is an
html element (
htmlelement), document (document), or window (window).
...And 3 more matches
GlobalEventHandlers.onanimationstart - Web APIs
an event handler for the animationstart event.
... an event handler for the animationstart event.
...nimationstart; target.onanimationstart = function value a function to be called when an animationstart event occurs indicating that a css animation has begun on the target, where the target object is an
html element (
htmlelement), document (document), or window (window).
...And 3 more matches
Audio() - Web APIs
the audio() constructor creates and returns a new
htmlaudioelement which can be either attached to a document for the user to interact with and/or listen to, or can be used offscreen to manage and play audio.
... the audio() constructor creates and returns a new
htmlaudioelement which can be either attached to a document for the user to interact with and/or listen to, or can be used offscreen to manage and play audio.
... specified by url.the new object's preload property is set to auto and its src property is set to the specified url or null if no url is given.
...And 3 more matches
Using microtasks in JavaScript with queueMicrotask() - Web APIs
ly having other tasks such as timeouts or the like delay the transmission.
...the messages it finds in the resulting array.
...ueuemicrotask(() => { log("the microtask has run.") }); log("after enqueueing the microtask"); result timeout and microtask example in this example, a timeout is scheduled to fire after zero milliseconds (or "as soon as possible").
...And 3 more matches
Checking when a deadline is due - Web APIs
his would be easy if we were just comparing two date objects, but of course humans don't want to enter deadline information in the same format javascript understands.
...the months are recorded as full month names, and the years are recorded as full four digit year numbers.
...ue == null) { note.inner
html += '<li>data not submitted — form incomplete.</li>'; return; } in this segment, we check to see if the form fields have all been filled in.
...And 3 more matches
Node.baseURI - Web APIs
the baseuri read-only property returns the absolute base url of a node.
...aseuri read-only property returns the absolute base url of a node.
...mstring representing the base url of the specified node.
...And 3 more matches
TrackEvent - Web APIs
the trackevent interface, which is part of the
html dom specification, is used for events which represent changes to a set of available tracks on an
html media element; these events are addtrack and removetrack.
...o a set of available tracks on an
html media element; these events are addtrack and removetrack.
... not to confuse trackevent with the rtctrackevent interface, which is used for tracks which are part of an rtcpeerconnection.
...And 3 more matches
WebGLRenderingContext - Web APIs
the webglrenderingcontext interface provides an interface to the opengl es 2.0 graphics rendering context for the drawing surface of an
html <canvas> element.
... started with webgl.
... constants see the webgl constants page.
...And 3 more matches
Boilerplate 1 - Web APIs
« previousnext » this example describes repeated pieces of code that will be hidden from now on, as well as defining a javascript utility function to make webgl initialization easier.
...avascript utility function to make webgl initialization easier.
...going to hide them from now on.
...And 3 more matches
Window.locationbar - Web APIs
returns the locationbar object, whose visibility can be checked.
... returns the locationbar object, whose visibility can be checked.
... returns the locationbar object, whose visibility can be checked.
...And 3 more matches
Window.personalbar - Web APIs
returns the personalbar object, whose visibility can be toggled in the window.
...g complete
html example shows the way that the visible property of the various "bar" objects is used, and also the change to the privileges necessary to write to the visible property of any of the bars on an existing window.
...ete
html example shows the way that the visible property of the various "bar" objects is used, and also the change to the privileges necessary to write to the visible property of any of the bars on an existing window.
...And 3 more matches
Window.scrollbars - Web APIs
the window.scrollbars property returns the scrollbars object, whose visibility can be checked.
... the window.scrollbars property returns the scrollbars object, whose visibility can be checked.
... the window.scrollbars property returns the scrollbars object, whose visibility can be checked.
...And 3 more matches
Window.statusbar - Web APIs
the window.statusbar property returns the statusbar object, whose visibility can be toggled in the window.
... the window.statusbar property returns the statusbar object, whose visibility can be toggled in the window.
...ndow.statusbar property returns the statusbar object, whose visibility can be toggled in the window.
...And 3 more matches
Window.toolbar - Web APIs
the window.toolbar property returns the toolbar object, whose visibility can be toggled in the window.
...owing complete
html example shows way that the visible property of the various "bar" objects is used, and also the change to the privileges necessary to write to the visible property of any of the bars on an existing window.
...omplete
html example shows way that the visible property of the various "bar" objects is used, and also the change to the privileges necessary to write to the visible property of any of the bars on an existing window.
...And 3 more matches
ARIA Test Cases - Accessibility
should read column and row headers as the grid is traversed with arrow keys (in forms mode).
... - - - - voiceover (leopard) n/a n/a - fail window-eyes - - - - nvda - n/a - - zoom (leopard) pass n/a pass pass zoomtext - - - - orca - - - - list simple list expected at behavior: (mz) screen reader should indicate an aria list like any other static
html list.
...o traverse a list of landmarks or next/prev landmark keys screen readers should support nested landmarks, and multiple landmarks of the same time screen readers should announce the number of landmarks at page load, if they exist on the page screen readers should announce landmarks as users navigate into them (test in all screen reader modes) 8 (jg) are their any landmark role equivalents with
html headers like role=main~h1??
...And 3 more matches
ARIA annotations - Accessibility
.
...n action.
...es the aria attributes providing these new abilities are as follows: aria-description="" — provides a detailed description of an
html element, as opposed to the brief label provided by aria-label.
...And 3 more matches
ARIA: rowgroup role - Accessibility
role="row"> <span role="cell">finland</span> <span role="cell">5.5 million</span> </div> <div role="row"> <span role="cell">france</span> <span role="cell">67 million</span> </div> </div> </div> description rowgroup establishes a relationship between owned row elements and is a structural equivalent to the thead, tfoot and tbody elements in
html.
... </div> </div> </div> description rowgroup establishes a relationship between owned row elements and is a structural equivalent to the thead, tfoot and tbody elements in
html.
...y encouraged.
...And 3 more matches
ARIA: checkbox role - Accessibility
the checkbox role is used for checkable interactive controls.
...te to expose the checkbox's state to assistive technology.
...rule of aria is if a native
html element or attribute has the semantics and behavior you require, use it instead of re-purposing an element and adding aria.
...And 3 more matches
Perceivable - Accessibility
1.1.1 provide text equivalents (a) all images that convey meaningful content should be given suitable alternative text.
...anscript should be provided for prerecorded audio-only media, and a transcript or audio description should be provided for prerecorded video-only media (i.e., silent video).
...r prerecorded video-only media (i.e., silent video).
...And 3 more matches
Text labels and names - Accessibility
be able to understand the purpose of an image.
... a simple image map (taken from h24: providing text alternatives for the area elements of image maps): <img src="welcome.gif" usemap="#map1" alt="areas in the library.
...g" aria-label="personal details updated confirmation"> <p>your personal details were successfully updated.
...And 3 more matches
Attribute selectors - CSS: Cascading Style Sheets
"insensitive" anywhere in the url, regardless of capitalization */ a[href*="insensitive" i] { color: cyan; } /* links with "case" anywhere in the url, with matching capitalization */ a[href*="case" s] { color: pink; } /* links that end in ".org" */ a[href$=".org"] { color: red; } /* links that start with "https" and end in ".org" */ a[href^="https"][href$=".org"] { color: green; }
html <ul> <li><a href="#internal">internal link</a></li> <li><a href="http://example.com">example link</a></li> <li><a href="#insensitive">insensitive internal link</a></li> <li><a href="http://example.org">example org link</a></li> <li><a href="https://example.org">example https org link</a></li> </ul> result languages css /* all divs with a `lang` attribute are bold.
...ue; } /* all divs in portuguese are green.
...tional chinese `data-lang` are purple.
...And 3 more matches
The stacking context - CSS: Cascading Style Sheets
the stacking context is a three-dimensional conceptualization of
html elements along an imaginary z-axis relative to the user, who is assumed to be facing the viewport or the webpage.
... the stacking context is a three-dimensional conceptualization of
html elements along an imaginary z-axis relative to the user, who is assumed to be facing the viewport or the webpage.
...ibutes.
...And 3 more matches
Ajax - Developer guides
getting started an introduction to ajax.
... getting started an introduction to ajax.
...i lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using file or blob objects to specify the file or data to read.
...And 3 more matches
Content categories - Developer guides
every
html element is a member of one or more content categories — these categories group elements that share common characteristics.
...tent categories, which describe rules common to form-related elements.
...ontent heading content defines the title of a section, whether marked by an explicit sectioning content element, or implicitly defined by the heading content itself.
...And 3 more matches
Accept - HTTP
der forbidden header name no cors-safelisted request header yes, with the additional restriction that values can't contain a cors-unsafe request header byte: 0x00-0x1f (except 0x09 (ht)), "():<>?@[\]{}, and 0x7f (del).
...den header name no cors-safelisted request header yes, with the additional restriction that values can't contain a cors-unsafe request header byte: 0x00-0x1f (except 0x09 (ht)), "():<>?@[\]{}, and 0x7f (del).
...afe request header byte: 0x00-0x1f (except 0x09 (ht)), "():<>?@[\]{}, and 0x7f (del).
...And 3 more matches
PUT - HTTP
s 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.
... 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.
... effect (that is no side effect), whereas successive identical post requests may have additional effects, akin to placing an order several times.
...And 3 more matches
An overview of HTTP - HTTP
http is a protocol which allows the fetching of resources, such as
html documents.
...designed in the early 1990s, http is an extensible protocol which has evolved over time.
...s role is primarily performed by the web browser; other possibilities are programs used by engineers and web developers to debug their applications.
...And 3 more matches
A typical HTTP session - HTTP
ction to be performed upon a resource.
..., giving the client information about the data sent (e.g.
...utf-8 content-length: 55743 connection: keep-alive cache-control: s-maxage=300, public, max-age=0 content-language: en-us date: thu, 06 dec 2018 17:37:18 gmt etag: "2e77ad1dc6ab0b53a2996dfd4653c1c3" server: meinheld/0.6.1 strict-transport-security: max-age=63072000 x-content-type-options: nosniff x-frame-options: deny x-xss-protection: 1; mode=block vary: accept-encoding,cookie age: 7 <!doctype
html> <
html lang="en"> <head> <meta charset="utf-8"> <title>a simple webpage</title> </head> <body> <h1>simple
html5 webpage</h1> <p>hello, world!</p> </body> </
html> notification that the requested resource has permanently moved: http/1.1 301 moved permanently server: apache/2.4.37 (red hat) content-type: text/
html; charset=utf-8 date: thu, 06 dec 2018 17:33:08 gmt location: https://develo...
...And 3 more matches
Web video codec guide - Web media technologies
avc media requires a license, though the mpeg la patent pool does not require license fees for streaming internet video in avc format as long as the video is free for end users.
...plorer opera safari hevc / h.265 support no 18[1] no[2] 11[1] no 11 container support mp4 rtp / webrtc compatible no supporting/maintaining organization itu / mpeg specifications http://www.itu.int/rec/t-rec-h.265 https://www.iso.org/standard/69668.
html licensing proprietary; confirm your compliance with the licensing requirements.
... chrome edge firefox internet explorer opera safari mpeg-1 support no no no no no yes container support mpeg rtp / webrtc compatible no supporting/maintaining organization mpeg specification https://www.iso.org/standard/22411.
html licensing proprietary; however, all patents have expired, so mpeg-1 may be used freely mpeg-2 part 2 video mpeg-2 part 2 is the video format defined by the mpeg-2 specification, and is also occasionally referred to by its itu designation, h.262.
...And 3 more matches
Web technology reference
eb is based on a number of technologies which, together, can be used to create everything from simple sites to powerful web applications.
... a selection of key documentation for each.
..., consider starting with our learning area, which is filled with step-by-step tutorials that will guide you from total webdev newbie to at least semi-pro!
...And 3 more matches
stroke-linejoin - SVG: Scalable Vector Graphics
is a presentation attribute defining the shape to be used at the corners of paths when they are stroked.
... arcs note: the arcs value as been introduced in svg2 and it isn't widely supported yet, see browser compatibility bellow for details.
... --> <g id="p"> <path d="m1,5 a2,2 0,0,0 2,-3 a3,3 0 0 1 2,3" stroke="pink" fill="none" stroke-width="0.025" /> <circle cx="1" cy="5" r="0.05" fill="pink" /> <circle cx="3" cy="2" r="0.05" fill="pink" /> <circle cx="5" cy="5" r="0.05" fill="pink" /> </g> </svg> bevel the bevel value indicates that a bevelled corner is to be used to join path segments.
...And 3 more matches
Example - SVG: Scalable Vector Graphics
in this example, we use x
html, svg, javascript, and the dom to animate a swarm of "motes".
... in this example, we use x
html, svg, javascript, and the dom to animate a swarm of "motes".
...rinciples.
...And 3 more matches
Understanding WebAssembly text format - WebAssembly
o a typed array called addcode (as described in fetching webassembly bytecode), compile and instantiate it, and execute our add function in javascript (we can now find add() in the exports property of the instance): webassembly.instantiatestreaming(fetch('add.wasm')) .then(obj => { console.log(obj.instance.exports.add(1, 2)); // "3" }); note: you can find this example in github as add.
html (see it live also).
...s call it importobject) such that importobject.console.log is a javascript function.
...ive also).
...And 3 more matches
Finding window handles - Archive of obsolete content
sel = ctypes.voidptr_t; // constants let nil = ctypes.voidptr_t(0); //common functions let sel_registername = objc.declare('sel_registername', ctypes.default_abi, sel, ctypes.char.ptr); let objc_msgsend = objc.declare('objc_msgsend', ctypes.default_abi, id, id, sel, '...'); /* https://developer.apple.com/library/mac/documentation/cocoa/reference/applicationkit/classes/nsapplication_class/index.
html#//apple_ref/occ/instp/nsapplication/orderfront: * [nswindowptr orderfront:nil] */ var orderfront = sel_registername('orderfront:'); var nswindowptr = ctypes.voidptr_t(ctypes.uint64(nswindowstring)); var rez_orderfront = objc_msgsend(nswindowptr, orderfront, nil); console.log('rez_orderfront:', rez_orderfront, rez_orderfront.tostring()); objc.close(); unix under unix systems, the nativeha...
...ace(ci.nsiinterfacerequestor) .getinterface(ci.nsibasewindow); var gdkwindowptrstring = basewindow.nativehandle; components.utils.import('resource://gre/modules/ctypes.jsm'); var gdk = ctypes.open('libgdk-x11-2.0.so.0'); // types let guint32 = ctypes.uint32_t; let gdkwindow = ctypes.structtype('gdkwindow'); // https://developer.gnome.org/gdk3/stable/gdk3-windows.
html#gdk-window-focus var gdk_window_focus = gdk.declare('gdk_window_focus', ctypes.default_abi, ctypes.void_t, gdkwindow.ptr, guint32); // https://developer.gnome.org/gdk2/stable/gdk2-x-window-system-interaction.
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 = gdkwindo...
...dow.nativehandle; components.utils.import('resource://gre/modules/ctypes.jsm'); var gdk = ctypes.open('libgdk-x11-2.0.so.0'); var gtk = ctypes.open('libgtk-x11-2.0.so.0'); // types let guint32 = ctypes.uint32_t; let gdkwindow = ctypes.structtype('gdkwindow'); let gpointer = ctypes.voidptr_t; let gtkwindow = ctypes.structtype('gtkwindow'); //https://developer.gnome.org/gdk3/stable/gdk3-windows.
html#gdk-window-get-user-data var gdk_window_get_user_data = gdk.declare('gdk_window_get_user_data', ctypes.default_abi, ctypes.void_t, gdkwindow.ptr, gpointer.ptr); //https://developer.gnome.org/gtk3/stable/gtkwindow.
html#gtk-window-present var gtk_window_present = gtk.declare('gtk_window_present', ctypes.default_abi, ctypes.void_t, gtkwindow.ptr); //https://developer.gnome.org/gtk3/stable/gtkwindo...
...And 2 more matches
Appendix F: Monitoring DOM changes - Archive of obsolete content
dom mutation events were introduced to
html several years ago in order to allow web applications to monitor changes to the dom by other scripts.
...and :active can be used to achieve extremely complex dynamic behavior.
...document} doc the document in which to watch for new nodes.
...And 2 more matches
Creating a Microsummary - Archive of obsolete content
pages themselves using a <link rel="microsummary"> element, f.e.: <head> <link rel="microsummary" href="index.php?view=microsummary"> </head> when firefox encounters a <link rel="microsummary"> element, it loads the url in the href attribute.
..."/> <template match="/"> </template> </transform> </template> </generator> including the download count to include the download count in the output of the xslt transform sheet, we need to add an xslt <value-of> element to the template whose select attribute contains an xpath expression that points to the node containing the count.
...ox download count"> <template> <transform xmlns="http://www.w3.org/1999/xsl/transform" version="1.0"> <output method="text"/> <template match="/"> <value-of select="id('download-count')"/> <text> fx downloads</text> </template> </transform> </template> </generator> note that white space between xslt tags is not included in the xslt output, unlike in
html where that white space is collapsed to a single space, so make sure to prepend a space to the phrase in order to separate it from the download count.
...And 2 more matches
Editor Embedding Guide - Archive of obsolete content
ow editable immediately or when the document is done loading.
...derneath and the event listeners are all prepa if (ns_failed(rv)) return ns_error_failure; // we are not setup??!!
...prepa if (ns_failed(rv)) return ns_error_failure; // we are not setup??!!
...And 2 more matches
Clipboard - Archive of obsolete content
tentstringflavorstring) stringwrites data from jetpack to the clipboard.
...string) stringwrites data from jetpack to the clipboard.
...ed in that format.
...And 2 more matches
Clipboard - Archive of obsolete content
ntentstringflavorstring)writes data from jetpack to the clipboard.
...rstring)writes data from jetpack to the clipboard.
...d in that format.
...And 2 more matches
slideBar - Archive of obsolete content
slidebar is a reinvention of the old sidebar features of browsers.
...debar is a reinvention of the old sidebar features of browsers.
...ted its contents will be revealed from behind the current webpage.
...And 2 more matches
Clipboard - Archive of obsolete content
ntentstringflavorstring) stringwrites data from jetpack to the clipboard.
...rstring) stringwrites data from jetpack to the clipboard.
...d in that format.
...And 2 more matches
Install script template - Archive of obsolete content
installs to the current browser that is invoking the installation 2.
...econdary location on the windows desktop, in this case c:\winnt\system32\myplugin\ 3.
...n according to the specification: http://mozilla.org/projects/plugins/first-install-problem.
html and follows the plid specification: http://mozilla.org/projects/plugins/plugin-identifier.
html **/ // define some global variables var plugin_file = "npmyplugin.dll"; // this plugin consists of an xpt file because it is scriptable // http://mozilla.org/projects/plugins/scripting-plugins.
html var component_file = "npmypluginscriptable.xpt"; var plugin_size = 2000; // (dll file) reserve a little extra so it is not required to update too often var component_size = 10; // (xpi file) reserve a little extra so it is not required to update too often var software_name="cult3d mozilla viewer"; // plids (http://mozilla.org/projects/plugins/plugin-identifier.
html) are coined by vendors...
...And 2 more matches
Content Panels - Archive of obsolete content
« previousnext » in this section, we'll look at how to add panels that can display
html pages or other xul files.
...e the same throughout the interface.
...on.
...And 2 more matches
Introduction - Archive of obsolete content
ple, has portability as a main selling point.
...zilla browser to be installed to be able to run the application.
...e xul code on a web server and open it in firefox, as you would any other web page, however this is discouraged and was disabled in firefox 8.
...And 2 more matches
Archived Mozilla and build documentation - Archive of obsolete content
g separate versions of nanojit.
...a is not fully backwards-compatible with netscape navigator 4.x and microsoft internet explorer legacy code; for example, mozilla does not support <layer> as i will discuss later.
...ble layout regression tests changes in layout, parser and content code can have unintended side effects, also known as regressions.
...And 2 more matches
.htaccess ( hypertext access ) - Archive of obsolete content
e requested by the user without the need to write include statements in the file; you can have them automatically attached to all the files, whether at top or bottom, automatically through your .htaccess file.
... .htaccess file.
...end_file "/real/path/to/file/functions.php" # adds function.php at the top of requested document php_value auto_append_file "/real/path/to/file/footer.php" # adds footer.
html at bottom of requested document customized error responses : user can be directed to different pages depending on the error they caused or by the webserver.
...And 2 more matches
References - Archive of obsolete content
use them?
...ing web standards?
... lichtmaier complete css guide from westciv.com css lessons and tutorials from alsacreations
html and css lessons and tutorials from
htmldog.com preparing for standard-compliant browsers, part 1 from makiko itoh preparing for standard-compliant browsers, part 2 from makiko itoh javascript best practices lists 15 of the most frequent coding practices which create problems for javascript and d
html-driven webpages.
...And 2 more matches
XForms Repeat Element - Archive of obsolete content
> <setvalue ref="/my:lines/my:line[index('lineset')]/@name"/> <setvalue ref="/my:lines/my:line[index('lineset')]/price">0.00</setvalue> </action> </trigger> <trigger> <label>remove current item</label> <delete ev:event="domactivate" nodeset="/my:lines/my:line" at="index('lineset')"/> </trigger> attribute based repeat when using xforms within host languages like x
html, it is often necessary to create repeating structures within constructs such as
html:table.
... at="index('lineset')"/> </trigger> attribute based repeat when using xforms within host languages like x
html, it is often necessary to create repeating structures within constructs such as
html:table.
...to any element carrying these repeat attributes.
...And 2 more matches
XForms - Archive of obsolete content
obsolete since gecko 19 (firefox 19 / thunderbird 19 / seamonkey 2.16)this feature is obsolete.
... obsolete since gecko 19 (firefox 19 / thunderbird 19 / seamonkey 2.16)this feature is obsolete.
...xforms was removed from firefox in firefox 19.
...And 2 more matches
Async scripts for asm.js - Game development
rsing in about:config.
... <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 generates produces the latter.
...ment('script'); script.src = "file.js"; document.body.appendchild(script); (scripts created from script default to async.) the default
html shell emscripten generates produces the latter.
...And 2 more matches
Parse - MDN Web Docs Glossary: Definitions of Web-related terms
parsing means analyzing and converting a program into an internal format that a runtime environment can actually run, for example the javascript engine inside browsers.
... parsing means analyzing and converting a program into an internal format that a runtime environment can actually run, for example the javascript engine inside browsers.
... parsing means analyzing and converting a program into an internal format that a runtime environment can actually run, for example the javascript engine inside browsers.
...And 2 more matches
What is accessibility? - Learn web development
overview: accessibility next this article starts the module off with a good look at what accessibility is — this overview includes what groups of people we need to consider and why, what tools different people use to interact with the web, and how we can make accessibility part of our web development workflow.
... they have a visual impairment.
... information, or javascript.
...And 2 more matches
Cascade and inheritance - Learn web development
overview: building blocks next the aim of this lesson is to develop your understanding of some of the most fundamental concepts of css — the cascade, specificity, and inheritance — which control how css is applied to
html and how conflicts are resolved.
...y seem less immediately relevant and a little more academic than some other parts of the course, an understanding of these things will save you much pain later on!
...d a little more academic than some other parts of the course, an understanding of these things will save you much pain later on!
...And 2 more matches
Attribute selectors - Learn web development
previous overview: building blocks next as you know from your study of
html, elements can have attributes that give further detail about the element being marked up.
...xt as you know from your study of
html, elements can have attributes that give further detail about the element being marked up.
...of
html, elements can have attributes that give further detail about the element being marked up.
...And 2 more matches
CSS selectors - Learn web development
previous overview: building blocks next in css, selectors are used to target the
html elements on our web pages that we want to style.
...ents on our web pages that we want to style.
...to style.
...And 2 more matches
The box model - Learn web development
boxes is key to being able to create layouts with css, or to align items with other items.
...te layouts with css, or to align items with other items.
...values that your boxes can have, for example grid.
...And 2 more matches
CSS building blocks - Learn web development
s your goal.
... before starting this module, you should have: basic familiarity with using computers, and using the web passively (i.e.
...tains the following articles, which cover the most essential parts of the css language.
...And 2 more matches
CSS first steps - Learn web development
ding style sheets) is used to style and lay out web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.
...owards your goal.
...ites before starting this module, you should have: basic familiarity with using computers, and using the web passively (i.e.
...And 2 more matches
create fancy boxes - Learn web development
n the technical side, creating fancy boxes are all about mastering css border and background properties and how to apply them to a given box.
...apply them to a given box.
...erou's css patterns.
...And 2 more matches
What is a web server? - Learn web development
b page, a web site, a web server, and a search engine.
...d files as-is to your browser.
...e call it "dynamic" because the application server updates the hosted files before sending content to your browser via the http server.
...And 2 more matches
Using data attributes - Learn web development
html5 is designed with extensibility in mind for data that should be associated with a particular element but need not have any defined meaning.
...
html5 is designed with extensibility in mind for data that should be associated with a particular element but need not have any defined meaning.
...
html5 is designed with extensibility in mind for data that should be associated with a particular element but need not have any defined meaning.
...And 2 more matches
Functions — reusable blocks of code - Learn web development
a single task inside a defined block, and then call that code whenever you need it using a single short command — rather than having to type out the same code multiple times.
...nctions and methods.
...security and organization.
...And 2 more matches
Image gallery - Learn web development
module.
... the example, unzip it somewhere on your computer, and do the exercise locally to begin with.
...d paste the
html, css and javascript into one of these online editors.
...And 2 more matches
Fetching data from the server - Learn web development
el is that whenever you want to update any part of the page, for example, to display a new set of products or load a new page, you've got to load the entire page again.
...st our data from a database.
... we'll start our function by constructing a relative url pointing to the text file we want to load, as we'll need it later.
...And 2 more matches
Object building practice - Learn web development
vious overview: objects next in previous articles we looked at all the essential javascript object theory and syntax details, giving you a solid base to start from.
...ledge of these apis, and we hope that by the time you've finished this article you'll be interested in exploring them more.
...ted in exploring them more.
...And 2 more matches
Aprender y obtener ayuda - Learn web development
what you want to achieve through your learning.
...oming a senior web developer in three months.
...ty or college course to learn web development, then most of this planning is done for you — lucky you!
...And 2 more matches
Web performance - Learn web development
building websites requires
html, css, and javascript.
...s is known as web performance, and in this module you'll focus on the fundamentals of how to create performant websites.
...ns, knowing how to build applications is not a necessary pre-condition for understanding and measuring web performance.
...And 2 more matches
Learning area release notes - Learn web development
entials of web development tooling, including what kind of tools exist, the command line, package managers, and how to assemble your own functioning tool chain.
..., and how to assemble your own functioning tool chain.
...ch 2020 you'll now find "test your skills" assessments accompanying the articles in the following modules: css building blocks javascript first steps javascript building blocks introducing javascript objects january 2020 the
html forms module has been significantly updated: it has been retitled web forms, and moved out of the
html topic area to recognise that it covers more than just
html form elements — it also covers styling, validation, the basics of how to send data and process it on the server, and more besides.
...And 2 more matches
Dynamic behavior in Svelte: working with variables and props - Learn web development
eworks next now that we have our markup and styles ready we can start developing the required features for our svelte to-do list app.
...hat array, and try changing some of the todo object's completed property values, and even add a new todo object.
... edit <span class="visually-hidden">{todo.name}</span> </button> <button type="button" class="btn btn__danger"> delete <span class="visually-hidden">{todo.name}</span> </button> </div> </div> </li> {:else} <li>nothing to do here!</li> {/each} </ul> notice how we are using curly braces to embed javascript expressions in
html attributes, like we did with the checked and id attributes of the checkbox.
...And 2 more matches
Creating our first Vue component - Learn web development
ortant concepts such as calling components inside other components, passing data to them via props, and saving data state.
... you can find a finished version of the sample vue app code in our todo-vue repository.
...e.
...And 2 more matches
Introduction to cross browser testing - Learn web development
view: cross browser testing next this article starts the module off by providing an overview of the topic of (cross) browser testing, answering questions such as "what is cross browser testing?", "what are the most common types of problems you'll encounter?", and "what are the main approaches for testing, identifying, and fixing problems?" prerequisites: familiarity with the core
html, css, and javascript languages.
...cover defensive coding later in the module too.
... have already been fixed — for example if a bug is present in firefox release 49, but it is no longer there in firefox nightly (version 52), then they have fixed it.
...And 2 more matches
Setting up your own test automation environment - Learn web development
rowser testing in this article, we will teach you how to install your own automation environment and run your own tests using selenium/webdriver and a testing library such as selenium-webdriver for node.
... created earlier, for example: driver.get('http://www.google.com'); note: see the webdriver class reference for details of the features in this section and the ones below it.
...m'); note: see the webdriver class reference for details of the features in this section and the ones below it.
...And 2 more matches
Roll your own browser: An embedding how-to
t allows mozilla to be embedded into the konqueror browser.
...wer to galeon.
... for embedding the gecko layout engine.obsolete since gecko 7.0 llmozlib & ubrowser: a static library that allows you to embed gecko and render pages to memory.
...And 2 more matches
Introduction to Layout in Mozilla
dimensions, etc.
...is (doc shell, streams) content dll auto-registers a document loader factory (dlf) @mozilla.org/content-viewer-factory/view;1?type=text/
html all mime types mapped to the same class, nscontentdlf nsdocshell receives inbound content via nsdsuricontentlistener invokes nsidlf::createinstance, passes mime type to dlf nscontentdlf creates a ns
htmldocument object, invokes startdocumentload.
...… inherit vs.
...And 2 more matches
Localization content best practices
on notes localizers usually work on the localizable files without the context of the source files including the localized strings; it is important to add comments to the localizable files themselves, too.
...01d (\u201c and \u201d in javascript) are the left and right double quotation marks, respectively.
...arks, respectively.
...And 2 more matches
Investigating leaks using DMD heap scan mode
using the find_roots.py script from the heapgraph repository.
...[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).
...e=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).
...And 2 more matches
JSErrorReport
describes the format of a js error that is used either by the internal error reporting mechanism or by a user-defined error-reporting mechanism.
...d the error.
...har16_t ** arguments for the error message.
...And 2 more matches
Places Developer Guide
rkobserver) || iid.equals(ci.nsisupports)) { return this; } throw cr.ns_error_no_interface; }, }; // register the observer with the bookmarks service var bmsvc = cc["@mozilla.org/browser/nav-bookmarks-service;1"] .getservice(ci.nsinavbookmarksservice); bmsvc.addobserver(observer, false); // un-register the observer when done.
...ister the observer with the bookmarks service var bmsvc = cc["@mozilla.org/browser/nav-bookmarks-service;1"] .getservice(ci.nsinavbookmarksservice); bmsvc.addobserver(observer, false); // un-register the observer when done.
....nsinavbookmarksservice); bmsvc.addobserver(observer, false); // un-register the observer when done.
...And 2 more matches
nsIAccessibilityService
ble/public/nsiaccessibilityservice.idlscriptable please add a summary to this article.
...hunderbird 1.5 / seamonkey 1.0) inherits from: nsiaccessibleretrieval method overview nsiaccessible createouterdocaccessible(in nsidomnode anode); nsiaccessible createrootaccessible(in nsipresshell ashell, in nsidocument adocument); nsiaccessible create
html4buttonaccessible(in nsisupports aframe); nsiaccessible createhypertextaccessible(in nsisupports aframe); nsiaccessible create
htmlbraccessible(in nsisupports aframe); nsiaccessible create
htmlbuttonaccessible(in nsisupports aframe); nsiaccessible create
htmlaccessiblebymarkup(in nsiframe aframe, in nsiweakreference aweakshell, in nsidomnode adomnode); nsiaccessible create
htmlliaccessible(in nsisupports aframe, in nsisupports abulletframe, in astring abullettext); nsiaccessible create
htmlcheckboxaccessible(in nsisup...
... nsiaccessible create
htmlbuttonaccessible(in nsisupports aframe); nsiaccessible create
htmlaccessiblebymarkup(in nsiframe aframe, in nsiweakreference aweakshell, in nsidomnode adomnode); nsiaccessible create
htmlliaccessible(in nsisupports aframe, in nsisupports abulletframe, in astring abullettext); nsiaccessible create
htmlcheckboxaccessible(in nsisupports aframe); nsiaccessible create
htmlcomboboxaccessible(in nsidomnode anode, in nsiweakreference apresshell); nsiaccessible create
htmlgenericaccessible(in nsisupports aframe); nsiaccessible create
htmlgenericaccessible(in nsisupports aframe); nsiaccessible create
htmlhraccessible(in nsisupports aframe); nsiaccessible create
htmlimageaccessible(in nsisupports aframe); nsiaccessible create
htmllabelaccessible(in nsisupports ...
...And 2 more matches
nsIEditor
8, // outputpreformatted = 16, outputwrap = 32, // outputformatflowed = 64, outputabsolutelinks = 258, // outputencodew3centities = 256, outputcrlinebreak = 512, // outputlflinebreak = 1024, outputnoscriptcontent = 2048, // outputnoframescontent = 4096, outputnoformattinginpre = 8192, // outputencodebasicentities=16384, outputencodelatin1entities=32768, // outputencode
htmlentities=65536, outputpersistnbsp=131072 editorapi.outputtostring('text/
html', 2); editorapi.outputtostring('text/plain', 4); // output the body tag, body children and the
html end tag (</
html>).
...96, outputnoformattinginpre = 8192, // outputencodebasicentities=16384, outputencodelatin1entities=32768, // outputencode
htmlentities=65536, outputpersistnbsp=131072 editorapi.outputtostring('text/
html', 2); editorapi.outputtostring('text/plain', 4); // output the body tag, body children and the
html end tag (</
html>).
...ties=16384, outputencodelatin1entities=32768, // outputencode
htmlentities=65536, outputpersistnbsp=131072 editorapi.outputtostring('text/
html', 2); editorapi.outputtostring('text/plain', 4); // output the body tag, body children and the
html end tag (</
html>).
...And 2 more matches
nsIFilePicker
isting file and acknowledged that they want to overwrite the file filter constants these constants are used to create filters for commonly-used file types.
... want to overwrite the file filter constants these constants are used to create filters for commonly-used file types.
...te the file filter constants these constants are used to create filters for commonly-used file types.
...And 2 more matches
nsILoginManager
d by: @mozilla.org/login-manager;1.
...omponents.interfaces.nsiloginmanager); method overview void addlogin(in nsilogininfo alogin); nsiautocompleteresult autocompletesearch(in astring asearchstring, in nsiautocompleteresult apreviousresult, in nsidom
htmlinputelement aelement); unsigned long countlogins(in astring ahostname, in astring aactionurl, in astring ahttprealm); boolean fillform(in nsidom
htmlformelement 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([optional] out unsigned long count, [retval, array, size_is(count)] out wstring hostnames); void getalllogins([optional] out unsigned long count, [retval, array...
...ger.
...And 2 more matches
nsIWebContentHandlerRegistrar
ce as mailto handler the following code aims to add "outlook.com live mail" to list of webservice handlers.
...owser) { if (adomwindow.gbrowser.tabcontainer) { //adomwindow has tabs var tabs = adomwindow.gbrowser.tabcontainer.childnodes; for (var i = 0; i < tabs.length; i++) { console.log(tabs[i].linkedbrowser.contentwindow.location); if (tabs[i].linkedbrowser.contentwindow.location.hostname == myurihostname) {
htmlcontentwindow = tabs[i].linkedbrowser.contentwindow; break; //break for loop } } if (
htmlcontentwindow) { break; //break while loop } } else { //adomwindow doest have any tabs if (adomwindow.gbrowser.contentwindow.location.hostname == myurihostname) {
htmlcontentw...
...p } } else { //adomwindow doest have any tabs if (adomwindow.gbrowser.contentwindow.location.hostname == myurihostname) {
htmlcontentwindow = adomwindow.contentwindow; break; } } } else { //adomwindow is a popup window if (adomwindow.location.hostname == myurihostname) {
htmlcontentwindow = adomwindow; break; } } } // this section here is long and daunting, but its just finding a suitable contentwindow if (!
htmlcontentwindow) { throw new error('no suitable content window found, will not reigsterprotocolhandler.
...And 2 more matches
XPCOM Interface Reference
ozistoragebindingparamsarraymozistoragecompletioncallbackmozistorageconnectionmozistorageerrormozistoragefunctionmozistoragependingstatementmozistorageprogresshandlermozistorageresultsetmozistoragerowmozistorageservicemozistoragestatementmozistoragestatementcallbackmozistoragestatementparamsmozistoragestatementrowmozistoragestatementwrappermozistoragevacuumparticipantmozistoragevaluearraymozitxtto
htmlconvmozithirdpartyutilmozivisitinfomozivisitinfocallbackmozivisitstatuscallbacknsiabcardnsiaboutmodulensiabstractworkernsiaccelerometerupdatensiaccessnodensiaccessibilityservicensiaccessiblensiaccessiblecaretmoveeventnsiaccessiblecoordinatetypensiaccessibledocumentnsiaccessibleeditabletextnsiaccessibleeventnsiaccessiblehyperlinknsiaccessiblehypertextnsiaccessibleimagensiaccessibleprovidernsiaccess...
...omelementnsidomeventnsidomeventgroupnsidomeventlistenernsidomeventtargetnsidomfilensidomfileerrornsidomfileexceptionnsidomfilelistnsidomfilereadernsidomfontfacensidomfontfacelistnsidomgeogeolocationnsidomgeopositionnsidomgeopositionaddressnsidomgeopositioncallbacknsidomgeopositioncoordsnsidomgeopositionerrornsidomgeopositionerrorcallbacknsidomgeopositionoptionsnsidomglobalpropertyinitializernsidom
htmlaudioelementnsidom
htmlformelementnsidom
htmlmediaelementnsidom
htmlsourceelementnsidom
htmltimerangesnsidomjswindownsidommousescrolleventnsidommoznetworkstatsnsidommoznetworkstatsdatansidommoznetworkstatsmanagernsidommoztoucheventnsidomns
htmldocumentnsidomnavigatordesktopnotificationnsidomnodensidomofflineresourcelistnsidomorientationeventnsidomparsernsidomprogresseventnsidomserializernsidomsimpleges...
...lensifileinputstreamnsifileoutputstreamnsifilepickernsifileprotocolhandlernsifilespecnsifilestreamsnsifileurlnsifileutilitiesnsifileviewnsifocusmanagernsiformhistory2nsiframeloadernsiframeloaderownernsiframemessagelistenernsiframemessagemanagernsiframescriptloadernsigsettingscollectionnsigsettingsservicensigeolocationprovidernsigeolocationupdatensiglobalhistorynsiglobalhistory2nsiglobalhistory3nsi
htmleditornsihttpheaderlistenernsihapticfeedbacknsihttpactivitydistributornsihttpactivityobservernsihttpchannelnsihttpchannelinternalnsihttpheadervisitornsihttpservernsihttpupgradelistenernsiidnservicensiiframeboxobjectnsiiniparsernsiiniparserfactorynsiiniparserwriternsiioservicensiidleservicensiinprocesscontentframemessagemanagernsiinputstreamnsiinputstreamcallbacknsiinstalllocationnsiinterfacereques...
...And 2 more matches
Mozilla
'(select profile database)' pulldown, click 'go', select one of the tables listed in the left column and see the current contents of the database in the 'browse & search' tab.) gecko gecko is the name of the layout engine developed by the mozilla project.
...github.com/realityripple/uxp/blob/master/layout/base/nscssframeconstructor.cpp getting started with chat note that on 2nd march 2020, mozilla moved away from irc to matrix for its public channels, the irc server was shut down.
...ject is mozilla's project to build and enhance mathml support within firefox and other mozilla-based applications.
...And 2 more matches
All keyboard shortcuts - Firefox Developer Tools
ement ctrl + shift + c cmd + shift + c ctrl + shift + c node picker these shortcuts work while the node picker is active.
... node picker these shortcuts work while the node picker is active.
...utes.
...And 2 more matches
CSS Flexbox Inspector: Examine Flexbox layouts - Firefox Developer Tools
the flexbox inspector allows you to examine css flexbox layouts using the firefox devtools, which is useful for discovering flex containers on a page, examining and modifying them, debugging layout issues, and more.
... you to examine css flexbox layouts using the firefox devtools, which is useful for discovering flex containers on a page, examining and modifying them, debugging layout issues, and more.
...s flexbox layouts using the firefox devtools, which is useful for discovering flex containers on a page, examining and modifying them, debugging layout issues, and more.
...And 2 more matches
UI Tour - Firefox Developer Tools
this article is a quick tour of the main sections of the page inspector's user interface.
...ector.
...e main toolbox toolbar, so it's immediately accessible from any tool, not just the inspector.
...And 2 more matches
Attr.namespaceURI - Web APIs
ue" && attribute.namespaceuri == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") { // this is a xul value } notes this is not a computed value that is the result of a namespace lookup based on an examination of the namespace declarations in scope.
...e.namespaceuri == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") { // this is a xul value } notes this is not a computed value that is the result of a namespace lookup based on an examination of the namespace declarations in scope.
.../there.is.only.xul") { // this is a xul value } notes this is not a computed value that is the result of a namespace lookup based on an examination of the namespace declarations in scope.
...And 2 more matches
BaseAudioContext.createStereoPanner() - Web APIs
the createstereopanner() method of the baseaudiocontext interface creates a stereopannernode, which can be used to apply stereo panning to an audio source.
...moved.
...ider left and right while the music is playing pans the music across to the left and right speakers of the output, respectively.
...And 2 more matches
CanvasRenderingContext2D.arcTo() - Web APIs
tive.
... 130, 5, 0, 2 * math.pi); // control point one ctx.arc(50, 20, 5, 0, 2 * math.pi); // control point two ctx.fill(); result in this example, the path created by arcto() is thick and black.
... labelpoint(p0); labelpoint(p1); labelpoint(p2); ctx.stroke(); result result of a large radius if you use a relatively large radius, the arc may appear in a place you didn't expect.
...And 2 more matches
CanvasRenderingContext2D.createPattern() - Web APIs
draw anything to the canvas directly.
...eates must be assigned to the canvasrenderingcontext2d.fillstyle or canvasrenderingcontext2d.strokestyle properties, after which it is applied to any subsequent drawing.
... or canvasrenderingcontext2d.strokestyle properties, after which it is applied to any subsequent drawing.
...And 2 more matches
DataTransfer.setDragImage() - Web APIs
l offset within the image.
...t within the image.
...d(data)); } </script> <body> <h1>example of <code>datatransfer.setdragimage()</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </
html> specifications specification status comment
html living standardthe definition of 'setdragimage()' in that specification.
...And 2 more matches
DataTransferItem.getAsFile() - Web APIs
ult(); var data = event.datatransfer.items; for (var i = 0; i < data.length; i += 1) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/
html'))) { // drag data item is
html console.log("...
....length; i += 1) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/
html'))) { // drag data item is
html console.log("...
... (data[i].type.match('^text/uri-list'))) { // drag data item is uri console.log("...
...And 2 more matches
DataTransferItem.getAsString() - Web APIs
efault(); var data = ev.datatransfer.items; for (var i = 0; i < data.length; i += 1) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/
html'))) { // drag data item is
html console.log("...
....length; i += 1) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/
html'))) { // drag data item is
html console.log("...
... (data[i].type.match('^text/uri-list'))) { // drag data item is uri console.log("...
...And 2 more matches
DataTransferItem.webkitGetAsEntry() - Web APIs
oth.
...atransferitem.webkitgetasentry(); parameters none.
...hat to read all files in a directory, readentries needs to be called repeatedly until it returns an empty array.
...And 2 more matches
DataTransferItemList.DataTransferItem() - Web APIs
shows how to use drag and drop.
...items; // loop through the dropped items and log their data for (var i = 0; i < data.length; i++) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/
html'))) { // drag data item is
html data[i].getasstring(function (s){ console.log("...
...ata[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/
html'))) { // drag data item is
html data[i].getasstring(function (s){ console.log("...
...And 2 more matches
Document: DOMContentLoaded event - Web APIs
the domcontentloaded event fires when the initial
html document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
...use load where domcontentloaded would be more appropriate.
...lete domcontentloaded may fire before your script has a chance to run, so it is wise to check before adding a listener.
...And 2 more matches
Document.all - Web APIs
the document interface's read-only all property returns an
htmlallcollection rooted at the document node.
... the document interface's read-only all property returns an
htmlallcollection rooted at the document node.
... the document interface's read-only all property returns an
htmlallcollection rooted at the document node.
...And 2 more matches
Document.getElementsByClassName() - Web APIs
e document object, the complete document is searched, including the root node.
...lasses: document.getelementsbyclassname('red test') get all elements that have a class of 'test', inside of an element that has the id of 'main': document.getelementbyid('main').getelementsbyclassname('test') get the first element with a class of 'test', or undefined if there is no matching element: document.getelementsbyclassname('test')[0] we can also use methods of array.prototype on any
htmlcollection by passing the
htmlcollection as the method's this value.
...sing the
htmlcollection as the method's this value.
...And 2 more matches
Document.head - Web APIs
the head read-only property of the document interface returns the <head> element of the current document.
... the head read-only property of the document interface returns the <head> element of the current document.
...title> </head> <script> var thehead = document.head; console.log(thehead.id); // "my-document-head"; console.log( thehead === document.queryselector("head") ); // true </script> notes document.head is read-only.
...And 2 more matches
Document.images - Web APIs
the images read-only property of the document interface returns a collection of the images in the current
html document.
... the images read-only property of the document interface returns a collection of the images in the current
html document.
... the images read-only property of the document interface returns a collection of the images in the current
html document.
...And 2 more matches
Element.getAttributeNS() - Web APIs
ight="40"> <circle id="target" cx="12" cy="12" r="10" stroke="#444" stroke-width="2" fill="none" test:foo="hello namespaced attribute!"/> <script type="text/javascript"> var ns = 'http://www.example.com/2014/test'; var circle = document.getelementbyid( 'target' ); console.log( 'attribute test:foo: "' + circle.getattributens( ns, 'foo' ) + '"' ); </script> </svg> in an
html5 document the attribute has to be accessed with test:foo since namespaces are not supported.
...t:foo="hello namespaced attribute!"/> <script type="text/javascript"> var ns = 'http://www.example.com/2014/test'; var circle = document.getelementbyid( 'target' ); console.log( 'attribute test:foo: "' + circle.getattributens( ns, 'foo' ) + '"' ); </script> </svg> in an
html5 document the attribute has to be accessed with test:foo since namespaces are not supported.
...hello namespaced attribute!"/> <script type="text/javascript"> var ns = 'http://www.example.com/2014/test'; var circle = document.getelementbyid( 'target' ); console.log( 'attribute test:foo: "' + circle.getattributens( ns, 'foo' ) + '"' ); </script> </svg> in an
html5 document the attribute has to be accessed with test:foo since namespaces are not supported.
...And 2 more matches
Element.getElementsByClassName() - Web APIs
the element method getelementsbyclassname() returns a live
htmlcollection which contains every descendant element which has the specified class name or names.
... which has the specified class name or names.
...ds all elements that have a class of test, which are also a descendant of the element that has the id of main: document.getelementbyid('main').getelementsbyclassname('test'); matching multiple classes to find elements whose class lists include both the red and test classes: element.getelementsbyclassname('red test'); examining the results you can use either the item() method on the returned
htmlcollection or standard array syntax to examine individual elements in the collection.
...And 2 more matches
Element.name - Web APIs
name gets or sets the name property of an element in the dom.
...m>, <select>, and <textarea>.
...he name property doesn't exist for other elements; unlike tagname and nodename, it is not a property of the node, element or
htmlelement interfaces.
...And 2 more matches
Element.namespaceURI - Web APIs
e == "browser" && element.namespaceuri == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") { // this is a xul browser } notes this is not a computed value that is the result of a namespace lookup based on an examination of the namespace declarations in scope.
... element.namespaceuri == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") { // this is a xul browser } notes this is not a computed value that is the result of a namespace lookup based on an examination of the namespace declarations in scope.
.../gatekeeper/there.is.only.xul") { // this is a xul browser } notes this is not a computed value that is the result of a namespace lookup based on an examination of the namespace declarations in scope.
...And 2 more matches
Event.eventPhase - Web APIs
constants event phase constants these values describe which phase the event flow is currently being evaluated.
...stants event phase constants these values describe which phase the event flow is currently being evaluated.
... up through the target's ancestors in reverse order, starting with the parent, and eventually reaching the containing window.
...And 2 more matches
Event.preventDefault() - Web APIs
specifying cancelable: true has no effect.
...ggling a checkbox is the default action of clicking on a checkbox.
...ease click on the checkbox control.</p> <form> <label for="id-checkbox">checkbox:</label> <input type="checkbox" id="id-checkbox"/> </form> <div id="output-box"></div> result stopping keystrokes from reaching an edit field the following example demonstrates how invalid text input can be stopped from reaching the input field with preventdefault().
...And 2 more matches
FileSystemDirectoryReader.readEntries() - Web APIs
optional a callback function which is called if an error occurs while reading from the directory.
...ck function which is called if an error occurs while reading from the directory.
...hat to read all files in a directory, readentries needs to be called repeatedly until it returns an empty array.
...And 2 more matches
GlobalEventHandlers.ontransitioncancel - Web APIs
"none".
...ransition is stopped before it has run to completion, e.g.
...mple, we use the transitionrun and transitionend events to detect when the transition begins and ends, to cause a text update to occur during the transition.
...And 2 more matches
GlobalEventHandlers.ontransitionend - Web APIs
n is by changing the value of the transition-property attribute which applies to the target.
...ng the value of the transition-property attribute which applies to the target.
...nsition-delay doesn't affect the value of elapsedtime, which is zero until the delay period ends and the animation begins.
...And 2 more matches
Option() - Web APIs
the option() constructor creates a new
htmloptionelement.
... the option() constructor creates a new
htmloptionelement.
... specified, a default value of false is used.
...And 2 more matches
History.pushState() - Web APIs
in an
html document, the history.pushstate() method adds a state to the browser's session history stack.
...based approach, you need to encode all of the relevant data into a short string.
...ses a hashchange event to be fired, even if the new url differs from the old url only in its hash.
...And 2 more matches
IDBObjectStore - Web APIs
stores, from updating the data structure with idbobjectstore.createindex inside an onupgradeneeded function, to adding a new item to our object store with idbobjectstore.add.
...tabase in db.
...objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "day", { unique: false }); objectstore.createindex("month", "month", { unique: false }); objectstore.createindex("year", "year", { unique: false }); objectstore.createindex("notified", "notified", { unique: false }); note.inner
html += '<li>object store created.</li>'; }; // create a new item to add in to the object store var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: 'december', year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing...
...And 2 more matches
Location - Web APIs
the location interface represents the location (url) of the object it is linked to.
...ively.
...n
html <span id="href" title="href"><span id="protocol" title="protocol">http:</span>//<span id="host" title="host"><span id="hostname" title="hostname">example.org</span>:<span id="port" title="port">8888</span></span><span id="pathname" title="pathname">/foo/bar</span><span id="search" title="search">?q=baz</span><span id="hash" title="hash">#bang</span></span> css
html, body {height:100%;}
html {display:table; width:100%;} body {display:table-cell; text-align:center; vertical-align:middle; font-family:georgia; font-size:230%; line-height:1em; white-space:nowrap;} [title] {position:relative; display:inline-block; box-sizing:border-box; /*border-bottom:.5em solid;*/ line-height:2em; cursor:pointer;} [title]:before {content:attr(title); font-family:monospace; position:absolute; top:100%;...
...And 2 more matches
MediaDevices.ondevicechange - Web APIs
hen is called any time the device list changes.
...er: 1px solid black; list-style-type: none; margin-top: 2px; padding: 6px; } javascript content other code below is other code which, while needed to make this example work, isn'tt related directly to ondevicechange, so we won't go into any detail.
...tbyid("videolist"); getting and drawing the device list now let's take a look at updatedevicelist() itself.
...And 2 more matches
Recording a media element - Web APIs
while the article using the mediastream recording api demonstrates using the mediarecorder interface to capture a mediastream generated by a hardware device, as returned by navigator.mediadevices.getusermedia(), you can also use an
html media element (namely <audio> or <video>) as the source of the mediastream to be recorded.
... while the article using the mediastream recording api demonstrates using the mediarecorder interface to capture a mediastream generated by a hardware device, as returned by navigator.mediadevices.getusermedia(), you can also use an
html media element (namely <audio> or <video>) as the source of the mediastream to be recorded.
...ticle, we'll look at an example that does just that.
...And 2 more matches
Capabilities, constraints, and settings - Web APIs
acingmode.
...ts by editing the source code describing the constraint sets for audio and video tracks.
...byid("stopbutton").addeventlistener("click", function() { if (videotrack) { videotrack.stop(); } if (audiotrack) { audiotrack.stop(); } videotrack = audiotrack = null; videoelement.srcobject = null; }); this simply stops the active tracks, sets the videotrack and audiotrack variables to null so we know they're gone, and removes the stream from the <video> element by setting
htmlmediaelement.srcobject to null.
...And 2 more matches
Node.namespaceURI - Web APIs
name == "browser" && node.namespaceuri == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") { // this is a xul browser } notes this is not a computed value that is the result of a namespace lookup based on an examination of the namespace declarations in scope.
... && node.namespaceuri == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") { // this is a xul browser } notes this is not a computed value that is the result of a namespace lookup based on an examination of the namespace declarations in scope.
.../gatekeeper/there.is.only.xul") { // this is a xul browser } notes this is not a computed value that is the result of a namespace lookup based on an examination of the namespace declarations in scope.
...And 2 more matches
PageTransitionEvent - Web APIs
-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">pagetransitionevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, event.
...s,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">pagetransitionevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, event.
...o,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">pagetransitionevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties this interface also inherits properties from its parent, event.
...And 2 more matches
Range.createContextualFragment() - Web APIs
the range.createcontextualfragment() method returns a documentfragment by invoking the
html fragment parsing algorithm or the xml fragment parsing algorithm with the start of the range (the parent of the selected node) as the context node.
... the range.createcontextualfragment() method returns a documentfragment by invoking the
html fragment parsing algorithm or the xml fragment parsing algorithm with the start of the range (the parent of the selected node) as the context node.
... the range.createcontextualfragment() method returns a documentfragment by invoking the
html fragment parsing algorithm or the xml fragment parsing algorithm with the start of the range (the parent of the selected node) as the context node.
...And 2 more matches
SVGElement - Web APIs
troke-width="2px" /><text x="431" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">svgelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties also inherits properties from: documentandelementeventhandlers, element, elementcssinlinestyle, globaleventhandlers,
htmlorforeignelement, svgelementinstance svgelement.datasetread only a domstringmap object which provides a list of key/value pairs of named data attributes which correspond to custom data attributes attached to the element.
...mentcssinlinestyle, globaleventhandlers,
htmlorforeignelement, svgelementinstance svgelement.datasetread only a domstringmap object which provides a list of key/value pairs of named data attributes which correspond to custom data attributes attached to the element.
...inlinestyle, globaleventhandlers,
htmlorforeignelement, svgelementinstance svgelement.datasetread only a domstringmap object which provides a list of key/value pairs of named data attributes which correspond to custom data attributes attached to the element.
...And 2 more matches
Using Service Workers - Web APIs
yfill like the one available in google's topeka demo, or perhaps store your assets in indexeddb.
...m responses to requests now you’ve got your site assets cached, you need to tell service workers to do something with the cached content.
...dly neighbourhood service worker!'); this more complex response below shows that you can optionally pass a set of headers in with your response, emulating standard http response headers.
...And 2 more matches
StereoPannerNode.pan - Web APIs
alue can range between -1 (full left pan) and 1 (full right pan).
...moved.
...ider left and right while the music is playing pans the music across to the left and right speakers of the output, respectively.
...And 2 more matches
StereoPannerNode - Web APIs
" constructor stereopannernode() creates a new instance of a stereopannernode object.
...moved.
...ider left and right while the music is playing pans the music across to the left and right speakers of the output, respectively.
...And 2 more matches
validityState.badInput - Web APIs
this is unsupported in internet explorer, any non-numeric value will be dismissed from the field if it is a number input.
... <input type="number" id="age"> var input = document.getelementbyid("age"); if (input.validity.badinput) { console.log("bad input detected…"); } else { console.log("content of input ok."); } specifications specification status comment
html living standardthe definition of 'validitystate.badinput' in that specification.
... detected…"); } else { console.log("content of input ok."); } specifications specification status comment
html living standardthe definition of 'validitystate.badinput' in that specification.
...And 2 more matches
VideoPlaybackQuality - Web APIs
a videoplaybackquality object is returned by the
htmlvideoelement.getvideoplaybackquality() method and contains metrics that can be used to determine the playback quality of a video.
...lity of a video.
...restimestamp containing the time in miliseconds between the start of the navigation and the creation of the object.
...And 2 more matches
WebGLRenderingContext.commit() - Web APIs
the webglrenderingcontext.commit() method pushes frames back to the original
htmlcanvaselement, if the context is not directly fixed to a specific canvas.
... the webglrenderingcontext.commit() method pushes frames back to the original
htmlcanvaselement, if the context is not directly fixed to a specific canvas.
... the webglrenderingcontext.commit() method pushes frames back to the original
htmlcanvaselement, if the context is not directly fixed to a specific canvas.
...And 2 more matches
Window: beforeunload event - Web APIs
ost browsers.
...racted with, or may even not display them at all.
...ttaching an event handler/listener to window or document's beforeunload event prevents browsers from using in-memory page navigation caches, like firefox's back-forward cache or webkit's page cache.
...And 2 more matches
Window.menubar - Web APIs
the window.menubar property returns the menubar object, whose visibility can be checked.
... the window.menubar property returns the menubar object, whose visibility can be checked.
...indow.menubar property returns the menubar object, whose visibility can be checked.
...And 2 more matches
Window.open() - Web APIs
xisting browsing context (window, <iframe> or tab) with the specified name.
...n-existent on the user's browser, then the onclick event handler is ignored and the browser loads the referenced resource in the target frame or window that has the name "promotefirefoxwindowname".
...pt console saying "error: uncaught exception: permission denied to get property <property_name or method_name>.
...And 2 more matches
Window: popstate event - Web APIs
new-entry has a different document object than current-entry, the browsing context is updated so that its document property refers to the document referred to by new-entry, and the context's name is updated to match the context name of the now-current document.
...sent to the document.
...ill generate logs as indicated: window.addeventlistener('popstate', (event) => { console.log("location: " + document.location + ", state: " + json.stringify(event.state)); }); history.pushstate({page: 1}, "title 1", "?page=1"); history.pushstate({page: 2}, "title 2", "?page=2"); history.replacestate({page: 3}, "title 3", "?page=3"); history.back(); // logs "location: http://example.com/example.
html?page=1, state: {"page":1}" history.back(); // logs "location: http://example.com/example.
html, state: null" history.go(2); // logs "location: http://example.com/example.
html?page=3, state: {"page":3}" the same example using the onpopstate event handler property: window.onpopstate = function(event) { console.log("location: " + document.location + ", state: " + json.stringify(event.state)); }...
...And 2 more matches
Window.self - Web APIs
} furthermore, when executing in the active document of a browsing context, window is a reference to the current global object and thus all of the following are equivalent: var w1 = window; var w2 = self; var w3 = window.window; var w4 = window.self; // w1, w2, w3, w4 all strictly equal, but only w2 will function in workers specifications specification status comment
html living standardthe definition of 'window.self' in that specification.
...s all of the following are equivalent: var w1 = window; var w2 = self; var w3 = window.window; var w4 = window.self; // w1, w2, w3, w4 all strictly equal, but only w2 will function in workers specifications specification status comment
html living standardthe definition of 'window.self' in that specification.
...wing are equivalent: var w1 = window; var w2 = self; var w3 = window.window; var w4 = window.self; // w1, w2, w3, w4 all strictly equal, but only w2 will function in workers specifications specification status comment
html living standardthe definition of 'window.self' in that specification.
...And 2 more matches
Window: unload event - Web APIs
n the following state: all the resources still exist (img, iframe etc.) nothing is visible anymore to the end user ui interactions are ineffective (window.open, alert, confirm, etc.) an error won't stop the unloading workflow please note that the unload event also follows the document tree: parent frame unload will happen before child frame unload (see example below).
...ollowing state: all the resources still exist (img, iframe etc.) nothing is visible anymore to the end user ui interactions are ineffective (window.open, alert, confirm, etc.) an error won't stop the unloading workflow please note that the unload event also follows the document tree: parent frame unload will happen before child frame unload (see example below).
...ad (see example below).
...And 2 more matches
Window.window - Web APIs
ent location.
...ir reference to the window at will, they would not be able to do this if they had hard-coded a reference to "window".
...e window at will, they would not be able to do this if they had hard-coded a reference to "window".
...And 2 more matches
WindowEventHandlers.onbeforeunload - Web APIs
event handlers unless the page has been interacted with.
... the javascript may stop when leaving and then navigating back to the page.
... can bind to window.onbeforeunload to prevent the browser from fully caching the page.
...And 2 more matches
WindowEventHandlers.onhashchange - Web APIs
the windoweventhandlers.onhashchange property of the windoweventhandlers mixin is the eventhandler for processing hashchange events.
... the windoweventhandlers.onhashchange property of the windoweventhandlers mixin is the eventhandler for processing hashchange events.
...){ var lasturl = document.url; window.addeventlistener("hashchange", function(event){ object.defineproperty(event, "oldurl", {enumerable:true,configurable:true,value:lasturl}); object.defineproperty(event, "newurl", {enumerable:true,configurable:true,value:document.url}); lasturl = document.url; }); }()); specifications specification status comment
html living standardthe definition of 'onhashchange' in that specification.
...And 2 more matches
WindowOrWorkerGlobalScope.atob() - Web APIs
throws if encodeddata is not valid base64.
... you can use a polifill from https://github.com/maxart2501/base64-js/blob/master/base64.js for browsers that don't support it.
...that don't support it.
...And 2 more matches
WindowOrWorkerGlobalScope.btoa() - Web APIs
ring.fromcharcode(...new uint16array(bytes.buffer)); } const decoded = atob(encoded); const original = frombinary(decoded); console.log(original); // ☸☹☺☻☼☾☿ polyfill you can use a polifill from https://github.com/maxart2501/base64-js/blob/master/base64.js for browsers that don't support it.
... you can use a polifill from https://github.com/maxart2501/base64-js/blob/master/base64.js for browsers that don't support it.
...that don't support it.
...And 2 more matches
XMLHttpRequest.responseXML - Web APIs
the xmlhttprequest.responsexml read-only property returns a document containing the
html or xml retrieved by the request; or null if the request was unsuccessful, has not yet been sent, or if the data can't be parsed as xml or
html.
... the xmlhttprequest.responsexml read-only property returns a document containing the
html or xml retrieved by the request; or null if the request was unsuccessful, has not yet been sent, or if the data can't be parsed as xml or
html.
... the request; or null if the request was unsuccessful, has not yet been sent, or if the data can't be parsed as xml or
html.
...And 2 more matches
Web APIs
fications this is a list of all the apis that are available.
...ntrysync filesystemfileentry filesystemflags filesystemsync focusevent fontface fontfaceset fontfacesetloadevent formdata formdataentryvalue formdataevent fullscreenoptions g gainnode gamepad gamepadbutton gamepadevent gamepadhapticactuator geolocation geolocationcoordinates geolocationposition geolocationpositionerror geometryutils gestureevent globaleventhandlers gyroscope h
htmlanchorelement
htmlareaelement
htmlaudioelement
htmlbrelement
htmlbaseelement
htmlbasefontelement
htmlbodyelement
htmlbuttonelement
htmlcanvaselement
htmlcollection
htmlcontentelement
htmldlistelement
htmldataelement
htmldatalistelement
htmldetailselement
htmldialogelement
htmldivelement
htmldocument
htmlelement
htmlembedelement
htmlfieldsetelement
htmlfontelement
htmlformcontrolscollection...
...nchorelement
htmlareaelement
htmlaudioelement
htmlbrelement
htmlbaseelement
htmlbasefontelement
htmlbodyelement
htmlbuttonelement
htmlcanvaselement
htmlcollection
htmlcontentelement
htmldlistelement
htmldataelement
htmldatalistelement
htmldetailselement
htmldialogelement
htmldivelement
htmldocument
htmlelement
htmlembedelement
htmlfieldsetelement
htmlfontelement
htmlformcontrolscollection
htmlformelement
htmlframesetelement
htmlhrelement
htmlheadelement
htmlheadingelement
htmlhtmlelement
htmlhyperlinkelementutils
htmliframeelement
htmlimageelement
htmlinputelement
htmlisindexelement
htmlkeygenelement
htmllielement
htmllabelelement
htmllegendelement
htmllinkelement
htmlmapelement
htmlmarqueeelement
htmlmediaelement
htmlmenuelement
htmlmenuitemelement
htmlmetaelement
htmlmete...
...And 2 more matches
ARIA live regions - Accessibility
e.
...owser/at).
... clock as an illustration of aria-atomic, consider a site with a simple clock, showing hours and minutes.
...And 2 more matches
ARIA: List role - Accessibility
s as children, with each group having one or more listitems as children.
...bjects, limited to list items when nested in a list, not important enough to have their own place in a pages table of contents.
...n a pages table of contents.
...And 2 more matches
Architecture - Accessibility
their text is actually exposed in their parent nshypertextaccessible via nsiaccessibletext.
...xtaccessible via nsiaccessibletext.
...-text child inside a container that also has text.
...And 2 more matches
Understandable - Accessibility
success criteria how to conform to the criteria practical resource 3.1.1 language of page (a) the default human language of each web page should be detectable via code.
...ven technical documentation like programming tutorials, unless there is a good reason not to (e.g.
...dentification (aa) controls or components that have the same functionality should be identified in the same way across different pages or views.
...And 2 more matches
Accessibility
learning area contains modern, up-to-date tutorials covering accessibility essentials: what is accessibility?
...ticle starts off the module with a good look at what accessibility actually is — this includes what groups of people we need to consider and why, what tools different people use to interact with the web, and how we can make accessibility part of our web development workflow.
...what groups of people we need to consider and why, what tools different people use to interact with the web, and how we can make accessibility part of our web development workflow.
...And 2 more matches
::before (:before) - CSS: Cascading Style Sheets
tax */ ::before /* css2 syntax */ :before note: css3 introduced the ::before notation (with two colons) to distinguish pseudo-classes from pseudo-elements.
...ing ::before pseudo-elements is to provide quotation marks.
...re the orange box is.</span> css .ribbon { background-color: #5bc8f7; } .ribbon::before { content: "look at this orange box."; background-color: #ffba10; border-color: black; border-style: dotted; } result to-do list in this example we will create a simple to-do list using pseudo-elements.
...And 2 more matches
:checked - CSS: Cascading Style Sheets
/ :checked { margin-left: 25px; border: 1px solid blue; } the user can engage this state by checking/selecting an element, or disengage it by unchecking/deselecting the element.
...heckbox element, when checked */ input[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.
... you can use the :checked pseudo-class to build an image gallery with full-size images that show only when the user clicks on a thumbnail.
...And 2 more matches
:default - CSS: Cascading Style Sheets
the :default css pseudo-class selects form elements that are the default in a group of related elements.
...elect>s can have more than one selected option, so all will match :default.
...label for="summer">summer</label> <input type="radio" name="season" id="fall"> <label for="fall">fall</label> <input type="radio" name="season" id="winter"> <label for="winter">winter</label> </fieldset> css input:default { box-shadow: 0 0 2px 1px coral; } input:default + label { color: coral; } result specifications specification status comment
html living standardthe definition of ':default' in that specification.
...And 2 more matches
:indeterminate - CSS: Cascading Style Sheets
the :indeterminate css pseudo-class represents any form element whose state is indeterminate, such as checkboxes which have their
html indeterminate attribute set to true, radio buttons which are members of a group in which all radio buttons are unchecked, and indeterminate <progress> elements.
... <input type="checkbox"> elements whose indeterminate property is set to true by javascript <input type="radio"> elements, when all radio buttons with the same name value in the form are unchecked <progress> elements in an indeterminate state syntax :indeterminate examples checkbox & radio button this example applies special styles to the labels associated with indeterminate form fields.
...kbox"> <label for="checkbox">this label starts out lime.</label> </div> <div> <input type="radio" id="radio"> <label for="radio">this label starts out lime.</label> </div> css input:indeterminate + label { background: lime; } javascript var inputs = document.getelementsbytagname("input"); for (var i = 0; i < inputs.length; i++) { inputs[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.
...And 2 more matches
:read-only - CSS: Cascading Style Sheets
the other hand is used to provide some nicer styling to the editable <textarea>.
... cannot be edited by the user.
...aph is not editable; it is read-only.</p> p { font-size: 150%; padding: 5px; border-radius: 5px; } p:read-only { background-color: red; color: white; } p:read-write { background-color: lime; } specifications specification status comment
html living standardthe definition of ':read-only' in that specification.
...And 2 more matches
:read-write - CSS: Cascading Style Sheets
the other hand is used to provide some nicer styling to the editable <textarea>.
...ith contenteditable set on it.
...ph is not editable; it is read-only.</p> p { font-size: 150%; padding: 5px; border-radius: 5px; } p:read-only { background-color: red; color: white; } p:read-write { background-color: lime; } specifications specification status comment
html living standardthe definition of ':read-write' in that specification.
...And 2 more matches
:root - CSS: Cascading Style Sheets
the :root css pseudo-class matches the root element of a tree representing the document.
... the :root css pseudo-class matches the root element of a tree representing the document.
... the :root css pseudo-class matches the root element of a tree representing the document.
...And 2 more matches
:target - CSS: Cascading Style Sheets
the :target css pseudo-class represents a unique element (the target element) with an id matching the url's fragment.
...nts to an element called section2: http://www.example.com/index.
html#section2 the following element would be selected by a :target selector when the current url is equal to the above: <section id="section2">example</section> syntax :target examples a table of contents the :target pseudo-class can be used to highlight the portion of a page that has been linked to from a table of contents.
... pure-css lightbox you can use the :target pseudo-class to create a lightbox without using any javascript.
...And 2 more matches
Stacking with floated blocks - CSS: Cascading Style Sheets
for floated blocks, the stacking order is a bit different.
... for floated blocks, the stacking order is a bit different.
... can see in the example below, the background and border of the non-positioned block (div #4) is completely unaffected by floating blocks, but the content is affected.
...And 2 more matches
Understanding CSS z-index - CSS: Cascading Style Sheets
in the most basic cases,
html pages can be considered two-dimensional, because text, images, and other elements are arranged on the page without overlapping.
...).
...explain those rules, with some simplification and several examples.
...And 2 more matches
Pseudo-classes - CSS: Cascading Style Sheets
-of-type() :nth-of-type() :only-child :only-of-type :optional :out-of-range :past :placeholder-shown :read-only :read-write :required :right :root :scope :state() :target :target-within :user-invalid :valid :visited :where() specifications specification status comment fullscreen api living standard defined :fullscreen.
...past :placeholder-shown :read-only :read-write :required :right :root :scope :state() :target :target-within :user-invalid :valid :visited :where() specifications specification status comment fullscreen api living standard defined :fullscreen.
...en particular selectors match
html elements.
...And 2 more matches
background-clip - CSS: Cascading Style Sheets
e a visual effect when the border has transparent regions or partially opaque regions (due to border-style or border-image); otherwise, the border masks the difference.
... area, the background-clip property has no effect when specified on it.
...t is none and its background-color is transparent, user agents must instead propagate the computed values of the background properties from that element’s first
html <body> child element.
...And 2 more matches
box-orient - CSS: Cascading Style Sheets
ox-orient: horizontal; box-orient: vertical; box-orient: inline-axis; box-orient: block-axis; /* global values */ box-orient: inherit; box-orient: initial; box-orient: unset; syntax the box-orient property is specified as one of the keyword values listed below.
...-orient: block-axis; /* global values */ box-orient: inherit; box-orient: initial; box-orient: unset; syntax the box-orient property is specified as one of the keyword values listed below.
...orizontal the box lays out its contents horizontally.
...And 2 more matches
hyphens - CSS: Cascading Style Sheets
ely, hyphenate at manually-specified points within the text, or let the browser automatically insert hyphens where appropriate.
...ords at appropriate hyphenation points, following whatever rules it chooses.
...potential line break points within text: u+2010 (hyphen) the "hard" hyphen character indicates a visible line break opportunity.
...And 2 more matches
<length> - CSS: Cascading Style Sheets
lly the height of lowercase letters in the font; 1ex ≈ 0.5em in many fonts.
...erty of the element on which it is used, converted to an absolute length.
...interpolation is determined by the timing function associated with the animation.
...And 2 more matches
Video player styling basics - Developer guides
in the previous cross browser video player article we described how to build a cross-browser
html5 video player using the media and fullscreen apis.
...t how to style this custom player, including making it responsive.
...onsive.
...And 2 more matches
Developer guides
these articles provide how-to information to help make use of specific web technologies and apis.
... these articles provide how-to information to help make use of specific web technologies and apis.
... these articles provide how-to information to help make use of specific web technologies and apis.
...And 2 more matches
User-Agent - HTTP
indicates the browser is firefox, and provides the version (such as "17.0").
...illa/5.0 (windows nt 6.1; win64; x64; rv:47.0) gecko/20100101 firefox/47.0 mozilla/5.0 (macintosh; intel mac os x x.y; rv:42.0) gecko/20100101 firefox/42.0 chrome ua string the chrome (or chromium/blink-based engines) user agent string is similar to firefox’s.
...firefox’s.
...And 2 more matches
HTTP Index - HTTP
this page lists all mdn http pages along with their summary and tags.
... two requests.
...ent is allowed to gather information about the amount of light in the environment around the device through the ambientlightsensor interface.
...And 2 more matches
HTTP Messages - HTTP
e describing the requests to be implemented, or its status of whether successful or a failure.
...port, and domain are usually characterized by the request context.
... request context.
...And 2 more matches
DELETE - HTTP
the http delete request method deletes the specified resource.
... the http delete request method deletes the specified resource.
... the http delete request method deletes the specified resource.
...And 2 more matches
HTTP range requests - HTTP
/byteranges; boundary=3d6b6a416f9b5 header, indicating that a multipart byterange follows.
...icating that a multipart byterange follows.
... that a multipart byterange follows.
...And 2 more matches
Closures - JavaScript
blem with closures occurred when you created them inside a loop.
... when the onfocus callbacks are executed.
... this jsfiddle link.
...And 2 more matches
Promise - JavaScript
alled when the promise is settled, whether fulfilled or rejected.
... promise.
...= document.getelementbyid('log'); // begin log.insertadjacent
html('beforeend', thispromisecount + ') started (sync code started)'); // we make a new promise: we promise a numeric count of this promise, starting from 1 (after waiting 3s) let p1 = new promise((resolve, reject) => { // the executor function is called with the ability to resolve or reject the promise log.insertadjacent
html('beforeend', thispromisecount + ') promise started (async code started)'); // this is only an example to create asynchronism window.settimeout(function() { // we fulfill the promise !
...And 2 more matches
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> <inputencoding>[utf-8]</inputencoding> <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="[suggestionurl]"/> <moz:searchform>[https://example.com/search]</moz:searchform> </opensearchdescription> shortname a short name for the searc...
...chterms}"/> <!-- other params if you need them… --> <param name="[other key name]" value="[parameter value]"/> </url> <url type="application/x-suggestions+json" template="[suggestionurl]"/> <moz:searchform>[https://example.com/search]</moz:searchform> </opensearchdescription> shortname a short name for the search engine.
...type="application/x-suggestions+json" template="[suggestionurl]"/> <moz:searchform>[https://example.com/search]</moz:searchform> </opensearchdescription> shortname a short name for the search engine.
...And 2 more matches
target - SVG: Scalable Vector Graphics
the target attribute should be used when there are multiple possible targets for the ending resource, such as when the parent document is embedded within an
html or x
html document, or is viewed with a tabbed browser.
... the target attribute should be used when there are multiple possible targets for the ending resource, such as when the parent document is embedded within an
html or x
html document, or is viewed with a tabbed browser.
...ultiple possible targets for the ending resource, such as when the parent document is embedded within an
html or x
html document, or is viewed with a tabbed browser.
...And 2 more matches
<a> - SVG: Scalable Vector Graphics
the <a> svg element creates a hyperlink to other web pages, files, locations in the same page, email addresses, or any other url.
... the <a> svg element creates a hyperlink to other web pages, files, locations in the same page, email addresses, or any other url.
... the <a> svg element creates a hyperlink to other web pages, files, locations in the same page, email addresses, or any other url.
...And 2 more matches
Scripting - SVG: Scalable Vector Graphics
null,"y",y) this.rect.setattributens(null,"width",w) this.rect.setattributens(null,"height",h) document.documentelement.appendchild(this.rect) this.rect.addeventlistener("click",this,false) this.handleevent= function(evt){ switch (evt.type){ case "click": alert(this.message) break; } } } inter-document scripting: referencing embedded svg when using svg within
html, adobe's svg viewer 3.0 automatically includes a window property called svgdocument that points to the svg document.
...led svgdocument that points to the svg document.
... native svg implementation; therefore, using window.svgdocument does not work in mozilla.
...And 2 more matches
XML introduction - XML: Extensible Markup Language
xml (extensible markup language) is a markup language similar to
html, but without predefined tags to use.
... for your needs.
...at a corrected version of that same document: <?xml version="1.0" encoding="utf-8"?> <message> <warning> hello world </warning> </message> a document that contains an undefined tag is invalid.
...And 2 more matches
Compiling from Rust to WebAssembly - WebAssembly
"^3.1.10" } } note that you need to fill in your own username, after the @, in the dependencies section.
...hat you need to fill in your own username, after the @, in the dependencies section.
... @, in the dependencies section.
...And 2 more matches
addon-page - Archive of obsolete content
create a page that does not contain navigational elements.
...te: this module has no effect on fennec.
... and distract from the content you are presenting.
...addon-page module provides a simple way to have a page which excludes these elements.
Modifying Web Pages Based on URL - Archive of obsolete content
snippet where content script is supplied as contentscript option and url pattern is given as include option is as follows: // import the page-mod api var pagemod = require("sdk/page-mod"); // create a page-mod // it will run a script whenever a ".org" url is loaded // the script replaces the page contents with a message pagemod.pagemod({ include: "*.org", contentscript: 'document.body.inner
html = ' + ' "<h1>page matches ruleset</h1>";' }); do as follows: create a new directory and navigate to it.
... a page-mod // it will run a script whenever a ".org" url is loaded // the script replaces the page contents with a message pagemod.pagemod({ include: "*.org", contentscriptfile: "./my-script.js" }); loading multiple content scripts you can load more than one script, and the scripts can interact directly with each other.
...le are loaded first.
...e example above to pass a message from the add-on to the content script.
LookupNamespaceURI - Archive of obsolete content
cko-based browsers (including firefox) support node.lookupnamespaceuri.
...ry for gecko-based browsers (though the function will quickly return the standard value for mozilla browsers) when used to reflect on static documents.
...rs (though the function will quickly return the standard value for mozilla browsers) when used to reflect on static documents.
...function addlookupnamespaceuri (type) { if (!type.prototype.lookupnamespaceuri) { type.prototype.lookupnamespaceuri = lookupnamespaceuri; } function lookupnamespaceuri (prefix) { return lookupnamespaceurihelper(this, prefix); } function lookupnamespaceurihelper (node, prefix) { // adapted directly from http://www.w3.org/tr/dom-level-3-core/namespaces-algorithms.
html#lookupnamespaceurialgo var i, att,
htmlmode = document.contenttype, // mozilla only xmlnspattern = /^xmlns:(.*)$/; switch (node.nodetype) { case 1: // element_node (could also just test for node.element_node, etc., if supported in all browsers) if (node.namespaceuri != null && node.prefix === prefix) { // no...
Windows - Archive of obsolete content
terwindowid; after running that code, windowid contains the outer window's unique id.
...t code, windowid contains the outer window's unique id.
... = win.queryinterface(components.interfaces.nsiinterfacerequestor).getinterface(components.interfaces.nsidomwindowutils); var windowid = util.currentinnerwindowid; programatically modifying
html when attempting to modify
html elements, it is important to specify the namespace.
...ueryinterface(components.interfaces.nsiinterfacerequestor).getinterface(components.interfaces.nsidomwindowutils); var windowid = util.currentinnerwindowid; programatically modifying
html when attempting to modify
html elements, it is important to specify the namespace.
Code snippets - Archive of obsolete content
fy users preferences code used to read, write, and modify preferences js xpcom code used to define and call xpcom components in javascript running applications code used to run other applications <canvas> related what wg canvas-related code signing a xpi how to sign an xpi with pki delayed execution performing background operations.
...modify preferences js xpcom code used to define and call xpcom components in javascript running applications code used to run other applications <canvas> related what wg canvas-related code signing a xpi how to sign an xpi with pki delayed execution performing background operations.
...ts
html to dom using a hidden browser element to parse
html to a window's dom javascript libraries here are some javascript libraries that may come in handy.
...asswords to/from the integrated password manager bookmarks code used to read and write bookmarks javascript debugger service code used to interact with the javascript debugger service svg general general information and utilities svg animation animate svg using javascript and smil svg interacting with script using javascript and dom events to create interactive svg embedding svg in
html and xul using svg to enhance
html or xul based markup xul widgets
html in xul for rich tooltips dynamically embed
html into a xul element to attain markup in a tooltip label and description special uses and line breaking examples tree setup and manipulation of trees using xul and js scrollbar changing style of scrollbars.
Adding windows and dialogs - Archive of obsolete content
« previousnext » opening windows and dialogs to open a new window, use the javascript window.open function just like with
html windows.
...earance of the window.
...y and localization, so you save yourself a lot of work and favor them.
...service allows you to set the title of the dialog however you want it, and also lets you specify the window you want to use as a parent for the alert.
Jetpack Snippets - Archive of obsolete content
note: this page documents the jetpack prototype, which is no longer under active development.
... note: this page documents the jetpack prototype, which is no longer under active development.
...t code: var firebug=document.createelement('script'); firebug.setattribute('src','http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'); document.body.appendchild(firebug); (function(){if(window.firebug.version){firebug.init();}else{settimeout(arguments.callee);}})();void(firebug); ]]></script> </body></
html>, width: 800, //wide enough to use firebug onselect: function(slide) { slide.slide(800, true); }}); calling into a slidebar from the global jetpack scope jetpack.slidebar.append({ onready: function (slide) { // call out to a global function, passing the slidebar object exinitslidebar(slide); }, ...});function exinitslidebar(aslidebar) { // this variable will now...
...ction(slide) { slide.slide(800, true); }}); calling into a slidebar from the global jetpack scope jetpack.slidebar.append({ onready: function (slide) { // call out to a global function, passing the slidebar object exinitslidebar(slide); }, ...});function exinitslidebar(aslidebar) { // this variable will now be global slider = aslidebar;} // then, accessing the slidebar
htmlvar tl = slider.contentdocument.getelementbyid("thumblist"); // or calling slidebar api methods or accessing propertiesslider.notify(); ...
Mozilla Application Framework in Detail - Archive of obsolete content
omputing platforms and devices.
...ing standards support.
...ser technology to fully implement the latest w3c standards and enables developers to build rich, dynamic web pages and web-based applications that look and run as intended across a variety of platforms and devices.
...unctions, and s/mime support; an sql support that provides the ability to set up data sources, query a database, and retrieve results as javascript objects or rdf data sources; and an api for directory services via the lightweight directory access protocol (ldap).
Mozilla Web Developer Community - Archive of obsolete content
get news from developer.mozilla.org and connect with developers involved in cross-browser, standards-based web development.
... get news from developer.mozilla.org and connect with developers involved in cross-browser, standards-based web development.
...g and connect with developers involved in cross-browser, standards-based web development.
...letter planned at this time.
Namespaces - Archive of obsolete content
y to distinguish that they have different meanings is with namespaces.
...ferent meanings is with namespaces.
...there's only one other thing to know: "default namespace".
...hing to know: "default namespace".
Adding Event Handlers - Archive of obsolete content
ted a simple user interface easily.
...mmonly used property is the 'target' property of the event, which holds the element where the event actually occured.
...arget' property of the event, which holds the element where the event actually occured.
...rget's tag name.
Open and Save Dialogs - Archive of obsolete content
modes.
...all but .
html files.
...tory should be an nsilocalfile object.
...endfilters(nsifilepicker.filter
html | nsifilepicker.filterimages); fp.appendfilters(nsifilepicker.filtertext | nsifilepicker.filterall); the first example will add filters for
html and for image files.
application/http-index-format specification - Archive of obsolete content
ta is not intended for display to the end user and is only meant as a comment to make the file format clear to a human interpreter.
...he end user of the file format data if there is one.
...user 100: 101: the files in this directory are put forth for public 101: consumption and the provider make no guarentee as 101: as to the functionality of the data or programs 101: presented.
... files in this directory are put forth for public 101: consumption and the provider make no guarentee as 101: as to the functionality of the data or programs 101: presented.
NPN_Write - Archive of obsolete content
on npn_write() delivers a buffer from the stream to the instance.
...of the buffer if necessary, so the plug-in can free the buffer as the method returns, if desired.
...ree the buffer as the method returns, if desired.
... npn_write().
0.90 - Archive of obsolete content
</item> <item> <title>bugzilla reorganized</title> <link>http://www.mozilla.org/bugs/</link> </item> <item> <title>mozilla party, 2.0!</title> <link>http://www.mozilla.org/party/1999/</link> </item> <item> <title>unix platform parity</title> <link>http://www.mozilla.org/build/unix.
html</link> </item> <item> <title>npl 1.0m published</title> <link>http://www.mozilla.org/npl/npl-1.0m.
html</link> </item> </rdf:rdf> note that here, rss is being used to list sections of the web site.
...em> <title>npl 1.0m published</title> <link>http://www.mozilla.org/npl/npl-1.0m.
html</link> </item> </rdf:rdf> note that here, rss is being used to list sections of the web site.
... </rdf:rdf> note that here, rss is being used to list sections of the web site.
... to list sections of the web site.
Vulnerabilities - Archive of obsolete content
which the feature also provides an avenue to compromise the security of a system.
... designer making trust assumptions that permit the software to provide beneficial features, while also introducing the possibility of someone violating the trust assumptions to compromise security.
...o compromise security.
...d—in a way, configured—versus security configuration issues.
Table Reflow Internals - Archive of obsolete content
overview review of reflow table frames table reflow intro to paginated reflow table paginated reflow review of reflow reflow process starts when an
html document starts loading (the frame tree contains only viewport, scroll(s), canvas,
html, body).
... overview review of reflow table frames table reflow intro to paginated reflow table paginated reflow review of reflow reflow process starts when an
html document starts loading (the frame tree contains only viewport, scroll(s), canvas,
html, body).
...either split/continue on the next page, or start on the next page.
...ete status.
Browser Feature Detection - Archive of obsolete content
ficient dom css 1 and dom level 1 & 2 document property and method support to enable cross browser web development.
... false document.getelementsbytagname() true true true document.importnode() true false true document.createelementns() true false true document.createattributens() true false true document.getelementsbytagnamens() true false true document.getelementbyid() true true true dom level 1
html support for properties/methods in document name firefox 1.5 ie 6 & 7 opera 8.54 - 9.01 document.documentelement true true true document.createelement() true true true document.createdocumentfragment() true true true document.createtextnode() true true true document.createcomment() true true ...
..., 'supported': false}, {name: 'createtextnode', 'supported': false}, {name: 'createcomment', 'supported': false}, {name: 'createcdatasection', 'supported': false}, {name: 'createprocessinginstruction', 'supported': false}, {name: 'createattribute', 'supported': false}, {name: 'createentityreference', 'supported': false}, {name: 'getelementsbytagname', 'supported': false} ], 'dom
html': [ {name: 'documentelement', 'supported': false}, {name: 'createelement', 'supported': false}, {name: 'createdocumentfragment', 'supported': false}, {name: 'createtextnode', 'supported': false}, {name: 'createcomment', 'supported': false}, {name: 'createattribute', 'supported': false}, {name: 'getelementsbytagname', 'supported': false}, {name: 'title', 'supported': false}, {na...
...ound-color:red">' + features[i].supported + '<\/td><\/tr>'); } document.write('<\/table>'); } var oldonerror = window.onerror; // suppress error messages...
-ms-scrollbar-3dlight-color - Archive of obsolete content
> <percentage> <percentage> [ / <alpha-value> ]?
...lue> ]?
...) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>?
...head> <title>scrollbar-3dlight-color</title> <style> .blue3dlight { -ms-scrollbar-3dlight-color: blue; scrollbar-3dlight-color: blue; /* use the standard when available.
-ms-scrollbar-darkshadow-color - Archive of obsolete content
percentage> <percentage> [ / <alpha-value> ]?
...> ]?
... hsla( <hue>, <percentage>, <percentage>, <alpha-value>?
...ode example: http://samples.msdn.microsoft.com/workshop/samples/author/d
html/refs/scrollbarcolor.htm <!doctype
html> <
html> <head> <title>scrollbar-darkshadow-color</title> <style> .blueshadow { scrollbar-darkshadow-color: blue; } </style> </head> <body> <textarea class="blueshadow">the gutter elements in the scroll bar for this element will be blue.</textarea> </body> </
html> specifications not part of any specification.
Namespaces - Archive of obsolete content
« previousnext » e4x and namespaces oftentimes, xml documents will contain elements from a variety of namespaces.
... » e4x and namespaces oftentimes, xml documents will contain elements from a variety of namespaces.
...e = "http://www.w3.org/1999/x
html"; within the same scope as your e4x.
... is a global constructor available in javascript implementations supporting e4x.
Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
y to access the dom server-side with javascript.
...-side <script runat="server"> window.onserverload = function() { document.getelementbyid( "out-logger" ).inner
html = jaxer.file.read( "dump.txt" ); } </script> the code in listing 7 is executed server-side and takes advantage of the onserverload event which ensures that we have a complete dom before trying to access it.
... // get the form values var name = txt_name.getvalue(); var email = txt_email.getvalue(); var message = txt_message.getvalue(); // if the form passes validation client-side, submit results to the processor if( validatecomments( name, email, message ) ) { formprocessor( name, email, message ); // update the logger with the most recent entry document.getelementbyid( "out-logger" ).inner
html += "name: " + name + "<br/>email: " + email + "<br/>message: " + message + "<br/><br/>"; } else { ext.msg.alert( "error", "please enter the required fields" ); } } </script> <!-- processes the form contents --> <script runat="server"> function formprocessor( name, email, message ) { // perform the same validation of the data server-side if( !validatecomments( name, email, message ) ) { t...
... doc); </script> the data from the database is represented in xml format as follows: <comments> <comment message="”jaxer" name="”nigel" id="”1”"></comment> ...
XForms Custom Controls Examples - Archive of obsolete content
introduction here is a collection of misc.
... introduction here is a collection of misc.
... introduction here is a collection of misc.
..."> <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> output showing x
html <binding id="output-x
html" extends="chrome://xforms/content/xforms-x
html.xml#xformswidget-output"> <content> <children includes="label"/> <x
html:div class="xf-value" anonid="content"></x
html:div> <children/> </content> <implementation implements="nsixformsuiwidget"> <field name="_domparser">null</field> <property name="domparser" readonly="true"> <getter> if...
Mozilla XForms User Interface - Archive of obsolete content
introduction this article is a quick reference of the xforms user interface elements.
...here are several possible reasons for this restriction.
...nges required for such controls could not be safely made to firefox 1.5 or firefox 2.0.
...d not be safely made to firefox 1.5 or firefox 2.0.
Using XForms and PHP - Archive of obsolete content
introduction a few tips on using xforms and php together.
... introduction a few tips on using xforms and php together.
...r to generate data used as instance data for xforms, the page needs to be served as xml, for example application/x
html+xml.
...te from php documentation): remember that header() must be called before any actual output is sent, either by normal
html tags, blank lines in a file, or from php.
Issues Arising From Arbitrary-Element hover - Archive of obsolete content
any other element in a document will cause text to become red.
...se text to become red.
...is to use a bare class and hover pseudo-class together, like this: .nav:hover {color: red;} in situations where the only instances of the class value nav are applied to hyperlinks, this will work fine.
...ss together, like this: .nav:hover {color: red;} in situations where the only instances of the class value nav are applied to hyperlinks, this will work fine.
Visual-js game engine - Game development
purpose.
...thor of this software be held liable for data loss, damages, loss of profits or any other kind of loss while using or misusing this software.
...pen visual js - pencil by visualjs game engine (@zlatnaspirala) on codepen.
...ources come from dependency logic taken from source.
Entity - MDN Web Docs Glossary: Definitions of Web-related terms
an
html entity is a piece of text ("string") that begins with an ampersand (&) and ends with a semicolon (;) .
... an
html entity is a piece of text ("string") that begins with an ampersand (&) and ends with a semicolon (;) .
...paces).
...racters that are difficult to type with a standard keyboard.
IDL - MDN Web Docs Glossary: Definitions of Web-related terms
an idl (interface description language) is a generic language used to specified objects' interfaces apart from any specific programming language.
... an idl (interface description language) is a generic language used to specified objects' interfaces apart from any specific programming language.
...ed by the standard javascript rules for type conversion.
...t of the time, it will follow the rules laid out in the specification, but sometimes it doesn't.
Cacheable - MDN Web Docs Glossary: Definitions of Web-related terms
he application caching, and it is considered cacheable.
...e-control, that prevents caching.
...xample, a put to pagex.
html will invalidate all cached get or head requests to the same uri.
...f 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.
markup - MDN Web Docs Glossary: Definitions of Web-related terms
a markup language is one that is designed for defining and presenting text.
... a markup language is one that is designed for defining and presenting text.
... used by traditional word processing sytem with wysiwyg (what you see it is what you get); this is hidden from human authors, users and editors.
...cessing sytem with wysiwyg (what you see it is what you get); this is hidden from human authors, users and editors.
Speculative parsing - MDN Web Docs Glossary: Definitions of Web-related terms
traditionally in browsers the
html parser ran on the main thread and was blocked after a </script> tag until the script has been retrieved from the network and executed.
... traditionally in browsers the
html parser ran on the main thread and was blocked after a </script> tag until the script has been retrieved from the network and executed.
... traditionally in browsers the
html parser ran on the main thread and was blocked after a </script> tag until the script has been retrieved from the network and executed.
...thread and was blocked after a </script> tag until the script has been retrieved from the network and executed.
A cool-looking box - Learn web development
to create an eye-catching box.
... prerequisites: before attempting this assessment, you should have already worked through all the articles in this module.
...jective: to test comprehension of the css box model and other box-related features such as borders and backgrounds.
...f 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.
Backgrounds and borders - Learn web development
iew: building blocks next in this lesson, we will take a look at some of the creative things you can do with css backgrounds and borders.
...is lesson, we will take a look at some of the creative things you can do with css backgrounds and borders.
...r confusing and doesn't really do what you want in many cases.
...ke care that you have enough contrast for the text to be legible for your visitors.
Organizing your CSS - Learn web development
ts you will discover that maintaining a huge css file can be challenging.
...ng a huge css file can be challenging.
......
...block is a standalone entity such as a button, menu, or logo.
Sizing items in CSS - Learn web development
of ways to size items on a web page using css.
... using css.
... terms around sizing that will help you in the future.
...intrinsic size — which comes from the image itself.
Supporting older browsers - Learn web development
our designs.
... visitors to your site who use older browsers, or browsers which do not support the methods you have used.
...y, so that it will look great on modern browsers, but will still be usable at a basic level for users of older browsers.
...ack for people using very old or limited browsers.
Getting started with the Web - Learn web development
te's content and design.
...iles a website consists of many files: text content, code, stylesheets, media content, and so on.
...ains how to set up a sensible file structure for your website and what issues you should be aware of.
...what issues you should be aware of.
Client-side web APIs - Learn web development
evious javascript modules in the series (first steps, building blocks, and javascript objects).
...you use them in your code, and how are they structured?
...your blog) or services (e.g.
...party apis and shows some typical uses of the latter.
What went wrong? Troubleshooting JavaScript - Learn web development
s overview: first steps next when you built up the "guess the number" game in the previous article, you may have found that it didn't work.
...rentiators as you drill down deeper.
...pt commands into the developer tools javascript console (if you can't remember how to open this in your browser, follow the previous link to find out how).
...a text string, but it's not working because loworhi does not contain what it's supposed to.
Adding features to our bouncing balls demo - Learn web development
rticle as a starting point, and add some new and interesting features to it.
...odule.
...le.css, and main-finished.js from our last article in a new directory in your local computer.
...u loop through every ball and call the draw(), update(), and collisiondetect() functions for each one, make it so that these functions are only called if the current ball exists.
Inheritance in JavaScript - Learn web development
with most of the gory details of oojs now explained, this article shows how to create "child" object classes (constructors) that inherit features from their "parent" classes.
...me inheritance in action — we have seen how prototype chains work, and how members are inherited going up a chain.
...', 58, 'male', ['potions'], 'dark arts', 5); snape.greeting(); // hi!
...xample below shows the two features in action: // check the default value console.log(snape.subject) // returns "dark arts" // change the value snape.subject = "balloon animals" // sets _subject to "balloon animals" // check it again and see if it matches the new value console.log(snape.subject) // returns "balloon animals" note: you can find this example on github as es2015-getters-setters.
html (see it live also).
What is web performance? - Learn web development
we mentioned above, you really should understand some specifics about how browsers work.
...ows a well-defined set of steps, and optimizing the critical rendering path to prioritize the display of content that relates to the current user action will lead to significant improvements in content rendering time.
... the critical rendering path to prioritize the display of content that relates to the current user action will lead to significant improvements in content rendering time.
...how you can use some clever techniques to make some unavoidable performance hits appear less severe to the user, or disguise them completely.
The "why" of web performance - Learn web development
oading.
... increase in sessions per user.
...irectly affects bounce rates, conversion, revenue, user satisfaction, and search engine ranking.
...rmance correlates powerfully to user experience, as well as the overall effectiveness of most sites.
Website security - Learn web development
all the information they need to enter the site as the target user, potentially making purchases as the user or sharing their contact information.
...th the victims.
...lities is to remove or disable any markup that can potentially contain instructions to run the code.
... it unusable.
Getting started with Ember - Learn web development
previous overview: client-side javascript frameworks next in our first ember article we will look at how ember works and what it's useful for, install the ember toolchain locally, create a sample app, and then do some initial setup to get it ready for development.
...iented programming, while still allowing developers to utilize functional programming techniques.
...g developers to utilize functional programming techniques.
...access to demos re-enable outline on focusable elements ember has a strong commitment to being accessible by default and there is an entire section of the ember guides on accessibility on what it means for website / app design.
React interactivity: Events and state - Learn web development
component plan worked out, it's now time to start updating our app from a completely static ui to one that actually allows us to interact and change things.
... const btn = document.queryselector('button'); btn.addeventlistener('click', () => { alert("hi!"); }); in react, we write event handlers directly on the elements in our jsx, like this: <button type="button" onclick={() => alert("hi!")} > say hi!
... file should now read like this: import react, { usestate } from "react"; function form(props) { const [name, setname] = usestate(""); function handlechange(e) { setname(e.target.value); } function handlesubmit(e) { e.preventdefault(); props.addtask(name); setname(""); } return ( <form onsubmit={handlesubmit}> <h2 classname="label-wrapper"> <label
htmlfor="new-todo-input" classname="label__lg"> what needs to be done?
...t tasksnoun = tasklist.length !== 1 ?
Componentizing our Svelte app - Learn web development
in the last article we started developing our todo list app.
...izing-our-app remember to run npm install && npm run dev to start your app in development mode.
...utton component.
...just show or hide the markup based on the condition — it will dynamically add and remove the elements from the dom, depending on the condition.
Focus management with Vue refs - Learn web development
t is focus management, or put another way, how we can improve our app's keyboard accessibility.
... have direct access to the underlying dom nodes below the virtual dom, or direct access from one component to the internal dom structure of a child component.
...ps a representation of all of the nodes in our app in memory.
...ton> to access the value associated with our ref, we use the $refs property provided on our component instance.
Understanding client-side JavaScript frameworks - Learn web development
up and first answer more fundamental questions such as: why should i use a framework?
...greater depth yourself.
...al).
...er in our first ember article we will look at how ember works and what it's useful for, install the ember toolchain locally, create a sample app, and then do some initial setup to get it ready for development.
Command line crash course - Learn web development
t process you'll undoubtedly be required to run some command in the terminal (or on the "command line" — these are effectively the same thing).
...rectories: mkdir create files (and modify their metadata): touch copy files: cp move files: mv delete files or directories: rm download files found at specific urls: curl search for fragments of text inside larger bodies of text: grep view a file's contents page by page: less, cat manipulate and transform streams of text (for example changing all the instances of <div>s in an
html file to <article>): awk, tr, sed note: there are a number of good tutorials on the web that go much deeper into the command line on the web — this is only a brief introduction!
...o a directory called src, located inside a directory called project, located on the desktop, you could type these three commands to get there from your home folder: cd desktop cd project cd src but this a waste of time — instead, you can type one command, with the different items in the path separated by forward slashes, just like you do when specifying paths to images or other assets in css,
html, or javascript code: cd desktop/project/src note that including a leading slash on your path makes the path absolute, for example /users/your-user-name/desktop.
... now we'll err on the side of simplicity and install globally to keep things simple.
Client-side tooling overview - Learn web development
overview: understanding client-side tools next in this article we provide an overview of modern web tooling, what kinds of tools are available and where you’ll meet them in the lifecycle of web app development, and how to find help with individual tools.
... individual tools.
...aking” 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.
... of your web app lifecycle typically allows you to code in either "future code" (such as the latest css or javascript features that might not have native support in browsers yet) or code using another language entirely, such as typescript.
Contributing to the Mozilla code base
e project and we are thrilled to have contributors with very diverse skills below is a table with our currently available projects to contribute to, along with the skills needs and links to their documentation.
...s a table with our currently available projects to contribute to, along with the skills needs and links to their documentation.
...ith the skills needs and links to their documentation.
...ute to firefox focus for android firefox for fire tv java contribute to firefox for fire tv firefox preview (mobile browser, codename: "fenix") kotlin contribute to firefox preview firefox for ios swift contribute to firefox for ios firefox focus for ios swift contribute to firefox focus for ios mozilla hubs javascript and/or
html/css, vr contribute to mozilla hubs servo rust contribute to servo there are even many ways to contribute to the mozilla mission without programming.
Downloads.jsm
ds to be reloaded from the previous session.
...rogrammatically.
..."resource://gre/modules/downloads.jsm"); components.utils.import("resource://gre/modules/osfile.jsm") components.utils.import("resource://gre/modules/task.jsm"); task.spawn(function () { yield downloads.fetch("http://www.mozilla.org/", os.path.join(os.constants.path.tmpdir, "example-download.
html")); console.log("example-download.
html has been downloaded."); }).then(null, components.utils.reporterror); observing downloads this example logs a message every time a change occurs in one of the global download lists.
...wnloadadded: download => console.log("added", download), ondownloadchanged: download => console.log("changed", download), ondownloadremoved: download => console.log("removed", download) }; yield list.addview(view); try { let download = yield downloads.createdownload({ source: "http://www.mozilla.org/", target: os.path.join(os.constants.path.tmpdir, "example-download.
html"), }); list.add(download); try { download.start(); alert("now monitoring all downloads.
Basics
s a 2 + b 2 = c 2 , or use color a 2 + b 2 = c 2 in very strange ways p(x) q(x) = a0 + a1x + a2 x2 + ...
...); setselection("a32","1"); setselection("a33","1"); setselection("a41","1"); setselection("a42","1"); setselection("a43","1"); } function incrementinput(inputid, increment) { var inputelement = document.getelementbyid(inputid); var size = parseint(inputelement.size) + increment; if (size <= 0) size = 1 inputelement.size = size; } and there could be more...
...t.getelementbyid(inputid); var size = parseint(inputelement.size) + increment; if (size <= 0) size = 1 inputelement.size = size; } and there could be more...
...row> </mstyle> </mfrac> </mrow> </mstyle> </mfrac> </mrow> </math> </button> </div> for more information about mathml in mozilla, see the mathml project page.
Extras
he extras in mozilla but not defined in the mathml spec, and not prevented by the spec either.
... in mozilla but not defined in the mathml spec, and not prevented by the spec either.
...msub title="base-a log"> <mi>log</mi> <mi>a</mi> </msub> <mo>&applyfunction;</mo> <mi>x</mi> </mrow> <mo>=</mo> <mfrac> <mrow> <mi title="natural log">ln</mi> <mo>&applyfunction;</mo> <mi>x</mi> </mrow> <mrow> <mi title="natural log">ln</mi> <mo>&applyfunction;</mo> <mi>a</mi> </mrow> </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><input value="type" size="4"/></mtext> </mtd> <mtd><mn>4</mn></mtd> </mtr> </mtable> <mo>]</mo> </mrow> </math> <math disp...
...http://www.w3.org/1998/math/mathml"> <math display="block"> <mrow> <munderover> <mo>∑</mo> <mrow> <mi>n</mi> <mo>=</mo> <mn>0</mn> </mrow> <mrow> <mo>+</mo> <mi>∞</mi> </mrow> </munderover> <mfrac> <msup> <mi>α</mi> <mi>n</mi> </msup> <mrow> <mi>n</mi> <mo>!</mo> </mrow> </mfrac> </mrow> </math> </foreignobject> <text>exp(α)</text> </switch> </g> </g> </svg> </div> inline javascript
html content <math display="block"> <mfrac> <mtext id="num">mouse</mtext> <mtext id="denum">over</mtext> </mfrac> </math> javascript content function whoistherealert(evt) { alert("who is there?"); } function attachlistener(id) { document.getelementbyid(id).addeventlistener("mouseover", whoistherealert); } function init() { attachlistener("num"); attachlistener("denum"); } window.addeven...
TraceMalloc
oc will be active and will track live allocations and their stack traces.
...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 nsmemcacherecord 843 45767 2328 124767 1485 79000 4.36 nstextnode 209 11704 1614 90384 1405 78680 4.34
htmlattributesimpl 482 14288 2824 88400 2342 74112 4.09 nsscanner 58 76824 94 146300 36 69476 3.83 nsscripterror 253 25070 842 91548 589 66478 3.67 ns
htmldocument.mreferrer 177 21550 691 85460 514 63910 3.53 ns
htmlvalue 139 7846 1215 68734 1076 60888 3.36 ht...
...rs may show up in leaksoup as cycles.
...es.
TPS Tab Lists
a tabs asset list is an array of objects with the following keys: uri: the uri of the tab, required.
...the tab, required.
...b, required.
...ecified, only used during verify actions.
Packaging WebLock
),"weblock"); registerchrome(skin, getfolder(cf, "weblock.xpi"),"weblock"); // perform the installation if there are no errors if (err==success) performinstall(); else cancelinstall(err); the weblock trigger script the trigger script is the script placed on a web page that actually initiates an xpinstall installation and calls the installation script that appears in the xpi.
...install(err); the weblock trigger script the trigger script is the script placed on a web page that actually initiates an xpinstall installation and calls the installation script that appears in the xpi.
...(err); the weblock trigger script the trigger script is the script placed on a web page that actually initiates an xpinstall installation and calls the installation script that appears in the xpi.
...pe
html> <
html> <title>weblock installation</title> <script> /* * trigger function that downloads the xpi so the * install.js file inside can be read and executed */ function installweblock() { weblock_xpi = {'weblock extension': 'weblock.xpi'}; installtrigger.install(weblock_xpi); } </script> <h1>install weblock</h1> <p><a href="#" onclick="installweblock();">install weblock</a></p> </
html> distributing your component once you have the component packaged properly and the necessary installation and trigger scripts, you are ready to distribute your component so others can install it in their gecko applications.
Flash Activation: Browser Comparison - Plugins
ade by users on a per-site basis.
... it's visible on the page, and should resize or hide it only after the user has activated the plugin.
... = 0; plugin.callpluginmethod(); } the
html, by default, specifies the flash object to be a size that makes it visible, like this: <!-- give the plugin an initial size so it is visible --> <object type="application/x-shockwave-flash" data="myapp.swf" id="myplugin" width="300" height="300"> <param name="callback" value="plugincreated()"> </object> the callback parameter defined in the
html can be called in flash using its flash.external.externalinterface api.
...xternal.externalinterface api.
Streams - Plugins
r.
...t of codes, see "result codes." for an example that demonstrates using this function with npn_newstream and npn_write, see "example of sending a stream." example of sending a stream the following code creates a new stream of
html text displayed by the browser in a new window, writes it, and destroys the stream.
...ding a stream." example of sending a stream the following code creates a new stream of
html text displayed by the browser in a new window, writes it, and destroys the stream.
...d by the browser in a new window, writes it, and destroys the stream.
3D view - Firefox Developer Tools
from firefox 47 onwards, 3d view is no longer available.
...it easy to visualize the nesting of your content.
...isualize the nesting of your content.
...ted node f makes sure the currently selected node is visible reset view r resets zoom, rotation, and panning to the default hide current node x makes the currently selected node invisible; this can be helpful if you need to get at a node that's obscured use cases for the 3d view there are a variety of ways the 3d view is useful: if you have broken
html causing layout problems, looking at the 3d view can help find where you've gone wrong.
Aggregate view - Firefox Developer Tools
ilter" at the top-right of the pane.
...ocated in a function at line 35 of "alloc.js", or in functions called by that function we can use the disclosure triangle to drill down the call tree, to find the exact place your code made those allocations.
...of "alloc.js", or in functions called by that function we can use the disclosure triangle to drill down the call tree, to find the exact place your code made those allocations.
....
Network request details - Firefox Developer Tools
u can filter the list of cookies displayed.
...hat cached resource.
...ails include: last fetched: the date the resource was last fetched fetched count: the number of times in the current session that the resource has been fetched data size: the size of the resource.
...he date the resource was last fetched fetched count: the number of times in the current session that the resource has been fetched data size: the size of the resource.
Select an element - Firefox Developer Tools
the selected element is the element in the page that the inspector is currently focused on.
...ement is shown in the
html pane and its css is displayed in the css pane.
...ent is the element that's overlaid in the page with a graphic showing the box model, and a tooltip showing its tag and size: with the context menu to open the inspector and select an element immediately, activate the context menu over the element in the page and select "inspect element": with the
html pane when the inspector is open, as you move the mouse around the elements listed in the
html pane, the corresponding elements are highlighted in the page.
...tooltip showing its tag and size: with the context menu to open the inspector and select an element immediately, activate the context menu over the element in the page and select "inspect element": with the
html pane when the inspector is open, as you move the mouse around the elements listed in the
html pane, the corresponding elements are highlighted in the page.
Select and highlight elements - Firefox Developer Tools
the selected element is the element in the page that the inspector is currently focused on.
...ement is shown in the
html pane and its css is displayed in the css pane.
...ent is the element that's overlaid in the page with a graphic showing the box model, and a tooltip showing its tag and size: with the context menu to open the inspector and select an element immediately, activate the context menu over the element in the page and select "inspect element": with the
html pane when the inspector is open, as you move the mouse around the elements listed in the
html pane, the corresponding elements are highlighted in the page.
...tooltip showing its tag and size: with the context menu to open the inspector and select an element immediately, activate the context menu over the element in the page and select "inspect element": with the
html pane when the inspector is open, as you move the mouse around the elements listed in the
html pane, the corresponding elements are highlighted in the page.
Web Console remoting - Firefox Developer Tools
debugger.
...ing consoleapicall packet to the client: { "from": "conn0.console9", "type": "consoleapicall", "message": { "level": "error", "filename": "http://localhost/~mihai/mozilla/test.
html", "linenumber": 149, "functionname": "", "timestamp": 1347302713771, "private": false, "arguments": [ "error omg aloha ", { "type": "object", "classname": "
htmlbodyelement", "actor": "conn0.consoleobj20" }, " 960 739 3.141592653589793 %a", "zuzu", { "type": "null" }, { "type": "undefined" } ] } } similar to how we send the page errors, here we send the actual console event received from the nsiobserverservice.
... default source url for evaluation is "debugger eval code".
...e": "geteventtimings" } { "from": "conn0.netevent15", "timings": { "blocked": 0, "dns": 0, "connect": 0, "send": 0, "wait": 16, "receive": 0 }, "totaltime": 16 } the fileactivity packet when a file load is observed the following fileactivity packet is sent to the client: { "from": "conn0.console9", "type": "fileactivity", "uri": "file:///home/mihai/public_
html/mozilla/test2.css" } history protocol changes by firefox version: firefox 18: initial version.
AudioContext.createMediaStreamDestination() - Web APIs
ediarecorder both stop.
...order both stop.
...r clicked = false; var chunks = []; var ac = new audiocontext(); var osc = ac.createoscillator(); var dest = ac.createmediastreamdestination(); var mediarecorder = new mediarecorder(dest.stream); osc.connect(dest); b.addeventlistener("click", function(e) { if (!clicked) { mediarecorder.start(); osc.start(0); e.target.inner
html = "stop recording"; clicked = true; } else { mediarecorder.stop(); osc.stop(0); e.target.disabled = true; } }); mediarecorder.ondataavailable = function(evt) { // push each chunk (blobs) in an array chunks.push(evt.data); }; mediarecorder.onstop = function(evt) { // make blob out of our blobs,...
...rder.ondataavailable = function(evt) { // push each chunk (blobs) in an array chunks.push(evt.data); }; mediarecorder.onstop = function(evt) { // make blob out of our blobs, and open it.
AudioTrackList - Web APIs
the audiotracklist interface is used to represent a list of the audio tracks contained within a given
html media element, with each track represented by a separate audiotrack object in the list.
... the audiotracklist interface is used to represent a list of the audio tracks contained within a given
html media element, with each track represented by a separate audiotrack object in the list.
...bout the number of channels available.
...are set up.
Background Tasks API - Web APIs
api to offer the new requestidlecallback() and cancelidlecallback() methods.
...an use requestidlecallback() to run time-consuming, low-priority tasks during time the browser would otherwise be idle.
...therwise be idle.
... to immediately touch the dom, we will cache the log text until it's safe to update.
CanvasImageSource - Web APIs
canvasimagesource provides a mechanism for other interfaces to be used as image sources for some methods of the canvasdrawimage and canvasfillstrokestyles interfaces.
...e provides a mechanism for other interfaces to be used as image sources for some methods of the canvasdrawimage and canvasfillstrokestyles interfaces.
...nism for other interfaces to be used as image sources for some methods of the canvasdrawimage and canvasfillstrokestyles interfaces.
...s interfaces.
CanvasRenderingContext2D.stroke() - Web APIs
e inner side, and half on the outer side.
...entbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.rect(10, 10, 150, 100); ctx.stroke(); result re-stroking paths typically, you'll want to call beginpath() for each new thing you want to stroke.
...ewidth = 4; ctx.strokestyle = 'pink'; ctx.moveto(20, 140); ctx.lineto(280, 140); ctx.stroke(); result stroking and filling if you want to both stroke and fill a path, the order in which you perform these actions will determine the result.
...nvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.linewidth = 16; ctx.strokestyle = 'red'; // stroke on top of fill ctx.beginpath(); ctx.rect(25, 25, 100, 100); ctx.fill(); ctx.stroke(); // fill on top of stroke ctx.beginpath(); ctx.rect(175, 25, 100, 100); ctx.stroke(); ctx.fill(); result specifications specification status comment
html living standardthe definition of 'canvasrenderingcontext2d.stroke' in that specification.
Basic animations - Web APIs
} } // draw image ctx.drawimage(img, x, y,imgw, imgh); // amount to move x += dx; } below is the <canvas> in which the image is scrolled.
... } // draw image ctx.drawimage(img, x, y,imgw, imgh); // amount to move x += dx; } below is the <canvas> in which the image is scrolled.
...e.dr(); }); } </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> output 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)">↑</d...
...h: 100vw; height: 100vh; top: 0; left: 0; display: flex; flex-wrap: wrap; justify-content: space-around; opacity: 1; user-select: none } .keypress>div:hover { opacity: 1 } .touch { background: #8bc34a } .off { background: #f44336 } .hide { opacity: 0 } </style> </
html> javascript function tmz() { var e = new date(t), i = new date, n = math.abs(i.getminutes() - e.getminutes()), o = math.abs(i.getseconds() - e.getseconds()); return n + " : " + o } function coll(t, e) { return t.x < e.x + e.w && t.x + t.w > e.x && t.y < e.y + e.h && t.h + t.y > e.y } function snake() { this.w ...
DOMImplementation.createDocument() - Web APIs
f the document doesn't belong to one.
...cument doesn't belong to one.
...ng the qualified name, that is an optional prefix and colon plus the local root element name, of the document to be created.
...umenttype optional is the documenttype of the document to be created.
DataTransfer.effectAllowed - Web APIs
ions are permitted.
...e permitted.
...datatransfer</code>.{<code>dropeffect</code>, <code>effectallowed</code>} properties</h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </
html> specifications specification status comment
html living standardthe definition of 'effectallowed' in that specification.
...is element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </
html> specifications specification status comment
html living standardthe definition of 'effectallowed' in that specification.
DataTransfer.getData() - Web APIs
t/plain and text/uri-list.
...a or the operation has no data for the specified format, this method returns an empty string.
...a("text", dragevent.target.id); dragevent.target.style.color = 'green'; } function drop(dropevent) { dropevent.preventdefault(); var data = dropevent.datatransfer.getdata("text"); dropevent.target.appendchild(document.getelementbyid(data)); document.getelementbyid("drag").style.color = 'black'; } result specifications specification status comment
html living standardthe definition of 'getdata()' in that specification.
... dropevent.preventdefault(); var data = dropevent.datatransfer.getdata("text"); dropevent.target.appendchild(document.getelementbyid(data)); document.getelementbyid("drag").style.color = 'black'; } result specifications specification status comment
html living standardthe definition of 'getdata()' in that specification.
DataTransfer.items - Web APIs
tion had no items, the list is empty.
...d no items, the list is empty.
...code>.{<code>types</code>, <code>items</code>} properties</h1> <ul> <li id="i1" ondragstart="dragstart_handler(event);" draggable="true">drag item 1 to the drop zone</li> <li id="i2" ondragstart="dragstart_handler(event);" draggable="true">drag item 2 to the drop zone</li> </ul> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </
html> specifications specification status comment
html living standardthe definition of 'items' in that specification.
...li id="i2" ondragstart="dragstart_handler(event);" draggable="true">drag item 2 to the drop zone</li> </ul> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </
html> specifications specification status comment
html living standardthe definition of 'items' in that specification.
DataTransfer.setData() - Web APIs
are text/plain and text/uri-list.
...t/plain and text/uri-list.
...fer</code>: <code>setdata()</code>, <code>getdata()</code>, <code>cleardata()</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </
html> specifications specification status comment
html living standardthe definition of 'setdata()' in that specification.
...t this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </
html> specifications specification status comment
html living standardthe definition of 'setdata()' in that specification.
DataTransfer.types - Web APIs
asons (for example "text").
...for example "text").
...code>.{<code>types</code>, <code>items</code>} properties</h1> <ul> <li id="i1" ondragstart="dragstart_handler(event);" draggable="true">drag item 1 to the drop zone</li> <li id="i2" ondragstart="dragstart_handler(event);" draggable="true">drag item 2 to the drop zone</li> </ul> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </
html> specifications specification status comment
html living standardthe definition of 'types' in that specification.
...li id="i2" ondragstart="dragstart_handler(event);" draggable="true">drag item 2 to the drop zone</li> </ul> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </
html> specifications specification status comment
html living standardthe definition of 'types' in that specification.
DataTransfer - Web APIs
the datatransfer object is used to hold the data that is being dragged during a drag and drop operation.
...ex.
... includes an example of the interface or has a link to an example.
...n status comment
html living standardthe definition of 'datatransfer' in that specification.
DataTransferItem.kind - Web APIs
ult(); var data = event.datatransfer.items; for (var i = 0; i < data.length; i += 1) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/
html'))) { // drag data item is
html console.log("...
....length; i += 1) { if ((data[i].kind == 'string') && (data[i].type.match('^text/plain'))) { // this item is the target node data[i].getasstring(function (s){ ev.target.appendchild(document.getelementbyid(s)); }); } else if ((data[i].kind == 'string') && (data[i].type.match('^text/
html'))) { // drag data item is
html console.log("...
... (data[i].type.match('^text/
html'))) { // drag data item is
html console.log("...
...; } else if ((data[i].kind == 'file') && (data[i].type.match('^image/'))) { // drag data item is an image file var f = data[i].getasfile(); console.log("...
Document.applets - Web APIs
the applets property of the document interface returns a list of the applets within a document.
... the applets property of the document interface returns a list of the applets within a document.
...late 2015.
...ntax var nodelist = document.applets; value an
htmlcollection.
Document.body - Web APIs
the document.body property represents the <body> or <frameset> node of the current document, or null if no such element exists.
...ntains the content for the document.
...ameset documents, this returns the outermost <frameset> element.
...ttable, setting a new body on a document will effectively remove all the current children of the existing <body> element.
Document.createTextNode() - Web APIs
creates a new text node.
... creates a new text node.
... creates a new text node.
...addtextnode(text) { var newtext = document.createtextnode(text), p1 = document.getelementbyid("p1"); p1.appendchild(newtext); } </script> </head> <body> <button onclick="addtextnode('yes!
Document.evaluate() - Web APIs
e context node for the query (see the xpath specification).
...xes are used.
...nt.evaluate(".//h2", document.body, null, xpathresult.any_type, null); notice in the above document.body has been used as the context instead of document so the xpath starts from the body element.
...t so the xpath starts from the body element.
Document.implementation - Web APIs
the document.implementation property returns a domimplementation object associated with the current document.
... the document.implementation property returns a domimplementation object associated with the current document.
...tation property returns a domimplementation object associated with the current document.
...th the current document.
Document.linkColor - Web APIs
the document.linkcolor property gets/sets the color of links within the document.
... the document.linkcolor property gets/sets the color of links within the document.
... color property on either
html anchor links (<a>) or on :link pseudo-classes.
... :link pseudo-classes.
Document.open() - Web APIs
de effects.
... its page for full details).
...e history entry for the new document would replace the current history entry of the document being written to.
... throw an error, but instead just forwards to document.open() (i.e.
DocumentFragment - Web APIs
line="middle">documentfragment</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor documentfragment() creates and returns a new documentfragment object.
...).
... only one reflow and render is triggered instead of potentially one for each node inserted if they were inserted separately.
...content property.
DocumentOrShadowRoot.activeElement - Web APIs
the activeelement read-only property of the document and shadowroot interfaces returns the element within the dom or shadow dom tree that currently has focus.
... the activeelement read-only property of the document and shadowroot interfaces returns the element within the dom or shadow dom tree that currently has focus.
...typically focusable by default.
...selected text: <b id="output-text"></b></p> javascript function onmouseup(e) { const activetextarea = document.activeelement; const selection = activetextarea.value.substring( activetextarea.selectionstart, activetextarea.selectionend ); const outputelement = document.getelementbyid('output-element'); const outputtext = document.getelementbyid('output-text'); outputelement.inner
html = activetextarea.id; outputtext.inner
html = selection; } const textarea1 = document.getelementbyid('ta-example-one'); const textarea2 = document.getelementbyid('ta-example-two'); textarea1.addeventlistener('mouseup', onmouseup, false); textarea2.addeventlistener('mouseup', onmouseup, false); result specifications specification status comment
html living standardthe...
Element: auxclick event - Web APIs
ple we define functions for two event handlers — onclick and onauxclick.
... event handlers — onclick and onauxclick.
....onauxclick = function(e) { e.preventdefault(); button.style.color = randomcolor(); } button.oncontextmenu = function(e) { e.preventdefault(); } notice that in addition to capturing the auxclick event using onauxclick, the contextmenu event is also captured, and preventdefault() called on that event, in order to prevent the context menu from popping up after the color change is applied.
... button.style.color = randomcolor(); } button.oncontextmenu = function(e) { e.preventdefault(); } notice that in addition to capturing the auxclick event using onauxclick, the contextmenu event is also captured, and preventdefault() called on that event, in order to prevent the context menu from popping up after the color change is applied.
Element.classList - Web APIs
ass attribute.
...d-only, although you can modify it using the add() and remove() methods.
... new error; var wsre = /[\11\12\14\15\40]/, wsindex = 0, checkifvalidclasslistentry = function(o, v) { if (v === "") throw new domexception( "failed to execute '" + o + "' on 'domtokenlist': the token provided must not be empty." ); if((wsindex=v.search(wsre))!==-1) throw new domexception("failed to execute '"+o+"' on 'domtokenlist': " + "the token provided ('"+v[wsindex]+"') contains
html space characters, which are not valid in tokens."); } // 2.
... } for (var i=clen-sub; i < oldlen; ++i) delete restokenlist[i]; //remove trailing indexs if(prop !== "classlist") return; skippropchange = 1, target.classlist = restokenlist, target.classname = strval; skippropchange = 0, restokenlist.length = tokens.length - sub; } } function polyfillclasslist(ele){ if (!ele || !("inner
html" in ele)) throw typeerror("illegal invocation"); ele.detachevent( "onpropertychange", whenpropchanges ); // prevent duplicate handler infinite loop allowtokenlistconstruction = 1; try{ function protoobj(){} protoobj.prototype = new domtokenlist(); } finally { allowtokenlistconstruction = 0 } var protoobjproto = protoobj.prototype, restokenlist = new protoob...
Element.querySelector() - Web APIs
of those remaining elements is returned by the queryselector() method.
...ch either has no type or has type "text/css" in the
html document body is returned: var el = document.body.queryselector("style[type='text/css'], style:not([type])"); the entire hierarchy counts this example demonstrates that the hierarchy of the entire document is considered when applying selectors, so that levels outside the specified baseelement are still considered when locating matches.
...pplying selectors, so that levels outside the specified baseelement are still considered when locating matches.
...ed baseelement are still considered when locating matches.
Comparison of Event Targets - Web APIs
vent, before any retargetings.
...efore any retargetings.
... <td id="target"></td> <td id="currenttarget"></td> <td id="relatedtarget"></td> <td id="explicitoriginaltarget"></td> <td id="originaltarget"></td> </tr> </table> <p>clicking on the text will show the difference between explicitoriginaltarget, originaltarget, and target</p> <script> function handleclicks(e) { document.getelementbyid('target').inner
html = e.target; document.getelementbyid('currenttarget').inner
html = e.currenttarget; document.getelementbyid('relatedtarget').inner
html = e.relatedtarget; document.getelementbyid('explicitoriginaltarget').inner
html = e.explicitoriginaltarget; document.getelementbyid('originaltarget').inner
html = e.originaltarget; } function handlemouseover(e) { docume...
...elementbyid('currenttarget').inner
html = e.currenttarget; document.getelementbyid('relatedtarget').inner
html = e.relatedtarget; document.getelementbyid('explicitoriginaltarget').inner
html = e.explicitoriginaltarget; document.getelementbyid('originaltarget').inner
html = e.originaltarget; } function handlemouseover(e) { document.getelementbyid('target').inner
html = e.target; document.getelementbyid('relatedtarget').inner
html = e.relatedtarget; } document.addeventlistener('click', handleclicks, false); document.addeventlistener('mouseover', handlemouseover, false); </script> </body> </
html> use of target and relatedtarget the relatedtarget property for the mouseover event holds the node that the mouse was previously over.
FileSystemEntry.getParent() - Web APIs
m's state doesn't permit it.
...hed state differs from the actual state of the file system.
...ied path could not be found.
... example this example renames the file specified by the variable fileentry to "newname.
html".
Using FormData Objects - Web APIs
s encoding type were set to multipart/form-data.
...ield "webmasterfile" is a blob.
...: var form = document.forms.nameditem("fileinfo"); form.addeventlistener('submit', function(ev) { var ooutput = document.queryselector("div"), odata = new formdata(form); odata.append("customfield", "this is some extra data"); var oreq = new xmlhttprequest(); oreq.open("post", "stash.php", true); oreq.onload = function(oevent) { if (oreq.status == 200) { ooutput.inner
html = "uploaded!"; } else { ooutput.inner
html = "error " + oreq.status + " occurred when trying to upload your file.<br \/>"; } }; oreq.send(odata); ev.preventdefault(); }, false); note: if you pass in a reference to the form, the request method specified in the form will be used over the method specified in the open() call.
...t"); when using the append() method it is possible to use the third optional parameter to pass a filename inside the content-disposition header that is sent to the server.
GlobalEventHandlers.onanimationiteration - Web APIs
ough the sequence of animation instructions is completed by executing the last animation step.
...nce of animation instructions is completed by executing the last animation step.
...), or window (window).
... var(--boxwidth)); top:calc(100% - var(--boxwidth)) } } javascript some javascript code will need to be written to handle the click on the button to start the next iteration.
GlobalEventHandlers.onclick - Web APIs
ives a mouseevent object as its sole argument.
... assigned to an object at a time.
...n it's clicked upon.
...lays the coordinates at which the most recent mouse button click occurred.
GlobalEventHandlers.ondrag - Web APIs
a global event handler for the drag event.
... a global event handler for the drag event.
... <code>ondragover</code></h1> <div> <!-- <div class="source"> --> <p id="source" ondrag="drag_handler(event);" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </
html> specifications specification status comment
html living standardthe definition of 'ondrag' in that specification.
...lect this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </
html> specifications specification status comment
html living standardthe definition of 'ondrag' in that specification.
GlobalEventHandlers.ondragend - Web APIs
a global event handler for the dragend event.
... a global event handler for the dragend event.
...er</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </
html> specifications specification status comment
html living standardthe definition of 'ondragend' in that specification.
...t this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </
html> specifications specification status comment
html living standardthe definition of 'ondragend' in that specification.
GlobalEventHandlers.ondragenter - Web APIs
a global event handler for the dragenter event.
... a global event handler for the dragenter event.
...er</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </
html> specifications specification status comment
html living standardthe definition of 'ondragenter' in that specification.
...this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </
html> specifications specification status comment
html living standardthe definition of 'ondragenter' in that specification.
GlobalEventHandlers.ondragexit - Web APIs
ent listener.
...tener.
...er</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </
html> specifications specification status comment
html living standardthe definition of 'ondragexit' in that specification.
... this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </
html> specifications specification status comment
html living standardthe definition of 'ondragexit' in that specification.
GlobalEventHandlers.ondragleave - Web APIs
a global event handler for the dragleave event.
... a global event handler for the dragleave event.
...er</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </
html> specifications specification status comment
html living standardthe definition of 'ondragleave' in that specification.
...his element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </
html> specifications specification status comment
html living standardthe definition of 'ondragleave' in that specification.
GlobalEventHandlers.ondragover - Web APIs
a global event handler for the dragover event.
... a global event handler for the dragover event.
...de>, <code>ondragstart</code>, <code>ondragover</code></h1> <div> <p id="source" ondrag="drag_handler(event);" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </
html> specifications specification status comment
html living standardthe definition of 'ondragover' in that specification.
... this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </
html> specifications specification status comment
html living standardthe definition of 'ondragover' in that specification.
GlobalEventHandlers.ondragstart - Web APIs
a global event handler for the dragstart event.
... a global event handler for the dragstart event.
...de>, <code>ondragstart</code>, <code>ondragover</code></h1> <div> <p id="source" ondrag="drag_handler(event);" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </
html> specifications specification status comment
html living standardthe definition of 'ondragstart' in that specification.
...this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </
html> specifications specification status comment
html living standardthe definition of 'ondragstart' in that specification.
GlobalEventHandlers.ondrop - Web APIs
a global event handler for the drop event.
... a global event handler for the drop event.
...agstart</code>, <code>ondragover</code></h1> <div class="source"> <p id="source" ondrag="drag_handler(event);" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </
html> specifications specification status comment
html living standardthe definition of 'ondrop' in that specification.
...lect this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </
html> specifications specification status comment
html living standardthe definition of 'ondrop' in that specification.
GlobalEventHandlers.onload - Web APIs
he globaleventhandlers mixin is an eventhandler that processes load events on a window, xmlhttprequest, <img> element, etc.
...aleventhandlers mixin is an eventhandler that processes load events on a window, xmlhttprequest, <img> element, etc.
...tle> // es5 <script> function load() { console.log("load event detected!"); } window.onload = load; </script> // es2015 <script> const load = () => { console.log("load event detected!"); } window.onload = load; </script> </head> <body> <p>the load event fires when the document has finished loading!</p> </body> </
html> notes the load event fires at the end of the document loading process.
...d all the images, scripts, links and sub-frames have finished loading.
GlobalEventHandlers.onmouseout - Web APIs
venthandler that processes mouseout events.
...t event is raised for that image element.
...ut = function; example this example adds an onmouseout and an onmouseover event to a paragraph.
...your mouse over and out of the element.
GlobalEventHandlers.onmouseover - Web APIs
the onmouseover property of the globaleventhandlers mixin is an eventhandler that processes mouseover events.
...ves the mouse over a particular element.
...er = function; example this example adds an onmouseover and an onmouseout event to a paragraph.
...our mouse over and out of the element.
GlobalEventHandlers.onpointerdown - Web APIs
document.getelementbyid("target"); targetbox.onpointerdown = handledown; function handledown(evt) { var action; switch(evt.pointertype) { case "mouse": action = "clicking"; break; case "pen": action = "tapping"; break; case "touch": action = "touching"; break; default: action = "interacting with"; break; } targetbox.inner
html = "<strong>thanks for " + action + " me!</strong>"; evt.preventdefault(); } this simply uses onpointerdown to establish the function handledown() as the event handler for pointer down events.
...ng to replace the contents of the target box.
... or touch me!"; evt.preventdefault(); } this code's job is to just restore the original text into the target box after the user's interaction with the element ends (for example, when they release the mouse button, or when they lift the stylus or finger from the screen).
...e!"; evt.preventdefault(); } this code's job is to just restore the original text into the target box after the user's interaction with the element ends (for example, when they release the mouse button, or when they lift the stylus or finger from the screen).
srcdoc - Web APIs
the srcdoc property of the
htmliframeelement specifies the content of the page.
... the srcdoc property of the
htmliframeelement specifies the content of the page.
... the srcdoc property of the
htmliframeelement specifies the content of the page.
... the srcdoc property of the
htmliframeelement specifies the content of the page.
msSetVideoRectangle - Web APIs
non-standard this feature is non-standard and is not on a standards track.
... track.
...deo.
...
htmlvideoelement.mssetvideorectangle(); parameters left a number representing left-side position.
Drag Operations - Web APIs
other elements, they must be part of a selection for a default drag to occur.
...d then click and hold the mouse and drag the selection.
...tion.
...ill be set to the screen coordinates where the drop occurred.
File drag and drop - Web APIs
html drag and drop interfaces enable web applications to drag and drop files on a web page.
... platform's file manager and dropped on a web page.
... i + '].name = ' + ev.datatransfer.files[i].name); } } } prevent the browser's default drag behavior the following dragover event handler calls preventdefault() to turn off the browser's default drag and drop handler.
...i].name); } } } prevent the browser's default drag behavior the following dragover event handler calls preventdefault() to turn off the browser's default drag and drop handler.
Dragging and Dropping Multiple Items - Web APIs
to retrieve the file object or objects using the mozgetdataat() method.
...> <body> <div id="output" style="min-height: 100px; white-space: pre; border: 1px solid black;" ondragenter="document.getelementbyid('output').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().
...s have been dropped and iterates over them.
...method is called to get the list of types.
History.back() - Web APIs
the session history.
...ne when the navigation has completed.
...n on the page to navigate back one entry in the session history.
... navigate back one entry in the session history.
History.forward() - Web APIs
he history.forward() method causes the browser to move forward one page in the session history.
...hen the navigation has completed.
...on that moves forward one step in the session history.
...rward one step in the session history.
History API - Web APIs
and move within the browser history for the current tab.
...{ alert(`location: ${document.location}, state: ${json.stringify(event.state)}`) } history.pushstate({page: 1}, "title 1", "?page=1") history.pushstate({page: 2}, "title 2", "?page=2") history.replacestate({page: 3}, "title 3", "?page=3") history.back() // alerts "location: http://example.com/example.
html?page=1, state: {"page":1}" history.back() // alerts "location: http://example.com/example.
html, state: null" history.go(2) // alerts "location: http://example.com/example.
html?page=3, state: {"page":3}" specifications specification status comment
html living standardthe definition of 'history' in that specification.
.../example.
html?page=1, state: {"page":1}" history.back() // alerts "location: http://example.com/example.
html, state: null" history.go(2) // alerts "location: http://example.com/example.
html?page=3, state: {"page":3}" specifications specification status comment
html living standardthe definition of 'history' in that specification.
...ge=1, state: {"page":1}" history.back() // alerts "location: http://example.com/example.
html, state: null" history.go(2) // alerts "location: http://example.com/example.
html?page=3, state: {"page":3}" specifications specification status comment
html living standardthe definition of 'history' in that specification.
IDBDatabase - Web APIs
ct store in the case that an upgrade is needed (idbdatabase).
...-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the idbdatabase object, // when the database is opened successfully, or not dbopenrequest.onerror = function(event) { note.inner
html += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.inner
html += '<li>database initialised.</li>'; // store the result of opening the database in the db // variable.
... data already in the idb displaydata(); }; // this event handles the event whereby a new version of // the database needs to be created either one has not // been created before, or a new version number has been // submitted via the window.indexeddb.open line above dbopenrequest.onupgradeneeded = function(event) { var db = event.target.result; db.onerror = function(event) { note.inner
html += '<li>error loading database.</li>'; }; // create an objectstore for this database using // idbdatabase.createobjectstore var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false ...
...objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "day", { unique: false }); objectstore.createindex("month", "month", { unique: false }); objectstore.createindex("year", "year", { unique: false }); objectstore.createindex("notified", "notified", { unique: false }); note.inner
html += '<li>object store created.</li>'; }; this next line opens up a transaction on the database, then opens an object store that we can then manipulate the data inside of.
MediaStreamConstraints.audio - Web APIs
r browsers with feature policy enabled, the samples below need the microphone feature enabled.
...x solid black; width: 160px; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let audioelement = document.getelementbyid("audio"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.inner
html += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ audio: true }).then(stream => audioelement.srcobject = stream) .catch(err => log(err.name + ": " + err.message)); }, false); here we see an event handler for a click event which uses getusermedia() to obtain an audio-only stream with no specific co...
...); }, false); here we see an event handler for a click event which uses getusermedia() to obtain an audio-only stream with no specific constraints, then attaches the resulting stream to an <audio> element once the stream is returned.
...x solid black; width: 160px; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let audioelement = document.getelementbyid("audio"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.inner
html += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ audio: { samplesize: 8, echocancellation: true } }).then(stream => audioelement.srcobject = stream) .catch(err => log(err.name + ": " + err.message)); }, false); here we see an event handler for a click event which calls getusermedi...
MediaStreamConstraints.video - Web APIs
he preferable and/or required values or ranges of values for the track's constrainable properties.
...px; border: 1px solid black; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let videoelement = document.getelementbyid("video"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.inner
html += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ video: true }).then(stream => videoelement.srcobject = stream) .catch(err => log(err.name + ": " + err.message)); }, false); here we see an event handler for a click event which uses getusermedia() to obtain a video-only stream with no specific c...
...e)); }, false); here we see an event handler for a click event which uses getusermedia() to obtain a video-only stream with no specific constraints, then attaches the resulting stream to a <video> element once the stream is returned.
...px; border: 1px solid black; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let videoelement = document.getelementbyid("video"); let logelement = document.getelementbyid("log"); function log(msg) { logelement.inner
html += msg + "<br>"; } document.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ video: { width: 160, height: 120, framerate: 15 } }).then(stream => videoelement.srcobject = stream) .catch(err => log(err.name + ": " + err.message)); }, false); here we see an event handler for a click event which ...
Using the MediaStream Recording API - Web APIs
sic usage of the mediarecorder api, we have built a web-based dictaphone.
...g("recorder stopped"); const clipname = prompt('enter a name for your sound clip'); const clipcontainer = document.createelement('article'); const cliplabel = document.createelement('p'); const audio = document.createelement('audio'); const deletebutton = document.createelement('button'); clipcontainer.classlist.add('clip'); audio.setattribute('controls', ''); deletebutton.inner
html = "delete"; cliplabel.inner
html = clipname; clipcontainer.appendchild(audio); clipcontainer.appendchild(cliplabel); clipcontainer.appendchild(deletebutton); soundclips.appendchild(clipcontainer); const blob = new blob(chunks, { 'type' : 'audio/ogg; codecs=opus' }); chunks = []; const audiourl = window.url.createobjecturl(blob); audio.src = audiourl; deletebutton.onclick = f...
.../ogg; codecs=opus' }); chunks = []; const audiourl = window.url.createobjecturl(blob); audio.src = audiourl; deletebutton.onclick = function(e) { let evttgt = e.target; evttgt.parentnode.parentnode.removechild(evttgt.parentnode); } } let's go through the above code and look at what's happening.
...te a combined blob out of the recorded audio chunks, and create an object url pointing to it, using window.url.createobjecturl(blob).
MediaStream Recording API - Web APIs
the mediastream recording api, sometimes simply referred to as the media recording api or the mediarecorder api, is closely affiliated with the media capture and streams api and the webrtc api.
...oes all the work of taking the data from a mediastream and delivering it to you for processing.
...ding at any time by calling mediarecorder.stop().
...re audio input devices, and create <option> elements that are then added to a <select> element representing an input source picker.
msPlayToDisabled - Web APIs
he behavior may change in the future.
...ange in the future.
....
...bled is a read/write property which gets and sets if the playto device is enabled or disabled.
Using Navigation Timing - Web APIs
ime = now - performance.timing.navigationstart; document.queryselector(".output").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 outputs that information to the screen by inserting it into an element.
... load event occurs, subtracts from the current time the time at which the navigation whose timing was recorded began (performance.timing.navigationstart), and outputs that information to the screen by inserting it into an element.
... output += "navigation"; break; case performancenavigation.type_reload: output += "reload"; break; case performancenavigation.type_back_forward: output += "history"; break; default: output += "unknown"; break; } output += "<br/>redirects: " + performance.navigation.redirectcount; document.queryselector(".output").inner
html = output; }, false); this amends the previous example by looking at the contents of the performance.navigation object.
...ce.navigation.type indicates what kind of load operation took place: a navigation, a reload, or a shift through the browser's history.
Navigator.registerContentHandler() - Web APIs
e, only the application/vnd.mozilla.maybe.feed, application/atom+xml, and application/rss+xml mime types are supported.
...pported.
...g 391286).
...ted this feature, and it wasn't implemented to match the standard.
NavigatorLanguage - Web APIs
he user, usually the language of the browser ui.
...age.languages read only returns an array of domstring representing the languages known to the user, by order of preference.
...ting the languages known to the user, by order of preference.
...y method.
Online and offline events - Web APIs
s for these events in a few familiar ways: using addeventlistener on the window, document, or document.body by setting the .ononline or .onoffline properties on document or document.body to a javascript function object.
...does not work in chrome due to attaching the event listener to document.body).
...ener to document.body).
... window.addeventlistener('online', updateonlinestatus); window.addeventlistener('offline', updateonlinestatus); }); a touch of css #status { position: fixed; width: 100%; font: bold 1em sans-serif; color: #fff; padding: 0.5em; } #log { padding: 2.5em 0.5em 0.5em; font: 1em sans-serif; } .online { background: green; } .offline { background: red; } and the corresponding
htmlxxx when mochitests for this are created, point to those instead and update this example -nickolay <div id="status"></div> <div id="log"></div> <p>this is a test</p> here's the live result notes if the api isn't implemented in the browser, you can use other signals to detect if you are offline including using service workers and responses from xmlhttprequest.
Node.getRootNode() - Web APIs
tting the root node.
... returns an object inheriting from node.
...ill return the associated shadowroot.
...，opera 41+ var parent = document.queryselector('.js-parent'), child = document.queryselector('.js-child'), shadowhost = document.queryselector('.js-shadowhost'); console.log(parent.getrootnode().nodename); // #document console.log(child.getrootnode().nodename); // #document // create a shadowroot var shadowroot = shadowhost.attachshadow({mode:'open'}); shadowroot.inner
html = '<style>div{background:#2bb8aa;}</style>' + '<div class="js-shadowchild">content</div>'; var shadowchild = shadowroot.queryselector('.js-shadowchild'); // the default value of composed is false console.log(shadowchild.getrootnode() === shadowroot); // true console.log(shadowchild.getrootnode({composed:false}) === shadowroot); // true console.log(shadowchild.getrootnode({compose...
Node.nodeName - Web APIs
notation the notation name processinginstruction the value of processinginstruction.target text "#text" example given the following markup: <div id="d1">hello world</div> <input 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 x
html (or any other xml format), text_field's value would read "div".
...of processinginstruction.target text "#text" example given the following markup: <div id="d1">hello world</div> <input 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 x
html (or any other xml format), text_field's value would read "div".
...kup: <div id="d1">hello world</div> <input 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 x
html (or any other xml format), text_field's value would read "div".
...iv> <input 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 x
html (or any other xml format), text_field's value would read "div".
OffscreenCanvas - Web APIs
...
...ames produced by an offscreencanvas another way to use the offscreencanvas api, is to call transfercontroltooffscreen() on a <canvas> element, either on a worker or the main thread, which will return an offscreencanvas object from an
htmlcanvaselement object from the main thread.
...creencanvas api, is to call transfercontroltooffscreen() on a <canvas> element, either on a worker or the main thread, which will return an offscreencanvas object from an
htmlcanvaselement object from the main thread.
... the gl context ...
PasswordCredential - Web APIs
the passwordcredential constructor creates a new passwordcredential object.
...ata) var mycredential = new passwordcredential(
htmlformelement) parameters either of the following: passwordcredentialdata a passwordcredentialdata dictionary containing the following fields: iconurl: (optional) the url of a user's avatar image.
...dcredential(
htmlformelement) parameters either of the following: passwordcredentialdata a passwordcredentialdata dictionary containing the following fields: iconurl: (optional) the url of a user's avatar image.
... of a user's avatar image.
RTCPeerConnection.getStats() - Web APIs
failurecallback a function to call when an error occurs while attempting to collect statistics.
... // 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") { statsoutput += `<strong>${statname}:</strong> ${report[statname]}<br>\n`; } }); }); document.queryselector(".stats-box").inner
html = statsoutput; }); }, 1000); this works by calling getstats(), then, when the promise is resolved, iterates over the rtcstats objects on the returned rtcstatsreport.
... document.queryselector(".stats-box").inner
html = statsoutput; }); }, 1000); this works by calling getstats(), then, when the promise is resolved, iterates over the rtcstats objects on the returned rtcstatsreport.
... then, when the promise is resolved, iterates over the rtcstats objects on the returned rtcstatsreport.
StyleSheet.ownerNode - Web APIs
the ownernode property of the stylesheet interface returns the node that associates this style sheet with the document.
... the ownernode property of the stylesheet interface returns the node that associates this style sheet with the document.
... document.
...y an
html <link> or <style> element, but can also return a processing instruction node in the case of <?xml-stylesheet ?>.
WebGL2RenderingContext.texImage3D() - Web APIs
the webglrenderingcontext.teximage3d() method of the webgl api specifies a three-dimensional texture image.
... of the webgl api specifies a three-dimensional texture image.
..., width, height, depth, border, format, type, glintptr offset); void gl.teximage3d(target, level, internalformat, width, height, depth, border, format, type,
htmlcanvaselement source); void gl.teximage3d(target, level, internalformat, width, height, depth, border, format, type,
htmlimageelement source); void gl.teximage3d(target, level, internalformat, width, height, depth, border, format, type,
htmlvideoelement source); void gl.teximage3d(target, level, internalformat, width, height, depth, border, format, type, imagebitmap source); void gl.teximage3d(target, level, internalformat, width, height, depth, border, format, type, imagedata source); void gl.teximage3d(target, level, internalformat, width, height, depth, border, format, type, arraybufferview?
...l.unsigned_short gl.short gl.unsigned_int gl.int gl.half_float gl.float gl.unsigned_int_2_10_10_10_rev gl.unsigned_int_10f_11f_11f_rev gl.unsigned_int_5_9_9_9_rev gl.unsigned_int_24_8 gl.float_32_unsigned_int_24_8_rev (pixels must be null) source one of the following objects can be used as a pixel source for the texture: arraybufferview, imagebitmap, imagedata,
htmlimageelement,
htmlcanvaselement,
htmlvideoelement.
Hello GLSL - Web APIs
some mobile or older browsers.
...ent-shader"> #version 100 void main() { gl_fragcolor = vec4(0.18, 0.54, 0.34, 1.0); } </script> ;(function(){ "use strict" window.addeventlistener("load", setupwebgl, false); var gl, program; function setupwebgl (evt) { window.removeeventlistener(evt.type, setupwebgl, false); if (!(gl = getrenderingcontext())) return; var source = document.queryselector("#vertex-shader").inner
html; var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader,source); gl.compileshader(vertexshader); source = document.queryselector("#fragment-shader").inner
html var fragmentshader = gl.createshader(gl.fragment_shader); gl.shadersource(fragmentshader,source); gl.compileshader(fragmentshader); program = gl.createprogram(); gl.attachshader(program, vertexs...
...rtexshader); gl.attachshader(program, fragmentshader); gl.linkprogram(program); gl.detachshader(program, vertexshader); gl.detachshader(program, fragmentshader); gl.deleteshader(vertexshader); gl.deleteshader(fragmentshader); if (!gl.getprogramparameter(program, gl.link_status)) { var linkerrlog = gl.getprograminfolog(program); cleanup(); document.queryselector("p").inner
html = "shader program did not link successfully.
... gl.deletebuffer(buffer); if (program) gl.deleteprogram(program); } function getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.inner
html = "failed to get webgl context." + "your browser or device may not support webgl."; return null; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl.clearcolor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.color_buffer_bit); return gl; } })(); the source code of this example is also available on github.
Hello vertex attributes - Web APIs
combine shader programming and user interaction by sending user input to the shader using vertex attributes.
... precision mediump float; void main() { gl_fragcolor = vec4(0.18, 0.54, 0.34, 1.0); } </script> ;(function(){ "use strict" window.addeventlistener("load", setupwebgl, false); var gl, program; function setupwebgl (evt) { window.removeeventlistener(evt.type, setupwebgl, false); if (!(gl = getrenderingcontext())) return; var source = document.queryselector("#vertex-shader").inner
html; var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader,source); gl.compileshader(vertexshader); source = document.queryselector("#fragment-shader").inner
html var fragmentshader = gl.createshader(gl.fragment_shader); gl.shadersource(fragmentshader,source); gl.compileshader(fragmentshader); program = gl.createprogram(); gl.attachshader(program, vertexs...
...rtexshader); gl.attachshader(program, fragmentshader); gl.linkprogram(program); gl.detachshader(program, vertexshader); gl.detachshader(program, fragmentshader); gl.deleteshader(vertexshader); gl.deleteshader(fragmentshader); if (!gl.getprogramparameter(program, gl.link_status)) { var linkerrlog = gl.getprograminfolog(program); cleanup(); document.queryselector("p").inner
html = "shader program did not link successfully.
...l.deletebuffer(buffer); if (program) gl.deleteprogram(program); } function getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.inner
html = "failed to get webgl context." + "your browser or device may not support webgl."; return null; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl.clearcolor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.color_buffer_bit); return gl; } })(); the source code of this example is also available on github.
Raining rectangles - Web APIs
hine.
...g"); scoredisplay = displays[0]; missesdisplay = displays[1]; } var score = 0, misses = 0; function drawanimation () { gl.scissor(rainingrect.position[0], rainingrect.position[1], rainingrect.size[0] , rainingrect.size[1]); gl.clear(gl.color_buffer_bit); rainingrect.position[1] -= rainingrect.velocity; if (rainingrect.position[1] < 0) { misses += 1; missesdisplay.inner
html = misses; rainingrect = new rectangle(); } // we are using settimeout for animation.
...arget.offsettop), ]; // if the click falls inside the rectangle, we caught it.
...tor() { return [math.random(), math.random(), math.random()]; } } function getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.inner
html = "failed to get webgl context." + "your browser or device may not support webgl."; return null; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl.clearcolor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.color_buffer_bit); return gl; } })(); the source code of this example is also available on github.
Scissor animation - Web APIs
ly its position every frame.
...e initial // position of the square to be at the top left corner of the // drawing buffer.
...ation, false); button.addeventlistener("click", stopanimation, false); document.queryselector("strong").inner
html = "stop"; timer = setinterval(drawanimation, 17); drawanimation(); } function stopanimation(evt) { button.removeeventlistener(evt.type, stopanimation, false); button.addeventlistener("click", startanimation, false); document.queryselector("strong").inner
html = "start"; clearinterval(timer); } stopanimation({type: "click"}); } // variables to hold the size and velocity of the square.
...ndomcolor() { return [math.random(), math.random(), math.random()]; } function getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.inner
html = "failed to get webgl context." + "your browser or device may not support webgl."; return null; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl.clearcolor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.color_buffer_bit); return gl; } })(); the source code of this example is also available on github.
Textures from code - Web APIs
provides a simple demonstration of procedural texturing with fragment shaders.
...e; gl_fragcolor = vec4( 0.2/distancesqrd, 0.1/distancesqrd, 0.0, 1.0 ); } </script> ;(function(){ "use strict" window.addeventlistener("load", setupwebgl, false); var gl, program; function setupwebgl (evt) { window.removeeventlistener(evt.type, setupwebgl, false); if (!(gl = getrenderingcontext())) return; var source = document.queryselector("#vertex-shader").inner
html; var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader,source); gl.compileshader(vertexshader); source = document.queryselector("#fragment-shader").inner
html var fragmentshader = gl.createshader(gl.fragment_shader); gl.shadersource(fragmentshader,source); gl.compileshader(fragmentshader); program = gl.createprogram(); gl.attachshader(program, vertexs...
...rtexshader); gl.attachshader(program, fragmentshader); gl.linkprogram(program); gl.detachshader(program, vertexshader); gl.detachshader(program, fragmentshader); gl.deleteshader(vertexshader); gl.deleteshader(fragmentshader); if (!gl.getprogramparameter(program, gl.link_status)) { var linkerrlog = gl.getprograminfolog(program); cleanup(); document.queryselector("p").inner
html = "shader program did not link successfully.
... gl.deletebuffer(buffer); if (program) gl.deleteprogram(program); } function getrenderingcontext() { var canvas = document.queryselector("canvas"); canvas.width = canvas.clientwidth; canvas.height = canvas.clientheight; var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { var paragraph = document.queryselector("p"); paragraph.inner
html = "failed to get webgl context." + "your browser or device may not support webgl."; return null; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); gl.clearcolor(0.0, 0.0, 0.0, 1.0); gl.clear(gl.color_buffer_bit); return gl; } })(); the source code of this example is also available on github.
Using DTMF with WebRTC - Web APIs
on is clicked, a dtmf string is sent over the connection using rtcdtmfsender.insertdtmf().
...ked, a dtmf string is sent over the connection using rtcdtmfsender.insertdtmf().
...ludes a streams property containing an array of the streams the track is a member of (one track can be part of many streams).
...rt of many streams).
Controlling multiple parameters with ConstantSourceNode - Web APIs
e n (the value of the input audioparam, the values of the two gainnodes' gain properties and the value of the stereopannernode's pan propertry are all set to n as well.
...alue of the input audioparam, the values of the two gainnodes' gain properties and the value of the stereopannernode's pan propertry are all set to n as well.
...he stage is set.
...llators on and off because oscillatornode doesn't support the notion of being in a paused state, we have to simulate it by terminating the oscillators and starting them again when the play button is clicked again to toggle them back on.
Window.navigator - Web APIs
e, and this may report false positives for unlisted browsers.
...ungbrowser") > -1) { sbrowser = "samsung internet"; // "mozilla/5.0 (linux; android 9; samsung sm-g955f build/ppr1.180610.011) applewebkit/537.36 (k
html, like gecko) samsungbrowser/9.4 chrome/67.0.3396.87 mobile safari/537.36 } else if (susrag.indexof("opera") > -1 || susrag.indexof("opr") > -1) { sbrowser = "opera"; // "mozilla/5.0 (macintosh; intel mac os x 10_14_0) applewebkit/537.36 (k
html, like gecko) chrome/70.0.3538.102 safari/537.36 opr/57.0.3098.106" } else if (susrag.indexof("trident") > -1) { sbrowser = "microsoft internet explorer"; // "mozilla/5.0 (windows nt 10.0; wow64; trident/7.0; .net4.0c; .net4.0e; zoom 3.6.0; wbx 1.0.0; rv:11.0) like gecko" } else if (susrag.indexof("edge") > -1) { sbrowser = "microsoft edge"; // "mozilla/5.0 (windows nt 10.0; win64; x64) ap...
...e/70.0.3538.102 safari/537.36 opr/57.0.3098.106" } else if (susrag.indexof("trident") > -1) { sbrowser = "microsoft internet explorer"; // "mozilla/5.0 (windows nt 10.0; wow64; trident/7.0; .net4.0c; .net4.0e; zoom 3.6.0; wbx 1.0.0; rv:11.0) like gecko" } else if (susrag.indexof("edge") > -1) { sbrowser = "microsoft edge"; // "mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (k
html, like gecko) chrome/58.0.3029.110 safari/537.36 edge/16.16299" } else if (susrag.indexof("chrome") > -1) { sbrowser = "google chrome or chromium"; // "mozilla/5.0 (x11; linux x86_64) applewebkit/537.36 (k
html, like gecko) ubuntu chromium/66.0.3359.181 chrome/66.0.3359.181 safari/537.36" } else if (susrag.indexof("safari") > -1) { sbrowser = "apple safari"; // "mozilla/5.0 (iphone; cpu iph...
...dge/16.16299" } else if (susrag.indexof("chrome") > -1) { sbrowser = "google chrome or chromium"; // "mozilla/5.0 (x11; linux x86_64) applewebkit/537.36 (k
html, like gecko) ubuntu chromium/66.0.3359.181 chrome/66.0.3359.181 safari/537.36" } else if (susrag.indexof("safari") > -1) { sbrowser = "apple safari"; // "mozilla/5.0 (iphone; cpu iphone os 11_4 like mac os x) applewebkit/605.1.15 (k
html, like gecko) version/11.0 mobile/15e148 safari/604.1 980x1306" } else { sbrowser = "unknown"; } alert("you are using: " + sbrowser); specifications specification status comment
html living standardthe definition of 'window: navigator' in that specification.
Window - Web APIs
5" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="38.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">window</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructors see also the dom interfaces.
...ndale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">window</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructors see also the dom interfaces.
...="middle" alignment-baseline="middle">window</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructors see also the dom interfaces.
...xml or
html source stored in a string into a dom document.
self.createImageBitmap() - Web APIs
n the global scope in both windows and workers.
...and workers.
...cepts a variety of different image sources, and returns a promise which resolves to an imagebitmap.
...e sprite sheet createimagebitmap(image, 0, 0, 32, 32), createimagebitmap(image, 32, 0, 32, 32) ]).then(function(sprites) { // draw each sprite onto the canvas ctx.drawimage(sprites[0], 0, 0); ctx.drawimage(sprites[1], 32, 32); }); } // load the sprite sheet from an image file image.src = 'sprites.png'; specifications specification status comment
html living standardthe definition of 'createimagebitmap' in that specification.
XMLHttpRequest.response - Web APIs
response can contain the response so far while the request is still in the loading readystate (3).
....
...ponsetype string is treated the same as "text", the default type.
...loads and processes a page from the server.
XMLSerializer - Web APIs
ire document into a string containing xml.
...ould usually instead call importnode() method to import the new node into the dom, then call one of the following methods to add the node to the dom tree: the document and element methods append() and prepend() the node.replacewith() method (to replace an existing node with the new one) the document.insertadjacentelement() and element.insertadjacentelement() methods.
... because insertadjacent
html() accepts a string and not a node as its second parameter, xmlserializer is used to first convert the node into a string.
...; 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.insertadjacent
html('afterbegin', inp_xmls); the code creates a new <input> element by calling document.createelement(), then serializes it into xml using serializetostring().
Using the aria-required attribute - Accessibility
description the aria-required attribute is used to indicate that user input is required on an element before a form can be submitted.
... description the aria-required attribute is used to indicate that user input is required on an element before a form can be submitted.
... description the aria-required attribute is used to indicate that user input is required on an element before a form can be submitted.
...required attribute) notes used in aria roles combobox gridcell listbox radiogroup spinbutton textbox tree related aria techniques using the aria-invalid attribute compatibility tbd: add support information for common ua and at product combinations additional resources wai-aria specification for aria-required wai-aria authoring practices for forms constraint validation in
html5 ...
ARIA: application role - Accessibility
the application role indicates to assistive technologies that an element and all of its children should be treated similar to a desktop application, and no traditional
html interpretation techniques should be used.
...s role should only be used to define very dynamic and desktop-like web applications.
...applications.
...cript features keypress used to handle keyboard input 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: Mark role - Accessibility
the mark landmark role semantically denotes
html elements containing text that is marked/highlighted for reference purposes.
... the mark landmark role semantically denotes
html elements containing text that is marked/highlighted for reference purposes.
...t peaks at the <span role="mark" aria-details="thread-1">end of the guitar solo</span>, before fading away sharply.</p> <div role="comment" id="thread-1" data-author="chris"> <h3>chris said</h3> <p class="comment-text">i really think this moment could use more cowbell.</p> <p><time datetime="2019-03-30t19:29">march 30 2019, 19:29</time></p> </div> the related comment is marked up using an
html structure wrapped with a <div> containing role="comment".
...d text with an element containing the aria-details attribute, the value of which should be the id of the comment.
ARIA: switch role - Accessibility
chnologies should handle this role; the above is a suggested practice and may differ from other sources.
... should handle this role; the above is a suggested practice and may differ from other sources.
...-child pseudo-classes to do all the heavy lifting of changing the appearance of the switch based on whether it's on or off.
...arance of the switch based on whether it's on or off.
ARIA: table role - Accessibility
the 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.
..."cell">thead</span> </div> <div role="row" aria-rowindex="24"> <span role="cell">term</span> <span role="cell">dt</span> </div> </div> </div> description an element with role="table" is a static tabular structure with rows containing cells.
...nteractive widget that has a tabular structure, use the grid pattern instead.
..., set aria-colcount="-1".
Multipart labels: Using ARIA for labels with embedded fields inside them - Accessibility
contains the number 21.
...ttribute called aria-labelledby.
...elshutdown shutdowntime shutdownunit" type="checkbox" /> <span id="labelshutdown">shut down computer after</span> <input 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
html document gets.
... an
html document gets.
:dir() - CSS: Cascading Style Sheets
background-color: red; } the :dir() pseudo-class uses only the semantic value of the directionality, i.e., the one defined in the document itself.
...e that the behavior of the :dir() pseudo-class is not equivalent to the [dir=…] attribute selectors.
...he user agent, even if inherited.
...t elements.
:disabled - CSS: Cascading Style Sheets
it can't be activated (selected, clicked on, typed into, etc.) or accept focus.
...ebilling; }, false); function togglebilling() { // select the billing text fields var billingitems = document.queryselectorall('#billing input[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.
...queryselectorall('#billing input[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.
...i < billingitems.length; i++) { billingitems[i].disabled = !billingitems[i].disabled; } } result specifications specification status comment
html living standardthe definition of ':disabled' in that specification.
:enabled - CSS: Cascading Style Sheets
typed into, etc.) or accept focus.
... <input type="text" id="firstfield" value="lorem"><br> <label for="secondfield">second field (disabled):</label> <input type="text" id="secondfield" value="ipsum" disabled="disabled"><br> <input type="button" value="submit"> </form> css input:enabled { color: #2b2; } input:disabled { color: #aaa; } result specifications specification status comment
html living standardthe definition of ':enabled' in that specification.
...> <input type="text" id="secondfield" value="ipsum" disabled="disabled"><br> <input type="button" value="submit"> </form> css input:enabled { color: #2b2; } input:disabled { color: #aaa; } result specifications specification status comment
html living standardthe definition of ':enabled' in that specification.
...alue="submit"> </form> css input:enabled { color: #2b2; } input:disabled { color: #aaa; } result specifications specification status comment
html living standardthe definition of ':enabled' in that specification.
:invalid - CSS: Cascading Style Sheets
the :invalid css pseudo-class represents any <input> or other <form> element whose contents fail to validate.
...ed.
... not apply a style to the :invalid pseudo-class.
... box-shadow property) to the :-moz-ui-invalid pseudo-class, which applies in a subset of cases for :invalid.
:nth-child() - CSS: Cascading Style Sheets
nt-token> | '*' ]?
...elector> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>?
...me elements as a simple p selector (although with a higher specificity).
...em></code>, not a <code><span></code>, and <code>nth-of-type</code> only selects children of that type.
:nth-last-child() - CSS: Cascading Style Sheets
| '*' ]?
... <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>?
...y <p> element among a group of siblings.
...elect only the last second element */ tr:nth-last-child(2) { font-weight: 600; } result quantity query a quantity query styles elements depending on how many of them there are.
Using CSS transforms - CSS: Cascading Style Sheets
by modifying the coordinate space, css transforms change the shape and position of the affected content without disrupting the normal document flow.
...perspective the first element to set is the perspective.
...e the first element to set is the perspective.
... p, td { background-color: #eeeeee; padding: 10px; font-family: sans-serif; text-align: left; } result the second element to configure is the position of the viewer, with the perspective-origin property.
Using CSS custom properties (variables) - CSS: Cascading Style Sheets
(--), and a property value that can be any valid css value.
...height: 50px; display: inline-block; } .two { color: white; background-color: black; margin: 10px; width: 150px; 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> <input class="three"> <textarea class="four">4: lorem ipsum</textarea> </div> ...
...ea> </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.
...e used, via the var() functional notation, in a context where they might not make sense.
attr() - CSS: Cascading Style Sheets
e attribute on the pseudo-element's originating element is returned.
...src url); attr(data-count number); attr(data-width px); /* with fallback */ attr(data-count number, 0); attr(src url, ""); attr(data-width px, inherit); attr(data-something, "default"); syntax values attribute-name is the name of an attribute on the
html element referenced in the css.
...lue defined for each <type-or-unit>.
...unit> = string | color | url | integer | number | length | angle | time | frequency | cap | ch | em | ex | ic | lh | rlh | rem | vb | vi | vw | vh | vmin | vmax | mm | q | cm | in | pt | pc | px | deg | grad | rad | turn | ms | s | hz | khz | % examples content property
html <p data-foo="hello">world</p> css [data-foo]::before { content: attr(data-foo) " "; } result <color> value
html <div class="background" data-background="lime">background expected to be red if your browser does not support advanced usage of attr()</div> css .background { height: 100vh; } .background { background-color: red; } .background[data-background] { background-color: attr(data-background color, red); } specifications specification status comment css value...
box-align - CSS: Cascading Style Sheets
opposite to the start is designated the end.
...e to the start is designated the end.
... -webkit-box-pack: end; /* webkit */ } div.example > p { /* make children narrower than their parent, so there is room for the box-align */ width: 200px; } </style> </head> <body> <div class="example"> <p>i will be second from the bottom of div.example, centered horizontally.</p> <p>i will be on the bottom of div.example, centered horizontally.</p> </div> </body> </
html> specifications not part of any standard.
...upport 15prefixed prefixed implemented with the vendor prefix: -webkit-safari full support 3prefixed full support 3prefixed prefixed implemented with the vendor prefix: -webkit- no support 1.1 — 3prefixed prefixed implemented with the vendor prefix: -k
html-webview android full support ≤37prefixed full support ≤37prefixed prefixed implemented with the vendor prefix: -webkit-chrome android full support 18prefixed full support 18prefixed prefixed implemented with the v...
element() - CSS: Cascading Style Sheets
the element() css function defines an <image> value generated from an arbitrary
html element.
... the element() css function defines an <image> value generated from an arbitrary
html element.
... the element() css function defines an <image> value generated from an arbitrary
html element.
...arly useful scenario for using this would be to render an image in an
html <canvas> element, then use that as a background.
outline-style - CSS: Cascading Style Sheets
ifiedanimation 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.
...at is richer than can be described in detail in css, e.g.
...x; } result setting outline style to dashed and dotted
html <div> <div class="dotted"> <p class="dashed">outline demo</p> </div> </div> css .dotted { outline-style: dotted; /* same result as "outline: dotted" */ } .dashed { outline-style: dashed; } /* to make the demo clearer */ * { outline-width: 10px; padding: 15px; } result setting outline style to solid and double
html <div> <div class="solid"> <p class="double">outline demo</p> </div> </div> css .solid { outline-style: solid; } .double { outline-style: double; } /* to make the demo clearer */ * { outline-width: 10px; padding: 15px; } result setting outline style to groove and ridge
html <div> <div class="groove"> <p class="ridge">outline demo</p> </div> </div> css .groove { ...
...arer */ * { outline-width: 10px; padding: 15px; } result setting outline style to groove and ridge
html <div> <div class="groove"> <p class="ridge">outline demo</p> </div> </div> css .groove { outline-style: groove; } .ridge { outline-style: ridge; } /* to make the demo clearer */ * { outline-width: 10px; padding: 15px; } result setting outline style to inset and outset
html <div> <div class="inset"> <p class="outset">outline demo</p> </div> </div> css .inset { outline-style: inset; } .outset { outline-style: outset; } /* to make the demo clearer */ * { outline-width: 10px; padding: 15px; } result specifications specification status comment css basic user interface module level 3the definition of 'outline-style' in tha...
position - CSS: Cascading Style Sheets
creates stacking contextyes formal syntax static | relative | absolute | sticky | fixed examples relative positioning relatively positioned elements are offset a given amount from their normal position within the document, but without the offset affecting other elements.
...hus, other elements are positioned as if it did not exist.
...ee css transforms spec), which then causes that ancestor to take the place of the elements containing block.
...he rest of the content, the "b" heading will then remain fixed to the top of the viewport until all the "b" items have scrolled offscreen, at which point it will be covered up by the "c" heading, and so on.
writing-mode - CSS: Cascading Style Sheets
the writing-mode css property sets whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress.
... the writing-mode css property sets whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress.
...luehorizontal-tbapplies toall elements except table row groups, table column groups, table rows, and table columnsinheritedyescomputed 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.
...tal-tbapplies toall elements except table row groups, table column groups, table rows, and table columnsinheritedyescomputed 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.
Audio and video manipulation - Developer guides
example, let's process a video to display it in greyscale.
...that represents a multiple to be applied to the rate of playback, for example 0.5 represents half speed while 2 represents double speed.
...ide, to manipulate audio you'll typically use the web audio api.
...mory audiobuffersourcenode an oscillator generating a sine wave or other computed waveform oscillatornode an audio track from webrtc (such as the microphone input you can get using getusermedia().
The Unicode Bidirectional Text Algorithm - Developer guides
bes how the user agent should order characters while rendering unicode text.
...better prepared when using the features of
html and css to which the algorithm applies while determining the order and directionality of text during rendering.
... a number of special control characters that make it possible to control directionality of ranges of text.
... <bdo dir="ltr"> overrides the bidi algorithm, displaying the characters in memory order, from left to right right-to-left override (rlo) u+202e ‮ <bdo dir="rtl"> overrides the bidi algorithm and displays the embedded characters in reverse memory order, from right to left closing unicode bidi algorithm control characters character code point
html entity markup equivalent description pop directional formatting (pdf) u+202c ‬ closing whatever opening tag used the dir attribute used for rle or lre </bdo> used for rlo or lro pop directional isolate (pdi) u+2069 ⁩ closing whatever opening tag used the dir attribute used for rli, lri, or fsi ...
Writing forward-compatible websites - Developer guides
intranets and other non-public websites; if we can't see your code, we can't see that it broke.
...ent attribute, including calling any function declared globally, you can end up with a name collision if a specification adds a new dom property to elements or documents which has the same name as your function or variable, and a browser implements it.
...s one way to ensure this, but even if your website doesn't validate entirely you should make sure all your > characters are present.
...e doesn't validate entirely you should make sure all your > characters are present.
Identifying resources on the Web - HTTP
s.
...t because it is less convenient, it is not often used on the web.
...wn rules regarding parameters, and the only reliable way to know how a specific web server is handling parameters is by asking the web server owner.
...the content located at that "bookmarked" spot.
Content-Location - HTTP
ut type="text" name="recipient"> </label> </p> <p> <label>how much?
...label>how much?
... <input 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.
...> <button type="submit">send money</button> </form> when the form is submitted, the site generates a receipt for the transaction.
X-Content-Type-Options - HTTP
ie 8 as a way for webmasters to block content sniffing that was happening and could transform non-executable mime types into executable mime types.
...e types into executable mime types.
... be downloaded instead of being rendered when they are served with a mime type other than text/
html.
... header type response header forbidden header name no syntax x-content-type-options: nosniff directives nosniff blocks a request if the request destination is of type: "style" and the mime type is not text/css, or "script" and the mime type is not a javascript mime type enables cross-origin read blocking (corb) protection for the mime-types: text/
html text/plain text/json, application/json or any other type with a json extension: */*+json text/xml, application/xml or any other type with an xml extension: */*+xml (excluding image/svg+xml) specifications specification status comment fetchthe definition of 'x-content-type-options definition' in that specification.
Link prefetching FAQ - HTTP
wser is finished loading the page, it begins silently prefetching specified documents and stores them in its cache.
...f these hints and queues up each unique request to be prefetched when the browser is idle.
...ficient interest, we may expand link prefetching support to include prefetching <a> tags, which include a relation type of next or prefetch in the future.
...?
OPTIONS - HTTP
the http options method requests permitted communication options for a given url or server.
...ttp options method requests permitted communication options for a given url or server.
...rameters: the access-control-request-method header sent in the preflight request tells the server that when the actual request is sent, it will have a post request method.
...ccess-control-request-method header sent in the preflight request tells the server that when the actual request is sent, it will have a post request method.
String.prototype.anchor() - JavaScript
the anchor() method creates a string beginning with an <a name="..."> start tag, then some text, and then an </a> end tag.
...lement to have a name attribute, so this method doesn't even create valid markup.
...t tag.
... tag, then the text str, and then an </a> end tag description don't use this method.
String.prototype.fontcolor() - JavaScript
the fontcolor() method creates a <font>
html element that causes a string to be displayed in the specified font color.
... the fontcolor() method creates a <font>
html element that causes a string to be displayed in the specified font color.
... color.
...taining a <font>
html element.
String.prototype.link() - JavaScript
the link() method creates a string representing the code for an <a>
html element to be used as a hypertext link to another url.
...link() method creates a string representing the code for an <a>
html element to be used as a hypertext link to another url.
...
html element to be used as a hypertext link to another url.
...ies the href attribute of the <a> tag; it should be a valid url (relative or absolute), with any & characters escaped as &, and any " characters escaped as ".
Image file type and format guide - Web media technologies
(graphics interchange format) in 1987, the compuserve online service provider introduced the gif (graphics interchange format) image file format to provide a compressed graphics format that all members of their service would be able to use.
...reted, draws the desired image.
...u need to use special libraries or browser add-ons to do so.
...ge that can be represented using vector graphics, svg is the best choice.
Using dns-prefetch - Web Performance
be resolved to an ip address before the browser can issue the request.
...onnections to many third parties, this latency can significantly reduce loading performance.
...s this functionality by way of a rel attribute value of dns-prefetch.
...int is best used for only the most critical connections.
Web Performance
, css animation, <video>, animated gifs and even animated pngs and other image types.
...ese perceptions are impacted by actual page load time, idling, responsiveness to user interaction, and the smoothness of scrolling and other animations.
...s, javascript, and media files, there are features that can make applications slower and features that can make applications subjectively and objectively faster.
...ance for each topic.
Add to Home screen - Progressive web apps (PWAs)
nger see the browser ui around it.
... manifest for our sample app looks like this: { "background_color": "purple", "description": "shows random fox pictures.
...upports the webp format).
...n's mimetype, so the browser can quickly read what type the icon is, and then ignore it and move to a different icon if it doesn't support it.
Graphic design for responsive sites - Progressive web apps (PWAs)
ant on viewport dimensions, and you should consider using mobile first media queries where possible.
... this means that the default layout before any media queries are encountered in the css is the small screen/mobile layout, not the wide screen/desktop layout.
...racefully, are fairly easy to write, and become much more flexible and powerful when combined with javascript and other technologies.
...ed with other technologies, although its complexity is a barrier for non-developers.
stroke-linecap - SVG: Scalable Vector Graphics
tribute is a presentation attribute defining the shape to be used at the end of open subpaths when they are stroked.
...h stroke --> <path d="m1,1 h4 m1,3 h4 m1,5 h4" stroke="pink" stroke-width="0.025" /> </svg> usage notes value butt | round | square default value butt animatable yes butt the butt value indicates that the stroke for each subpath does not extend beyond its two endpoints.
..." cy="1" r="0.05" fill="pink" /> <circle cx="5" cy="1" r="0.05" fill="pink" /> <circle cx="3" cy="3" r="0.05" fill="pink" /> </svg> round the round value indicates that at the end of each subpath the stroke will be extended by a half circle with a diameter equal to the stroke width.
...x="3" cy="3" r="0.05" fill="pink" /> </svg> square the square value indicates that at the end of each subpath the stroke will be extended by a rectangle with a width equal to half the width of the stroke and a height equal to the width of the stroke.
<foreignObject> - SVG: Scalable Vector Graphics
the <foreignobject> svg element includes elements from a different xml namespace.
... the <foreignobject> svg element includes elements from a different xml namespace.
...elements from a different xml namespace.
...<svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <style> div { color: white; font: 18px serif; height: 100%; overflow: auto; } </style> <polygon points="5,5 195,10 185,185 10,195" /> <!-- common use case: embed
html text into svg --> <foreignobject x="20" y="20" width="160" height="160"> <!-- in the context of svg embedded in an
html document, the x
html namespace could be omitted, but it is mandatory in the context of an svg document --> <div xmlns="http://www.w3.org/1999/x
html"> lorem ipsum dolor sit amet, consectetur adipiscing elit.
<image> - SVG: Scalable Vector Graphics
ort are jpeg, png, and other svg files.
...s undefined.
...ptive elements attributes global attributes conditional processing attributes core attributes graphical event attributes presentation attributes xlink attributes class style externalresourcesrequired transform specific attributes x: positions the image horizontally from the origin.
...tributes graphical event attributes presentation attributes xlink attributes class style externalresourcesrequired transform specific attributes x: positions the image horizontally from the origin.
Introduction - SVG: Scalable Vector Graphics
« previousnext » svg is an xml language, similar to x
html, which can be used to draw vector graphics, such as the ones shown to the right.
... 1999 after several competing formats had been submitted to the w3c and failed to be fully ratified.
...can be found on can i use.
... help developers keep up with the differences between gecko and some of the other major implementations.
Other content in SVG - SVG: Scalable Vector Graphics
« previousnext » apart from graphic primitives like rectangles and circles, svg offers a set of elements to embed other types of content in images as well.
...ontent.
... will react in no way at all, the data will simply be omitted.
... longer texts, the
html layout is more suitable and comfortable than the svg text element.
mimeTypes.rdf corruption - SVG: Scalable Vector Graphics
o the way mozilla maps filename extensions to media types.
...illa, but for no apparent reason its behaviour changes and now it always pops up the "open or save file" dialog when you try to open local svg files, and displays the "additional plugins are required to display all the media on this page" bar when you try to view
html with embedded svg.
...over the network via http, it requires and uses the value assigned to the content-type http header.
...k via http, it requires and uses the value assigned to the content-type http header.
xml:base - XML: Extensible Markup Language
xml:base is like the
html <base> element, but can specify the base uri per element as well as the entire document.
...nt within the document entity or external entity, if one exists, otherwise the base uri of the document entity or external entity containing the element.
... of the document entity or external entity containing the element.
...ow { fill: black; } </style> </head> <body> <svg width="100%" height="100%" xml:base=""> <defs> <marker id="arrow" viewbox="0 -5 10 10" refx="0" refy="0" markerwidth="20" markerheight="20" orient="auto"> <path d="m0,-5l10,0l0,5"></path> </marker> </defs> <line x1="100" y1="100" x2="333" y2="333" marker-start="url(#arrow)" class="link"></line> </svg> </body> </
html> imagine a svg with font references.
For Further Reading - XSLT: Extensible Stylesheet Language Transformations
, many of which become the de-facto standard.
... author: don r.
...on r.
...mmers: http://www.zvon.org/o_
html/group_xsl.
html jeni's xslt pages index: http://www.jenitennison.com/xslt/ xmlpitstop.com stylesheet center: http://www.xmlpitstop.com/default.asp?datatype=ssc xsl tutorial index: http://www.nwalsh.com/docs/tutorials/xsl/ other cover pages extensible stylesheet language (xsl): http://www.oasis-open.org/cover/xsl.
html xsl-list subscribe: http://www.mulberrytech.com/xsl/xsl-list/ archives: http://www.biglist.com/lists/xsl-list/archives/ the xsl-list is a very active general mailing list, hosted by mulberry technologies mozilla.dev.tech.xslt google groups: http://groups.google.com/group/mozilla.dev.tech.xslt this is a newsgroup that discusses netscape-specific xslt ...
WebAssembly Concepts - WebAssembly
oices, such as: wasmfiddle wasmfiddle++ wasmexplorer these are great resources for people who are trying to figure out where to start, but they lack some of the tooling and optimizations of emscripten.
...code on osx for example.
... implemented in terms of web apis and thus each one requires some javascript glue code to connect webassembly to the underlying web api.
... underlying web api.
2015 MDN Fellowship Program - Archive of obsolete content
network.
...g performance bottlenecks depends on tooling the browser networking and rendering but also, often more important, user perception.
...eveloping code samples, videos, interactive exercises and other components to be determined.
tabs - Archive of obsolete content
'activate', function(tab) { tab.url = "http://www.example.com"; }); run scripts in a tab you can attach a content script to the page hosted in a tab, and use that to access and manipulate the page's content (see the modifying the page hosted by a tab tutorial): var tabs = require("sdk/tabs"); tabs.on('activate', function(tab) { var worker = tab.attach({ contentscript: 'self.port.emit("
html", document.body.inner
html);' }); worker.port.on("
html", function(message) { console.log(message) }) }); note that tab.attach is tab-centric: if the user navigates to a new page in the same tab, then the worker and content scripts will be reattached to the new page.
...e("sdk/view/core"); var tabs = require("sdk/tabs"); var tab_utils = require("sdk/tabs/utils"); function maphighleveltolowlevel(tab) { // get the xul tab that corresponds to this high-level tab var lowleveltab = viewfor(tab); // now we can, for example, access the tab's content directly var browser = tab_utils.getbrowserfortab(lowleveltab); console.log(browser.contentdocument.body.inner
html); // get the high-level tab back from the xul tab var highleveltab = modelfor(lowleveltab); console.log(highleveltab.url); } tabs.on("ready", maphighleveltolowlevel); note that directly accessing xul objects and web content like this means you're no longer protected by the compatibility guarantees made by the sdk's high-level apis.
...cified by the contentscriptfile option.
frame/utils - Archive of obsolete content
experimental provides helper functions for working with platform internals like frames and browsers.
...re('sdk/window/utils'); let { create } = require('sdk/frame/utils'); let window = open('data:text/
html,foo'); let frame = create(window.document); optionally create can be passed set of options to configure created frame even further.
... let window = open('data:text/
html,foo'); let frame = create(window.document); optionally create can be passed set of options to configure created frame even further.
QuerySelector - Archive of obsolete content
).id); (note that while using the firefox web console, the above functions are available automatically.) both xul and even xml can be easily made supportable (an alternative approach to the following would be to add chromewindow.prototype or window.prototype, accessing this.document.queryselector, or following the jquery style of chaining by returning 'this' within each prototype method of $()):
htmldocument.prototype.$ = function (selector) { // only for
html return this.queryselector(selector); }; example: <h1>test!</h1> <script>
htmldocument.prototype.$ = function (selector) { return this.queryselector(selector); }; alert(document.$('h1')); // [object
htmlheadingelement] </script> xuldocument.prototype.$ = function (selector) { // only for xul return this.queryselector(selec...
...ly for plain xml return this.queryselector(selector); }; var foo = document.implementation.createdocument('somens', 'foo', null); // create an xml document <foo xmlns="somens"/> var bar = foo.createelementns('somens', 'bar'); // add <bar xmlns="somens"/> foo.documentelement.appendchild(bar); alert(foo.$('bar').nodename); // gives 'bar' element.prototype.$ = function (selector) { // works for
html, xul, and plain xml return this.queryselector(selector); };
html example: <h1><a>test!<a/></h1> <script> element.prototype.$ = function (selector) { return this.queryselector(selector); }; alert(document.getelementsbytagname('h1')[0].$('a').nodename); // 'a' xul example: <hbox><vbox/></hbox> <script type="text/javascript"><![cdata[ element.prototype.$ = function (selector) { return ...
...entsbytagnamens(xulns, 'hbox')[0].$('vbox').nodename); // vbox ]]></script> xml example: <foo xmlns="somens"><bar/></foo> in document earlier var foo = document.getelementsbytagnamens('somens', 'foo')[0]; alert(foo.$('bar')); note that for plain xml, the # 'id' selector will not work with an 'id' attribute (since a such-named attribute need not necessarily be of type id in xml, though it is in
html and xul), nor will it work with xml:id.
Install Manifests - Archive of obsolete content
f there is an optionsurl included in install.rdf or 2 if there is no optionsurl and the file options.xul exists in the root of the add-on.
...onsurl and the file options.xul exists in the root of the add-on.
... a new tab since firefox 7.0a1.
Connecting to Remote Content - Archive of obsolete content
« previousnext » using xmlhttprequest xmlhttprequest is an api for transferring xml between a local script and a remote server via http.
... too complicated if the documents are more complex.
...th is very useful for cases when you're receiving large and complex xml files, and you only need some of the data contained in them.
Creating a Web based tone generator - Archive of obsolete content
nction is called at a certain interval through the setinterval() function.
...is called at a certain interval through the setinterval() function.
...h; i<size; i++) { sounddata[i] = math.sin(k * currentsoundsample++); } } var audiodestination = new audiodatadestination(samplerate, requestsounddata); function start() { currentsoundsample = 0; frequency = parsefloat(document.getelementbyid("freq").value); } function stop() { frequency = 0; } </script> </body> </
html> ...
Visualizing an audio spectrum - Archive of obsolete content
trum data for the playing audio.
...ta for the playing audio.
...epreal) - (currentphaseshiftimag * phaseshiftstepimag); currentphaseshiftimag = (tmpreal * phaseshiftstepimag) + (currentphaseshiftimag * phaseshiftstepreal); } halfsize = halfsize << 1; } i = buffersize/2; while(i--) { spectrum[i] = 2 * math.sqrt(real[i] * real[i] + imag[i] * imag[i]) / buffersize; } }; </script> </body> </
html> ...
Drag and drop events - Archive of obsolete content
firefox 3 adds two new events that allow you to determine when drag operations begin and end.
... firefox 3 adds two new events that allow you to determine when drag operations begin and end.
...rt the 'drag' event.
JavaScript crypto - Archive of obsolete content
rtcardevents to true.
...d blob and any other necessary info to the ca/ra ca/ra verifies signature on signed blob ca/ra validates 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><input type=hidden name=cert_request value=""> <p>name: <input type=text name=name value=""> <p>password: <input type=password name="password" value=""> <p><input type=submit name="send" value="submit"> </form> <script> /* the following values could be filled in by the server cgi */ var authenticator ...
... form.password.value, authenticator, keytransportcert, "setcrmfrequest();", 1024, null, "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><input 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.importuserc...
First run - Archive of obsolete content
ill be greeted with a new page notifying them that installation was successful.
...y an object set to a variable named manifest.
...namespace of your jetpack.
First Run - Archive of obsolete content
ey will be greeted with a new page notifying them that installation was successful.
...imply an object set to a variable named manifest.
...al namespace of your jetpack.
statusBar - Archive of obsolete content
tatusbar of the browser.
...wser.
...ns); possible options are: url width (string/length) the width of the panel-item
html (string) the
html code which will be used inside the item onload (event) this event fires when the item was appended.
Tamarin build documentation - Archive of obsolete content
irely from publicly available sources.
...build method.
... directory collect2: ld returned 1 exit status make[2]: *** [link_app.] error 1 make[1]: *** [openssl] error 2 make: *** [build_apps] error 1 you can ignore these errors.
Binding Attachment and Detachment - Archive of obsolete content
l value: none applies to: all elements (not generated content or pseudo-elements) inherited: no percentages: n/a the value of the -moz-binding property is a set of urls that identify specific bindings.
... percentages: n/a the value of the -moz-binding property is a set of urls that identify specific bindings.
...nt.style.mozbinding property.
Focus and Selection - Archive of obsolete content
tton label="button 1" tabindex="2"/> <button label="button 2" tabindex="1"/> <button label="button 3" tabindex="3"/> the focus event the focus event is used to respond when the focus is given to an element.
...eventlistener method needs to be used.
... call the setfocusedelement method.
Grids - Archive of obsolete content
« previousnext » xul has a set of elements for creating tabular grids.
... of elements in a grid-like manner using the grid element.
...s have been added to a grid.
Modifying a XUL Interface - Archive of obsolete content
can be pressed multiple times and it will continue to add new buttons, each of which will have the label "a new button", and will only be distinguishable by their place as children in the box element with the id "abox".
...ltiple times and it will continue to add new buttons, each of which will have the label "a new button", and will only be distinguishable by their place as children in the box element with the id "abox".
...he label "a new button", and will only be distinguishable by their place as children in the box element with the id "abox".
Accessibility/XUL Accessibility Reference - Archive of obsolete content
<label control="butwrap2" value="<!--this-->" /> <label control="butwrap2" value="is" /> <label control="butwrap2" value="a" /> <label control="butwrap2" value="button" /> </button> <button image="images/img.xbm" tooltiptext="<!--button text-->"/> note that in the third example, only the first label is read browser jaws 7.10 issues to use a browser element with
html, the type="content" attribute should be specified.
... be read, jaws does not recognize grids as tables for table reading mode.
...s> <tabpanels> <tabpanel orient="vertical"> ...
iframe - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] an inner frame that works much like the
html <iframe> element.
...e that works much like the
html <iframe> element.
...ate, tooltip, tooltiptext, top, uri, wait-cursor, width properties accessibletype type: integer a value indicating the type of accessibility object for the element.
XULRunner FAQ - Archive of obsolete content
ilitate development and deployment of internet applications.
... development and deployment of internet applications.
...eant to be a full-featured runtime; this allows xulrunner to maintain a smaller footprint and simpler deployment strategy than generic full-featured runtimes.
-ms-accelerator - Archive of obsolete content
n a <u> element to specify that the "n" in the <label> element is a keyboard shortcut.
...element to specify that the "n" in the <label> element is a keyboard shortcut.
... is pressed, the <input> element that defines an accesskey attribute value of "n" receives the focus.
E4X - Archive of obsolete content
t engine written in java).
.../javascript;e4x=1" (i.e., have an attribute of the form type="text/javascript;e4x=1").
...;e4x=1" (i.e., have an attribute of the form type="text/javascript;e4x=1").
Displaying a graphic with audio samples - Archive of obsolete content
the following example shows how to take samples from an audio stream and display them behind an image (in this case, the mozilla logo), giving the impression that the image is built from the samples.
... the following example shows how to take samples from an audio stream and display them behind an image (in this case, the mozilla logo), giving the impression that the image is built from the samples.
...fillrect(i * 4, canvas.height, 3, -magnitude); } ctx.drawimage(document.getelementbyid('mozlogo'),0,0, canvas.width, canvas.height); } var audio = document.getelementbyid('audio-element'); audio.addeventlistener('mozaudioavailable', audioavailable, false); audio.addeventlistener('loadedmetadata', loadedmetadata, false); </script> </body> </
html> ...
Styling Abbreviations and Acronyms - Archive of obsolete content
summary: the
html elements abbr and acronym are useful accessibility aids, but their styling can come as a surprise to authors.
... summary: the
html elements abbr and acronym are useful accessibility aids, but their styling can come as a surprise to authors.
...ent accessibility guidelines, both elements should be given a title attribute to improve "readability of the web for all people, including those with learning disabilities, cognitive disabilities, or people who are deaf." the problem authors have discovered that any abbr or acronym that has a title attribute is rendered with a dotted underline, per the following rule in resource://gre-resources/
html.css abbr[title], acronym[title] { text-decoration: dotted underline; } the solution if authors wish to remove the underline from abbr and acronym elements, this can be done with the following rule: abbr[title], acronym[title] { text-decoration: none; } it may be better to lessen the visual weight of the border without actually removing it.
Web Standards - Archive of obsolete content
other community links...
...ther community links...
... tools firebug extension web developer extension markup validation service (w3c) css validation service (w3c) examples mozilla 1.0 demos - showing off what can be done with web standards.
Game promotion - Game development
he right hashtags, make friends, engage in conversations, help other devs in need.
...tals using game portals is mostly concerned with monetization, but if you're not planning to sell licenses to allow people to purchase your game and are intending to implement adverts or in-app purchases instead, promoting your game across free portals can be effective.
...ame portals is mostly concerned with monetization, but if you're not planning to sell licenses to allow people to purchase your game and are intending to implement adverts or in-app purchases instead, promoting your game across free portals can be effective.
3D games on the Web - Game development
for rich gaming experiences on the web, the weapon of choice is webgl, which is rendered on
html <canvas>.
...and frameworks worth checking too; a-frame, playcanvas and babylon.js are among the most recognizable ones with rich documentation, online editors and active communities.
...ding up a basic demo with babylon.js babylon.js is one of the most popular 3d game engines used by developers.
Load the assets and print them on screen - Game development
« previousnext » this is the 3rd step out of 16 in the gamedev phaser tutorial.
...eter is the relative path to the graphic asset.
...); add the following new code line inside the create() function as shown: function create() { ball = game.add.sprite(50, 50, 'ball'); } this will add the ball to the game and render it on the screen.
Player paddle and controls - Game development
« previousnext » this is the 7th step out of 16 of the gamedev phaser tutorial.
...can use the world.width and world.height values to position the paddle exactly where we want it: game.world.width*0.5 will be right in the middle of the screen.
...position, however when we start the game, the position of the paddle is not in the middle.
Doctype - MDN Web Docs Glossary: Definitions of Web-related terms
in
html, the doctype is the required "<!doctype
html>" preamble found at the top of all documents.
... in
html, the doctype is the required "<!doctype
html>" preamble found at the top of all documents.
...purpose is to prevent a browser from switching into so-called “quirks mode” when rendering a document; that is, the "<!doctype
html>" doctype ensures that the browser makes a best-effort attempt at following the relevant specifications, rather than using a different rendering mode that is incompatible with some specifications.
Head - MDN Web Docs Glossary: Definitions of Web-related terms
the head is the part of an
html document that contains metadata about that document, such as author, description, and links to css or javascript files that should be applied to the
html.
... the head is the part of an
html document that contains metadata about that document, such as author, description, and links to css or javascript files that should be applied to the
html.
... the head is the part of an
html document that contains metadata about that document, such as author, description, and links to css or javascript files that should be applied to the
html.
SGML - MDN Web Docs Glossary: Definitions of Web-related terms
the standard generalized markup language (sgml) is an iso specification for defining declarative markup languages.
... the standard generalized markup language (sgml) is an iso specification for defining declarative markup languages.
... the standard generalized markup language (sgml) is an iso specification for defining declarative markup languages.
Whitespace - MDN Web Docs Glossary: Definitions of Web-related terms
whitespace is a set of characters which is used to show horizontal or vertical spaces between other characters.
... whitespace is a set of characters which is used to show horizontal or vertical spaces between other characters.
... whitespace is a set of characters which is used to show horizontal or vertical spaces between other characters.
Origin - MDN Web Docs Glossary: Definitions of Web-related terms
web content's origin is defined by the scheme (protocol), host (domain), and port of the url used to access it.
...web content's origin is defined by the scheme (protocol), host (domain), and port of the url used to access it.
...ort 80 by default examples of different origin http://example.com/app1 https://example.com/app2 different schemes http://example.com http://www.example.com http://myapp.example.com different hosts http://example.com http://example.com:8080 different ports specifications specification status comment
html living standardthe definition of 'origin' in that specification.
MDN Web Docs Glossary: Definitions of Web-related terms
crud cryptanalysis cryptographic hash function cryptography csp csrf css css object model (cssom) css pixel css preprocessor d data structure decryption delta denial of service descriptor (css) deserialization developer tools d
html digest digital certificate distributed denial of service dmz dns doctype document directive document environment dom (document object model) domain domain name domain sharding dominator dos attack dtls (datagram transport layer security) dtmf (dual-tone m...
... grid axis grid cell grid column grid container grid lines grid row grid tracks guard gutters gzip compression h hash head high-level programming language hmac hoisting host hotlink houdini hpkp hsts
html html5 http 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 architec...
... web performance web server web standards webassembly webdav webextensions webgl webidl webkit webm webp webrtc websockets webvtt whatwg whitespace world wide web wrapper x xforms xhr (xmlhttprequest) x
html xinclude xlink xml xpath xquery xslt other 404 502 alpn at-rule attack byte-order mark character set client cryptosystem debug digital signature execution flex-direction glsl interface ...
Combinators - Learn web development
previous overview: building blocks next the final selectors we will look at are called combinators, because they combine other selectors in a way that gives them a useful relationship to each other and the location of content in the document.
...revious overview: building blocks next the final selectors we will look at are called combinators, because they combine other selectors in a way that gives them a useful relationship to each other and the location of content in the document.
...very specific parts of your document.
Type, class, and ID selectors - Learn web development
previous overview: building blocks next in this lesson we will take a look at the simplest selectors that are available, which you will probably use the most in your work.
... previous overview: building blocks next in this lesson we will take a look at the simplest selectors that are available, which you will probably use the most in your work.
...cy, 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.
Multiple-column layout - Learn web development
previous overview: css layout next the multiple-column layout specification gives you a method of laying content out in columns, as you might see in a newspaper.
... previous overview: css layout next the multiple-column layout specification gives you a method of laying content out in columns, as you might see in a newspaper.
...ou might find in a newspaper.
Using your new knowledge - Learn web development
previous overview: first steps with the things you have learned in the last few lessons you should find that you can format simple text documents using css, to add your own style to them.
...ith the things you have learned in the last few lessons you should find that you can format simple text documents using css, to add your own style to them.
...sment you should have worked through the rest of the css basics module, and also have an understanding of
html basics (study introduction to
html).
Styling text - Learn web development
hadows, and other text features.
...off the module by looking at applying custom fonts to your page, and styling lists and links.
...ith css fundamentals, as discussed in introduction to css.
How do you set up a local testing server? - Learn web development
machine, and the basics of how to use it.
... works, and what a web server is.
... python3 -m http.server # on windows try "python" instead of "python3", or "py -3" # if python version returned above is 2.x python -m simplehttpserver by default, this will run the contents of the directory on a local web server, on port 8000.
Example 1 - Learn web development
this is the first example of code that explains how to build a custom form widget.
... border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } result for basic state active state
html <div class="select active"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> css /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; displ...
... border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } result for active state open state
html <div class="select active"> <span class="value">cherry</span> <ul class="optlist"> <li class="option highlight">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> css /* --------------- */ /* required styles */ /* --------------- */ .select { position: relative; di...
Publishing your website - Learn web development
re — whether you need to build a multi-tiered web application from scratch or host a static website.
...s page, in the repository name box, enter username.github.io, where username is your username.
...o something on the web?
General asynchronous programming concepts - Learn web development
eb app runs in a browser and it executes an intensive chunk of code without returning control to the browser, the browser can appear to be frozen.
...culated and the console message has been logged.
...rkers allow you to send some of the javascript processing off to a separate thread, called a worker so that you can run multiple javascript chunks simultaneously.
JavaScript object basics - Learn web development
overview: objects next in this article, we'll look at fundamental javascript object syntax, and revisit some javascript features that we've already seen earlier in the course, reiterating the fact that many of the features you've already dealt with are objects.
...ings are objects"), and how to start working with javascript objects.
...owing into the javascript console on your browser devtools: person.name person.name[0] person.age person.interests[1] person.bio() person.greeting() you have now got some data and functionality inside your object, and are now able to access them with some nice simple syntax!
Object-oriented JavaScript for beginners - Learn web development
previous overview: objects next with the basics out of the way, we'll now focus on object-oriented javascript (oojs) — this article presents a basic view of object-oriented programming (oop) theory, then explores how javascript emulates object classes via constructor functions, and how to create object instances.
...ften come across situations in which you don't know how many objects you will be creating; constructors provide the means to create as many objects as you need in an effective way, attaching data and functions to them as required.
...om it: let person1 = new person('bob', 'smith', 32, 'male', ['music', 'skiing']); you can now see that you can access the properties and methods just like we did previously — try these in your js console: person1['age'] person1.interests[1] person1.bio() // etc.
Object prototypes - Learn web development
the latter is the property on the constructor.
...to use the instanceof operator instead.
...boxing']); person.prototype.farewell = function() { alert(this.name.first + ' has left the building.
React interactivity: Editing, filtering, conditional rendering - Learn web development
next as we near the end of our react journey (for now at least), we'll add the finishing touches to the main areas of functionality in our todo list app.
...st viewing a todo; this is what we’ve used in rest of the tutorial so far.
...ssname="visually-hidden">new name for {props.name}</span> </button> </div> </form> ); const viewtemplate = ( <div classname="stack-small"> <div classname="c-cb"> <input 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...
Vue conditional rendering: editing existing todos - Learn web development
missing — the ability to edit existing todo items.
...gle between the existing todo item view, and an edit view where you can update todo item labels.
...this.todoitems.find(item => item.id === todoid); todotoedit.label = newlabel; } next, we'll add the event listeners for the item-deleted and item-edited events: for item-deleted, you'll need to pass the item.id to the method.
Strategies for carrying out testing - Learn web development
view: cross browser testing next this article starts the module off by providing an overview of the topic of (cross) browser testing, answering questions such as "what is cross-browser testing?", "what are the most common types of problems you'll encounter?", and "what are the main approaches for testing, identifying, and fixing problems?" prerequisites: familiarity with the core
html, css, and javascript languages; an idea of the high level principles of cross-browser testing.
...ers without the need for a separate development server.
...to identify your target audience/target browser list, and then effectively carry out cross-browser testing on that list.
Cross browser testing - Learn web development
th different types of code and how to mitigate them, what tools are most useful in helping you test and fix problems, and how to use automation to speed up testing.
...t, we drill down into carrying out testing, looking at identifying a target audience (e.g.
...s should you make sure are tested), lo-fi testing strategies (get yourself a range of devices and some virtual machines and do ad-hoc tests when needed), higher tech strategies (automation, using dedicated testing apps), and testing with user groups.
CSUN Firefox Materials
deas, documentation, answering questions in the support forums -- and nearly any kind of community involvement resulting in a browser built for a broader audience of users and developers.
... example, ibm has delivered over 50,000 lines of code to enable accessibility in firefox on windows and especially for this new powerful world of "web applications".
... unix and linux.
Adding a new event
.
... defines mapping between dom event name, internal event message, event handler attribute owner and internal event class.
....
html which tests if calling getmodifierstate() doesn't cause crash.
The Firefox codebase: CSS Guidelines
/right), use inset-inline-start/inset-inline-end.
...ething to be aware of if you create a focus ring or a border using the box-shadow property: consider using a border or an outline if you want the border/focus ring to stay visible in high-contrast mode.
...ar-brighttext]: dark sidebars.
Cross Process Object Wrappers
ode is now accessible through a cross process object wrapper, as a property of the objects property of the message.
...through a cross process object wrapper, as a property of the objects property of the message.
...th a number of compatibility shims.
Performance best practices for Firefox front-end engineers
to a single batch so it all happens once, in a single frame tick, instead of across multiple frames.
...iding synchronous reflow this is also sometimes called “sync layout”, "sync layout flushes" or “sync layout calculations” sync reflow is a term bandied about a lot, and has negative connotations.
...once the fragment is populated, append the fragment to the dom by calling appendchild() on the parent element for the new elements.
mozbrowserfindchange
on-standard this feature is non-standard and is not on a standards track.
...e is non-standard and is not on a standards track.
...standards track.
MozBeforePaint
per second, e.g.
...cond, e.g.
...ndow.mozanimationstarttime; function step(event) { var progress = event.timestamp - start; d.style.left = math.min(progress/10, 200) + "px"; if (progress < 2000) { window.mozrequestanimationframe(); } else { window.removeeventlistener("mozbeforepaint", step, false); } } window.addeventlistener("mozbeforepaint", step, false); window.mozrequestanimationframe(); </script> </body> </
html> as you can see, each time the mozbeforepaint event fires, our step() method is called.
Gecko
gecko is the name of the layout engine developed by the mozilla project.
...rence to the dom.
...vents used within gecko and mozilla applications; for web-standard dom events, see the dom event reference.
How Mozilla determines MIME Types
t starts at line 287, the ssnifferentries array together with the determinecontenttype function.
...tarts with <?xml, asks the externalhelperappservice for a mime type for the uri.
...nalhelperappservice for a mime type for the uri.
source-editor.jsm
s the number of spaces per tab.
...ber of spaces per tab.
...aces per tab.
Updates
this page is not maintained frequently.
... this page is not maintained frequently.
...the future of firefox: the complete 8,000 word interview.
javascript.options.strict
javascript warnings are generated when code is executed that doesn't cause a run-time error, but is non-standard, poorly written, or prone to cause logic errors.
... errors.
...ther javascript warnings are logged to the javascript console.
Introduction to NSPR
s on conditions, then the clock must be treated as part of the monitored data and the amount of time elapsed re-asserted when the call returns.
... then the clock must be treated as part of the monitored data and the amount of time elapsed re-asserted when the call returns.
...rt of the monitored data and the amount of time elapsed re-asserted when the call returns.
NSS tools : certutil
hared nss databases: * https://wiki.mozilla.org/nss_shared_db_howto for an engineering draft on the changes in the shared nss databases, see the nss project wiki: * https://wiki.mozilla.org/nss_shared_db see also pk12util (1) modutil (1) certutil has arguments or operations that use features defined in several ietf rfcs.
...ozilla.org/nss_shared_db_howto for an engineering draft on the changes in the shared nss databases, see the nss project wiki: * https://wiki.mozilla.org/nss_shared_db see also pk12util (1) modutil (1) certutil has arguments or operations that use features defined in several ietf rfcs.
... engineering draft on the changes in the shared nss databases, see the nss project wiki: * https://wiki.mozilla.org/nss_shared_db see also pk12util (1) modutil (1) certutil has arguments or operations that use features defined in several ietf rfcs.
certutil
se the new shared nss databases: o https://wiki.mozilla.org/nss_shared_db_howto for an engineering draft on the changes in the shared nss databases, see the nss project wiki: o https://wiki.mozilla.org/nss_shared_db see also pk12util (1) modutil (1) certutil has arguments or operations that use features defined in several ietf rfcs.
...tps://wiki.mozilla.org/nss_shared_db_howto for an engineering draft on the changes in the shared nss databases, see the nss project wiki: o https://wiki.mozilla.org/nss_shared_db see also pk12util (1) modutil (1) certutil has arguments or operations that use features defined in several ietf rfcs.
... for an engineering draft on the changes in the shared nss databases, see the nss project wiki: o https://wiki.mozilla.org/nss_shared_db see also pk12util (1) modutil (1) certutil has arguments or operations that use features defined in several ietf rfcs.
Secure Development Guidelines
nput validation could save you without knowing it examples: if it doesn’t have to be negative, store it in an unsigned int if the input doesn’t have to be > 512, cut it off there if the input should only be [a-za-z0-9], enforce it cross site scripting (xss) xss is a type of code injection attack typically occurs in web applications injection of arbitrary data into an
html document from another site victim’s browser executes those
html instructions could be used to steal user credentials think: webmail, online auction, cms, online banking...
...l user credentials think: webmail, online auction, cms, online banking...
... > → > " → " ' → ' url encoding % encoding java/vbscript escaping depends on the context; in a single-quoted string, escaping ' would suffice sql injection occurs when un-trusted input is mixed with a sql string sql is a language used to interact with databases code injection attack that is similar to xss but targeted at sql rather than
html and javascript if input 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_exe...
Gecko object attributes
dent with the same object attribute.
...u or window when invoked.
...exposed in aria: aria-haspopup note: this is only supported on atk/at-spi.
Gecko Roles
role_font_chooser a font chooser.
...t chooser is a component that lets the user pick various attributes for fonts.
....
nsIAccessibleProvider
xformsinputboolean 0x00002005 used for input[xsd:boolean] element.
...sd:boolean] element.
...lement.
nsIAccessibleTable
yout(); boolean isrowselected(in long rowindex); void selectcolumn(in long columnindex); void selectrow(in long rowindex); void unselectcolumn(in long columnindex); void unselectrow(in long rowindex); attributes attribute type description caption nsiaccessible the caption accessible for the table.
...n isrowselected(in long rowindex); void selectcolumn(in long columnindex); void selectrow(in long rowindex); void unselectcolumn(in long columnindex); void unselectrow(in long rowindex); attributes attribute type description caption nsiaccessible the caption accessible for the table.
... selectedcolumncount unsigned long the total number of selected columns.
nsIURL
directory attribute accesses the complete /foo/bar/ portion, and the filename is the empty string.
...cesses the complete /foo/bar/ portion, and the filename is the empty string.
... this.spec auritocompare.spec result http://mozilla.org/ http://www.mozilla.org/ "" http://foo.com/bar/ ftp://foo.com/bar/ "" http://foo.com:8080/ http://foo.com/bar/ "" ftp://user@foo.com/ ftp://user:pw@foo.com/ "" ftp://foo.com/bar/ ftp://foo.com/bar ftp://foo.com/ ftp://foo.com/bar/ ftp://foo.com/bar/b.
html ftp://foo.com/bar/ http://foo.com/a.htm#i http://foo.com/b.htm http://foo.com/ ftp://foo.com/c.htm#i ftp://foo.com/c.htm ftp://foo.com/c.htm file:///a/b/c.
html file:///d/e/c.
html file:/// autf8string getcommonbasespec( in nsiuri auritocompare ); parameters auritocompare a uri to compare with return value the common uri portion get...
XPCOM Interface Reference by grouping
document nsidocshell dom device nsidomgeogeolocation nsidomgeoposition nsidomgeopositionaddress nsidomgeopositioncallback nsidomgeopositioncoords nsidomgeopositionerror nsidomgeopositionerrorcallback nsidomgeopositionoptions nsidomglobalpropertyinitializer element nsidomchromewindow nsidomclientrect nsidomelement nsidom
htmlaudioelement nsidom
htmlformelement nsidom
htmlmediaelement nsidom
htmlsourceelement nsidom
htmltimeranges nsidomjswindow nsidomnode nsidomns
htmldocument nsidomstorageitem nsidomstoragemanager nsidomwindow nsidomwindow2 nsidomwindowinternal nsidomwindowutils nsidynamiccontainer nsieditor event nsidomevent nsidomeventgroup ...
...ow nsidomwindow2 nsidomwindowinternal nsidomwindowutils nsidynamiccontainer nsieditor event nsidomevent nsidomeventgroup nsidomeventlistener nsidomeventtarget nsidommousescrollevent nsidommoztouchevent nsidomorientationevent nsidomprogressevent nsidomsimplegestureevent nsidragdrophandler nsidragservice nsidragsession
html nsiaccessibilityservice nsiaccessiblecoordinatetype nsiaccessibledocument nsiaccessibleeditabletext nsiaccessibleevent nsiaccessiblehyperlink nsiaccessiblehypertext nsiaccessibleimage nsiaccessibleprovider nsiaccessibleretrieval nsiaccessiblerole nsiaccessiblescrolltype nsiaccessibleselectable nsiaccessiblestates nsiaccessibletable ...
...ssiblehyperlink nsiaccessiblehypertext nsiaccessibleimage nsiaccessibleprovider nsiaccessibleretrieval nsiaccessiblerole nsiaccessiblescrolltype nsiaccessibleselectable nsiaccessiblestates nsiaccessibletable nsiaccessibletext nsiaccessibletreecache nsiaccessiblevalue nsiaccessnode nsisyncmessagesender script nsiscriptableunescape
html nsiscriptableunicodeconverter nsiscripterror nsiscripterror2 stylesheet nsistylesheetservice url nsiuri nsiurl util nsidomserializer nsidomxpathevaluator nsidomxpathexception nsidomxpathexpression nsidomxpathresult xslt nsixsltexception nsixsltprocessor download nsidownload nsidownloadmanager n...
nsIMsgCloudFileProvider
l acstring readonly: a link to the homepage of the service, if applicable.
...the unique identifier for the account associated with an instance of an nsimsgcloudfileprovider.
...tes of the delete operation.
WebIDL bindings
nerated at build time based on two things: the actual webidl file and a configuration file that lists some metadata about how the webidl should be reflected into gecko-internal code.
...on return values become a non-const owning union out param.
... or long) receiveunion(); void passsequenceofunions(sequence<(object or long)> arg); void passotherunion((
htmldivelement or arraybuffer or eventinit) arg); would correspond to these c++ function declarations: void passunion(const objectorlong& aarg); void receiveunion(owningobjectobjectorlong& aarg); void passsequenceofunions(const sequence<owningobjectorlong>& aarg); void passotherunion(const
htmldivelementorarraybufferoreventinit& aarg); union structs expose accessors to test whether they're of a given type and to get hold of the data of that type.
Using Objective-C from js-ctypes
ctypeptr) { /** * creates a c block instance from a js function.
...r_t); // //github.com/realityripple/uxp/blob/master/js/src/ctypes/library.cpp?offset=0#271 /** * the "block descriptor" is a static singleton struct.
...ock_descriptor_1', [ { reserved: ctypes.unsigned_long_long }, { size: ctypes.unsigned_long_long } ]); /** * we have to simulate what the llvm compiler does when it encounters a block * literal expression (see `block-abi-apple.txt` above).
Drawing and Event Handling - Plugins
ss plug-in does not require a native window.
...is drawn in a target called a drawable, which corresponds to either the browser window or an off-screen bitmap.
...npwindow object, which contains the coordinates of the instance's area and various platform-specific data.
Debugger.Object - Firefox Developer Tools
except that the object inspected is implicit and in a different compartment from the caller.) isextensible() return true if the referent is extensible—that is, if it can have new properties defined on it.
...that this debugger.object’s compartment is permitted to unwrap, return a debugger.object instance referring to the wrapped object.
...rn a debugger.object instance referring to the wrapped object.
Tutorial: Set a breakpoint - Firefox Developer Tools
developer tools, click on the options gear at the upper right of the toolbox, and make sure that both “enable browser chrome and add-on debugging toolboxes” and “enable remote debugging” are checked.
...ated at the bottom right of the options panel; you may need to scroll to see them.
...tack frame, and logs its result.
Debugger.Object - Firefox Developer Tools
that the object inspected is implicit and in a different compartment from the caller.) isextensible() return true if the referent is extensible—that is, if it can have new properties defined on it.
...that this debugger.object's compartment is permitted to unwrap, return a debugger.object instance referring to the wrapped object.
... a debugger.object instance referring to the wrapped object.
AudioParam.exponentialRampToValueAtTime() - Web APIs
o 1.0, and down to 0, respectively.
... respectively.
...diocontext(); // set basic variables for example var myaudio = document.queryselector('audio'); var pre = document.queryselector('pre'); var myscript = document.queryselector('script'); pre.inner
html = myscript.inner
html; var exprampplus = document.queryselector('.exp-ramp-plus'); var exprampminus = document.queryselector('.exp-ramp-minus'); // create a mediaelementaudiosourcenode // feed the
htmlmediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a gain node and set its gain value to 0.5 var gainnode = audioctx.creategain(); // connect the audiobuffersourcenode to the gainnode // and the gainnode to the destination gainnode.gain.setvalueattime(0, audioctx.currenttime); source.connect(gainnode); gainnode.connect(audioctx.destination); // set buttons t...
AudioParam.linearRampToValueAtTime() - Web APIs
hough audioparam.exponentialramptovalueattime() is often said to be a bit more natural.
...nentialramptovalueattime() is often said to be a bit more natural.
...; // set basic variables for example var myaudio = document.queryselector('audio'); var pre = document.queryselector('pre'); var myscript = document.queryselector('script'); pre.inner
html = myscript.inner
html; var linearrampplus = document.queryselector('.linear-ramp-plus'); var linearrampminus = document.queryselector('.linear-ramp-minus'); // create a mediaelementaudiosourcenode // feed the
htmlmediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a gain node and set it's gain value to 0.5 var gainnode = audioctx.creategain(); // connect the audiobuffersourcenode to the gainnode // and the gainnode to the destination gainnode.gain.setvalueattime(0, audioctx.currenttime); source.connect(gainnode); gainnode.connect(audioctx.destination); // set buttons ...
AudioParam.setTargetAtTime() - Web APIs
1 second, and the length of time the effect lasts being controlled by the timeconstant.
...gth of time the effect lasts being controlled by the timeconstant.
...w audiocontext(); // set basic variables for example var myaudio = document.queryselector('audio'); var pre = document.queryselector('pre'); var myscript = document.queryselector('script'); pre.inner
html = myscript.inner
html; var attimeplus = document.queryselector('.at-time-plus'); var attimeminus = document.queryselector('.at-time-minus'); // create a mediaelementaudiosourcenode // feed the
htmlmediaelement into it var source = audioctx.createmediaelementsource(myaudio); // create a gain node and set it's gain value to 0.5 var gainnode = audioctx.creategain(); gainnode.gain.value = 0.5; var currgain = gainnode.gain.value; // connect the audiobuffersourcenode to the gainnode // and the gainnode to the destination source.connect(gainnode); gainnode.connect(audioctx.destination); // set ...
AudioTrack - Web APIs
the audiotrack interface represents a single audio track from one of the
html media elements, <audio> or <video>.
...ack.kind)) { tracklist.push({ id: track.id, kind: track.kind, label: track.label }); } }); return tracklist; } the resulting tracklist contains an array of audio tracks whose kind is one of those in the array wantedkinds, with each entry providing the track's id, kind, and label.
...bel }); } }); return tracklist; } the resulting tracklist contains an array of audio tracks whose kind is one of those in the array wantedkinds, with each entry providing the track's id, kind, and label.
AudioTrackList.getTrackById() - Web APIs
ences within the game; if the character's dialog isn't relevant, it gets left out.
...audiotracks.gettrackbyid(charactername).enabled = false; } this short function gets the audiotracklist containing the video's audio tracks using
htmlmediaelement.audiotracks, then calls gettrackbyid() on it, specifying the character's name.
...s audio tracks using
htmlmediaelement.audiotracks, then calls gettrackbyid() on it, specifying the character's name.
AudioTrackList.length - Web APIs
ccessed by treating the audiotracklist as an array of objects of type audiotrack.
...he dom by queryselector().
...diotracks) { numaudiotracks = videoelem.audiotracks.length; } note that this sample checks to be sure
htmlmediaelement.audiotracks is defined, to avoid failing on browsers without support for audiotrack.
CSSStyleSheet - Web APIs
esheet can be associated with a document follows: reason for the style sheet to be associated with the document appears in document.
...ted with a document follows: reason for the style sheet to be associated with the document appears in document.
...object getting the cssstylesheet object from the owner <style> and <link> elements in the document yes .ownernode
htmllinkelement,
htmlstyleelement, or svgstyleelement .sheet css @import rule in other style sheets applied to the document yes .ownerrule cssimportrule .stylesheet <?xml-stylesheet ?> processing instruction in the (non-
html) document yes .ownernode processinginstruction .sheet http link header yes n/a n/a n/a user agent (default) style sheets no n/a n/a n/a specifications specification status comment css object model (cssom)the definition of 'cssstylesheet' in that specification.
CSS Object Model (CSSOM) - Web APIs
the css object model is a set of apis allowing the manipulation of css from javascript.
...rule csssupportsrule cssvariablesmap cssviewportrule elementcssinlinestyle fontface fontfaceset fontfacesetloadevent geometryutils getstyleutils linkstyle medialist mediaquerylist mediaquerylistevent mediaquerylistlistener screen stylesheet stylesheetlist transitionevent several other interfaces are also extended by the cssom-related specifications: document, window, element,
htmlelement,
htmlimageelement, range, mouseevent, and svgelement.
...skewx cssskewy cssstylevalue csstransformcomponent csstransformvalue csstranslate cssunitvalue cssunparsedvalue cssvariablereferencevalue stylepropertymap stylepropertymapreadonly obsolete cssom interfaces cssprimitivevalue cssvalue cssvaluelist tutorials determining the dimensions of elements (it needs some updating as it was made in the d
html/ajax era).
Cache.match() - Web APIs
nses, it resolves with the first matching response only (that is, response[0]).
...spondwith().
...ere were no service worker involvement.
CanvasRenderingContext2D.arc() - Web APIs
arc starts in radians, measured from the positive x-axis.
...dius of 50.
...e let endangle = math.pi + (math.pi * j) / 2; // end point on circle let anticlockwise = i % 2 == 1; // draw anticlockwise ctx.arc(x, y, radius, startangle, endangle, anticlockwise); if (i > 1) { ctx.fill(); } else { ctx.stroke(); } } } result screenshotlive sample specifications specification status comment
html living standardthe definition of 'canvasrenderingcontext2d.arc' in that specification.
CanvasRenderingContext2D.bezierCurveTo() - Web APIs
x-axis coordinate of the first control point.
...int ctx.fill(); // control points ctx.fillstyle = 'red'; ctx.beginpath(); ctx.arc(cp1.x, cp1.y, 5, 0, 2 * math.pi); // control point one ctx.arc(cp2.x, cp2.y, 5, 0, 2 * math.pi); // control point two ctx.fill(); result in this example, the control points are red and the start and end points are blue.
...ied by moveto(): (30, 30).
CanvasRenderingContext2D.canvas - Web APIs
the canvasrenderingcontext2d.canvas property, part of the canvas api, is a read-only reference to the
htmlcanvaselement object that is associated with a given context.
...sociated with a given context.
...t.
CanvasRenderingContext2D.clip() - Web APIs
sible values: "nonzero": the non-zero winding rule.
... 0, canvas.width, canvas.height); ctx.fillstyle = 'orange'; ctx.fillrect(0, 0, 100, 100); result specifying a path and a fillrule this example saves two rectangles to a path2d object, which is then made the current clipping region using the clip() method.
...document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // create clipping path let region = new path2d(); region.rect(80, 10, 20, 130); region.rect(40, 50, 100, 50); ctx.clip(region, "evenodd"); // draw stuff that gets clipped ctx.fillstyle = 'blue'; ctx.fillrect(0, 0, canvas.width, canvas.height); result specifications specification status comment
html living standardthe definition of 'canvasrenderingcontext2d.clip' in that specification.
CanvasRenderingContext2D.closePath() - Web APIs
oesn't draw anything to the canvas directly.
....lineto(120, 10); // line to top corner ctx.lineto(220, 140); // line to bottom-right corner ctx.closepath(); // line to bottom-left corner ctx.stroke(); result closing just one sub-path this example draws a smiley face consisting of three disconnected sub-paths.
... creates the mouth.
CanvasRenderingContext2D.createImageData() - Web APIs
and height.
...s data property has a length of 4 × 5,000, or 20,000.
...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.
CanvasRenderingContext2D.ellipse() - Web APIs
and expressed in radians.
...as'); const ctx = canvas.getcontext('2d'); // draw the ellipse ctx.beginpath(); ctx.ellipse(100, 100, 50, 75, math.pi / 4, 0, 2 * math.pi); ctx.stroke(); // draw the ellipse's line of reflection ctx.beginpath(); ctx.setlinedash([5, 5]); ctx.moveto(0, 200); ctx.lineto(200, 0); ctx.stroke(); result various elliptical arcs this example creates three elliptical paths with varying properties.
...tx.beginpath(); ctx.ellipse(60, 75, 50, 30, math.pi * .25, 0, math.pi * 1.5); ctx.fill(); ctx.fillstyle = 'blue'; ctx.beginpath(); ctx.ellipse(150, 75, 50, 30, math.pi * .25, 0, math.pi); ctx.fill(); ctx.fillstyle = 'green'; ctx.beginpath(); ctx.ellipse(240, 75, 50, 30, math.pi * .25, 0, math.pi, true); ctx.fill(); result specifications specification status comment
html living standardthe definition of 'canvasrenderingcontext2d.ellipse' in that specification.
CanvasRenderingContext2D.fill() - Web APIs
l([fillrule]); void ctx.fill(path [, fillrule]); parameters fillrule the algorithm by which to determine if a point is inside or outside the filling region.
... const ctx = canvas.getcontext('2d'); ctx.rect(10, 10, 150, 100); ctx.fill(); result specifying a path and a fillrule this example saves some intersecting lines to a path2d object.
...vas'); const ctx = canvas.getcontext('2d'); // create path let region = new path2d(); region.moveto(30, 90); region.lineto(110, 20); region.lineto(240, 130); region.lineto(60, 130); region.lineto(190, 20); region.lineto(270, 90); region.closepath(); // fill path ctx.fillstyle = 'green'; ctx.fill(region, 'evenodd'); result specifications specification status comment
html living standardthe definition of 'canvasrenderingcontext2d.fill' in that specification.
CanvasRenderingContext2D.fillText() - Web APIs
ver, if this value is provided, the user agent will adjust the kerning, select a more horizontally condensed font (if one is available or can be generated without loss of quality), or scale down to a smaller font size in order to fit the text in the specified width.
...s code obtains a reference to the <canvas>, then gets a reference to its 2d graphics context.
...size this example writes the words "hello world," restricting its width to 140 pixels.
CanvasRenderingContext2D.filter - Web APIs
ed.
...tml <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.filter = 'blur(4px)'; ctx.font = '48px serif'; ctx.filltext('hello world', 50, 100); result applying multiple filters you can combine as many filters as you like.
...e.jpg"> </div> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const image = document.getelementbyid('source'); image.addeventlistener('load', e => { ctx.filter = 'contrast(1.4) sepia(1) drop-shadow(9px 9px 2px #e81)'; ctx.drawimage(image, 10, 10, 180, 120); }); result specifications specification status comment
html living standardthe definition of 'canvasrenderingcontext2d.filter' in that specification.
CanvasRenderingContext2D.isPointInPath() - Web APIs
dd": the even-odd winding rule.
...mentbyid('canvas'); const ctx = canvas.getcontext('2d'); const result = document.getelementbyid('result'); ctx.rect(10, 10, 100, 100); ctx.fill(); result.innertext = ctx.ispointinpath(30, 70); result checking a point in the specified path whenever you move the mouse, this example checks whether the cursor is in a circular path2d path.
...eventlistener('mousemove', function(event) { // check whether point is inside circle if (ctx.ispointinpath(circle, event.offsetx, event.offsety)) { ctx.fillstyle = 'green'; } else { ctx.fillstyle = 'red'; } // draw circle ctx.clearrect(0, 0, canvas.width, canvas.height); ctx.fill(circle); }); result specifications specification status comment
html living standardthe definition of 'canvasrenderingcontext2d.ispointinpath' in that specification.
CanvasRenderingContext2D.isPointInStroke() - Web APIs
int to check.
... canvas.getcontext('2d'); const result = document.getelementbyid('result'); ctx.rect(10, 10, 100, 100); ctx.stroke(); result.innertext = ctx.ispointinstroke(50, 10); result checking a point in the specified path whenever you move the mouse, this example checks whether the cursor is in the stroke of an elliptical path2d path.
... { // check whether point is inside ellipse's stroke if (ctx.ispointinstroke(ellipse, event.offsetx, event.offsety)) { ctx.strokestyle = 'green'; } else { ctx.strokestyle = 'red'; } // draw ellipse ctx.clearrect(0, 0, canvas.width, canvas.height); ctx.fill(ellipse); ctx.stroke(ellipse); }); result specifications specification status comment
html living standardthe definition of 'canvasrenderingcontext2d.ispointinstroke' in that specification.
CanvasRenderingContext2D.lineDashOffset - Web APIs
ffset property of the canvas 2d api sets the line dash offset, or "phase." note: lines are drawn by calling the stroke() method.
...; ctx.strokestyle = 'red'; ctx.linedashoffset = 4; ctx.moveto(0, 100); ctx.lineto(300, 100); ctx.stroke(); result the line with a dash offset is drawn in red.
...anvas.getcontext('2d'); let offset = 0; function draw() { ctx.clearrect(0, 0, canvas.width, canvas.height); ctx.setlinedash([4, 2]); ctx.linedashoffset = -offset; ctx.strokerect(10, 10, 100, 100); } function march() { offset++; if (offset > 16) { offset = 0; } draw(); settimeout(march, 20); } march(); specifications specification status comment
html living standardthe definition of 'canvasrenderingcontext2d.linedashoffset' in that specification.
CanvasRenderingContext2D.lineTo() - Web APIs
path, this method does not directly render anything.
...moveto(30, 50); // move the pen to (30, 50) ctx.lineto(150, 100); // draw a line to (150, 100) ctx.stroke(); // render the path result drawing connected lines each call of lineto() (and similar methods) automatically adds to the current sub-path, which means that all the lines will all be stroked or filled together.
...letter 'm' with a single contiguous line.
CanvasRenderingContext2D.quadraticCurveTo() - Web APIs
before creating the quadratic bézier curve.
...2 * math.pi); // start point ctx.arc(50, 100, 5, 0, 2 * math.pi); // end point ctx.fill(); // control point ctx.fillstyle = 'red'; ctx.beginpath(); ctx.arc(230, 30, 5, 0, 2 * math.pi); ctx.fill(); result in this example, the control point is red and the start and end points are blue.
... the curve begins at the point specified by moveto(): (20, 110).
CanvasRenderingContext2D.resetTransform() - Web APIs
the canvasrenderingcontext2d.resettransform() method of the canvas 2d api resets the current transform to the identity matrix.
..., 0, 100, 30); // reset transformation matrix to the identity matrix ctx.resettransform(); result continuing with a regular matrix whenever you're done drawing transformed shapes, you should call resettransform() before rendering anything else.
...nsform(); ctx.fillstyle = 'red'; ctx.fillrect(40, 40, 50, 20); ctx.fillrect(40, 90, 50, 20); result the skewed rectangles are gray, and the non-skewed rectangles are red.
CanvasRenderingContext2D.rotate() - Web APIs
use degree * math.pi / 180 to calculate a radian from a degree.
...ple rotates a shape around its center point.
...otated rectangle ctx.fillstyle = 'gray'; ctx.fillrect(80, 60, 140, 30); // matrix transformation ctx.translate(150, 75); ctx.rotate(math.pi / 2); ctx.translate(-150, -75); // rotated rectangle ctx.fillstyle = 'red'; ctx.fillrect(80, 60, 140, 30); result the non-rotated rectangle is gray, and the rotated rectangle is red.
CanvasRenderingContext2D.scale() - Web APIs
the horizontal direction.
... flipping things horizontally or vertically you can use scale(-1, 1) to flip the context horizontally and scale(1, -1) to flip it vertically.
...-1 becomes 280, and text is drawn leftwards from that point.
CanvasRenderingContext2D.setLineDash() - Web APIs
ts).
...vas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // dashed line ctx.beginpath(); ctx.setlinedash([5, 15]); ctx.moveto(0, 50); ctx.lineto(300, 50); ctx.stroke(); // solid line ctx.beginpath(); ctx.setlinedash([]); ctx.moveto(0, 100); ctx.lineto(300, 100); ctx.stroke(); result some common patterns this example illustrates a variety of common line dash patterns.
...s = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); let y = 15; drawdashedline([]); drawdashedline([1, 1]); drawdashedline([10, 10]); drawdashedline([20, 5]); drawdashedline([15, 3, 3, 3]); drawdashedline([20, 3, 3, 3, 3, 3, 3, 3]); drawdashedline([12, 3, 3]); // equals [12, 3, 3, 12, 3, 3] result specifications specification status comment
html living standardthe definition of 'canvasrenderingcontext2d.setlinedash' in that specification.
CanvasRenderingContext2D.setTransform() - Web APIs
vertical translation (moving).
...e two <canvas> elements.
...ases[0].getcontext('2d'); const ctx2 = canvases[1].getcontext('2d'); ctx1.settransform(1, .2, .8, 1, 0, 0); ctx1.fillrect(25, 25, 50, 50); let storedtransform = ctx1.gettransform(); console.log(storedtransform); ctx2.settransform(storedtransform); ctx2.beginpath(); ctx2.arc(50, 50, 50, 0, 2 * math.pi); ctx2.fill(); result specifications specification status comment
html living standardthe definition of 'canvasrenderingcontext2d.settransform' in that specification.
CanvasRenderingContext2D.shadowColor - Web APIs
tax ctx.shadowcolor = color; color a domstring parsed as a css <color> value.
...shadowoffsety = 10; // filled rectangle ctx.fillrect(20, 20, 100, 100); // stroked rectangle ctx.linewidth = 6; ctx.strokerect(170, 20, 100, 100); result shadows on translucent shapes a shadow's opacity is affected by the transparency level of its parent object (even when shadowcolor specifies a completely opaque value).
...w ctx.shadowcolor = 'rgba(255, 0, 0, .8)'; ctx.shadowblur = 8; ctx.shadowoffsetx = 30; ctx.shadowoffsety = 20; // filled rectangle ctx.fillstyle = 'rgba(0, 255, 0, .2)'; ctx.fillrect(10, 10, 150, 100); // stroked rectangle ctx.linewidth = 10; ctx.strokestyle = 'rgba(0, 0, 255, .6)'; ctx.strokerect(10, 10, 150, 100); result specifications specification status comment
html living standardthe definition of 'canvasrenderingcontext2d.shadowcolor' in that specification.
CanvasRenderingContext2D.strokeText() - Web APIs
f this value is provided, the user agent will adjust the kerning, select a more horizontally condensed font (if one is available or can be generated without loss of quality), or scale down to a smaller font size in order to fit the text in the specified width.
...code obtains a reference to the <canvas>, then gets a reference to its 2d graphics context.
...ze this example writes the words "hello world," restricting its width to 140 pixels.
CanvasRenderingContext2D.textAlign - Web APIs
t-aligned for left-to-right locales, right-aligned for right-to-left locales).
...n = 'center'; ctx.filltext('center-aligned', x, 85); ctx.textalign = 'right'; ctx.filltext('right-aligned', x, 130); result direction-dependent text alignment this example demonstrates the two direction-dependent values of the textalign property: "start" and "end".
...l <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = '30px serif'; ctx.direction = 'ltr'; ctx.textalign = 'start'; ctx.filltext('start-aligned', 0, 50); ctx.textalign = 'end'; ctx.filltext('end-aligned', canvas.width, 120); result specifications specification status comment
html living standardthe definition of 'canvasrenderingcontext2d.textalign' in that specification.
CanvasRenderingContext2D - Web APIs
, part of the canvas api, provides the 2d rendering context for the drawing surface of a <canvas> element.
...he following methods help you to work with that state: canvasrenderingcontext2d.save() saves the current drawing style state using a stack so you can revert any change you make to it using restore().
...ng and scrolling.
Applying styles and colors - Web APIs
increases exponentially.
...asured in the current coordinate system, by the value of this miterlimit property (whose default value is 10.0 in the
html <canvas>), so the miterlimit can be set independently from the current display scale or any affine transforms of paths: it only influences the effectively rendered shape of line edges.
... a demonstration, but in the first gradient #019f62 = rgba(1,159,98,1).
Canvas tutorial - Web APIs
<canvas> is an
html element which can be used to draw graphics via scripting (usually javascript).
...you some clear ideas about what you can do with canvas, and will provide code snippets that may get you started in building your own content.
... major browsers support it.
Using channel messaging - Web APIs
('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 onclick(e) { e.preventdefault(); port1.postmessage(input.value); } // handle messages received on port1 function onmessage(e) { output.inner
html = e.data; input.value = ''; } we start off by creating a new message channel by using the messagechannel() constructor.
...message).
...sages received on port1 function onmessage(e) { output.inner
html = e.data; input.value = ''; } when a message is received back from the iframe confirming that the original message was received successfully, this simply outputs the confirmation to a paragraph and empties the text input ready for the next message to be sent.
ContentIndex.add() - Web APIs
n the item registered is an object containing the following data: id: a unique string identifier.
...rker does not contain a fetchevent.
...= await navigator.serviceworker.ready; // feature detect content index if (!registration.index) { return; } // register content try { await registration.index.add(data); } catch (e) { console.log('failed to register content: ', e.message); } } the add method can also be used within the service worker scope.
CustomElementRegistry.upgrade() - Web APIs
interface upgrades all shadow-containing custom elements in a node subtree, even before they are connected to the main document.
...e they are connected to the main document.
...d.
DataTransfer.dropEffect - Web APIs
ossible values are: copy a copy of the source item is made at the new location.
...data("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragover_handler(ev) { console.log("dragover: dropeffect = " + ev.datatransfer.dropeffect + " ; effectallowed = " + ev.datatransfer.effectallowed); ev.preventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } specifications specification status comment
html living standardthe definition of 'dropeffect' in that specification.
...console.log("dragover: dropeffect = " + ev.datatransfer.dropeffect + " ; effectallowed = " + ev.datatransfer.effectallowed); ev.preventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } specifications specification status comment
html living standardthe definition of 'dropeffect' in that specification.
DataTransferItemList - Web APIs
t the given index.
...datatransferitem() getter that returns a datatransferitem at the given index.
...s methods and properties has a reference page, and each reference page has an example of its usage.
Document.alinkColor - Web APIs
the time between mousedown and mouseup events.
...s a string containing the name of the color (e.g., blue, darkblue, etc.) or the hexadecimal value of the color (e.g., #0000ff) notes the default value for this property in mozilla firefox is red (#ee0000 in hexadecimal).
...this property in mozilla firefox is red (#ee0000 in hexadecimal).
Document.documentElement - Web APIs
document.documentelement returns the element that is the root element of the document (for example, the <
html> element for
html documents).
...lement for
html documents).
... = document.documentelement example const rootelement = document.documentelement; const firsttier = rootelement.childnodes; // firsttier is a nodelist of the direct children of the root element // such as <head> and <body> for (const child of firsttier) { // do something with each direct child of the root element } notes for any non-empty
html document, documentelement will always be an <
html> element.
Document.links - Web APIs
the links read-only property of the document interface returns a collection of all <area> elements and <a> elements in a document with a value for the href attribute.
....
...r linkhref = document.createtextnode(links[i].href); var linebreak = document.createelement("br"); document.body.appendchild(linkhref); document.body.appendchild(linebreak); } specifications specification status comment
html living standardthe definition of 'document.links' in that specification.
Document.location - Web APIs
.
...ocation document.location = 'http://www.mozilla.org' // equivalent to document.location.href = 'http://www.mozilla.org' examples console.log(document.location); // prints a location object to the console specifications specification status comment
html living standardthe definition of 'document.location' in that specification.
....location = 'http://www.mozilla.org' // equivalent to document.location.href = 'http://www.mozilla.org' examples console.log(document.location); // prints a location object to the console specifications specification status comment
html living standardthe definition of 'document.location' in that specification.
Document.plugins - Web APIs
the plugins read-only property of the document interface returns an
htmlcollection object containing one or more
htmlembedelements representing the <embed> elements in the current document.
... the plugins read-only property of the document interface returns an
htmlcollection object containing one or more
htmlembedelements representing the <embed> elements in the current document.
...ace returns an
htmlcollection object containing one or more
htmlembedelements representing the <embed> elements in the current document.
Document.readyState - Web APIs
initapplication(); } } readystatechange as event listener to insert or modify the dom before domcontentloaded document.addeventlistener('readystatechange', event => { if (event.target.readystate === 'interactive') { initloader(); } else if (event.target.readystate === 'complete') { initapp(); } }); specifications specification status comment
html living standardthe definition of 'document readiness' in that specification.
...d document.addeventlistener('readystatechange', event => { if (event.target.readystate === 'interactive') { initloader(); } else if (event.target.readystate === 'complete') { initapp(); } }); specifications specification status comment
html living standardthe definition of 'document readiness' in that specification.
...tive') { initloader(); } else if (event.target.readystate === 'complete') { initapp(); } }); specifications specification status comment
html living standardthe definition of 'document readiness' in that specification.
Document.scripts - Web APIs
the scripts property of the document interface returns a list of the <script> elements in the document.
... the scripts property of the document interface returns a list of the <script> elements in the document.
...collection.
Document.vlinkColor - Web APIs
the color of links that the user has visited in the document.
...lor document.vlinkcolor = color parameters color is a string representing the color as a word (e.g., "red") or hexadecimal value (e.g., "#ff0000").
...l value (e.g., "#ff0000").
Events and the DOM - Web APIs
console.log('greet:', arguments) alert('hello world') } this is the method you should use in modern web pages.
...tachevent api instead.
...oided!
Element.attributes - Web APIs
xamples // get the first <p> element in the document var para = document.getelementsbytagname("p")[0]; var atts = para.attributes; enumerating elements attributes numerical indexing is useful for going through all of an element's attributes.
... // get the first <p> element in the document var para = document.getelementsbytagname("p")[0]; var atts = para.attributes; enumerating elements attributes numerical indexing is useful for going through all of an element's attributes.
... } result.value = output; } else { result.value = "no attributes to show"; } } </script> </head> <body> <p id="paragraph" style="color: green;">sample paragraph</p> <form action=""> <p> <input type="button" value="show first attribute name and value" onclick="listattributes();"> <input id="result" type="text" value=""> </p> </form> </body> </
html> specifications specification status comment domthe definition of 'element.attributes' in that specification.
Element.getAttributeNode() - Web APIs
returns the specified attribute of the specified element, as an attr node.
...cified attribute of the specified element, as an attr node.
...ement, as an attr node.
Element.scrollWidth - Web APIs
s such as ::before or ::after.
...as ::before or ::after.
...unction alertoverflow(element) { if (isoverflowing(element)) { alert('contents are overflowing the container.'); } else { alert('no overflows!'); } } buttonone.addeventlistener('click', function() { alertoverflow(divone); }); buttontwo.addeventlistener('click', function() { alertoverflow(divtwo); }); </script> </
html> result specification specification status comment css object model (cssom) view modulethe definition of 'element.scrollwidth' in that specification.
Element.setAttribute() - Web APIs
ute is added with the specified name and value.
...he specified name and value.
...ts value to be null, it instead sets the attribute's value to the string "null".
Element.setCapture() - Web APIs
or element.setpointercapture instead, from the pointer events api.
...lor: 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("output").inner
html = "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 output = document.getelementbyid("o...
...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 output = document.getelementbyid("output"); output.inner
html = "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="output">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 o...
Element.toggleAttribute() - Web APIs
eattribute() method of the element interface toggles a boolean attribute (removing it if it is present and adding it if it is not present) on the given element.
... of the element interface toggles a boolean attribute (removing it if it is present and adding it if it is not present) on the given element.
..., no matter whether the attribute is present or not at the moment.
ElementCSSInlineStyle.style - Web APIs
se that come from style rules elsewhere, such as style rules in the <head> section, or external style sheets.
... come from style rules elsewhere, such as style rules in the <head> section, or external style sheets.
...o get the values of all css properties for an element you should use window.getcomputedstyle() instead.
Event - Web APIs
the event interface represents an event which takes place in the dom.
...dispatchevent().
...ontains the properties and methods which are common to all events.
Using Fetch - Web APIs
ta.
...'input[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 <input type="file" multiple /> input element, formdata() and fetch().
...y of arrays or an object literal to the constructor: const myheaders = new headers({ 'content-type': 'text/plain', 'content-length': content.length.tostring(), 'x-custom-header': 'processthisimmediately' }); the contents can be queried and retrieved: console.log(myheaders.has('content-type')); // true console.log(myheaders.has('set-cookie')); // false myheaders.set('content-type', 'text/
html'); myheaders.append('x-custom-header', 'anothervalue'); console.log(myheaders.get('content-length')); // 11 console.log(myheaders.get('x-custom-header')); // ['processthisimmediately', 'anothervalue'] myheaders.delete('x-custom-header'); console.log(myheaders.get('x-custom-header')); // [ ] some of these operations are only useful in serviceworkers, but they provide a much nicer api for manip...
FileSystemEntry.toURL() - Web APIs
ters mimetype optional an optional string specifying the mime type to use when interpreting the file.
... return value a domstring containing a url that can then be used as a document reference in
html content, or an empty string if the url can't be generated (such as if the file system implementation doesn't support tourl()).
..., the url returned by tourl() might be (depending on the browser's implementation) something like "filesystem:http://my-awesome-website.woot/temporary/awesomesauce.jpg".
GlobalEventHandlers.oncontextmenu - Web APIs
expression.
...lexible.
...se(e) { body.classlist.add('paused'); note.removeattribute('hidden'); } function play(e) { body.classlist.remove('paused'); note.setattribute('hidden', ''); } const body = document.queryselector('body'); const note = document.queryselector('.note'); window.oncontextmenu = pause; window.onpointerdown = play; result specifications specification status comment
html living standardthe definition of 'oncontextmenu' in that specification.
GlobalEventHandlers.onerror - Web APIs
seful for automated collection of error reports.
...); var substring = "script error"; if (string.indexof(substring) > -1){ alert('script error: see browser console for detail'); } else { var message = [ 'message: ' + msg, 'url: ' + url, 'line: ' + lineno, 'column: ' + columnno, 'error object: ' + json.stringify(error) ].join(' - '); alert(message); } return false; }; when using the inline
html markup (<body onerror="alert('an error occurred')">), the
html specification requires arguments passed to onerror to be named event, source, lineno, colno, error.
...return false; }; when using the inline
html markup (<body onerror="alert('an error occurred')">), the
html specification requires arguments passed to onerror to be named event, source, lineno, colno, error.
History.go() - Web APIs
page (the equivalent of calling back()): history.go(-1) to move forward a page, just like calling forward(): history.go(1) to move forward two pages: history.go(2); to move backwards by two pages: history.go(-2); and, finally either of the following statements will reload the current page: history.go(); history.go(0); specifications specification status comment
html living standardthe definition of 'history.go()' in that specification.
...history.go(1) to move forward two pages: history.go(2); to move backwards by two pages: history.go(-2); and, finally either of the following statements will reload the current page: history.go(); history.go(0); specifications specification status comment
html living standardthe definition of 'history.go()' in that specification.
...o move forward two pages: history.go(2); to move backwards by two pages: history.go(-2); and, finally either of the following statements will reload the current page: history.go(); history.go(0); specifications specification status comment
html living standardthe definition of 'history.go()' in that specification.
History.length - Web APIs
the history.length read-only property returns an integer representing the number of elements in the session history, including the currently loaded page.
... integer representing the number of elements in the session history, including the currently loaded page.
...nting the number of elements in the session history, including the currently loaded page.
History.scrollRestoration - Web APIs
toration behavior.
...'the location on the page is not restored, user will need to scroll manually.'); } prevent automatic page location restoration if (history.scrollrestoration) { history.scrollrestoration = 'manual'; } specifications specification status comment
html living standardthe definition of 'scroll restoration mode' in that specification.
... the page is not restored, user will need to scroll manually.'); } prevent automatic page location restoration if (history.scrollrestoration) { history.scrollrestoration = 'manual'; } specifications specification status comment
html living standardthe definition of 'scroll restoration mode' in that specification.
History.state - Web APIs
e before using the pushstate() method to push a value to the history.
...hould be null because we haven't modified the history stack yet console.log(`history.state before pushstate: ${history.state}`); // now push something on the stack history.pushstate({name: 'example'}, "pushstate example", 'page3.
html'); // now state has a value.
...${history.state}`); // now push something on the stack history.pushstate({name: 'example'}, "pushstate example", 'page3.
html'); // now state has a value.
IDBDatabase.onabort - Web APIs
feature is available in web workers.
...; example this example shows an idbopendbrequest.onupgradeneeded block that creates a new object store; it also includes onerror and onabort functions to handle non-success cases.
...objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "day", { unique: false }); objectstore.createindex("month", "month", { unique: false }); objectstore.createindex("year", "year", { unique: false }); objectstore.createindex("notified", "notified", { unique: false }); note.inner
html += '<li>object store created.</li>'; }; specifications specification status comment indexed database api 2.0the definition of 'onabort' in that specification.
IDBDatabase.onerror - Web APIs
this feature is available in web workers.
... example this example shows an idbopendbrequest.onupgradeneeded block that creates a new object store; it also includes onerror and onabort functions to handle non-success cases.
...objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "day", { unique: false }); objectstore.createindex("month", "month", { unique: false }); objectstore.createindex("year", "year", { unique: false }); objectstore.createindex("notified", "notified", { unique: false }); note.inner
html += '<li>object store created.</li>'; }; specifications specification status comment indexed database api 2.0the definition of 'onerror' in that specification.
IDBDatabase.onversionchange - Web APIs
...
...bject store; it also includes onerror and onabort functions to handle non-success cases, and an onversionchange function to notify when a database structure change has occurred.
...objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "day", { unique: false }); objectstore.createindex("month", "month", { unique: false }); objectstore.createindex("year", "year", { unique: false }); objectstore.createindex("notified", "notified", { unique: false }); note.inner
html += '<li>object store created.</li>'; db.onversionchange = function(event) { note.inner
html += '<li>a database change has occurred; you should refresh this browser window, or close it down and use the other open version of this application, wherever it exists.</li>'; }; }; specifications specification status comment i...
IDBIndex.count() - Web APIs
as opening a cursor directly on an objectstore using idbobjectstore.opencursor except that the returned records are sorted based on the index, not the primary key.
...ary key.
...objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); var countrequest = myindex.count(); countrequest.onsuccess = function() { console.log(countrequest.result); } myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.inner
html = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</td>' + '<td>' + cursor.value.email + '</td>' ...
IDBIndex.get() - Web APIs
g a cursor directly on an objectstore using idbobjectstore.opencursor except that the returned records are sorted based on the index, not the primary key.
... myindex.get('bungle') is then used to retrieve the record with an lname of bungle, and the result of that request is logged to the console when its success callback returns.
...objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); var getrequest = myindex.get('bungle'); getrequest.onsuccess = function() { console.log(getrequest.result); } myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.inner
html = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</td>' + '<td>' + cursor.value.email + '</td>' ...
IDBIndex.getKey() - Web APIs
an objectstore using idbobjectstore.opencursor except that the returned records are sorted based on the index, not the primary key.
...e') is then used to retrieve the primary key of the record with an lname of bungle, and the result of that request is logged to the console when its success callback returns.
...= transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); var getkeyrequest = myindex.getkey('bungle'); getkeyrequest.onsuccess = function() { console.log(getkeyrequest.result); } myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.inner
html = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</td>' + '<td>' + cursor.value.email + '</td>' ...
IDBIndex.keyPath - Web APIs
ic cursor on the index using idbindex.opencursor — this works the same as opening a cursor directly on an objectstore using idbobjectstore.opencursor except that the returned records are sorted based on the index, not the primary key.
...ept that the returned records are sorted based on the index, not the primary key.
...inner
html = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.keypath); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.inner
html = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</td>' + '<td>' + cursor.value.email + '</td>' ...
IDBIndex.multiEntry - Web APIs
cursor on the index using idbindex.opencursor — this works the same as opening a cursor directly on an objectstore using idbobjectstore.opencursor except that the returned records are sorted based on the index, not the primary key.
...t that the returned records are sorted based on the index, not the primary key.
...er
html = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.multientry); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.inner
html = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</td>' + '<td>' + cursor.value.email + '</td>' ...
IDBIndex.name - Web APIs
e.
...ncursor() except that the returned records are sorted based on the index, not the primary key.
...ry.inner
html = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.name); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.inner
html = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</td>' + '<td>' + cursor.value.email + '</td>' ...
IDBIndex.objectStore - Web APIs
e.opencursor except that the returned records are sorted based on the index, not the primary key.
...ould be returned something like this: idbobjectstore { name: "contactslist", keypath: "id", indexnames: domstringlist[7], transaction: idbtransaction, autoincrement: false } finally, we iterate through each record, and insert the data into an
html table.
...r
html = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.objectstore); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.inner
html = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</td>' + '<td>' + cursor.value.email + '</td>' ...
IDBIndex.openCursor() - Web APIs
on and an object store, then get the index lname from a simple contacts database.
...s the same as opening a cursor directly on an objectstore using idbobjectstore.opencursor except that the returned records are sorted based on the index, not the primary key.
...laydatabyindex() { tableentry.inner
html = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.inner
html = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</td>' + '<td>' + cursor.value.email + '</td>' ...
IDBIndex.openKeyCursor() - Web APIs
we then open a key cursor on the index using openkeycursor() — this works the same as opening a cursor directly on an objectstore using idbobjectstore.openkeycursor except that the returned records are sorted based on the index, not the primary key.
......
...databyindex() { tableentry.inner
html = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); myindex.openkeycursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.inner
html = '<td>' + cursor.key + '</td>' + '<td>' + cursor.primarykey + '</td>'; tableentry.appendchild(tablerow); cursor.continue(); } else { console.log('all last names displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'openkeycursor()' in that specification.
IDBIndex.unique - Web APIs
basic cursor on the index using idbindex.opencursor — this works the same as opening a cursor directly on an objectstore using idbobjectstore.opencursor except that the returned records are sorted based on the index, not the primary key.
...except that the returned records are sorted based on the index, not the primary key.
....inner
html = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.unique); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.inner
html = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</td>' + '<td>' + cursor.value.email + '</td>' ...
IDBIndex - Web APIs
an object store, then get the index lname from a simple contacts database.
...s the same as opening a cursor directly on an objectstore using idbobjectstore.opencursor except that the returned records are sorted based on the index, not the primary key.
...playdatabyindex() { tableentry.inner
html = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.inner
html = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</td>' + '<td>' + cursor.value.email + '</td>' ...
IDBObjectStore.add() - Web APIs
ject store using add().
...b var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.inner
html += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.inner
html += '<li>transaction not opened due to error.
...ot opened due to error.
IDBObjectStore.autoIncrement - Web APIs
/write transaction on our database and add some data to an object store using add().
...b var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.inner
html += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.inner
html += '<li>transaction not opened due to error.
...t allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); console.log(objectstore.autoincrement); // make a request to add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of our request note.inner
html += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'autoincrement' in that specification.
IDBObjectStore.clear() - Web APIs
e.
...lot below db = dbopenrequest.result; // clear all the data form the object store cleardata(); }; function cleardata() { // open a read/write db transaction, ready for clearing the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.inner
html += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.inner
html += '<li>transaction not opened due to error: ' + transaction.error + '</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // make a request to clear all the data out of the object store var objectstorerequest = objectstore.
...ansaction not opened due to error: ' + transaction.error + '</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // make a request to clear all the data out of the object store var objectstorerequest = objectstore.clear(); objectstorerequest.onsuccess = function(event) { // report the success of our request note.inner
html += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'clear()' in that specification.
IDBObjectStore.createIndex() - Web APIs
if a database with a higher version number is loaded.
... object store.
...in the idb displaydata(); }; // this handler fires when a new database is created and indicates // either that one has not been created before, or a new version // was submitted with window.indexeddb.open().
IDBObjectStore.delete() - Web APIs
e snippet, we open a read/write transaction on our database and delete one specific record out of our object store using delete() — a sample record with the key "walk dog".
...st.result; // run the deletedata() function to delete a record from the database deletedata(); }; function deletedata() { // open a read/write db transaction, ready for deleting the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.inner
html += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.inner
html += '<li>transaction not opened due to error: ' + transaction.error + '</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // make a request to delete the specified record out of the object store var objectstorerequest = obj...
... due to error: ' + transaction.error + '</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // make a request to delete the specified record out of the object store var objectstorerequest = objectstore.delete("walk dog"); objectstorerequest.onsuccess = function(event) { // report the success of our request note.inner
html += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'delete()' in that specification.
IDBObjectStore.deleteIndex() - Web APIs
the object store, after which we delete the unneeded old indexes with deleteindex().
... example, see our to-do notifications app (view example live.) var db; // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database being opened successfully, or not dbopenrequest.onerror = function(event) { note.inner
html += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.inner
html += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
...aydata(); }; // this event handles the event whereby a new version of the database needs to be created // either one has not been created before, or a new version number has been submitted via the // window.indexeddb.open line above //it is only implemented in recent browsers dbopenrequest.onupgradeneeded = function(event) { var db = this.result; db.onerror = function(event) { note.inner
html += '<li>error loading database.</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "...
IDBObjectStore.get() - Web APIs
ey "walk dog".
...bopenrequest.result; // run the getdata() function to get the data from the database getdata(); }; function getdata() { // open a read/write db transaction, ready for retrieving the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.inner
html += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.inner
html += '<li>transaction not opened due to error: ' + transaction.error + '</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // make a request to get a record by key from the object store var objectstorerequest = objectstore.g...
...on not opened due to error: ' + transaction.error + '</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // make a request to get a record by key from the object store var objectstorerequest = objectstore.get("walk dog"); objectstorerequest.onsuccess = function(event) { // report the success of our request note.inner
html += '<li>request successful.</li>'; var myrecord = objectstorerequest.result; }; }; specifications specification status comment indexed database api 2.0the definition of 'get()' in that specification.
IDBObjectStore.index() - Web APIs
an object store, then get the index lname from a simple contacts database.
...s the same as opening a cursor directly on an objectstore using idbobjectstore.opencursor except that the returned records are sorted based on the index, not the primary key.
...playdatabyindex() { tableentry.inner
html = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.inner
html = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</td>' + '<td>' + cursor.value.email + '</td>' ...
IDBObjectStore.indexNames - Web APIs
ead/write transaction on our database and add some data to an object store using add().
...b var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.inner
html += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.inner
html += '<li>transaction not opened due to error.
... not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); console.log(objectstore.indexnames); // make a request to add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of our request note.inner
html += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'indexnames' in that specification.
IDBObjectStore.keyPath - Web APIs
a read/write transaction on our database and add some data to an object store using add().
...b var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.inner
html += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.inner
html += '<li>transaction not opened due to error.
...ems not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); console.log(objectstore.keypath); // make a request to add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of our request note.inner
html += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'keypath' in that specification.
IDBObjectStore.name - Web APIs
en a read/write transaction on our database and add some data to an object store using add().
...b var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.inner
html += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.inner
html += '<li>transaction not opened due to error.
... items not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); console.log(objectstore.name); // make a request to add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of our request note.inner
html += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'name' in that specification.
IDBObjectStore.transaction - Web APIs
ad/write transaction on our database and add some data to an object store using add().
...b var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.inner
html += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.inner
html += '<li>transaction not opened due to error.
...not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); console.log(objectstore.transaction); // make a request to add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of our request note.inner
html += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'transaction' in that specification.
IDBOpenDBRequest.onblocked - Web APIs
osed) somewhere, even after the versionchange event was sent.
...web workers.
...(); }; // this event handles the event whereby a new version of the // database needs to be created.
IDBOpenDBRequest.onupgradeneeded - Web APIs
e.
...x("by_year", "year"); } if (event.oldversion < 3) { // version 3 introduces a new object store for magazines with two indexes.
...tore for magazines with two indexes.
IDBOpenDBRequest - Web APIs
ded handler being used to update the database structure if a database with a higher version number is loaded.
...aded.
...ta(); }; // this event handles the event whereby a new version of // the database needs to be created either one has not // been created before, or a new version number has been // submitted via the window.indexeddb.open line above // it is only implemented in recent browsers dbopenrequest.onupgradeneeded = function(event) { var db = this.result; db.onerror = function(event) { note.inner
html += '<li>error loading database.</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "...
IDBTransaction.abort() - Web APIs
eport on the outcome of the transaction opening in the event of success or failure.
...r being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.inner
html += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.inner
html += '<li>transaction not opened due to error.
... transaction var objectstore = transaction.objectstore("todolist"); // add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.inner
html += '<li>request successful.</li>'; }; // abort the transaction we just did transaction.abort(); }; specification specification status comment indexed database api 2.0the definition of 'abort()' in that specification.
IDBTransaction.commit() - Web APIs
rameters none.
...on state is not active.
...store on the transaction var objectstore = transaction.objectstore("myobjstore"); // add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.inner
html += '<li>request successful.</li>'; }; // force the changes to be committed to the database asap transaction.commit(); specification specification status comment indexed database api draftthe definition of 'idbtransaction.commit()' in that specification.
IDBTransaction.db - Web APIs
tion event handlers to report on the outcome of the transaction opening in the event of success or failure.
...r being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.inner
html += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.inner
html += '<li>transaction not opened due to error.
... transaction var objectstore = transaction.objectstore("todolist"); // add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.inner
html += '<li>request successful.</li>'; }; // return the database (idbdatabase) connection with which this transaction is associated transaction.db; }; specification specification status comment indexed database api 2.0the definition of 'db' in that specification.
IDBTransaction.error - Web APIs
ailure.
...r being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.inner
html += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.inner
html += '<li>transaction not opened due to error: ' + transaction.error + '</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // add our newitem object to the object store var objectstorerequest...
... transaction var objectstore = transaction.objectstore("todolist"); // add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.inner
html += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'error' in that specification.
IDBTransaction.mode - Web APIs
ent handlers to report on the outcome of the transaction opening in the event of success or failure.
...r being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.inner
html += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.inner
html += '<li>transaction not opened due to error.
... transaction var objectstore = transaction.objectstore("todolist"); // add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.inner
html += '<li>request successful.</li>'; }; // return the mode this transaction has been opened in (should be "readwrite" in this case) transaction.mode; }; specification specification status comment indexed database api 2.0the definition of 'mode' in that specification.
IDBTransaction.objectStore() - Web APIs
ata to an object store.
...r being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.inner
html += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.inner
html += '<li>transaction not opened due to error.
... transaction var objectstore = transaction.objectstore("todolist"); // add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.inner
html += '<li>request successful.</li>'; }; specification specification status comment indexed database api 2.0the definition of 'objectstore()' in that specification.
IDBTransaction.onabort - Web APIs
ome of the transaction opening in the event of success or failure.
...r being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.inner
html += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.inner
html += '<li>transaction not opened due to error: ' + transaction.error + '</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // add our newitem object to the object store var objectstorerequest ...
... transaction var objectstore = transaction.objectstore("todolist"); // add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.inner
html += '<li>request successful.</li>'; }; transaction.onabort = function() { // report when the transaction was successfully aborted console.log("transaction aborted!"); }; // abort the transaction we just did transaction.abort(); }; specification specification status comment indexed database api 2.0the definition of 'onabort' in that specification.
IDBTransaction.oncomplete - Web APIs
transaction opening in the event of success or failure.
...r being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.inner
html += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.inner
html += '<li>transaction not opened due to error: ' + transaction.error + '</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // add our newitem object to the object store var objectstorerequest ...
...transaction var objectstore = transaction.objectstore("todolist"); // add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.oncomplete) note.inner
html += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'oncomplete' in that specification.
IDBTransaction.onerror - Web APIs
ailure.
...r being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.inner
html += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.inner
html += '<li>transaction not opened due to error: ' + transaction.error + '</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // add our newitem object to the object store var objectstorerequest...
... transaction var objectstore = transaction.objectstore("todolist"); // add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.inner
html += '<li>request successful.</li>'; }; }; specification specification status comment indexed database api 2.0the definition of 'onerror' in that specification.
IDBTransaction - Web APIs
ata to an object store.
...e a new object to insert into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready to add data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.inner
html += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.inner
html += '<li>transaction not opened due to error.
...transaction var objectstore = transaction.objectstore("todolist"); // add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.oncomplete) note.inner
html += '<li>request successful.</li>'; }; }; specifications specification status comment indexed database api 2.0the definition of 'idbtransaction' in that specification.
Intersection Observer API - Web APIs
oll to the starting position document.scrollingelement.scrolltop = wrapper.firstelementchild.getboundingclientrect().top + window.scrolly; document.scrollingelement.scrollleft = 750; } intersectioncallback = (entries) => { entries.foreach((entry) => { let box = entry.target; let visiblepct = (math.floor(entry.intersectionratio * 100)) + "%"; box.queryselector(".topleft").inner
html = visiblepct; box.queryselector(".topright").inner
html = visiblepct; box.queryselector(".bottomleft").inner
html = visiblepct; box.queryselector(".bottomright").inner
html = visiblepct; }); } startup(); clipping and the intersection rectangle the browser computes the final intersection rectangle as follows; this is all done for you, but it can be helpful to understand these ste...
...e example this simple example causes a target element to change its color and transparency as it becomes more or less visible.
... this simple example causes a target element to change its color and transparency as it becomes more or less visible.
KeyboardEvent.code - Web APIs
makes it impossible to use the value of code to determine what the name of the key is to users if they're not using an anticipated keyboard layout.
... what the keyboardevent's key and code values are for each one.</p> <div id="output"> </div> css #output { font-family: arial, helvetica, sans-serif; border: 1px solid black; } javascript window.addeventlistener("keydown", function(event) { let str = "keyboardevent: key='" + event.key + "' | code='" + event.code + "'"; let el = document.createelement("span"); el.inner
html = str + "<br/>"; document.getelementbyid("output").appendchild(el); }, true); try it out to ensure that keystrokes go to the sample, click in the output box below before pressing keys.
...pressing keys.
KeyboardEvent.key - Web APIs
d: a keydown event is first fired.
...vent sequence generated when we interact with the shift and the 2 key using a u.s keyboard layout as compared to when we do so using a uk keyboard layout.
...d { width: 30%; } .flex { -webkit-flex: 1; flex: 1; } #test-target { display: block; width: 100%; margin-bottom: 10px; } javascript let textarea = document.getelementbyid('test-target'), consolelog = document.getelementbyid('console-log'), btnclearconsole = document.getelementbyid('btn-clear-console'); function logmessage(message) { document.getelementbyid("console-log").inner
html += 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('beforeinput', (e) => { logmessage(`key "${e.data}" about to be input [event: beforeinput]`); }); textarea.addeventlistener('input', (e) => { logm...
KeyboardEvent - Web APIs
ive event model does.
...nt model does.
...ination of ctrlkey + ${keyname}`); } else { alert(`key pressed ${keyname}`); } }, false); document.addeventlistener('keyup', (event) => { const keyname = event.key; // as the user releases the ctrl key, the key is no longer active, // so event.ctrlkey is false.
Location: assign() - Web APIs
different domain.
...tion.assign(url); parameters url is a domstring containing the url of the page to navigate to.
...; parameters url is a domstring containing the url of the page to navigate to.
Location: reload() - Web APIs
eloads the current url, like the refresh button.
...this happens if the origin of the script calling location.reload() differs from the origin of the page that owns the location object.
...the origin of the script calling location.reload() differs from the origin of the page that owns the location object.
Location: replace() - Web APIs
he provided url is not valid, a domexception of the syntax_error type is thrown.
...ters url is a domstring containing the url of the page to navigate to.
...a domstring containing the url of the page to navigate to.
MediaTrackSupportedConstraints.aspectRatio - Web APIs
onstraints().
...present, this property is missing from the supported constraints dictionary, and you'll get undefined if you try to look at its value.
...ported constraints dictionary, and you'll get undefined if you try to look at its value.
MediaTrackSupportedConstraints.autoGainControl - Web APIs
this property is present in the dictionary (and its value is always true) if the user agent supports the autogaincontrol constraint.
...f you try to look at its value.
... example simply displays whether or not your browser supports the autogaincontrol constraint.
MediaTrackSupportedConstraints.channelCount - Web APIs
ts().
... present, this property is missing from the supported constraints dictionary, and you'll get undefined if you try to look at its value.
...supported constraints dictionary, and you'll get undefined if you try to look at its value.
MediaTrackSupportedConstraints.deviceId - Web APIs
tedconstraints().
...sn't present, this property is missing from the supported constraints dictionary, and you'll get undefined if you try to look at its value.
...the supported constraints dictionary, and you'll get undefined if you try to look at its value.
MediaTrackSupportedConstraints.echoCancellation - Web APIs
x echocancellationconstraintsupported = supportedconstraintsdictionary.echocancellation; value this property is present in the dictionary (and its value is always true) if the user agent supports the echocancellation constraint.
...sent, this property is missing from the supported constraints dictionary, and you'll get undefined if you try to look at its value.
...orted constraints dictionary, and you'll get undefined if you try to look at its value.
MediaTrackSupportedConstraints.groupId - Web APIs
portedconstraints().
...isn't present, this property is missing from the supported constraints dictionary, and you'll get undefined if you try to look at its value.
... the supported constraints dictionary, and you'll get undefined if you try to look at its value.
MediaTrackSupportedConstraints.height - Web APIs
supportedconstraints().
... isn't present, this property is missing from the supported constraints dictionary, and you'll get undefined if you try to look at its value.
...m the supported constraints dictionary, and you'll get undefined if you try to look at its value.
MediaTrackSupportedConstraints.latency - Web APIs
portedconstraints().
...isn't present, this property is missing from the supported constraints dictionary, and you'll get undefined if you try to look at its value.
... the supported constraints dictionary, and you'll get undefined if you try to look at its value.
MediaTrackSupportedConstraints.noiseSuppression - Web APIs
always true) if the user agent supports the noisesuppression constraint (and therefore supports noise suppression on audio tracks).
...you try to look at its value.
...xample simply displays whether or not your browser supports the noisesuppression constraint.
MediaTrackSupportedConstraints.sampleRate - Web APIs
straints().
...'t present, this property is missing from the supported constraints dictionary, and you'll get undefined if you try to look at its value.
...e supported constraints dictionary, and you'll get undefined if you try to look at its value.
MediaTrackSupportedConstraints.sampleSize - Web APIs
straints().
...'t present, this property is missing from the supported constraints dictionary, and you'll get undefined if you try to look at its value.
...e supported constraints dictionary, and you'll get undefined if you try to look at its value.
MediaTrackSupportedConstraints.volume - Web APIs
supportedconstraints().
... isn't present, this property is missing from the supported constraints dictionary, and you'll get undefined if you try to look at its value.
...m the supported constraints dictionary, and you'll get undefined if you try to look at its value.
MediaTrackSupportedConstraints.width - Web APIs
getsupportedconstraints().
...y isn't present, this property is missing from the supported constraints dictionary, and you'll get undefined if you try to look at its value.
...om the supported constraints dictionary, and you'll get undefined if you try to look at its value.
Using the Media Capabilities API - Web APIs
specified set of encoding parameters.
...can be due to the type not being one of the two possible values, the contenttype not being a valid codec mime type, or invalid or omitted definitions required in the videoconfiguration.
...dth + 'x' + mcv.height + ', ' + mcv.contenttype + ' at ' + mcv.framerate + 'fps and ' + mcv.bitrate + ' bps video ' + (result.supported ?
msPlayToPrimary - Web APIs
the future.
... msplaytoprimary is a read/write property which gets or sets the primary dlna playto device.
... value boolean value set to true indicates that the device is the primary dlna playto device, otherwise false.
ParentNode.children - Web APIs
the parentnode property children is a read-only property that returns a live
htmlcollection which contains all of the child elements of the node upon which it was called.
... the parentnode property children is a read-only property that returns a live
htmlcollection which contains all of the child elements of the node upon which it was called.
...array-style notation.
Using the Performance API - Web APIs
t is done via the tojson() method.
...ed in the object element.
....performance.tojson() is not supported"; o.inner
html += json + "<br>"; } else { var s; json = window.performance.tojson(); // print the performance object s = json.stringify(json); o.inner
html = "<p>performance = " + s + "</p>"; // print the performance.timing and performance.navigation objects var perf = json.parse(s); var timing = perf.timing; o.inner
html += "<p>peformance.timing = " + json.stringify(timing) + "</p>"; var navigation = perf.navigation; o.inner
html += "<p>peformance.navigation = " + json.stringify(navigation) + "</p>"; } } specifications the interfaces described in this document are defined in the high resolution time standard which has two levels: high-resolution time level 2; editors draft; work in progress high-...
Using Pointer Events - Web APIs
this guide demonstrates how to use pointer events and the
html <canvas> element to build a multi-touch enabled drawing application.
...matching the given identifier, then returns that touch's index into the array.
...er, then returns that touch's index into the array.
PopStateEvent - Web APIs
s for the same document.
...lowing code will generate alerts as indicated: window.onpopstate = function(event) { alert("location: " + document.location + ", state: " + json.stringify(event.state)); }; history.pushstate({page: 1}, "title 1", "?page=1"); history.pushstate({page: 2}, "title 2", "?page=2"); history.replacestate({page: 3}, "title 3", "?page=3"); history.back(); // alerts "location: http://example.com/example.
html?page=1, state: {"page":1}" history.back(); // alerts "location: http://example.com/example.
html, state: null history.go(2); // alerts "location: http://example.com/example.
html?page=3, state: {"page":3} note that even though the original history entry (for http://example.com/example.
html) has no state object associated with it, a popstate event is still fired when we activate that entry after ...
...null history.go(2); // alerts "location: http://example.com/example.
html?page=3, state: {"page":3} note that even though the original history entry (for http://example.com/example.
html) has no state object associated with it, a popstate event is still fired when we activate that entry after the second call to history.back().
RTCRemoteOutboundRtpStreamStats.localId - Web APIs
returned.
...oded} frames for a frame rate of ${framerate.tofixed(2)} fps.<br>`; } let logentry = `<div class="stats-entry"><h2>report id: ${endremoteoutbound.id}</h2>` + `remote peer sent ${packetssent} packets ${timestring}.<br>` + `${framestring}` + `data size: ${bytessent} bytes.</div>`; statsbox.inner
html += logentry; } else { statsbox.inner
html += `<div class="stats-error">unable to find initial statistics for id ${endremoteoutbound.id}.</div>` } } statsbox.scrollto(0, statsbox.scrollheight); } } } here's what's going on in the networkteststop() function: after calling the rtcpeerconnection method getstats() to get the latest statistics report for the...
...istics object's bytessent property from that of the ending statistics.
Range.extractContents() - Web APIs
the range.extractcontents() method moves contents of the range from the document tree into a documentfragment.
... the range.extractcontents() method moves contents of the range from the document tree into a documentfragment.
... example basic example var range = document.createrange(); range.selectnode(document.getelementsbytagname("div").item(0)); var documentfragment = range.extractcontents(); document.body.appendchild(documentfragment); moving items between containers this example lets you move items between two containers.
Resize Observer API - Web APIs
wing you to do anything you like in response to those changes.
... a green box, sized as a percentage of the viewport size.
...er-text.
html (see source): here we use the resize observer to change the font-size of a header and paragraph as a slider’s value is changed causing the containing <div> to change width.
Response.useFinalURL - Web APIs
e usefinalurl property of the response interface contains a boolean stating whether this is the final url of the response.
...boolean stating whether this is the final url of the response.
...lean indicating whether or not the url is final rather than a redirect.
Screen.availHeight - Web APIs
gram below.
... window, such as a tool palette which can contain multiple panels, and wants to position it so that it occupies the entire vertical space available, you can do so using code similar to what's seen here.
... a tool palette which can contain multiple panels, and wants to position it so that it occupies the entire vertical space available, you can do so using code similar to what's seen here.
Selection - Web APIs
selectnodecontents() glossary other key terms used in this section.
...ms used in this section.
....g., by using the control key).
SpeechRecognition - Web APIs
t.
...sing the speechrecognition.grammars property.
...cognition = 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('.output'); 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 comment web speech apithe definition ...
StyleSheet.media - Web APIs
the media property of the stylesheet interface specifies the intended destination media for style information.
... the media property of the stylesheet interface specifies the intended destination media for style information.
...m('print'); console.log('document.stylesheets[' + string(isheetindex) + '].media: ' + json.stringify(document.stylesheets[isheetindex].media)); } /* will log: document.stylesheets[0].media: {"0":"screen"} document.stylesheets[0].media: {"0":"screen","1":"handheld"} document.stylesheets[1].media: {"0":"screen","1":"print"} document.stylesheets[1].media: {"0":"screen"} */ </script> </body> </
html> specifications specification status comment css object model (cssom)the definition of 'stylesheet: media' in that specification.
SubmitEvent() - Web APIs
the submitevent() constructor creates and returns a new submitevent object, which is used to represent a submit event fired at an
html form.
...ent = new submitevent(type,eventinitdict); parameters type a domstring indicating the event which occurred.
... const formtrigger = form.queryselector("button.submit"); const submitevent = new submitevent("submit", { submitter: formtrigger }); form.dispatchevent(submitevent); this is a somewhat contrived example, as you can do nearly all of this much more easily, but this gives you deep control over the process that can be useful.
SubmitEvent - Web APIs
the submitevent interface defines the object used to represent an
html form's submit event.
...n the form's submit action is invoked.
...accepted payment type was selected.
TextTrack: cuechange event - Web APIs
the cuechange event fires when a texttrack has changed the currently displaying cues.
... cues } on the track element the underlying texttrack, indicated by the track property, receives a cuechange event every time the currently-presented cue is changed.
...ementbyid("texttrack"); texttrackelem.addeventlistener("cuechange", (event) => { let cues = event.target.track.activecues; }); in addition, you can use the oncuechange event handler: let texttrackelem = document.getelementbyid("texttrack"); texttrackelem.oncuechange = (event) => { let cues = event.target.track.activecues; }); specifications specification status
html living standardthe definition of 'cuechange' in that specification.
Multi-touch interaction - Web APIs
ging and learning about the event flow.
...e('output')[0]; var s = name + ": touches = " + ev.touches.length + " ; targettouches = " + ev.targettouches.length + " ; changedtouches = " + ev.changedtouches.length; o.inner
html += s + " "; if (printtargetids) { s = ""; for (var i=0; i < ev.targettouches.length; i++) { s += "...
..." + ev.targettouches.length + " ; changedtouches = " + ev.changedtouches.length; o.inner
html += s + " "; if (printtargetids) { s = ""; for (var i=0; i < ev.targettouches.length; i++) { s += "...
URL - Web APIs
tive url: const url = new url('../cats', 'http://www.example.com/dogs'); console.log(url.hostname); // "www.example.com" console.log(url.pathname); // "/cats" url properties can be set to construct the url: url.hash = 'tabby'; console.log(url.href); // "http://www.example.com/cats#tabby" urls are encoded according to the rules found in rfc 3986.
...nsole.log(url.hostname); // "www.example.com" console.log(url.pathname); // "/cats" url properties can be set to construct the url: url.hash = 'tabby'; console.log(url.href); // "http://www.example.com/cats#tabby" urls are encoded according to the rules found in rfc 3986.
...e current window's url, you can do this: // https://some.site/?id=123 const parsedurl = new url(window.location.href); console.log(parsedurl.searchparams.get("id")); // "123" the tostring() method of url just returns the value of the href property, so the constructor can be used to normalize and encode a url directly.
ValidityState.patternMismatch - Web APIs
short being true.
...match to x:, with no pattern attribute present.
...ere is no pattern attribute (or if the pattern attribute is not valid for that input type).
ValidityState.rangeOverflow - Web APIs
value is set, if the value don't doesn't conform to the constraints set by the max value, the rangeoverflow property will be true.
...e true.
... will be true.
ValidityState.stepMismatch - Web APIs
value less the min value, divided by the step value (which defaults to 1 if ommitted) is not zero, there is a mismatch.
...given the following: <input type="number" min="20" max="40" step="2"/> if (value - min) / 2 != 0, stepmismatch will be true.
...tch will be true.
validityState.tooLong - Web APIs
the read-only toolong property of a validitystate object indicates if the value of an <input> or <textarea>, after having been edited by the user, exceeds the maximum code-unit length established by the element's maxlength attribute.
... property of a validitystate object indicates if the value of an <input> or <textarea>, after having been edited by the user, exceeds the maximum code-unit length established by the element's maxlength attribute.
...n 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 <input>, <button>, <select>, <output>, <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.
... the value of an <input>, <button>, <select>, <output>, <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.
...d by the user, is less than the minimum code-unit length established by the element's minlength attribute.
WebGLRenderingContext.canvas - Web APIs
the webglrenderingcontext.canvas property is a read-only reference to the
htmlcanvaselement or offscreencanvas object that is associated with the context.
... the webglrenderingcontext.canvas property is a read-only reference to the
htmlcanvaselement or offscreencanvas object that is associated with the context.
...screencanvas object.
A basic 2D WebGL animation example - Web APIs
"x-shader/x-fragment"> #ifdef gl_es precision highp float; #endif uniform vec4 uglobalcolor; void main() { gl_fragcolor = uglobalcolor; } </script> this starts by specifying the precision of the float type, as required.
...x-fragment"> #ifdef gl_es precision highp float; #endif uniform vec4 uglobalcolor; void main() { gl_fragcolor = uglobalcolor; } </script> this starts by specifying the precision of the float type, as required.
...nt.getelementbyid(id).firstchild.nodevalue; let shader = gl.createshader(type); gl.shadersource(shader, code); gl.compileshader(shader); if (!gl.getshaderparameter(shader, gl.compile_status)) { console.log(`error compiling ${type === gl.vertex_shader ?
Basic scissoring - Web APIs
order of commands in webgl.
...one; background-color : black; } window.addeventlistener("load", function setupwebgl (evt) { "use strict" window.removeeventlistener(evt.type, setupwebgl, false); var paragraph = document.queryselector("p"); var canvas = document.queryselector("canvas"); // the following two lines set the size (in css pixels) of // the drawing buffer to be identical to the size of the // canvas
html element, as determined by css.
...= document.queryselector("canvas"); // the following two lines set the size (in css pixels) of // the drawing buffer to be identical to the size of the // canvas
html element, as determined by css.
Canvas size and WebGL - Web APIs
the canvas element in the browser window.
...when using scissor() and clear() to draw a square in the center of the canvas, by specifying its position and size in pixels.
...ment.getelementsbytagname("canvas")[0], secondcanvas = document.getelementsbytagname("canvas")[1]; firstcanvas.width = firstcanvas.clientwidth; firstcanvas.height = firstcanvas.clientheight; [firstcanvas, secondcanvas].foreach(function(canvas) { var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { document.queryselector("p").inner
html = "failed to get webgl context.
Clearing with colors - Web APIs
et to green).
...r paragraph = document.queryselector("p"), canvas = document.queryselector("canvas"); // getting the webgl rendering context.
...xt.
Color masking - Web APIs
ion serves as the input of the next.
...ground-color : green; } #blue-toggle { background-color : blue; } window.addeventlistener("load", function setupanimation (evt) { "use strict" window.removeeventlistener(evt.type, setupanimation, false); var canvas = document.queryselector("canvas"); var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); if (!gl) { document.queryselector("p").inner
html = "failed to get webgl context." + "your browser or device may not support webgl."; return; } gl.viewport(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight); var timer = setinterval(drawanimation, 1000); var mask = [true, true, true]; var redtoggle = document.queryselector("#red-toggle"), greentoggle = document.queryselector("#green-toggle"), bluetoggle =...
...toggle.addeventlistener("click", setcolormask, false); greentoggle.addeventlistener("click", setcolormask, false); bluetoggle.addeventlistener("click", setcolormask, false); function setcolormask(evt) { var index = evt.target === greentoggle && 1 || evt.target === bluetoggle && 2 || 0; mask[index] = !mask[index]; if (mask[index] === true) evt.target.inner
html="on"; else evt.target.inner
html="off"; gl.colormask(mask[0], mask[1], mask[2], true); drawanimation(); }; function drawanimation () { var color = getrandomcolor(); gl.clearcolor(color[0], color[1], color[2], 1.0); gl.clear(gl.color_buffer_bit); } function getrandomcolor() { return [math.random(), math.random(), math.random()]; } }, false); the sourc...
Simple color animation - Web APIs
timer and the timer handler function establish the animation loop, a set of drawing commands that are executed at a regular period (typically, every frame; in this case, once per second).
...upanimation, false); // a variable to hold a timer that drives the animation.
...="stop"; // setup animation loop by redrawing every second.
Getting started with WebGL - Web APIs
next » webgl enables web content to use an api based on opengl es 2.0 to perform 2d and 3d rendering in an
html canvas in browsers that support it without the use of plug-ins.
... next » webgl enables web content to use an api based on opengl es 2.0 to perform 2d and 3d rendering in an
html canvas in browsers that support it without the use of plug-ins.
... the webgl-examples github repository.
WebGL tutorial - Web APIs
webgl enables web content to use an api based on opengl es 2.0 to perform 3d rendering in an
html <canvas> in browsers that support it without the use of plug-ins.
... webgl enables web content to use an api based on opengl es 2.0 to perform 3d rendering in an
html <canvas> in browsers that support it without the use of plug-ins.
...e background.
Signaling and video calling - Web APIs
ck and forth, through the signaling server.
...th, through the signaling server.
...ving new streams when new tracks are added to the rtcpeerconnection— either by calling its addtrack() method or because of renegotiation of the stream's format—a track event is set to the rtcpeerconnection for each track added to the connection.
Window.captureEvents() - Web APIs
enttype is a combination of the following values: event.abort, event.blur, event.click, event.change, event.dblclick, event.dragddrop, event.error, event.focus, event.keydown, event.keypress, event.keyup, event.load, event.mousedown, event.mousemove, event.mouseout, event.mouseover, event.mouseup, event.move, event.reset, event.resize, event.select, event.submit, event.unload.
... is a combination of the following values: event.abort, event.blur, event.click, event.change, event.dblclick, event.dragddrop, event.error, event.focus, event.keydown, event.keypress, event.keyup, event.load, event.mousedown, event.mousemove, event.mouseout, event.mouseover, event.mouseup, event.move, event.reset, event.resize, event.select, event.submit, event.unload.
...seup, event.move, event.reset, event.resize, event.select, event.submit, event.unload.
Window.close() - Web APIs
the current window, or the window on which it was called.
...ce, the browser closed the frontmost window, whether your script created that window or not.
... the case; for security reasons, scripts are no longer allowed to close windows they didn't open.
Window.crypto - Web APIs
erface, providing access to general-purpose cryptography and a strong random-number generator.
... example this example uses the window.crypto property to access the getrandomvalues() method.
... window.crypto property to access the getrandomvalues() method.
Window.defaultStatus - Web APIs
his feature is obsolete.
....
...tatus; window.defaultstatus = smsg; parameters smsg is a string containing the text to be displayed by default in the statusbar.
Window.devicePixelRatio - Web APIs
returned as well in the case of unusually low resolution displays or, more often, when a screen has a higher pixel depth than simply double the standard resolution of 96 or 76 dpi.
... the innertext of the element pixelratiobox to a string which displays the ratio both as a percentage and as a raw decimal value with up to two decimal places.
...text of the element pixelratiobox to a string which displays the ratio both as a percentage and as a raw decimal value with up to two decimal places.
Window.ondragdrop - Web APIs
non-standard this feature is non-standard and is not on a standards track.
... use addeventlistener.
...onto this window, the alert is fired.
Window: pageshow event - Web APIs
const eventlogger = event => { switch (event.type) { case "pagehide": case "pageshow": let ispersisted = event.persisted ?
...k; } }; events.foreach(eventname => window.addeventlistener(eventname, eventlogger) );
html <p>open the console and watch the output as you navigate to and from this page.
...ch the output as you navigate to and from this page.
Window.showModalDialog() - Web APIs
this feature has been removed.
...er; otherwise its size is fixed.
...l: {on | off | yes | no | 1 | 0 } if on, yes, or 1, the dialog window has scroll bars; otherwise its size is fixed.
WindowEventHandlers.onlanguagechange - Web APIs
the onlanguagechange property of the windoweventhandlers mixin is the eventhandler for processing languagechange events.
... the onlanguagechange property of the windoweventhandlers mixin is the eventhandler for processing languagechange events.
...fined function, without the () suffix or any parameters, or an anonymous function declaration, such as function(event) {...}.
WindowEventHandlers.onpopstate - Web APIs
y.replacestate() won't trigger a popstate event.
...lowing code will generate alerts as indicated: window.onpopstate = function(event) { alert("location: " + document.location + ", state: " + json.stringify(event.state)); }; history.pushstate({page: 1}, "title 1", "?page=1"); history.pushstate({page: 2}, "title 2", "?page=2"); history.replacestate({page: 3}, "title 3", "?page=3"); history.back(); // alerts "location: http://example.com/example.
html?page=1, state: {"page":1}" history.back(); // alerts "location: http://example.com/example.
html, state: null history.go(2); // alerts "location: http://example.com/example.
html?page=3, state: {"page":3} note that even though the original history entry (for http://example.com/example.
html) has no state object associated with it, a popstate event is still fired, when we activate that entry after...
...history.go(2); // alerts "location: http://example.com/example.
html?page=3, state: {"page":3} note that even though the original history entry (for http://example.com/example.
html) has no state object associated with it, a popstate event is still fired, when we activate that entry after the second call to history.back().
XMLHttpRequest.responseType - Web APIs
compatible with the responsetype that was set, the value of response will be null.
...pported by responsetype are the following: "" an empty responsetype string is treated the same as "text", the default type.
...ponsetype string is treated the same as "text", the default type.
XMLHttpRequestResponseType - Web APIs
data contained in the response of an xmlhttprequest.
...g the responsetype on the request.
...ponsetype string is treated the same as "text", the default type.
msCapsLockWarningOff - Web APIs
r 10, input type=password fields will automatically display a warning if the caps lock is on.
...ck warning is turned off.
...ple</title> <script type="text/javascript"> function capsoff() { if (document.mscapslockwarningoff == false) { document.mscapslockwarningoff = true; document.getelementbyid("caps").inner
html = "warning off"; } else { document.mscapslockwarningoff = false; document.getelementbyid("caps").inner
html = "warning on"; } } </script> </head> <body> <label>type a password: <input type="password" /></label><br /> <button id="caps" onclick="capsoff();">warning off</button> </body> </
html> ...
Using the group role - Accessibility
trol inside it, and if aria-describedby has been set, the description may be spoken.
...ollowing this the focused control may be announced.
...x="-1" src="images/treecontracted.gif" /> <span role="treeitem" tabindex="0">cats</span> </div> <div id="catgroup" role="group"> <div id="siamese" role="treeitem"> <span tabindex="-1">siamese</span> </div> <div id="tabby" role="treeitem"> <span tabindex="-1">tabby</span> </div> </div> </div> </div> example 2: using the group role with a
html drop-down menu the snippet below shows how the group role is added directly into the
html source code.
ARIA: banner role - Accessibility
a banner role represents general and informative content frequently placed at the beginning of the page.
...itle.
... <a href="#nav" id="skiptomenu" class="skiptocontent">skip to keyboard navigation</a> <img src="images/w3c.png" alt="w3c logo"> <h1>aria landmarks</h1> <p>identifying page subsections for easy navigation</p> </header> best practices while it is best to use the header element and ensure it is not a descendant of any subsection of the page, sometimes you don't have access to the underlying
html.
ARIA: Complementary role - Accessibility
the complementary landmark role is used to designate a supporting section that relates to the main content, yet can stand alone when separated.
...n be used by assistive technology to quickly identify and navigate to large sections of the document.
... week</a></li> <li><a href="#">10 parent hacks we know work because we tried them</a></li> </ul> </div> accessibility concerns landmark roles are intended to be used sparingly, to identify larger overall sections of the document.
ARIA: grid role - Accessibility
indicates the hierarchical level of the grid within other structures.
...ombination can be used to check that box even if the focus is not on the checkbox.
... result = moveto(i, event.target.dataset.col); i++; } while (result == false); break; case "pagedown": var i = maxrow; var result; do { result = moveto(i, event.target.dataset.col); i--; } while (result == false); break; case "enter": alert(event.target.textcontent); break; } event.preventdefault(); });
html <table role="grid" aria-labelledby="calendarheader"> <caption id="calendarheader">september 2018</caption> <thead role="rowgroup"> <tr role="row"> <td></td> <th role="columnheader" aria-label="sunday">s</th> <th role="columnheader" aria-label="monday">m</th> <th role="columnheader" aria-label="tuesday">t</th> <th role="columnheader" aria-label="wednesday">w<...
ARIA: Listitem role - Accessibility
istive technologies using the list and listitem containers respectively.
...bjects, limited to list items when nested in a list, not important enough to have their own place in a pages table of contents.
...tions none.
Basic form hints - Accessibility
when implementing forms using traditional
html form-related elements, it is important to provide labels for controls, and explicitly associate a label with its control.
...ype="checkbox" value="pinot-blanc"/> <label for="wine-2">pinot blanc</label> </li> <li> <input id="wine-3" type="checkbox" value="pinot-grigio"/> <label for="wine-3">pinot grigio</label> </li> <li> <input 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.
... invalid data.
Web accessibility for seizures and physical reactions - Accessibility
ing the amount of contrast in the user's control is a definite gift for accessibility.
... amount of contrast in the user's control is a definite gift for accessibility.
...s and svg) the following is from the web animations model csswg.org drafts the web animations model is intended to provide the features necessary for expressing css transitions [css-transitions-1], css animations [css-animations-1], and svg [svg11].
Robust - Accessibility
as compatible as possible, not only with current user agents (e.g.
... ones too.
... when using semantic elements correctly for their intended purpose, this criterion should be passed automatically.
:-moz-locale-dir(rtl) - CSS: Cascading Style Sheets
tor is mainly used by extensions and themes to adapt the user interface based on the user's locale.
...both left-to-right and right-to-left layouts regardless of locale specifics.
...ft-to-right and right-to-left layouts regardless of locale specifics.
::after (:after) - CSS: Cascading Style Sheets
ax /* css3 syntax */ ::after /* css2 syntax */ :after note: css3 introduced the ::after notation (with two colons) to distinguish pseudo-classes from pseudo-elements.
...boring text.</p> <p>here is some normal text that is neither boring nor exciting.</p> <p class="exciting-text">contributing to mdn is easy and fun.</p> css .exciting-text::after { content: " <- exciting!"; color: green; } .boring-text::after { content: " <- boring"; color: red; } result decorative example we can style text or images in the content property almost any way we want.
...ipt is required!
:active - CSS: Cascading Style Sheets
ecificity.
...t.</a> the paragraph will get a gray background while you click on it or the link.
...nks */ p:active { background: #eee; } /* active paragraphs */ result active form elements
html <form> <label for="my-button">my button: </label> <button id="my-button" type="button">try clicking me or my label!</button> </form> css form :active { color: red; } form button { background: white; } result specifications specification status comment
html living standardthe definition of ':active' in that specification.
:focus - CSS: Cascading Style Sheets
orm input) that has received focus.
...focus indicators: give your site some focus!
... :focus { outline: none; } never just remove the focus outline (visible focus indicator) without replacing it with a focus outline that will pass wcag 2.1 sc 1.4.11 non-text contrast.
:hover - CSS: Cascading Style Sheets
hscreens.
...n use the :hover pseudo-class to build an image gallery with full-size images that show only when the mouse moves over a thumbnail.
...how only when the mouse moves over a thumbnail.
:in-range - CSS: Cascading Style Sheets
e { 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.
... input { border: 1px solid black; } input:in-range { background-color: rgba(0, 255, 0, 0.25); } input:out-of-range { background-color: rgba(255, 0, 0, 0.25); border: 2px solid red; } input:in-range + label::after { content: 'okay.'; } input:out-of-range + label::after { content: 'out of range!'; } result specifications specification status comment
html living standardthe definition of ':in-range' in that specification.
...lor: rgba(255, 0, 0, 0.25); border: 2px solid red; } input:in-range + label::after { content: 'okay.'; } input:out-of-range + label::after { content: 'out of range!'; } result specifications specification status comment
html living standardthe definition of ':in-range' in that specification.
:lang() - CSS: Cascading Style Sheets
the :lang() css pseudo-class matches elements based on the language they are determined to be in.
...d by a combination of the lang attribute, the <meta> element, and possibly by information from the protocol (such as http headers).
...get.
:optional - CSS: Cascading Style Sheets
ccessful form submission.
...solely on color to convey meaning.
...ding wcag, guideline 3.3 explanations understanding success criterion 3.3.2 | w3c understanding wcag 2.0 specifications specification status comment
html living standardthe definition of ':optional' in that specification.
:out-of-range - CSS: Cascading Style Sheets
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.
... input { border: 1px solid black; } input:in-range { background-color: rgba(0, 255, 0, 0.25); } input:out-of-range { background-color: rgba(255, 0, 0, 0.25); border: 2px solid red; } input:in-range + label::after { content: 'okay.'; } input:out-of-range + label::after { content: 'out of range!'; } result specifications specification status comment
html living standardthe definition of ':out-of-range' in that specification.
...a(255, 0, 0, 0.25); border: 2px solid red; } input:in-range + label::after { content: 'okay.'; } input:out-of-range + label::after { content: 'out of range!'; } result specifications specification 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 <input> or <textarea> element that is currently displaying placeholder text.
...l <input placeholder="type something here!"> css input { border: 1px solid black; padding: 3px; } input:placeholder-shown { border-color: teal; color: purple; font-style: italic; } result overflowing text when form fields are too small, placeholder text can get cropped in an undesirable way.
...e text-overflow property to alter the way overflowing text is displayed.
:required - CSS: Cascading Style Sheets
also contains optional inputs, required inputs should be indicated visually using a treatment that does not rely solely on color to convey meaning.
...olely on color to convey meaning.
...ing wcag, guideline 3.3 explanations understanding success criterion 3.3.2 | w3c understanding wcag 2.0 specifications specification status comment
html living standardthe definition of ':required' in that specification.
:scope - CSS: Cascading Style Sheets
pe examples identity match in this simple example, we demonstrate that using the :scope pseudo-class from the element.matches() method matches the element on which it's called.
...s not an interesting paragraph.
... :scope pseudo-class prove to be useful is when you need to get direct descendant of an already retrieved element.
:valid - CSS: Cascading Style Sheets
ness will be unable to determine the input's state unless it is accompanied by an additional indicator that does not rely on color to convey meaning.
... not rely on color to convey meaning.
...erstanding wcag, guideline 1.4 explanations understanding success criterion 1.4.1 | w3c understanding wcag 2.0 specifications specification status comment
html living standardthe definition of ':valid' in that specification.
@charset - CSS: Cascading Style Sheets
the @charset css at-rule specifies the character encoding used in the style sheet.
...oding used in the style sheet.
... result) : the value of the unicode byte-order character placed at the beginning of the file.
Coordinate systems - CSS: Cascading Style Sheets
d by updating a set of informational messages within the box, listing out the current mouse coordinates in each of the four available coordinate systems.
... inner.addeventlistener("mousemove", update, false); inner.addeventlistener("mouseleave", update, false); the event handler is in the update() method.
...eventlistener("mousemove", update, false); inner.addeventlistener("mouseleave", update, false); the event handler is in the update() method.
Resizing background images with background-size - CSS: Cascading Style Sheets
ing the width and/or height of the image.
...nd-size css property offers two special size values, contain and cover.
...: contain; width: 160px; height: 160px; border: 2px solid; color: pink; resize: both; overflow: scroll; } result cover the cover value specifies that the background image should be sized so that it is as small as possible while ensuring that both dimensions are greater than or equal to the corresponding size of the container.
Color picker tool - CSS: Cascading Style Sheets
colorpicker tool
html <div id="container"> <div id="palette" class="block"> <div id="color-palette"></div> <div id="color-info"> <div class="title"> css color </div> </div> </div> <div id="picker" class="block"> <div class="ui-color-picker" data-topic="picker" data-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-input-slider" data-topic="z-index" dat...
...is generated.
...t.
Backwards Compatibility of Flexbox - CSS: Cascading Style Sheets
s, which is what happens when using display: inine-block as it prefers white space like other inline items.
... display: inine-block as it prefers white space like other inline items.
... very useful as a fallback, due to the fact that they allow design patterns such as full height columns and vertical centering and work back as far as internet explorer 8.
Stacking context example 1 - CSS: Cascading Style Sheets
of occurrence.
...llowing: root stacking context div #2 (z-index 1) div #4 (z-index 2) note: div #1 and div #3 are not translucent.
...ld">div #1</span> <br />position: relative; <div id="div2"> <br /><span class="bold">div #2</span> <br />position: absolute; <br />z-index: 1; </div> </div> <br /> <div id="div3"> <br /><span class="bold">div #3</span> <br />position: relative; <div id="div4"> <br /><span class="bold">div #4</span> <br />position: absolute; <br />z-index: 2; </div> </div> </body></
html> css .bold { font-weight: bold; font: 12px arial; } #div1, #div3 { height: 80px; position: relative; border: 1px dashed #669966; background-color: #ccffcc; padding-left: 5px; } #div2 { opacity: 0.8; z-index: 1; position: absolute; width: 150px; height: 200px; top: 20px; left: 170px; border: 1px dashed #990000; background-color: #f...
Stacking without the z-index property - CSS: Cascading Style Sheets
when the z-index property is not specified on any element, elements are stacked in the following order (from bottom to top): the background and borders of the root element descendant non-positioned blocks, in order of appearance in the
html descendant positioned elements, in order of appearance in the
html keep in mind, when the order property alters rendering from the "order of appearance in the
html" within flex containers, it similarly affects the order for stacking context.
...ned elements, in order of appearance in the
html keep in mind, when the order property alters rendering from the "order of appearance in the
html" within flex containers, it similarly affects the order for stacking context.
...tml keep in mind, when the order property alters rendering from the "order of appearance in the
html" within flex containers, it similarly affects the order for stacking context.
Introducing the CSS Cascade - CSS: Cascading Style Sheets
ent stylesheets the browser has a basic style sheet that gives a default style to any document.
...le @keyframes, and never mixes multiple ones together.
...s across the various origins; here we have a user agent style sheet, two author style sheets, a user stylesheet, and inline styles within the
html: user-agent css: li { margin-left: 10px } author css 1: li { margin-left: 0 } /* this is a reset */ author css 2: @media screen { li { margin-left: 3px } } @media print { li { margin-left: 1px } } user css: .specific { margin-left: 1em }
html: <ul> <li class="specific">1<sup>st</sup></li> <li>2<sup>nd</sup></li> </ul> in this case, declarations inside li and .specific rules should apply.
border-collapse - CSS: Cascading Style Sheets
acent cells have shared borders (the collapsed-border table rendering model).
...ed 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
html</td></tr> <tr><td class="sa">safari</td> <td class="wk">webkit</td></tr> <tr><td class="ch">chrome</td> <td class="bk">blink</td></tr> <tr><td class="op">opera</td> <td class="bk">blink</td></tr> </tbody> </table> <table class="collapse"> <caption><code>border-collapse: collapse</code></caption> <tbody> <tr><th>browser</th> <th>layout engine</th></tr> <tr><td class="fx">...
..."ch">chrome</td> <td class="bk">blink</td></tr> <tr><td class="op">opera</td> <td class="bk">blink</td></tr> </tbody> </table> <table class="collapse"> <caption><code>border-collapse: collapse</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
html</td></tr> <tr><td class="sa">safari</td> <td class="wk">webkit</td></tr> <tr><td class="ch">chrome</td> <td class="bk">blink</td></tr> <tr><td class="op">opera</td> <td class="bk">blink</td></tr> </tbody> </table> css .collapse { border-collapse: collapse; } .separate { border-collapse: separate; } table { display: inline-table; margin: 1em; border: dashed 5px; } tabl...
box-flex - CSS: Cascading Style Sheets
ze (e.g.
....
...t-box-flex: 1; /* webkit */ border: 1px solid black; } div.example > p:nth-child(2) { -moz-box-flex: 0; /* mozilla */ -webkit-box-flex: 0; /* webkit */ border: 1px solid black; } </style> </head> <body> <div class="example"> <p>i will expand to fill extra space</p> <p>i will not expand</p> </div> </body> </
html> specifications not part of any standard.
clear - CSS: Cascading Style Sheets
yword indicating that the element is moved down to clear floats on end side of its containing block, that is the right floats on ltr scripts and the left floats on rtl scripts.
...adipiscing elit.</p> <p class="left">this paragraph clears left.</p> </div> css .wrapper{ border:1px solid black; padding:10px; } .left { border: 1px solid black; clear: left; } .black { float: left; margin: 0; background-color: black; color: #fff; width: 20%; } .red { float: left; margin: 0; background-color: pink; width:20%; } p { width: 50%; } clear: right
html <div class="wrapper"> <p class="black">lorem ipsum dolor sit amet, consectetuer adipiscing elit.
...piscing elit.</p> <p class="right">this paragraph clears right.</p> </div> css .wrapper{ border:1px solid black; padding:10px; } .right { border: 1px solid black; clear: right; } .black { float: right; margin: 0; background-color: black; color: #fff; width:20%; } .red { float: right; margin: 0; background-color: pink; width:20%; } p { width: 50%; } clear: both
html <div class="wrapper"> <p class="black">lorem ipsum dolor sit amet, consectetuer adipiscing elit.
<display-inside> - CSS: Cascading Style Sheets
and whether it is itself participating in a block or inline formatting context, it either establishes a new block formatting context (bfc) for its contents or integrates its contents into its parent formatting context.
...> elements.
...y: flex or display: grid is specified, will set their outer value to block.
float - CSS: Cascading Style Sheets
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, with internet explorer versions 8 and older using stylefloat.
...pport float, but in older browsers you have to spell it as cssfloat, with internet explorer versions 8 and older using stylefloat.
...to stack to the right, until they filled the containing box, after which they would wrap to the next line.
font-weight - CSS: Cascading Style Sheets
ange of weights with a more or less fine granularity, and this can give the designer a much closer degree of control over the chosen weight.
...://github.com/letterror/mutatorsans/blob/master/license */ @font-face { src: url('https://mdn.mozillademos.org/files/16011/mutatorsans.ttf'); font-family:'mutatorsans'; font-style: normal; } label { font: 1rem monospace; white-space: nowrap; } .container { max-height: 150px; overflow-y: auto; } .sample { text-transform: uppercase; font: 1.5rem 'mutatorsans', sans-serif; }
html, body { max-height: 100vh; max-width: 100vw; overflow: hidden; } body { display: flex; flex-direction: column; } header { margin-bottom: 1.5rem; } .container { flex-grow: 1; } .container > p { margin-top: 0; margin-bottom: 0; } javascript let weightlabel = document.queryselector('label[for="weight"]'); let weightinput = document.queryselector('#weight'); let sampletext =...
...th 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]> examples setting font weights
html <p> alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, "and what is the use of a book," thought alice "without pictures or conversations?" </p> <div>i'm heavy<br/> <span>i'm lighter</span> </div> css /* set paragra...
gap (grid-gap) - CSS: Cascading Style Sheets
made absolute, and normal computing to zero except on multi-column elementscolumn-gap: as specified, with <length>s made absolute, and normal computing 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, percentage or calc(); formal syntax <'row-gap'> <'column-gap'>?
...gap'> <'column-gap'>?
...id="grid"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> css #grid { grid-gap: 20px 5px; } #grid { display: grid; height: 200px; grid-template: repeat(3, 1fr) / repeat(3, 1fr); gap: 20px 5px; } #grid > div { border: 1px solid green; background-color: lime; } result multi-column layout
html <p class="content-box"> this is some multi-column text with a 40px column gap created with the css <code>gap</code> property.
max-block-size - CSS: Cascading Style Sheets
lr , lr-tb , rl , rb , rb-rl max-height vertical-rl, vertical-lr, sideways-rl , sideways-lr , tb , tb-rl max-width the writing-mode values sideways-lr and sideways-rl were removed from the css writing modes level 3 specification late in its design process.
...on 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.
...ength, 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.
ruby-align - CSS: Cascading Style Sheets
at the extra space will be distributed between the elements of the ruby, and around it.
... annotation containersinheritedyescomputed 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 to check</rb> <rp>（</rp><rt>short ruby</rt><rp>）</rp> </ruby> css ruby { ruby-align: center; } result extra space distributed between ruby elements
html <ruby> <rb>this is a long text to check</rb> <rp>（</rp><rt>short ruby</rt><rp>）</rp> </ruby> css ruby { ruby-align: space-between; } result extra space distributed between and aro...
... is a long text to check</rb> <rp>（</rp><rt>short ruby</rt><rp>）</rp> </ruby> css ruby { ruby-align: center; } result extra space distributed between ruby elements
html <ruby> <rb>this is a long text to check</rb> <rp>（</rp><rt>short ruby</rt><rp>）</rp> </ruby> css ruby { ruby-align: space-between; } result extra space distributed between and around ruby elements
html <ruby> <rb>this is a long text to check</rb> <rp>（</rp><rt>short ruby</rt><rp>）</rp> </ruby> css ruby { ruby-align: space-around; } result specifications specification status comment css ruby layout module level 1the definition of 'ruby-align' in that specification.
text-align - CSS: Cascading Style Sheets
if direction is rtl if start is not supported by the browser.applies toblock containersinheritedyescomputed valueas specified, except for the match-parent value which is calculated against its parent's direction value and results in a computed 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.
...center | justify | match-parent examples left alignment
html <p class="example"> integer elementum massa at nulla placerat varius.
...text-align: left; border: solid; } result centered text
html <p class="example"> integer elementum massa at nulla placerat varius.
text-combine-upright - CSS: Cascading Style Sheets
are invalid.
...rrently not very widely supported by browsers.
... { writing-mode: vertical-lr; text-combine-upright: digits 2; font: 36px serif; } results screenshotlive sample all the all value requires markup around every piece of horizontal text, but it is currently supported by more browsers than the digits value.
text-rendering - CSS: Cascading Style Sheets
keyword values */ text-rendering: auto; text-rendering: optimizespeed; text-rendering: optimizelegibility; text-rendering: geometricprecision; /* global values */ text-rendering: inherit; text-rendering: initial; text-rendering: unset; note: the text-rendering property is an svg property that is not defined in any css standard.
... as optimizelegibility.
..."big">lyowat - ff fi fl ffl</p> css .small { font: 19.9px "constantia", "times new roman", "georgia", "palatino", serif; } .big { font: 20px "constantia", "times new roman", "georgia", "palatino", serif; } result optimizespeed vs optimizelegibility this example shows the difference between the appearance of optimizespeed and optimizelegibility (in your browser; other browsers may vary).
matrix3d() - CSS: Cascading Style Sheets
e represented on the plane.
...kground: rgba(0,0,210,.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(210,210,0,.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(210,0,210,.7); transform: rotatex(-90deg) translatez(50px); } result matrix translation and scale example another transform3d() example, which implements an animated combined translate and scale.
...; } result matrix translation and scale example another transform3d() example, which implements an animated combined translate and scale.
url() - CSS: Cascading Style Sheets
g), url(second.png)); mask-image: image(url(mask.png), skyblue, linear-gradient(rgba(0, 0, 0, 1.0), transparent); /* as part of a non-shorthand multiple value */ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); /* at-rules */ @document url("https://www.example.com/") { ...
...ine, path, polygon, polyline, or rect -- using the shape's geometry as the path.
... or a functional notation, which alters the meaning of the url string.this is not supported and not fully defined in the specification.
Demos of open web technologies
cation of open web technology, please add a link to the appropriate section here.
... on 2d canvas minipaint: image editor (source code) zen photon garden (source code) multi touch in canvas demo (source code) svg bubblemenu (visual effects and interaction)
html transformations using foreignobject (visual effects and transforms) phonetics guide (interactive) 3d objects demo (interactive) blobular (interactive) video embedded in svg (or use the local download) summer
html image map creator (source code) video video 3d animation "mozilla constantly evolving" video 3d animation "floating dance" streaming anime, movie trailer and interview billy's browser firefox flick virtual barber shop transformers movie trailer a scanner darkly movie trailer (with built in controls) events firing and volume control dragable and sizable videos 3d graphics webgl ...
...g logo "mozilla" paperfold css blockout rubik's cube pure css slides planetarium (source code) loader with blend modes text reveal with clip-path ambient shadow with custom properties luminiscent vial css-based single page application (source code) transformations impress.js (source code) games ioquake3 (source code) kai 'opua (source code) web apis notifications api
html5 notifications (source code) web audio api web audio fireworks oscope.js - javascript oscilloscope
html5 web audio showcase (source code)
html5 audio visualizer (source code) graphical filter editor and visualizer (source code) file api slide my text - presentation from plain text files web workers web worker fractals photo editor coral generator raytracer hotcold touch ...
Web Audio playbackRate explained - Developer guides
('audio'); myaudio.setattribute('src','audiofile.mp3'); myaudio.playbackrate = 0.5; here we create an <audio> element, and set its src to a file of our choice.
...> <form> <input 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('input',function(){ c.inner
html = p.value; v.playbackrate = p.value; },false); }; finally, we listen for the input event firing on the <input> element, allowing us to react to the playback rate control being changed.
...not change when playbackrate is altered.
Common MIME types - HTTP
docx microsoft word (openxml) application/vnd.openxmlformats-officedocument.wordprocessingml.document .eot ms embedded opentype fonts application/vnd.ms-fontobject .epub electronic publication (epub) application/epub+zip .gz gzip compressed archive application/gzip .gif graphics interchange format (gif) image/gif .htm .
html hypertext markup language (
html) text/
html .ico icon format image/vnd.microsoft.icon .ics icalendar format text/calendar .jar java archive (jar) application/java-archive .jpeg .jpg jpeg images image/jpeg .js javascript text/javascript, per the following specifications: https://
html.spec.whatwg.org...
.../
html .ico icon format image/vnd.microsoft.icon .ics icalendar format text/calendar .jar java archive (jar) application/java-archive .jpeg .jpg jpeg images image/jpeg .js javascript text/javascript, per the following specifications: https://
html.spec.whatwg.org/multipage/#scriptinglanguages https://
html.spec.whatwg.org/multipage/#dependencies:willful-violation https://datatracker.ietf.org/doc/draft-ietf-dispatch-javascript-mjs/ .json json format application/json .jsonld json-ld format application/ld+json .mid .midi musical instrument digital interface (midi) audio/midi audio/x-midi .mjs javascript module text/javascrip...
... or iso 8859-n) text/plain .vsd microsoft visio application/vnd.visio .wav waveform audio format audio/wav .weba webm audio audio/webm .webm webm video video/webm .webp webp image image/webp .woff web open font format (woff) font/woff .woff2 web open font format (woff) font/woff2 .x
html x
html application/x
html+xml .xls microsoft excel application/vnd.ms-excel .xlsx microsoft excel (openxml) application/vnd.openxmlformats-officedocument.spreadsheetml.sheet .xml xml application/xml if not readable from casual users (rfc 3023, section 3) text/xml if readable from casual users (rfc 3023, section 3) .xul xul applic...
Content-Language - HTTP
lowed by a series of subtags that refine or narrow that language's range (e.g., "en-ca" = the variety of english as communicated in canada).
...hat language's range (e.g., "en-ca" = the variety of english as communicated in canada).
...ca" = the variety of english as communicated in canada).
Content-Type - HTTP
cors-safelisted request header yes, with the additional restriction that values can't contain a cors-unsafe request header byte: 0x00-0x1f (except 0x08 (tab)), "():<>?@[\]{}, and 0x7f (delete).
...he boundary directive is required, which consists of 1 to 70 characters from a set of characters known to be very robust through email gateways, and not ending with white space.
... of 1 to 70 characters from a set of characters known to be very robust through email gateways, and not ending with white space.
Referrer-Policy - HTTP
destinations (https→http).
...le performing a cross-origin request (https→https), and send no header to any less-secure destinations (https→http).
...tps), and send no header to any less-secure destinations (https→http).
HTTP headers - HTTP
rds compatibility with http/1.0 caches where the cache-control header is not yet present.
... cache-control header is not yet present.
...s it supports.
POST - HTTP
d sends data to the server.
...encoded: this is the reason why this type is not suitable to use with binary data (use multipart/form-data instead) multipart/form-data: each value is sent as a block of data ("body part"), with a user agent-defined delimiter ("boundary") separating each part.
...adding a new user through a signup modal; providing a block of data, such as the result of submitting a form, to a data-handling process; extending a database through an append operation.
451 Unavailable For Legal Reasons - HTTP
any attempt to identify the entity ultimately responsible for the resource being unavailable belongs in the response body, not in the rel="blocked-by" link.
...ttempt to identify the entity ultimately responsible for the resource being unavailable belongs in the response body, not in the rel="blocked-by" link.
... <head><title>unavailable for legal reasons</title></head> <body> <h1>unavailable for legal reasons</h1> <p>this request may not be serviced in the roman province of judea due to the lex julia majestatis, which disallows access to resources hosted on servers deemed to be operated by the people's front of judea.</p> </body> </
html> specifications specification title rfc 7725: 451 unavailable for legal reasons an http status code to report legal obstacles ...
Introduction - JavaScript
« previousnext » this chapter introduces javascript and discusses some of its fundamental concepts.
...anguage elements such as operators, control structures, and statements.
...lso approved by the iso (international organization for standardization) as iso-16262.
String.prototype.big() - JavaScript
the big() method creates a <big>
html element that causes a string to be displayed in a big font.
... the big() method creates a <big>
html element that causes a string to be displayed in a big font.
... the big() method creates a <big>
html element that causes a string to be displayed in a big font.
String.prototype.fontsize() - JavaScript
the fontsize() method creates a <font>
html element that causes a string to be displayed in the specified font size.
... the fontsize() method creates a <font>
html element that causes a string to be displayed in the specified font size.
...t>
html element that causes a string to be displayed in the specified font size.
Symbol.toStringTag - JavaScript
: class validatorclass { get [symbol.tostringtag]() { return 'validator'; } } object.prototype.tostring.call(new validatorclass()); // "[object validator]" tostringtag available on all dom prototype objects due to a webidl spec change in mid-2020, browsers are adding a symbol.tostringtag property to all dom prototype objects.
...ype.tostring.call(new validatorclass()); // "[object validator]" tostringtag available on all dom prototype objects due to a webidl spec change in mid-2020, browsers are adding a symbol.tostringtag property to all dom prototype objects.
...dator]" tostringtag available on all dom prototype objects due to a webidl spec change in mid-2020, browsers are adding a symbol.tostringtag property to all dom prototype objects.
WebAssembly.Global() constructor - JavaScript
s a mutable i32 type, with a value of 0.
...changed, first to 42 using the global.value property, and then to 43 using the incglobal() function exported out of the global.wasm module (this adds 1 to whatever value is given to it and then returns the new value).
... function exported out of the global.wasm module (this adds 1 to whatever value is given to it and then returns the new value).
WebAssembly.Global - JavaScript
s a mutable i32 type, with a value of 0.
...changed, first to 42 using the global.value property, and then to 43 using the incglobal() function exported out of the global.wasm module (this adds 1 to whatever value is given to it and then returns the new value).
... function exported out of the global.wasm module (this adds 1 to whatever value is given to it and then returns the new value).
import.meta - JavaScript
rl: "file:///home/user/my-module.js" } it returns an object with a url property indicating the base url of the module.
...y parameters (or the hash) as in the latter example, as of node 14.1.0, a url with query parameters will err when loading in the form node --experimental-modules index.mjs?someurlinfo=5 (it is treated as a file rather than a url in this context).
...node --experimental-modules index.mjs?someurlinfo=5 (it is treated as a file rather than a url in this context).
<merror> - MathML
the mathml <merror> element is used to display contents as error messages.
...te that this error is not thrown when your mathml markup is wrong or not well-formed xml.
...an xml parsing error (in case of the x
html notation of mathml), which has nothing to do with <merror>.
<mtable> - MathML
the mathml <mtable> element allows you to create tables or matrices.
...hether to force all rows to have the same total height.
...rame specifies borders of the entire table.
<mtd> - MathML
the mathml <mtd> element represents a cell in a table or a matrix.
...align specifies the horizontal alignment of this cell and overrides values specified by <mtable> or <mtr>.
...specified by <mtable> or <mtr>.
<mtr> - MathML
the mathml <mtr> element represents a row in a table or a matrix.
...ment is similar to the <tr> element of
html.
... provided for use with stylesheets.
Lazy loading - Web Performance
st render to happen.
...en (non-critical), requiring user interaction (an example being scroll) in order to view them.
...vers allow the user to know when an observed element enters or exits the browser’s viewport.
fill-rule - SVG: Scalable Vector Graphics
ill-rule attribute is a presentation attribute defining the algorithm to use to determine the inside part of a shape.
...nity in any direction, and then examining the places where a segment of the shape crosses the ray.
...e="red" d="m210,0 h90 v90 h-90 z m230,20 v50 h50 v-50 z"/> </svg> evenodd the value evenodd determines the "insideness" of a point in the shape by drawing a ray from that point to infinity in any direction and counting the number of path segments from the given shape that the ray crosses.
points - SVG: Scalable Vector Graphics
the points attribute defines a list of points.
...vg> polyline for <polyline>, points defines a list of points, each representing a vertex of the line to be drawn.
.../> </svg> polygon for <polygon>, points defines a list of points, each representing a vertex of the shape to be drawn.
textLength - SVG: Scalable Vector Graphics
ust attribute.
.../svg"> <rect x="1" y="1" width="998" height="298" fill="none" stroke="green" stroke-width="2"/> <text id="hello" x="10" y="150" font-family="sans-serif" font-size="60" fill="green"> hello world!
...<rect x="1" y="1" width="998" height="298" fill="none" stroke="green" stroke-width="2"/> <text id="hello" x="10" y="150" font-family="sans-serif" font-size="60" fill="green"> hello world!
x - SVG: Scalable Vector Graphics
ix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fefunca>, <fefuncb>, <fefuncg>, <fefuncr>, <fegaussianblur>, <feimage>, <femerge>, <femergenode>, <femorphology>, <feoffset>, <fepointlight>, <fespecularlighting>, <fespotlight>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <glyphref>, <image>, <mask>, <pattern>, <rect>, <svg>, <text>, <tref>, <tspan>, and <use>
html,body,svg { height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <rect x="20" y="20" width="60" height="60" /> <rect x="120" y="20" width="60" height="60" /> <rect x="220" y="20" width="60" height="60" /> </svg> altglyph warning: as of svg2 <altglyph> is deprecated and shouldn't be used.
...e are multiple values, x defines the x coordinate of each individual glyph from the text.
...re multiple values, x defines the x coordinate of each individual glyph from the text.
x1 - SVG: Scalable Vector Graphics
the x1 attribute is used to specify the first x-coordinate for drawing an svg element that requires more than one coordinate.
...lns="http://www.w3.org/2000/svg"> <line x1="1" x2="5" y1="1" y2="9" stroke="red" /> <line x1="5" x2="5" y1="1" y2="9" stroke="green" /> <line x1="9" x2="5" y1="1" y2="9" stroke="blue" /> </svg> line for <line>, x1 defines the x coordinate of the starting point of the line.
...9" x2="5" y1="1" y2="9" stroke="blue" /> </svg> lineargradient for <lineargradient>, x1 defines the x coordinate of the starting point of the gradient vector used to map the gradient stop values.
x2 - SVG: Scalable Vector Graphics
the x2 attribute is used to specify the second x-coordinate for drawing an svg element that requires more than one coordinate.
...xmlns="http://www.w3.org/2000/svg"> <line x1="5" x2="1" y1="1" y2="9" stroke="red" /> <line x1="5" x2="5" y1="1" y2="9" stroke="green" /> <line x1="5" x2="9" y1="1" y2="9" stroke="blue" /> </svg> line for <line>, x2 defines the x coordinate of the ending point of the line.
...5" x2="9" y1="1" y2="9" stroke="blue" /> </svg> lineargradient for <lineargradient>, x2 defines the x coordinate of the ending point of the gradient vector used to map the gradient stop values.
xlink:show - SVG: Scalable Vector Graphics
the target attribute has priority, since it can express a wider range of values.
...her | none default value replace animatable no new this value specifies that the referenced resource is opened in a new window or tab.
...d by an
html <a> element with target set to _blank.
y - SVG: Scalable Vector Graphics
ix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fefunca>, <fefuncb>, <fefuncg>, <fefuncr>, <fegaussianblur>, <feimage>, <femerge>, <femergenode>, <femorphology>, <feoffset>, <fepointlight>, <fespecularlighting>, <fespotlight>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <glyphref>, <image>, <mask>, <pattern>, <rect>, <svg>, <text>, <tref>, <tspan>, and <use>
html,body,svg { height:100% } <svg viewbox="0 0 100 300" xmlns="http://www.w3.org/2000/svg"> <rect y="20" x="20" width="60" height="60" /> <rect y="120" x="20" width="60" height="60" /> <rect y="220" x="20" width="60" height="60" /> </svg> altglyph warning: as of svg2 <altglyph> is deprecated and shouldn't be used.
...e are multiple values, y defines the y coordinate of each individual glyph from the text.
...re multiple values, y defines the y coordinate of each individual glyph from the text.
y1 - SVG: Scalable Vector Graphics
the y1 attribute is used to specify the first y-coordinate for drawing an svg element that requires more than one coordinate.
...lns="http://www.w3.org/2000/svg"> <line x1="1" x2="9" y1="1" y2="5" stroke="red" /> <line x1="1" x2="9" y1="5" y2="5" stroke="green" /> <line x1="1" x2="9" y1="9" y2="5" stroke="blue" /> </svg> line for <line>, y1 defines the y coordinate of the starting point of the line.
..."1" x2="9" y1="9" y2="5" stroke="blue" /> </svg> lineargradient for <lineargradient>, y1 defines the y coordinate of the starting point of the gradient vector used to map the gradient stop values.
y2 - SVG: Scalable Vector Graphics
the y2 attribute is used to specify the second y-coordinate for drawing an svg element that requires more than one coordinate.
...ns="http://www.w3.org/2000/svg"> <line x1="1" x2="9" y1="5" y2="1" stroke="red" /> <line x1="1" x2="9" y1="5" y2="5" stroke="green" /> <line x1="1" x2="9" y1="5" y2="9" stroke="blue" /> </svg> line for <line>, y2 defines the y coordinate of the ending point of the line.
...1="1" x2="9" y1="5" y2="9" stroke="blue" /> </svg> lineargradient for <lineargradient>, y2 defines the y coordinate of the ending point of the gradient vector used to map the gradient stop values.
<script> - SVG: Scalable Vector Graphics
the svg script element allows to add scripts to an svg document.
... the svg script element allows to add scripts to an svg document.
...padstart(2,'0') const b = math.round(math.random() * 255).tostring(16).padstart(2,'0') return `#${r}${g}${b}` } document.queryselector('circle').addeventlistener('click', (e) => { e.target.style.fill = getcolor() }) }) // ]]> </script> <circle cx="5" cy="5" r="4" /> </svg> attributes crossorigin this attribute defines cors settings as define for the
html <script> element.
<style> - SVG: Scalable Vector Graphics
the svg <style> element allows style sheets to be embedded directly within svg content.
... the svg <style> element allows style sheets to be embedded directly within svg content.
... the svg <style> element allows style sheets to be embedded directly within svg content.
<svg> - SVG: Scalable Vector Graphics
the svg element is a container that defines a new coordinate system and viewport.
... the svg element is a container that defines a new coordinate system and viewport.
... the svg element is a container that defines a new coordinate system and viewport.
Types of attacks - Web security
pen web application security project, xss was the seventh most common web app vulnerability in 2017.
...ession tokens, or other sensitive site-specific information, or lets the malicious script rewrite the
html content.
... that isn’t really an image (for example in an unfiltered chat or forum), instead it really is a request to your bank’s server to withdraw money: <img src="https://bank.example.com/withdraw?account=bob&amount=1000000&for=mallory"> now, if you are logged into your bank account and your cookies are still valid (and there is no other validation), you will transfer money as soon as you load the
html that contains this image.
XML Index - XML: Extensible Markup Language
found 4 pages: # page tags and summary 1 xml: extensible markup language draft, landing, web, xml the extensible markup language is a strict serialisation of the document object model.
...l xml is a markup language similar to
html.
...markup language and is a w3c recommended specification as a general purpose markup language.
<xsl:output> - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the <xsl:output> element controls the characteristics of the output document.
...ml" | "
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.
... | "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.
Advanced Example - XSLT: Extensible Stylesheet Language Transformations
he xsl:sort element's order attribute can access the value of the parameter using $myorder.
...nt("", "", null); function sort() { if (!xslloaded){ p = new xmlhttprequest(); p.open("get", "example2.xsl", false); p.send(null); xslref = p.responsexml; xsltprocessor.importstylesheet(xslref); xslloaded = true; } // create a new xml document in memory xmlref = document.implementation.createdocument("", "", null); // we want to move a part of the dom from an
html document to an xml document.
... = xsltprocessor.getparameter(null, "myorder"); if (sortval == "" || sortval == "descending") xsltprocessor.setparameter(null, "myorder", "ascending"); else xsltprocessor.setparameter(null, "myorder", "descending"); // initiate the transformation var fragment = xsltprocessor.transformtofragment(xmlref, document); // clear the contents document.getelementbyid("example").inner
html = ""; mydom = fragment; // add the new content from the transformation document.getelementbyid("example").appendchild(fragment) } // xsl stylesheet: <?xml version="1.0" encoding="utf-8"?> <xsl:stylesheet version="1.0" xmlns="http://www.w3.org/1999/x
html" xmlns:
html="http://www.w3.org/1999/x
html" xmlns:xsl="http://www.w3.org/1999/xsl/transform"> <xsl:output method="
html" indent="yes" />...
Using Spacers - Archive of obsolete content
dth going to each button.
...1: <button label="find" flex="1"/> <button label="cancel" flex="1"/> example 2: <button label="find" flex="10"/> <button label="cancel" flex="1"/> example 3: <button label="find" flex="2"/> <button label="replace"/> <button label="cancel" flex="4"/> example 4: <button label="find" flex="2"/> <button label="replace" flex="2"/> <button label="cancel" flex="3"/> example 5: <
html:div> <button label="find" flex="2"/> <button label="replace" flex="2"/> </
html:div> example 6: <button label="find" flex="145"/> <button label="replace" flex="145"/> example 1 in this case the flexibility is divided up evenly between both buttons.
XUL Parser in Python/source - Archive of obsolete content
source code for the xul parser in python.
...e] = {} for attr,val in a.items(): el_list[name][strip(attr)] = strip(val) def syntax_error(self, message): pass p = xulparser() cmd = 'dir /s /b *.xul' chrome_dir = 'c:\program files\netscape\netscape 6\chrome' os.chdir(chrome_dir) files = os.popen(cmd).readlines() for file in files: file = file.strip() print '** ' + file + ' **' data = open(file).read() p.feed(data) w.write('<
html><h3>periodic table of xul elements</h3>') w.write('<table><style>.head {font-weight: bold; background-color: lightgrey;}</style>') elements = el_list.keys() elements.sort() for item in elements: w.write('<tr><td class="head">' + item + '</td></tr>\n') for a in el_list[item]: w.write('<tr><td class="at">' + a + '</td>') w.write('</table></
html>\n') w.close() ...
XUL Event Propagation - Archive of obsolete content
low mechanisms, event bubbling and event capturing, mean that events raised in the interface can be caught anywhere above the element that raised the event.
... and event capturing, mean that events raised in the interface can be caught anywhere above the element that raised the event.
image - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] summary an element that displays an image, much like the
html img element.
...s | related ] summary an element that displays an image, much like the
html img element.
Windows and menus in XULRunner - Archive of obsolete content
-stylesheet href="chrome://basicapp/skin/main.css" type="text/css"?> <!doctype window system "chrome://basicapp/locale/main.dtd"> <window id="main" title="&title;" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script src="main.js"/> ...
... </menu> </menubar> <toolbar id="main-toolbar"> <toolbarbutton id="open" label="&file.open;" oncommand="dofileopen();"/> <toolbarbutton id="save" label="&file.save;" oncommand="dofilesave();"/> </toolbar> </toolbox> ...
2006-10-27 - Archive of obsolete content
summary: mozilla.dev.quality - october 20-october 27, 2006 announcements firefox & thunderbird 1.5.0.8 candidate builds available for testing!
... summary: mozilla.dev.quality - october 20-october 27, 2006 announcements firefox & thunderbird 1.5.0.8 candidate builds available for testing!
2006-10-27 - Archive of obsolete content
summary: mozilla.dev.tech.layout - october 21 - october 27, 2006 announcements none this week.
... summary: mozilla.dev.tech.layout - october 21 - october 27, 2006 announcements none this week.
2006-11-03 - Archive of obsolete content
summary: mozilla.dev.tech.layout - october 28 - november 3, 2006 announcements new reflow branch off of trunk l.
... summary: mozilla.dev.tech.layout - october 28 - november 3, 2006 announcements new reflow branch off of trunk l.
2006-11-17 - Archive of obsolete content
oming close to being merged with the trunk.
... current list of known regressions on the branch can be found at: http://wiki.mozilla.org/gecko:reflow...ng#quick_links.
Scratchpad - Archive of obsolete content
chpad lets you edit larger chunks of javascript code, then execute it in various ways depending on how you want to use the output.
... shows a case of using scratchpad with a page run by a local web server.
Summary of Changes - Archive of obsolete content
this section outlines all of the element and practice updates described in this article.
...ated font
html 4.01 span plus css1 color: ; font-family: ; font-size: ; deprecated center or align="center" css1 text-align: center; for in-line elements like text or image deprecated center or align="center" css1 margin-left: auto; margin-right: auto; for block-level elements deprecated bgcolor css1 background-color: ; non-standard embed
html 4.01 object deprecated applet
html 4.01 object 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.get...
-moz-binding - Archive of obsolete content
the -moz-binding css property is used by mozilla-based applications to attach an xbl binding to a dom element.
...; values <url> the url for the xbl binding (including the fragment identifier).
RFE to the Custom Controls - Archive of obsolete content
introduction if you have a custom control that you believe will help fulfill the needs of form authors or other custom controls authors, please file it here.
...re extensive to address the wider spectrum of requirements that a xul application will have on its controls.
XForms Styling - Archive of obsolete content
can clean this up repeats see the mozilla xforms specials page for some general points.
...ght-forward: view the source after processing of your xforms document, and map the old styles to the new elements.
XForms Secret Element - Archive of obsolete content
incremental - supported.
... type restrictions the secret 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.
XForms Switch Module - Archive of obsolete content
ributes events special case - the idref of a case element to select representations the case element doesn't have a visual representation.
...switch> <case id="in" selected="true"> <input ref="yourname"> <label>please tell me your name</label> <toggle ev:event="domactivate" case="out"/> </input> </case> <case id="out" selected="false"> <
html:p>hello <output ref="yourname" /> <trigger id="editbutton"> <label>edit</label> <toggle ev:event="domactivate" case="in"/> </trigger> </
html:p> </case> </switch> ...
XQuery - Archive of obsolete content
veloped to give a preliminary support for xquery for browser users (and serving as a simple model for how xquery can be implemented within extensions).
...xquery for browser users (and serving as a simple model for how xquery can be implemented within extensions).
Examples - Game development
al games oort online a mmo exploration, building, and battle game (currently in development.) a wizard's lizard top down zelda-esque exploration/rpg.
...ment an xray machine, creating using an svg mask.
Publishing games - Game development
html5 games have a huge advantage over native in terms of publishing and distribution — you have the freedom of distribution, promotion and monetization of your game on the web, rather than each version being locked into a single store controlled by one company.
... on the web, rather than each version being locked into a single store controlled by one company.
Mobile touch controls - Game development
overview: control mechanisms next the future of mobile gaming is definitely web, and many developers choose the mobile first approach in their game development process — in the modern world, this generally also involves implementing touch controls.
...n 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; output.inner
html = "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.
Unconventional controls - Game development
imagine going even further — in this article we will explore various unconventional ways to control your web game, some more unconventional than others.
...gree = 0; var degreethreshold = 30; var grabstrength = 0; right after that we use the leap's loop method to get the information held in the hand variable on every frame: leap.loop({ hand: function(hand) { horizontaldegree = math.round(hand.roll() * todegrees); verticaldegree = math.round(hand.pitch() * todegrees); grabstrength = hand.grabstrength; output.inner
html = 'leap motion: <br />' + ' roll: ' + horizontaldegree + '° <br />' + ' pitch: ' + verticaldegree + '° <br />' + ' strength: ' + grabstrength + ''; } }); the code above is calculating and assigning the horizontaldegree, verticaldegree and grabstrength values that we will use later on, and outputting it in
html so we can see the actual values.
Implementing game control mechanisms - Game development
one of
html5's main advantages as a game development platform is the ability to run on various platforms and devices.
...mall online demo with full source code available on github where the basic support for the control mechanisms described in the articles is implemented in pure javascript.
Move the ball - Game development
« previousnext » this is the 2nd step out of 10 of the gamedev canvas tutorial.
...keep constantly updating the canvas drawing on each frame, we need to define a drawing function that will run over and over again, with a different set of variable values each time to change sprite positions, etc.
Build the brick field - Game development
« previousnext » this is the 9th step out of 16 of the gamedev phaser tutorial.
...)+brickinfo.offset.left; var bricky = (r*(brickinfo.height+brickinfo.padding))+brickinfo.offset.top; newbrick = game.add.sprite(brickx, bricky, 'brick'); game.physics.enable(newbrick, phaser.physics.arcade); newbrick.body.immovable = true; newbrick.anchor.set(0.5); bricks.add(newbrick); } } } if you reload index.
html at this point, you should see the bricks printed on screen, at an even distance from one another.
Physics - Game development
« previousnext » this is the 5th step out of 16 of the gamedev phaser tutorial.
...lly = true; game.scale.pagealignvertically = true; game.stage.backgroundcolor = '#eee'; game.load.image('ball', 'img/ball.png'); } function create() { game.physics.startsystem(phaser.physics.arcade); ball = game.add.sprite(50, 50, 'ball'); game.physics.enable(ball, phaser.physics.arcade); ball.body.velocity.set(150, 150); } function update() { } try reloading index.
html again — the ball should now be moving constantly in the given direction.
The score - Game development
« previousnext » this is the 11th step out of 16 of the gamedev phaser tutorial.
...d we will increase the number of points every time the ball hits a brick and update the scoretext to display the current score.
Tutorials - Game development
ng the way you will learn the basics of using the <canvas> element to implement fundamental game mechanics like rendering and moving images, collision detection, control machanisms, and winning and losing states.
... step-by-step tutorial you'll implement the same breakout clone as the previous tutorial series, except that this time you'll do it using thephaser
html5 game framework.
Script-supporting element - MDN Web Docs Glossary: Definitions of Web-related terms
in an
html document, script-supporting elements are those elements that don't directly contribute to the appearance or layout of the page; instead, they're either scripts or contain information that's only used by scripts.
... appearance or layout of the page; instead, they're either scripts or contain information that's only used by scripts.
Overflowing content - Learn web development
previous overview: building blocks next overflow is what happens when there is too much content to fit in a container.
... previous overview: building blocks next overflow is what happens when there is too much content to fit in a container.
Grids - Learn web development
previous overview: css layout next css grid layout is a two-dimensional layout system for the web.
... previous overview: css layout next css grid layout is a two-dimensional layout system for the web.
Normal Flow - Learn web development
previous overview: css layout next this article explains normal flow, or the way that webpage elements lay themselves out if you have not changed their layout.
... previous overview: css layout next this article explains normal flow, or the way that webpage elements lay themselves out if you have not changed their layout.
CSS layout - Learn web development
modern layout tools like flexbox, css grid, and positioning, and some of the legacy techniques you might still want to know about.
...d, and positioning, and some of the legacy techniques you might still want to know about.
Example 2 - Learn web development
this is the second example that explain how to build custom form widgets.
...idth : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content window.addeventlistener("load", function () { var form = document.queryselector('form'); form.classlist.remove("no-widget"); form.classlist.add("widget"); }); result for js no js
html content <form class="no-widget"> <select name="myfruit"> <option>cherry</option> <option>lemon</option> <option>banana</option> <option>strawberry</option> <option>apple</option> </select> <div class="select"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li...
Example 4 - Learn web development
this is the fourth example that explain how to build custom form widgets.
...eryselectorall('.option'); optionlist.foreach(function (other) { other.classlist.remove('highlight'); }); option.classlist.add('highlight'); }; function updatevalue(select, index) { var nativewidget = select.previouselementsibling; var value = select.queryselector('.value'); var optionlist = select.queryselectorall('.option'); nativewidget.selectedindex = index; value.inner
html = optionlist[index].inner
html; highlightoption(select, optionlist[index]); }; function getindex(select) { var nativewidget = select.previouselementsibling; return nativewidget.selectedindex; }; // ------------- // // event binding // // ------------- // window.addeventlistener("load", function () { var form = document.queryselector('form'); form.classlist.remove("no-widget"); for...
Example 5 - Learn web development
this is the last example that explain how to build custom form widgets.
...function updatevalue(select, index) { var nativewidget = select.previouselementsibling; var value = select.queryselector('.value'); var optionlist = select.queryselectorall('.option'); optionlist.foreach(function (other) { other.setattribute('aria-selected', 'false'); }); optionlist[index].setattribute('aria-selected', 'true'); nativewidget.selectedindex = index; value.inner
html = optionlist[index].inner
html; highlightoption(select, optionlist[index]); }; function getindex(select) { var nativewidget = select.previouselementsibling; return nativewidget.selectedindex; }; // ------------- // // event binding // // ------------- // window.addeventlistener("load", function () { var form = document.queryselector('form'); form.classlist.remove("no-widget"); for...
Example - Learn web development
this the example for a basic payment form for the article how to structure an
html form.
... this the example for a basic payment form for the article how to structure an
html form.
Example - Learn web development
this is the example code for the article your first
html form.
... this is the example code for the article your first
html form.
Test your skills: Events - Learn web development
e: in the examples below, if there is an error in your code it will be outputted 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).
... that make use of it, and we'd like you to do some research into what dom apis you need to successfully answer the questions.
CSS performance optimization - Learn web development
ndering until it parses all of these styles but will not block rendering on styles it knows it will not use, such the print stylesheets.
...wser to recalculate layout, style, paint, size, or any combination of them for a limited area of the dom and not the entire page.
Accessibility in React - Learn web development
previous overview: client-side javascript frameworks next in our final tutorial article, we'll focus on (pun intended) accessibility, including focus management in react, which can improve usability and reduce confusion for both keyboard-only and screenreader users.
... the list.
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 computed properties.
...pleted todo items, using a feature of vue called computed properties.
Rendering a list of Vue components - Learn web development
ient-side javascript frameworks next at this point we've got a fully working component; we're now ready to add multiple todoitem components to our app.
...at adding a set of todo item data to our app.vue component, which we'll then loop through and display inside todoitem components using the v-for directive.
Vue resources - Learn web development
previous overview: client-side javascript frameworks next now we'll round off our study of vue by giving you a list of resources that you can use to go further in your learning, plus some other useful tips.
... next now we'll round off our study of vue by giving you a list of resources that you can use to go further in your learning, plus some other useful tips.
Tools and testing - Learn web development
once you've started to become comfortable programming with core web technologies (like
html, css, and javascript), and you start to get more experience, read more resources, and learn more tips and tricks, you'll start to come across all kind of tools, from javascript frameworks, to testing and automation tools, and more besides.
... know they work and have good industry support.
Accessibility Information for Core Gecko Developers
html accessibility dynamic web content is not accessible because it uses vanilla <div>s and <span>s combined with javascript rather than declarative markup to describe the behavior of custom widgets such as menus and tree views.
... such as menus and tree views.
Information for Assistive Technology Vendors
mozilla now has enough accessibility support that we're reading for early adopters and testers to start giving it a try.
...dors of windows accessibility software, such as screen readers, voice dictation packages and screen magnifiers to provide support for mozilla.
Creating MozSearch plugins
/description> <inputencoding>utf-8</inputencoding> <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?output=fxjson&command={searchterms}" /> <url type="text/
html" method="get" template="http://search.yahoo.com/search"> <param name="p" value="{searchterms}"/> <param name="ei" value="utf-8"/> <mozparam name="fr" condition="pref" pref="yahoo-fr" /> </url> <searchform>http://search.yahoo.com/</searchform> </searchplugin> let's say the user chooses to use the yahoo!
...accued3tdqn75d4xmavcok9armhbzaw0aecibhkalc0mdy7x9abna3obazxiaa6ikecglmvqhwwyjyul2d4v2cpg8vzswx7ghyaaak7aoif7saboqcmn4ha3ahfsidtgpq%2fvlz8p4mskj2w9h8ggbjevxvhdo4fquqg%2fkdypqcg4h8luiacnq%2fsobmyi8basajfpcj1aaeejwvqqlpabxmh5bjjqi0gi9dtaagdbbccavlkgmq7ykczxpcqxquzhaeccj4xgml493ug21zd%2badaxh0wlm4a9mzpxjkjiiawtar5pqmalacabquulttbgccagcnnzgabbgamj5thwgvjlaaaaabjru5erkjggg%3d%3d</image> <url type="text/
html" method="get" template="http://developer.mozilla.org/en/docs/special:search?search={searchterms}"/> <searchform>http://developer.mozilla.org/en/docs/special:search</searchform> </searchplugin> notice in this case that instead of using <param> to define parameters to the search engine, they're simply embedded inside the template url.
Debugging Table Reflow
reflow the most efficient tool to claim that
html-table code is the victim and not the source of layout bugs is a frame reflow debug log.
...sable-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 computedwidth=9000 computedheight=1500 this message is generated inside of nsresult nsblockframe::reflowdirtylines(nsblockreflowstate& astate) it first shows the block id and address and then the computed width and height from the
htmlreflowstate.
ESLint
see the eslint user guide for which plugins to install in your editor.
... eslint user guide for which plugins to install in your editor.
Reviewer Checklist
ne is shown in the log), and additional description, if needed, should be present, properly wrapped, in later lines.
...nes.
SVG Guidelines
lus, in most of the cases, the filename is quite descriptive so it's recommended to remove that kind of metadata since it doesn't bring much value.
...github.com/svg/svgo alternatives to svgo: https://github.com/razrfalcon/svgcleaner https://github.com/scour-project/scour gui for command line tool (use with "prettify code" and "remove <title>" options on): https://jakearchibald.github.io/svgomg/ good alternative to svgo/svgomg: https://petercollingridge.appspot.com/svg-editor fixes the excessive number precision: https://simon.
html5.org/tools/js/svg-optimizer/ converts inline styles to svg attributes: https://www.w3.org/wiki/svgtidy raphaeljs has a couple of utilities that may be useful: raphael.js ...
Error codes returned by Mozilla APIs
_error_port_access_not_allowed (0x804b0013) ns_error_net_reset (0x804b0014) ns_error_ftp_login (0x804b0015) ns_error_ftp_cwd (0x804b0016) ns_error_ftp_pasv (0x804b0017) ns_error_ftp_pwd (0x804b0018) ns_error_not_resumable (0x804b0019) ns_error_invalid_content_encoding (0x804b001b) the content encoding of the source document was incorrect, for example returning a plain
html document advertised as content-encoding: gzip ns_error_ftp_list (0x804b001c) ns_error_unknown_host (0x804b001e) ns_error_redirect_loop (0x804b001f) ns_error_entity_changed (0x804b0020) ns_error_unknown_proxy_host (0x804b002a) ns_error_unknown_socket_type (0x804b0033) ns_error_socket_create_failed (0x804b0034) ns_error_cache_key_not_found (0x804b003d) ns_error_cach...
...0001) moz_error_storage_error (0x80630001) ns_error_schemavalidator_no_schema_loaded (0x80640001) ns_error_schemavalidator_no_dom_node_specified (0x80640002) ns_error_schemavalidator_no_type_found (0x80640003) ns_error_schemavalidator_type_not_found (0x80640004) note: there are other errors in these files: gfx/public/nsidevicecontext.h base/public/nsneterror.h parser/
htmlparser/public/nsiparser.h layout/base/nslayouterrors.h profile/public/nsiprofileinternal.idl security/manager/ssl/public/nsicmsmessageerrors.idl directory/xpcom/base/public/nsildaperrors.idl content/base/public/nscontenterrors.h see also mozilla error lookup lets you quickly look up the error name by its code in different formats.
Chrome-only API reference
this page lists apis that only run in gecko chrome code (and sometimes in other privileged circumstances).
... this page lists apis that only run in gecko chrome code (and sometimes in other privileged circumstances).
Overview of Mozilla embedding APIs
webprogress) eventually, this service will be replaced by thewebprogress service...
...mpt related interfaces: nsiprompt nsiwebbrowserchrome nsiwebbrowsersitewindow nsiwebprogresslistener nsicontextmenulistener nsiprintoptions overview: most of gecko's functionality is exposed through the nswebbrowser component.
CustomizableUI.jsm
// type: 'button', //we don't need to type this, the default type is button tooltiptext: 'this is my widget created with cui.jsm', oncommand: function(aevent) { var thisdomwindow = aevent.target.ownerdocument.defaultview; //this is the browser (xul) window var thiswindowsselectedtabswindow = thisdomwindow.gbrowser.selectedtab.linkedbrowser.contentwindow; //this is the
html window of the currently selected tab thiswindowsselectedtabswindow.alert('alert from
html window of selected tab'); thisdomwindow.alert('alert from xul window'); } }); giving the button an icon non-style sheet method the style sheet method (below) is one way to add an icon.
... // type: 'button', //we don't need to type this, the default type is button tooltiptext: 'this is my widget created with cui.jsm', oncommand: function(aevent) { var thisdomwindow = aevent.target.ownerdocument.defaultview; //this is the browser (xul) window var thiswindowsselectedtabswindow = thisdomwindow.gbrowser.selectedtab.linkedbrowser.contentwindow; //this is the
html window of the currently selected tab thiswindowsselectedtabswindow.alert('alert from
html window of selected tab'); thisdomwindow.alert('alert from xul window'); } }); //end - use customizableui.jsm to create the widget //start - use style sheet service to style our widget to give it an icon cu.import('resource://gre/modules/services.jsm'); var sss = cc['@mozilla.org/content/...
JNI.jsm
llyqualifiednameofclass(sig.geckoappshell), { static_methods: [ { name: 'getcontext', sig: '()' + sig.context }] }); var context = jni.loadclass(my_jenv, fullyqualifiednameofclass(sig.context), { methods: [ { /* http://developer.android.com/reference/android/content/context.
html#getsystemservice%28java.lang.class%3ct%3e%29 * public abstract object getsystemservice (string name) */ name: 'getsystemservice', sig: genmethodsig([ sig.string // name ], sig.object // return ) }], static_fields: [ ...
...emservice', sig: genmethodsig([ sig.string // name ], sig.object // return ) }], static_fields: [ { name: 'window_service', sig: sig.string } // http://developer.android.com/reference/android/content/context.
html#window_service // public static final string window_service ] }); var windowmanager = jni.loadclass(my_jenv, fullyqualifiednameofclass(sig.windowmanager), { methods: [ { name: 'addview', sig: '(' + sig.view + sig.viewgroup_layoutparams + ')' + sig.void }, { name: 'removevie...
Setting up the infrastructure
first, make your project's file type decision (see localization formats for details):
html/php .lang gettext (.po) assuming you chose gettext, you'll need to follow the steps below to set up the infrastructure for localizing your web application.
...ur locale directory: extract-po.sh will be used to extract all english strings from your application's directories specified in source_dirs, merge the resulting template (*.pot) file with the existing (already containing translations) messages.po files for each locale (if they exist) and merge the new messages.po files to messages.mo files.
Mozilla Style System
ule processor represents an origin within the css cascade.
...ty < 1.0f) return pr_true; or like this: const nsstyleposition *stylepos = aframe->getstyleposition(); if (stylepos->mwidth.getunit() == estyleunit_coord) { nscoord w = stylepos->mwidth.getcoordvalue(); ...
BloatView
mber of objects might be 1.
...s might indicate a global variable or service.
L20n
e: "firefoxa", dative: "firefoxu", accusative: "firefox", locative: "firefoxu", instrumental: "firefoxom" }> <about "o {{ brandname.locative }}"> for developers documentation for developers wanting to implement localization functionality on their web apps using l20n.
...irefox", locative: "firefoxu", instrumental: "firefoxom" }> <about "o {{ brandname.locative }}"> for developers documentation for developers wanting to implement localization functionality on their web apps using l20n.
NSS API Guidelines
dig.h, secdigt.h, secitem.h, secoid.h, secoidt.h, secport.h, secrng.h, secrngt.h, secerr.h, watcomfx.h naming conventions this section describes the rules that (ideally) should be followed for naming and identifying new files, functions, and data types.
...age of using an array is that you can use strings(1) to pull the id tags out of a (debug) compiled library.
Running the Rhino tests
to run the rhino tests, simply run the junit-all ant task in the top-level rhino directory: $ cd rhino $ ant junit-all this will run rhino's own unit tests as well as most of the mozilla javascript test suite.
... to run the rhino tests, simply run the junit-all ant task in the top-level rhino directory: $ cd rhino $ ant junit-all this will run rhino's own unit tests as well as most of the mozilla javascript test suite.
Rhino Examples
l tool to check that @param tags in java documentation comments match the parameters in the corresponding java method.
...param tags in java documentation comments match the parameters in the corresponding java method.
Rhino overview
introduction most people who have used javascript before have done so by adding scripts to their
html web pages.
... introduction most people who have used javascript before have done so by adding scripts to their
html web pages.
JS_SetOptions
id search for jsoption_compile_n_go jsoption_atline //@line number ["filename"] option supported for the xul preprocessor and kindred beasts.
...id search for jsoption_xml jsoption_allow_xml added in spidermonkey 15 if this is off, e4x syntax isn't supported no matter what version number is set.
Mozilla Projects
red with since being written by the add-on author.
...o the applications can verify the integrity of a manifest retrieved over normally insecure channels.
Redis Tips
nd out whether zsets might be right for you.
...to a join, like, say, associate an email and a remote url to store a browserid assertion, just make a new key.
Places utilities for JavaScript
node, nsidomevent aevent); void openurinodesintabs(array nsinavhistoryresultnode anodes, nsidomevent aevent); void createmenuitemfornode(nsinavhistoryresultnode anode, acontainersmap); constants mimetypes type_x_moz_place_container type_x_moz_place_separator: "text/x-moz-place-separator", type_x_moz_place: "text/x-moz-place", type_x_moz_url: "text/x-moz-url", type_
html: "text/
html", type_unicode: "text/unicode", services there's easy access to some of the common services used in bookmarks or history navigation here.
...-wraps a result node according to the rules of the specified content type.
XML Extras
eck them into extensions/xmlextras/tests/.
...difference microsoft mozilla member names case insensitive?
Finishing the Component
this type is defined by the world wide web consortium as: the naming scheme of the mechanism used to access the resource.
...d to the method newuri.
nsIAccessNode
pe description document nsiaccessibledocument the document accessible that this access node resides in.
...ument nsiaccessibledocument the document accessible that this access node resides in.
nsIAccessible
cessible.childcount to navigate through the children by index accessible position you can use nsiaccessible.indexinparent to get accessible index in its parent.
...ount to navigate through the children by index accessible position you can use nsiaccessible.indexinparent to get accessible index in its parent.
nsIDocShell
e character set has been retrieved from the cache.
... 5 the parent frame's character set is being used.
nsIHttpChannel
h this flag is ignored is an implementation detail.
... the header value will be replaced with the contents of avalue.
nsILoginInfo
aformsubmiturl, in astring ahttprealm, in astring ausername, in astring apassword, in astring ausernamefield, in astring apasswordfield); boolean matches(in nsilogininfo alogininfo, in boolean ignorepassword); attributes attribute type description formsubmiturl astring the origin, not url, a form-based login was submitted to.
...mple, "https://www.site.com").
nsIMarkupDocumentViewer
docshell/base/nsimarkupdocumentviewer.idlscriptable describes the properties of a content viewer for an
html or xml markup document.
...derbird 7.0 / seamonkey 2.4) method overview void scrolltonode(in nsidomnode node); void sizetocontent(); attributes attribute type description allowplugins boolean if true, plugins are allowed within the doc shell.
nsIMsgIdentity
tostring(); attributes attribute type description identityname astring fullname astring user's full name, i.e.
...tribute type description identityname astring fullname astring user's full name, i.e.
nsIScriptError
" for logging exceptions caused by addon code.
...code.
nsISearchEngine
me of the parameter to add.
...he uri and postdata, if applicable.
nsISound
widget/public/nsisound.idlscriptable this interface provides a way to play sounds.
...arameters none.
Using nsIDirectoryService
content formerly at http://www.mozilla.org/projects/xpcom/nsdirectoryservice.
html general nsdirectoryservice information: nsdirectoryservice implements the nsiproperties interface.
...g allows you to specify if you want the nsdirectoryservice to cache this value.
xpidl
-i add entry to start of include path for ``#include "nsithing.idl" -o use basename (e.g.
...tart of include path for ``#include "nsithing.idl" -o use basename (e.g.
Mozilla technologies
out as webshell.
...eted, but the long-term goal is to remove webshell and switch over entirely to docshell.embedded dialog apifeed content access apifirefox 2 and thunderbird 2 introduce a series of interfaces that make it easy for extension authors to access rss and atom feeds.life after xul: building firefox interfaces with
htmlthis page gathers technical solutions to common problems encountered by teams shipping
html-based interfaces inside firefox.morkmork is a database file format invented by david mccusker for the mozilla code since the original netscape database information was proprietary and could not be released open source.
Mail client architecture overview
warning: the content of this article may be out of date.
...ng new mail, copying and moving messages, and displaying messages from a remote server, the url system interacts with necko and reflects it's state to the mail window.
Mail composition back end
ed in, but this could easily lead to confusion.
...e pruint32 atotaltried, - the total messages that were attempted pruint32 asuccessful) = 0; - the number of successful messages quoting quoting a mail message is made possible via the nsimsgquote interface.
The libmime module
warning: the content of this article may be out of date.
... | |--- mimesunattachment | | | | | |--- mimemultipartsigned (abstract) | | | |--- mimemessage | | | |--- mimeuntypedtext | |--- mimeleaf (abstract) | | | |--- mimeinlinetext (abstract) | | | | | |--- mimeinlinetextplain | | | | | |--- mimeinlinetext
html | | | | | |--- mimeinlinetextrichtext | | | | | | | |--- mimeinlinetextenriched | | | | | |--- mimeinlinetextvcard | | | | | |--- mimeinlinetextcalendar | | | |--- mimeinlineimage | | | |--- mimeexternalobject | |--- mimeexternalbody ...
Using the Multiple Accounts API
.useremail - the user's e-mail address, i.e.
...smith@isp.com preference: mail.identity.identity.reply_to - reply to address during message composition, should only be used if different than useremail.
Blocking By Domain - Plugins
plugins such as flash are a performance and security problem for firefox users.
...ing to the firefox plugin roadmap, the plugin block list is planned for firefox 55.
Initialization and Destruction - Plugins
e(void) { }; after the last plug-in instance is deleted, the browser calls np_shutdown, which releases the memory or resources allocated by np_initialize.
...ch the plug-in was invoked, either np_embed or np_full.
Plugin Roadmap for Firefox - Plugins
on a website.
...firefox roadmap for flash end-of-life adobe flash november 2015 - flash,
html5 and open web standards july 2017 - 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-in...
Tutorial: Show Allocations Per Call Path - Firefox Developer Tools
dren] of children) walk(child, grandchildren, indent + ' '); } walk(null, rootchildren, ''); } })(); in the scratchpad, ensure that no text is selected, and press the "run" button.
... allocations in a way that is more informative, and that exposes less of firefox's internal structure.) as expected, the onclick handler is responsible for all allocation done by the page's own code.
DevTools API - Firefox Developer Tools
oolpanel for the tool.
...ox = gdevtools.opentoolbox(target, null, "inspector"); toolbox.once("inspector-ready", function(event, panel) { let inspector = toolbox.gettoolpanels().get("inspector"); inspector.selection.setnode(target, "browser-context-menu"); }); add a sidebar to an existing tool: let sidebar = new toolsidebar(xultabbox, toolpanel, "toolid"); sidebar.addtab("tab1", "chrome://browser/content/.../tab1.x
html", true); sidebar.addtab("tab2", "chrome://browser/content/.../tab2.x
html", false); sidebar.show(); ...
DOM allocation example - Firefox Developer Tools
this article describes a very simple web page that we'll use to illustrate some features of the memory tool.
...{ var toolbar = createtoolbar(); container.appendchild(toolbar); } } createtoolbars(); a simple pseudocode representation of how this code operates looks like this: createtoolbars() -> createtoolbar() // called 200 times, creates 1 div element each time -> createtoolbarbutton() // called 20 times per toolbar, creates 1 span element each time in total, then, it creates 200
htmldivelement objects, and 4000
htmlspanelement objects.
Examine and edit CSS - Firefox Developer Tools
cted element but hidden by a disclosure triangle: clicking the triangle displays them: viewing common pseudo-classes there's a button to the right of the filter box: click the button to see checkboxes that you can use to enable the :hover, :active and :focus, :focus-within and :visited pseudo-classes for the selected element: this feature can also be accessed from the popup menu in the
html view.
...ssed from the popup menu in the
html view.
Waterfall - Firefox Developer Tools
" or "capture".
...avascript functions executed in the page are labeled with the reason the function was called: script tag setinterval settimeout requestanimationframe promise callback promise init worker javascript uri event handler stack call stack, with links to functions.
The JavaScript input interpreter - Firefox Developer Tools
ument.getelementbyid("frame1"); cd(frame); you can pass a css selector that matches the iframe: cd("#frame1"); you can pass the iframe's global window object: var frame = document.getelementbyid("frame1"); cd(frame.contentwindow); to switch the context back to the top-level window, call cd() with no arguments: cd(); for example, suppose we have a document that embeds an iframe: <!doctype
html> <
html> <head> <meta charset="utf-8"> </head> <body> <iframe id="frame1" src="static/frame/my-frame1.
html"></iframe> </body> </
html> the iframe defines a new function: <!doctype
html> <
html> <head> <meta charset="utf-8"> <script> function whoareyou() { return "i'm frame1"; } </script> </head> <body> </body> </
html> you can switch context t...
...to switch to.
AddressErrors - Web APIs
code creates a handler for the load event on the window which in turn adds the needed click event handler to the "donate now" button so that clicking it starts the payment process.
...for the load event on the window which in turn adds the needed click event handler to the "donate now" button so that clicking it starts the payment process.
AudioBufferSourceNode.loopEnd - Web APIs
ioctx.destination); source.loop = true; loopstartcontrol.setattribute('max', math.floor(songlength)); loopendcontrol.setattribute('max', math.floor(songlength)); }, function(e){"error with decoding audio data" + e.err}); } request.send(); } ...
...dcontrol.setattribute('max', math.floor(songlength)); }, function(e){"error with decoding audio data" + e.err}); } request.send(); } ...
AudioBufferSourceNode.loopStart - Web APIs
ioctx.destination); source.loop = true; loopstartcontrol.setattribute('max', math.floor(songlength)); loopendcontrol.setattribute('max', math.floor(songlength)); }, function(e){"error with decoding audio data" + e.err}); } request.send(); } ...
...dcontrol.setattribute('max', math.floor(songlength)); }, function(e){"error with decoding audio data" + e.err}); } request.send(); } ...
AudioContext.createMediaStreamSource() - Web APIs
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) { video.play(); video.muted = true; }; // create a mediastreamaudiosourcenode // feed the
htmlmediaelement into it var audioctx = new audiocontext(); var source = audioctx.createmediastreamsource(stream); // create a biquadfilter var biquadfilter = audioctx.createbiquadfilter(); biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = range.value; // connect the audiobuffersourcenode to ...
...ouse pointer coordinates when mouse is moved // then set new gain value range.oninput = 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.inner
html = myscript.inner
html; note: as a consequence of calling createmediastreamsource(), audio playback from the media stream will be re-routed into the processing graph of the audiocontext.
AudioListener.dopplerFactor - Web APIs
0; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.inner
html = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner...
... + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner.setposition(xpos,ypos,zpos); } pannerdata.inner
html = 'panner data: x ' + xpos + ' y ' + ypos + ' z ' + zpos; } note: in terms of working out what position values to apply to the listener and panner, to make the sound appropriate to what the visuals are doing on screen, there is quite a bit of math involved, but you will soon get used to it with a bit of experimentation.
AudioListener.forwardX - Web APIs
0; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.inner
html = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner...
... + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner.setposition(xpos,ypos,zpos); } pannerdata.inner
html = 'panner data: x ' + xpos + ' y ' + ypos + ' z ' + zpos; } note: in terms of working out what position values to apply to the listener and panner, to make the sound appropriate to what the visuals are doing on screen, there is quite a bit of math involved, but you will soon get used to it with a bit of experimentation.
AudioListener.forwardY - Web APIs
0; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.inner
html = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner...
... + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner.setposition(xpos,ypos,zpos); } pannerdata.inner
html = 'panner data: x ' + xpos + ' y ' + ypos + ' z ' + zpos; } note: in terms of working out what position values to apply to the listener and panner, to make the sound appropriate to what the visuals are doing on screen, there is quite a bit of math involved, but you will soon get used to it with a bit of experimentation.
AudioListener.forwardZ - Web APIs
0; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.inner
html = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner...
... + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner.setposition(xpos,ypos,zpos); } pannerdata.inner
html = 'panner data: x ' + xpos + ' y ' + ypos + ' z ' + zpos; } note: in terms of working out what position values to apply to the listener and panner, to make the sound appropriate to what the visuals are doing on screen, there is quite a bit of math involved, but you will soon get used to it with a bit of experimentation.
AudioListener.positionX - Web APIs
0; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.inner
html = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner...
... + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner.setposition(xpos,ypos,zpos); } pannerdata.inner
html = 'panner data: x ' + xpos + ' y ' + ypos + ' z ' + zpos; } note: in terms of working out what position values to apply to the listener and panner, to make the sound appropriate to what the visuals are doing on screen, there is quite a bit of math involved, but you will soon get used to it with a bit of experimentation.
AudioListener.positionY - Web APIs
0; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.inner
html = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner...
... + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner.setposition(xpos,ypos,zpos); } pannerdata.inner
html = 'panner data: x ' + xpos + ' y ' + ypos + ' z ' + zpos; } note: in terms of working out what position values to apply to the listener and panner, to make the sound appropriate to what the visuals are doing on screen, there is quite a bit of math involved, but you will soon get used to it with a bit of experimentation.
AudioListener.positionZ - Web APIs
0; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.inner
html = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner...
... + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner.setposition(xpos,ypos,zpos); } pannerdata.inner
html = 'panner data: x ' + xpos + ' y ' + ypos + ' z ' + zpos; } note: in terms of working out what position values to apply to the listener and panner, to make the sound appropriate to what the visuals are doing on screen, there is quite a bit of math involved, but you will soon get used to it with a bit of experimentation.
AudioListener.setOrientation() - Web APIs
0; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.inner
html = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner...
... + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner.setposition(xpos,ypos,zpos); } pannerdata.inner
html = 'panner data: x ' + xpos + ' y ' + ypos + ' z ' + zpos; } note: in terms of working out what position values to apply to the listener and panner, to make the sound appropriate to what the visuals are doing on screen, there is quite a bit of math involved, but you will soon get used to it with a bit of experimentation.
AudioListener.setPosition() - Web APIs
0; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.inner
html = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner...
... + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner.setposition(xpos,ypos,zpos); } pannerdata.inner
html = 'panner data: x ' + xpos + ' y ' + ypos + ' z ' + zpos; } note: in terms of working out what position values to apply to the listener and panner, to make the sound appropriate to what the visuals are doing on screen, there is quite a bit of math involved, but you will soon get used to it with a bit of experimentation.
AudioListener.speedOfSound - Web APIs
0; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.inner
html = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner...
... + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner.setposition(xpos,ypos,zpos); } pannerdata.inner
html = 'panner data: x ' + xpos + ' y ' + ypos + ' z ' + zpos; } note: in terms of working out what position values to apply to the listener and panner, to make the sound appropriate to what the visuals are doing on screen, there is quite a bit of math involved, but you will soon get used to it with a bit of experimentation.
AudioListener.upX - Web APIs
0; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.inner
html = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner...
... + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner.setposition(xpos,ypos,zpos); } pannerdata.inner
html = 'panner data: x ' + xpos + ' y ' + ypos + ' z ' + zpos; } note: in terms of working out what position values to apply to the listener and panner, to make the sound appropriate to what the visuals are doing on screen, there is quite a bit of math involved, but you will soon get used to it with a bit of experimentation.
AudioListener.upY - Web APIs
0; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.inner
html = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner...
... + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner.setposition(xpos,ypos,zpos); } pannerdata.inner
html = 'panner data: x ' + xpos + ' y ' + ypos + ' z ' + zpos; } note: in terms of working out what position values to apply to the listener and panner, to make the sound appropriate to what the visuals are doing on screen, there is quite a bit of math involved, but you will soon get used to it with a bit of experimentation.
AudioListener.upZ - Web APIs
0; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.inner
html = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner...
... + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner.setposition(xpos,ypos,zpos); } pannerdata.inner
html = 'panner data: x ' + xpos + ' y ' + ypos + ' z ' + zpos; } note: in terms of working out what position values to apply to the listener and panner, to make the sound appropriate to what the visuals are doing on screen, there is quite a bit of math involved, but you will soon get used to it with a bit of experimentation.
AudioListener - Web APIs
0; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.inner
html = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner...
... + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner.setposition(xpos,ypos,zpos); } pannerdata.inner
html = 'panner data: x ' + xpos + ' y ' + ypos + ' z ' + zpos; } note: in terms of working out what position values to apply to the listener and panner, to make the sound appropriate to what the visuals are doing on screen, there is quite a bit of math involved, but you will soon get used to it with a bit of experimentation.
AudioTrack.id - Web APIs
e used as the fragment of a url that loads the specific track (if the media supports media fragments).
... var trackid = audiotrack.id; value a domstring which identifies the track, suitable for use when calling gettrackbyid() on an audiotracklist such as the one specified by a media element's audiotracks property.
AudioTrack.kind - Web APIs
ated version of the primary audio track.
...d to contain the director's commentary track on a movie, for example.
AudioTrack.label - Web APIs
ack.kind)) { tracklist.push({ id: track.id, kind: track.kind, label: track.label }); } }); return tracklist; } the resulting tracklist contains an array of audio tracks whose kind is one of those in the array wantedkinds, with each entry providing the track's id, kind, and label.
... }); } }); return tracklist; } the resulting tracklist contains an array of audio tracks whose kind is one of those in the array wantedkinds, with each entry providing the track's id, kind, and label.
AudioTrack.language - Web APIs
guages(el) { var tracklist = []; const wantedkinds = [ "main", "translation" ]; el.audiotracks.foreach(function(track) { if (wantedkinds.includes(track.kind)) { tracklist.push({ id: track.id, kind: track.kind, language: track.language }); } }); return tracklist; } specifications specification status comment
html living standardthe definition of 'audiotrack.language' in that specification.
...function(track) { if (wantedkinds.includes(track.kind)) { tracklist.push({ id: track.id, kind: track.kind, language: track.language }); } }); return tracklist; } specifications specification status comment
html living standardthe definition of 'audiotrack.language' in that specification.
AudioTrackList.onaddtrack - Web APIs
a function, addtotracklist(), passing in the audiotrack object representing the newly-added track.
... function's role is to add the new track to a list of audio tracks available to choose from.
AudioTrackList.onchange - Web APIs
enabledbutton(track.id, track.enabled); }); }; the updatetrackenabledbutton(), in this example, should be a function that finds a user interface control using the track's id (perhaps the app uses the track id as the control element's id) and the track's enabled flag to determine which state the control should be in now.
... that finds a user interface control using the track's id (perhaps the app uses the track id as the control element's id) and the track's enabled flag to determine which state the control should be in now.
AudioTrackList.onremovetrack - Web APIs
whenever a track is removed from the media element.
...event) { mytrackcount = document.queryselector("my-video").audiotracks.length; }; the current number of audio tracks remaining in the media element is obtained from audiotracklist property length.
BaseAudioContext.createDynamicsCompressor() - Web APIs
clipping (distorting) of the audio output.
...renttime); compressor.attack.setvalueattime(0, audioctx.currenttime); compressor.release.setvalueattime(0.25, audioctx.currenttime); // connect the audiobuffersourcenode to the destination source.connect(audioctx.destination); button.onclick = function() { var active = button.getattribute('data-active'); if(active == 'false') { button.setattribute('data-active', 'true'); button.inner
html = 'remove compression'; source.disconnect(audioctx.destination); source.connect(compressor); compressor.connect(audioctx.destination); } else if(active == 'true') { button.setattribute('data-active', 'false'); button.inner
html = 'add compression'; source.disconnect(compressor); compressor.disconnect(audioctx.destination); source.connect(audioctx.destination); ...
BaseAudioContext.createPanner() - Web APIs
0; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.inner
html = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner...
... + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner.setposition(xpos,ypos,zpos); } pannerdata.inner
html = 'panner data: x ' + xpos + ' y ' + ypos + ' z ' + zpos; } note: in terms of working out what position values to apply to the listener and panner, to make the sound appropriate to what the visuals are doing on screen, there is quite a bit of math involved, but you will soon get used to it with a bit of experimentation.
BiquadFilterNode.getFrequencyResponse() - Web APIs
ng the input frequencies, and two to receive the output magnitude and phase values: var myfrequencyarray = new float32array(5); myfrequencyarray[0] = 1000; myfrequencyarray[1] = 2000; myfrequencyarray[2] = 3000; myfrequencyarray[3] = 4000; myfrequencyarray[4] = 5000; var magresponseoutput = new float32array(5); var phaseresponseoutput = new float32array(5); next we create a <ul> element in our
html to contain our results, and grab a reference to it in our javascript: <p>biquad filter frequency response for: </p> <ul class="freq-response-output"> </ul> var freqresponseoutput = document.queryselector('.freq-response-output'); finally, after creating our biquad filter, we use getfrequencyresponse() to generate the response data and put it in our arrays, then loop through each data set and o...
...lter = audioctx.createbiquadfilter(); biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = range.value; ...
Body.text() - Web APIs
event handler so that the getdata() function is run — with the link's data-page identifier passed to it as an argument — when one of the links is clicked.
...et i = 0; i <= mylinks.length-1; i++) { mylinks[i].onclick = function(e) { e.preventdefault(); let linkdata = e.target.getattribute('data-page'); getdata(linkdata); } }; function getdata(pageid) { console.log(pageid); var myrequest = new request(pageid + '.txt'); fetch(myrequest).then(function(response) { return response.text().then(function(text) { myarticle.inner
html = text; }); }); } specifications specification status comment fetchthe definition of 'text()' in that specification.
Managing screen orientation - Web APIs
ting layout based on the orientation one of the most common cases for orientation changes is when you want to revise the layout of your content based on the orientation of the device.
...dipiscing elit.
Using the CSS Typed Object Model - Web APIs
the css typed object model api exposes css values as typed javascript objects to allow their performant manipulation.
...s to types, methods, and an object model for css values.
CanvasCaptureMediaStreamTrack.canvas - Web APIs
the canvascapturemediastreamtrack canvas read-only property returns the
htmlcanvaselement from which frames are being captured.
... the canvascapturemediastreamtrack canvas read-only property returns the
htmlcanvaselement from which frames are being captured.
CanvasCaptureMediaStreamTrack - Web APIs
the canvascapturemediastreamtrack interface represents the video track contained in a mediastream being generated from a <canvas> following a call to
htmlcanvaselement.capturestream().
... the canvascapturemediastreamtrack interface represents the video track contained in a mediastream being generated from a <canvas> following a call to
htmlcanvaselement.capturestream().
CanvasGradient.addColorStop() - Web APIs
esents the end; an index_size_err is raised if the number is outside that range.
... javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); let gradient = ctx.createlineargradient(0, 0, 200, 0); gradient.addcolorstop(0, 'green'); gradient.addcolorstop(.7, 'white'); gradient.addcolorstop(1, 'pink'); ctx.fillstyle = gradient; ctx.fillrect(10, 10, 200, 100); result specifications specification status comment
html living standardthe definition of 'canvasgradient.addcolorstop' in that specification.
CanvasPattern.setTransform() - Web APIs
dommatrix to use as the pattern's transformation matrix.
....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('input', drawcanvas); window.addeventlistener('load', drawcanvas); specifications specification status comment
html living standardthe definition of 'canvaspattern.settransform' in that specification.
CanvasRenderingContext2D.addHitRegion() - Web APIs
hich events are to be routed.
...(); }); canvas.addeventlistener("mousemove", function(event){ if(event.region) { alert("ouch, my eye :("); } }); textarea.addeventlistener("input", 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.clearHitRegions() - Web APIs
the canvasrenderingcontext2d method clearhitregions() removes all hit regions from the canvas.
...ctx = canvas.getcontext('2d'); // set some hit regions ctx.addhitregion({id: 'eyes'}); ctx.addhitregion({id: 'nose'}); ctx.addhitregion({id: 'mouth'}); // remove them altogether from the canvas ctx.clearhitregions(); specifications canvas hit regions have been removed from the whatwg living standard, although discussions about future standardization are ongoing.
CanvasRenderingContext2D.clearRect() - Web APIs
tion.
...background ctx.beginpath(); ctx.fillstyle = '#ff6'; ctx.fillrect(0, 0, canvas.width, canvas.height); // draw blue triangle ctx.beginpath(); ctx.fillstyle = 'blue'; ctx.moveto(20, 20); ctx.lineto(180, 20); ctx.lineto(130, 130); ctx.closepath(); ctx.fill(); // clear part of the canvas ctx.clearrect(10, 10, 120, 100); result specifications specification status comment
html living standardthe definition of 'canvasrenderingcontext2d.clearrect' in that specification.
CanvasRenderingContext2D.createLinearGradient() - Web APIs
ue canvasgradient a linear canvasgradient initialized with the specified line.
...gradient point is at x=220, y=0 var gradient = ctx.createlineargradient(20,0, 220,0); // add three color stops gradient.addcolorstop(0, 'green'); gradient.addcolorstop(.5, 'cyan'); gradient.addcolorstop(1, 'green'); // set the fill style and draw a rectangle ctx.fillstyle = gradient; ctx.fillrect(20, 20, 200, 100); result specifications specification status comment
html living standardthe definition of 'canvasrenderingcontext2d.createlineargradient' in that specification.
CanvasRenderingContext2D.createRadialGradient() - Web APIs
alue canvasgradient a radial canvasgradient initialized with the two specified circles.
...y=100, with radius=70 var gradient = ctx.createradialgradient(110,90,30, 100,100,70); // add three color stops gradient.addcolorstop(0, 'pink'); gradient.addcolorstop(.9, 'white'); gradient.addcolorstop(1, 'green'); // set the fill style and draw a rectangle ctx.fillstyle = gradient; ctx.fillrect(20, 20, 160, 160); result specifications specification status comment
html living standardthe definition of 'canvasrenderingcontext2d.createradialgradient' in that specification.
CanvasRenderingContext2D.fillStyle - Web APIs
color in the canvas tutorial.
...('canvas'); const ctx = canvas.getcontext('2d'); for (let i = 0; i < 6; i++) { for (let j = 0; j < 6; j++) { ctx.fillstyle = `rgb( ${math.floor(255 - 42.5 * i)}, ${math.floor(255 - 42.5 * j)}, 0)`; ctx.fillrect(j * 25, i * 25, 25, 25); } } the result looks like this: screenshotlive sample specifications specification status comment
html living standardthe definition of 'canvasrenderingcontext2d.fillstyle' in that specification.
CanvasRenderingContext2D.font - Web APIs
nt property of the canvas 2d api specifies the current text style to use when drawing text.
...old 48px serif'; ctx.stroketext('hello world', 50, 100); result loading fonts with the css font loading api with the help of the fontface api, you can explicitly load fonts before using them in a canvas.
CanvasRenderingContext2D.getTransform() - Web APIs
xamples in the following example, we have two <canvas> elements.
...ases[0].getcontext('2d'); const ctx2 = canvases[1].getcontext('2d'); ctx1.settransform(1, .2, .8, 1, 0, 0); ctx1.fillrect(25, 25, 50, 50); let storedtransform = ctx1.gettransform(); console.log(storedtransform); ctx2.settransform(storedtransform); ctx2.beginpath(); ctx2.arc(50, 50, 50, 0, 2 * math.pi); ctx2.fill(); result specifications specification status comment
html living standardthe definition of 'canvasrenderingcontext2d.gettransform' in that specification.
CanvasRenderingContext2D.globalAlpha - Web APIs
syntax ctx.globalalpha = value; options value a number between 0.0 (fully transparent) and 1.0 (fully opaque), inclusive.
... ctx.fillrect(0, 75, 75, 75); ctx.fillstyle = '#f30'; ctx.fillrect(75, 75, 75, 75); ctx.fillstyle = '#fff'; // set transparency value ctx.globalalpha = 0.2; // draw transparent circles for (let i = 0; i < 7; i++) { ctx.beginpath(); ctx.arc(75, 75, 10 + 10 * i, 0, math.pi * 2, true); ctx.fill(); } screenshotlive sample specifications specification status comment
html living standardthe definition of 'canvasrenderingcontext2d.globalalpha' in that specification.
CanvasRenderingContext2D.imageSmoothingEnabled - Web APIs
x.imagesmoothingenabled = value; options value a boolean indicating whether to smooth scaled images or not.
...e', w * .5, 20); ctx.drawimage(img, 0, 24, w, h); ctx.filltext('smoothing = true', w * 2.5, 20); ctx.imagesmoothingenabled = true; ctx.drawimage(img, w, 24, w * 3, h * 3); ctx.filltext('smoothing = false', w * 5.5, 20); ctx.imagesmoothingenabled = false; ctx.drawimage(img, w * 4, 24, w * 3, h * 3); }; result specifications specification status comment
html living standardthe definition of 'canvasrenderingcontext2d.imagesmoothingenabled' in that specification.
CanvasRenderingContext2D.imageSmoothingQuality - Web APIs
the quality of image smoothing.
...s"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); let img = new image(); img.src = 'https://mdn.mozillademos.org/files/222/canvas_createpattern.png'; img.onload = function() { ctx.imagesmoothingquality = 'low'; ctx.drawimage(img, 0, 0, 300, 150); }; result specifications specification status comment
html living standardthe definition of 'imagesmoothingquality' in that specification.
CanvasRenderingContext2D.lineCap - Web APIs
ctx.linecap = "butt" || "round" || "square"; options "butt" the ends of lines are squared off at the endpoints.
...eto(140, 10); ctx.moveto(10, 140); ctx.lineto(140, 140); ctx.stroke(); // draw lines ctx.strokestyle = 'black'; for (let i = 0; i < linecap.length; i++) { ctx.linewidth = 15; ctx.linecap = linecap[i]; ctx.beginpath(); ctx.moveto(25 + i * 50, 10); ctx.lineto(25 + i * 50, 140); ctx.stroke(); } screenshotlive sample specifications specification status comment
html living standardthe definition of 'canvasrenderingcontext2d.linecap' in that specification.
CanvasRenderingContext2D.lineJoin - Web APIs
segments, and the separate outside rectangular corners of each segment.
... 'bevel', 'miter']; ctx.linewidth = 10; for (let i = 0; i < linejoin.length; i++) { ctx.linejoin = linejoin[i]; ctx.beginpath(); ctx.moveto(-5, 5 + i * 40); ctx.lineto(35, 45 + i * 40); ctx.lineto(75, 5 + i * 40); ctx.lineto(115, 45 + i * 40); ctx.lineto(155, 5 + i * 40); ctx.stroke(); } screenshotlive sample specifications specification status comment
html living standardthe definition of 'canvasrenderingcontext2d.linejoin' in that specification.
CanvasRenderingContext2D.lineWidth - Web APIs
ines.
... document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.linewidth = 15; ctx.beginpath(); ctx.moveto(20, 20); ctx.lineto(130, 130); ctx.rect(40, 40, 70, 70); ctx.stroke(); result more examples for more examples and explanation about this property, see applying styles and color in the canvas tutorial.
CanvasRenderingContext2D.putImageData() - Web APIs
the rectangle to be painted.
...sole.log("before:", pixels); context.putimagedata(imgdata, 0, 0); const imgdata2 = context.getimagedata(0, 0, canvas.width, canvas.height); const pixels2 = imgdata2.data; console.log("after:", pixels2); the output might look like: before: uint8clampedarray(4) [ 1, 127, 255, 1 ] after: uint8clampedarray(4) [ 255, 255, 255, 1 ] specifications specification status comment
html living standardthe definition of 'canvasrenderingcontext2d.putimagedata' in that specification.
CanvasRenderingContext2D.removeHitRegion() - Web APIs
the canvasrenderingcontext2d method removehitregion() removes a given hit region from the canvas.
...nvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // set a hit region ctx.addhitregion({id: 'eyes'}); // remove it from the canvas ctx.removehitregion('eyes'); specifications canvas hit regions have been removed from the whatwg living standard, although discussions about future standardization are ongoing.
CanvasRenderingContext2D.save() - Web APIs
terlimit, linedashoffset, shadowoffsetx, shadowoffsety, shadowblur, shadowcolor, globalcompositeoperation, font, textalign, textbaseline, direction, imagesmoothingenabled.
...ter.
CanvasRenderingContext2D.scrollPathIntoView() - Web APIs
the canvasrenderingcontext2d.scrollpathintoview() method of the canvas 2d api scrolls the current or given path into view.
....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("input", drawcanvas); window.addeventlistener("load", drawcanvas); specifications specification status comment
html living standardthe definition of 'canvasrenderingcontext2d.scrollpathintoview' in that specification.
CanvasRenderingContext2D.strokeStyle - Web APIs
the canvas tutorial.
...< 6; i++) { for (let j = 0; j < 6; j++) { ctx.strokestyle = `rgb( 0, ${math.floor(255 - 42.5 * i)}, ${math.floor(255 - 42.5 * j)})`; ctx.beginpath(); ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, math.pi * 2, true); ctx.stroke(); } } the result looks like this: screenshotlive sample specifications specification status comment
html living standardthe definition of 'canvasrenderingcontext2d.strokestyle' in that specification.
CanvasRenderingContext2D.textBaseline - Web APIs
beneath the alphabetic baseline.
...tom']; ctx.font = '36px serif'; ctx.strokestyle = 'red'; baselines.foreach(function (baseline, index) { ctx.textbaseline = baseline; const y = 75 + index * 75; ctx.beginpath(); ctx.moveto(0, y + 0.5); ctx.lineto(550, y + 0.5); ctx.stroke(); ctx.filltext('abcdefghijklmnop (' + baseline + ')', 0, y); }); result specifications specification status comment
html living standardthe definition of 'canvasrenderingcontext2d.textbaseline' in that specification.
CanvasRenderingContext2D.translate() - Web APIs
ers x distance to move in the horizontal direction.
...// moved square ctx.translate(110, 30); ctx.fillstyle = 'red'; ctx.fillrect(0, 0, 80, 80); // reset current transformation matrix to the identity matrix ctx.settransform(1, 0, 0, 1, 0, 0); // unmoved square ctx.fillstyle = 'gray'; ctx.fillrect(0, 0, 80, 80); result the moved square is red, and the unmoved square is gray.
Hit regions and accessibility - Web APIs
« previousnext » the <canvas> element on its own is just a bitmap and does not provide information about any drawn objects.
...oid using canvas in an accessible website or app.
ChildNode.after() - Web APIs
eters nodes a set of node or domstring objects to insert.
....createelement("div"); var child = document.createelement("p"); parent.appendchild(child); var span = document.createelement("span"); child.after(span); console.log(parent.outer
html); // "<div><p></p><span></span></div>" inserting text var parent = document.createelement("div"); var child = document.createelement("p"); parent.appendchild(child); child.after("text"); console.log(parent.outer
html); // "<div><p></p>text</div>" inserting an element and text var parent = document.createelement("div"); var child = document.createelement("p"); parent.appendchild(child); var span = document.createelement("span"); child.after(span, "text"); console.log(parent.outer
html); // "<div><p></p><span></span>text</div>" childnode.after() is unscopable the after() method is not scoped into the with ...
ChildNode.before() - Web APIs
ters nodes a set of node or domstring objects to insert.
...reateelement("div"); var child = document.createelement("p"); parent.appendchild(child); var span = document.createelement("span"); child.before(span); console.log(parent.outer
html); // "<div><span></span><p></p></div>" inserting text var parent = document.createelement("div"); var child = document.createelement("p"); parent.appendchild(child); child.before("text"); console.log(parent.outer
html); // "<div>text<p></p></div>" inserting an element and text var parent = document.createelement("div"); var child = document.createelement("p"); parent.appendchild(child); var span = document.createelement("span"); child.before(span, "text"); console.log(parent.outer
html); // "<div><span></span>text<p></p></div>" childnode.before() is unscopable the before() method is not scoped into the wi...
Content Index API - Web APIs
r the scope of the current service worker.
...r.ready; // feature detection if ('index' in registration) { // content index api functionality const contentindex = registration.index; } adding to the content index here we're declaring an item in the correct format and creating an asynchronous function which uses the add() method to register it with the content index.
CustomElementRegistry.get() - Web APIs
ructor for a previously-defined custom element.
... let template = document.getelementbyid('my-paragraph'); let templatecontent = template.content; const shadowroot = this.attachshadow({mode: 'open'}) .appendchild(templatecontent.clonenode(true)); } }) // return a reference to the my-paragraph constructor let ctor = customelements.get('my-paragraph'); specifications specification status comment
html living standardthe definition of 'customelements.get()' in that specification.
CustomElementRegistry - Web APIs
omes defined with the given name.
...tent changes setinterval(function() { var count = 'words: ' + countwords(wcparent); text.textcontent = count; }, 200) } } // define the new element customelements.define('word-count', wordcount, { extends: 'p' }); note: the customelementregistry is available through the window.customelements property.
DOMStringMap - Web APIs
the domstringmap interface is used for the
htmlelement.dataset attribute, to represent data for custom attributes added to elements.
... the domstringmap interface is used for the
htmlelement.dataset attribute, to represent data for custom attributes added to elements.
DataTransfer.files - Web APIs
syntax datatransfer.files; return value a list of the files in a drag operation, one list item for each file in the operation.
... each file in the operation.
DataTransfer.mozClearDataAt() - Web APIs
([type], index); arguments type a string representing the type of the drag data to remove from the drag data object.
... a string representing the type of the drag data to remove from the drag data object.
DataTransferItem - Web APIs
turns an object based on filesystementry representing the selected file's entry in its file system.
... filesystemfileentry or filesystemdirectoryentry object.
Document.bgColor - Web APIs
ackground color of the current document.
...nt.bgcolor = "darkblue"; notes the default value for this property in firefox is white (#ffffff in hexadecimal).
Document.close() - Web APIs
the document.close() method finishes writing to a document, opened with document.open().
...n a document to write to it document.open(); // write the content of the document document.write("<p>the one and only content.</p>"); // close the document document.close(); specifications specification status comment
html living standardthe definition of 'document.close()' in that specification.
Document.cookie - Web APIs
browser's implementation maximum will necessarily be different, so consult individual browser documentation.
...fers from other client-client storage methods (like, for instance, localstorage): the server tells the client to store a cookie http/1.0 200 ok content-type: text/
html set-cookie: cookie_name1=cookie_value1 set-cookie: cookie_name2=cookie_value2; expires=sun, 16 jul 3567 06:23:41 gmt [content of the page here] the client sends back to the server its cookies previously stored get /sample_page.
html http/1.1 host: www.example.org cookie: cookie_name1=cookie_value1; cookie_name2=cookie_value2 accept: */* specifications specification status comment document object model (dom) level 2
html specificationthe definition of 'document.cookie' in that specification.
Document.createCDATASection() - Web APIs
the cdata section.
... example var docu = new domparser().parsefromstring('<xml></xml>', 'application/xml') var cdata = docu.createcdatasection('some <cdata> data & then some'); docu.getelementsbytagname('xml')[0].appendchild(cdata); alert(new xmlserializer().serializetostring(docu)); // displays: <xml><![cdata[some <cdata> data & then some]]></xml> notes this will only work with xml, not
html documents (as
html documents do not support cdata sections); attempting it on an
html document will throw not_supported_err.
Document.createNSResolver() - Web APIs
sing the current information available in the node's hierarchy at the time lookupnamespaceuri is called.
...ines qnames without prefix to match only elements in the null namespace.
Document.defaultView - Web APIs
in browsers, document.defaultview returns the window object associated with a document, or null if none is available.
... in browsers, document.defaultview returns the window object associated with a document, or null if none is available.
Document.domain - Web APIs
equal to the document's effective domain (or it is not a registerable domain suffix of it) the document-domain feature-policy is enabled examples getting the domain for the uri http://developer.mozilla.org/docs/web, this example sets currentdomain to the string "developer.mozilla.org".
...= document.domain; closing a window if a document, such as www.example.xxx/good.
html, has the domain of "www.example.xxx", this example attempts to close the window.
Document: drag event - Web APIs
the drag event is fired every few hundred milliseconds as an element or text selection is being dragged by the user.
.../ prevent default action (open as link for some elements) event.preventdefault(); // move dragged elem to the selected drop target if (event.target.classname == "dropzone") { event.target.style.background = ""; dragged.parentnode.removechild( dragged ); event.target.appendchild( dragged ); } }, false); specifications specification status comment
html living standardthe definition of 'drag event' in that specification.
Document.embeds - Web APIs
the embeds read-only property of the document interface returns a list of the embedded <object> elements within the current document.
... the embeds read-only property of the document interface returns a list of the embedded <object> elements within the current document.
Document.fgColor - Web APIs
yntax var color = document.fgcolor; document.fgcolor = color; parameters color is a string representing the color as a word (e.g., "red") or hexadecimal value (e.g., "#ff0000").
...00").
Document.hasFocus() - Web APIs
esn't have focus.
... else { log.textcontent = 'this document does not have the focus.'; body.style.background = '#ccc'; } } function openwindow() { window.open('https://developer.mozilla.org/', 'mdn', 'width=640,height=320,left=150,top=150'); } // check page focus every 300 milliseconds setinterval(checkpagefocus, 300); result specification specification status comment
html living standardthe definition of 'document.hasfocus()' in that specification.
Document.onbeforescriptexecute - Web APIs
fired when the code in a <script> element declared in an
html document is about to start executing.
...tax document.onbeforescriptexecute = funcref; funcref is a function reference, called when the event is fired.
Document: readystatechange event - Web APIs
the readystatechange event is fired when the readystate attribute of a document has changed.
...xtcontent = log.textcontent + 'load\n'; }); document.addeventlistener('readystatechange', (event) => { log.textcontent = log.textcontent + `readystate: ${document.readystate}\n`; }); document.addeventlistener('domcontentloaded', (event) => { log.textcontent = log.textcontent + `domcontentloaded\n`; }); result specifications specification status comment
html living standardthe definition of 'readystatechange' in that specification.
DocumentOrShadowRoot.elementFromPoint() - Web APIs
et the current color of the paragraph element located under the coordinates (2, 2).
...lementfrompoint(2, 2); elem.style.color = newcolor; } the changecolor() method simply obtains the element located at the specified point, then sets that element's current foreground color property to the color specified by the newcolor parameter.
DocumentOrShadowRoot.elementsFromPoint() - Web APIs
the documentorshadowroot interface returns an array of all elements at the specified coordinates (relative to the viewport).
...lements at point 30, 20:</p> <div id="output"></div> javascript let output = document.getelementbyid("output"); if (document.elementsfrompoint) { let elements = document.elementsfrompoint(30, 20); for (var i = 0; i < elements.length; i++) { output.textcontent += elements[i].localname; if (i < elements.length - 1) { output.textcontent += " < "; } } } else { output.inner
html = "<span style=\"color: red;\">" + "browser does not support <code>document.elementsfrompoint()</code>" + "</span>"; } specifications specification status shadow domthe definition of 'elementsfrompoint()' in that specification.
DocumentOrShadowRoot.nodesFromPoint() - Web APIs
umentorshadowroot interface returns an array of all nodes at the specified coordinates (relative to the viewport).
...p> </div> <p>nodes at point 30, 20:</p> <div id="output"></div> javascript content var output = document.getelementbyid("output"); if (document.nodesfrompoint) { var nodes = document.nodesfrompoint(30, 20); for(var i = 0; i < nodes.length; i++) { output.textcontent += nodes[i].localname; if (i < nodes.length - 1) { output.textcontent += " < "; } } } else { output.inner
html = "<span style=\"color: red;\">" + "browser does not support <code>document.nodesfrompoint()</code>" + "</span>"; } specifications not part of any specification at present.
DragEvent() - Web APIs
pe is a domstring representing the name of the event (see dragevent event types).
... is a drageventinit dictionary, having the following fields: "datatransfer", optional and defaults to "null".
DynamicsCompressorNode.attack - Web APIs
.attack.value = 0; value an audioparam.
...renttime); compressor.attack.setvalueattime(0, audioctx.currenttime); compressor.release.setvalueattime(0.25, audioctx.currenttime); // connect the audiobuffersourcenode to the destination source.connect(audioctx.destination); button.onclick = function() { var active = button.getattribute('data-active'); if(active == 'false') { button.setattribute('data-active', 'true'); button.inner
html = 'remove compression'; source.disconnect(audioctx.destination); source.connect(compressor); compressor.connect(audioctx.destination); } else if(active == 'true') { button.setattribute('data-active', 'false'); button.inner
html = 'add compression'; source.disconnect(compressor); compressor.disconnect(audioctx.destination); source.connect(audioctx.destination); ...
DynamicsCompressorNode.knee - Web APIs
r.knee.value = 40; value an audioparam.
...renttime); compressor.attack.setvalueattime(0, audioctx.currenttime); compressor.release.setvalueattime(0.25, audioctx.currenttime); // connect the audiobuffersourcenode to the destination source.connect(audioctx.destination); button.onclick = function() { var active = button.getattribute('data-active'); if(active == 'false') { button.setattribute('data-active', 'true'); button.inner
html = 'remove compression'; source.disconnect(audioctx.destination); source.connect(compressor); compressor.connect(audioctx.destination); } else if(active == 'true') { button.setattribute('data-active', 'false'); button.inner
html = 'add compression'; source.disconnect(compressor); compressor.disconnect(audioctx.destination); source.connect(audioctx.destination); ...
DynamicsCompressorNode.ratio - Web APIs
.ratio.value = 12; value an audioparam.
...renttime); compressor.attack.setvalueattime(0, audioctx.currenttime); compressor.release.setvalueattime(0.25, audioctx.currenttime); // connect the audiobuffersourcenode to the destination source.connect(audioctx.destination); button.onclick = function() { var active = button.getattribute('data-active'); if(active == 'false') { button.setattribute('data-active', 'true'); button.inner
html = 'remove compression'; source.disconnect(audioctx.destination); source.connect(compressor); compressor.connect(audioctx.destination); } else if(active == 'true') { button.setattribute('data-active', 'false'); button.inner
html = 'add compression'; source.disconnect(compressor); compressor.disconnect(audioctx.destination); source.connect(audioctx.destination); ...
DynamicsCompressorNode.release - Web APIs
ease.value = 0.25; value an audioparam.
...renttime); compressor.attack.setvalueattime(0, audioctx.currenttime); compressor.release.setvalueattime(0.25, audioctx.currenttime); // connect the audiobuffersourcenode to the destination source.connect(audioctx.destination); button.onclick = function() { var active = button.getattribute('data-active'); if(active == 'false') { button.setattribute('data-active', 'true'); button.inner
html = 'remove compression'; source.disconnect(audioctx.destination); source.connect(compressor); compressor.connect(audioctx.destination); } else if(active == 'true') { button.setattribute('data-active', 'false'); button.inner
html = 'add compression'; source.disconnect(compressor); compressor.disconnect(audioctx.destination); source.connect(audioctx.destination); ...
DynamicsCompressorNode.threshold - Web APIs
shold.value = -50; value an audioparam.
...renttime); compressor.attack.setvalueattime(0, audioctx.currenttime); compressor.release.setvalueattime(0.25, audioctx.currenttime); // connect the audiobuffersourcenode to the destination source.connect(audioctx.destination); button.onclick = function() { var active = button.getattribute('data-active'); if(active == 'false') { button.setattribute('data-active', 'true'); button.inner
html = 'remove compression'; source.disconnect(audioctx.destination); source.connect(compressor); compressor.connect(audioctx.destination); } else if(active == 'true') { button.setattribute('data-active', 'false'); button.inner
html = 'add compression'; source.disconnect(compressor); compressor.disconnect(audioctx.destination); source.connect(audioctx.destination); ...
DynamicsCompressorNode - Web APIs
in seconds, required to increase the gain by 10 db.
...renttime); compressor.attack.setvalueattime(0, audioctx.currenttime); compressor.release.setvalueattime(0.25, audioctx.currenttime); // connect the audiobuffersourcenode to the destination source.connect(audioctx.destination); button.onclick = function() { var active = button.getattribute('data-active'); if(active == 'false') { button.setattribute('data-active', 'true'); button.inner
html = 'remove compression'; source.disconnect(audioctx.destination); source.connect(compressor); compressor.connect(audioctx.destination); } else if(active == 'true') { button.setattribute('data-active', 'false'); button.inner
html = 'add compression'; source.disconnect(compressor); compressor.disconnect(audioctx.destination); source.connect(audioctx.destination); ...
EffectTiming.fill - Web APIs
to playing and retained after the animation has completed playing, in spite of and during any enddelay, delay and/or pending or finished playstate.
...ained after the animation has completed playing, in spite of and during any enddelay, delay and/or pending or finished playstate.
Element.attachShadow() - Web APIs
clicked, the first focusable part is given focus, and the shadow host is given any available :focus styling.
...side the
html namespace, or the element cannot have a shadow attached to it (see above).
Element: blur event - Web APIs
the blur event fires when an element has lost focus.
...pe="password"]'); password.addeventlistener('focus', (event) => { event.target.style.background = 'pink'; }); password.addeventlistener('blur', (event) => { event.target.style.background = ''; }); result event delegation there are two ways of implementing event delegation for this event: by using the focusout event, or by setting the usecapture parameter of addeventlistener() to true.
Element.className - Web APIs
stance of svganimatedstring if the element is an svgelement.
...ss', elm.getattribute('class')) the class is an
html attribute, while the classname is a dom property.
Element: click event - Web APIs
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> <input> <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.
...t> <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.clientWidth - Web APIs
the element.clientwidth property is zero for inline elements and elements with no css; otherwise, it's the inner width of an element in pixels.
...clientwidth; intelemclientwidth is an integer corresponding to the clientwidth of element in pixels.
Element: contextmenu event - Web APIs
rface mouseevent event handler property oncontextmenu examples in this example, the default action of the contextmenu event is canceled using preventdefault() when the contextmenu event is fired at the first paragraph.
...ntext menu offered by your browser.
Element: focus event - Web APIs
he focus event fires when an element has received focus.
...ype="password"]'); password.addeventlistener('focus', (event) => { event.target.style.background = 'pink'; }); password.addeventlistener('blur', (event) => { event.target.style.background = ''; }); result event delegation there are two ways of implementing event delegation for this event: by using the focusin event, or by setting the usecapture parameter of addeventlistener() to true.
Element.getAttribute() - Web APIs
ement.getattribute(attributename); where attribute is a string containing the value of attributename.
... where attribute is a string containing the value of attributename.
Element.hasPointerCapture() - Web APIs
tercapture() method of the element interface sets whether the element on which it is invoked has pointer capture for the pointer identified by the given pointer id.
...ointercapture(ev.pointerid); if(pointercap) { // we've still got pointer capture } else { // oops, we've lost pointer capture!
Element.id - Web APIs
e, but you should avoid creating ids that differ only in the capitalization.
...talization.
Element: mousemove event - Web APIs
the mousemove event is fired at an element when a pointing device (usually a mouse) is moved while the cursor's hotspot is inside it.
...r the page, the mousemove event fires.
Element: mouseup event - Web APIs
ng device (such as a mouse or trackpad) is released while the pointer is located inside it.
...r the page, the mousemove event fires.
Element.querySelectorAll() - Web APIs
.highlighted"); highlighteditems.foreach(function(useritem) { deleteuser(useritem); }); note: nodelist is not a genuine array, that is to say it doesn't have the array methods like slice, some, map etc.
...hlighteditems.foreach(function(useritem) { deleteuser(useritem); }); note: nodelist is not a genuine array, that is to say it doesn't have the array methods like slice, some, map etc.
Element.scrollHeight - Web APIs
children, these checks determine if the container can scroll: window.getcomputedstyle(element).overflowy === 'visible' window.getcomputedstyle(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).
...dth: 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.inner
html = checkreading.read ?
ElementCSSInlineStyle - Web APIs
the elementcssinlinestyle mixin describes cssom-specific features common to the
htmlelement, svgelement and mathmlelement interfaces.
...he inline style of an element.
ErrorEvent - Web APIs
ead only is an integer containing the column number of the script file on which the error occurred.
...ed by the event.
File.getAsDataURL() - Web APIs
summary the getasdataurl provides a data: url that encodes the entire contents of the referenced file.
...yntax var url = instanceoffile.getasdataurl(); returns a string representing a data: url example // fileinput is a
htmlinputelement: <input type="file" id="myfileinput" multiple> var fileinput = document.getelementbyid("myfileinput"); // files is a filelist object (similar to nodelist) var files = fileinput.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 // same as <img src="data:image/png,<imagedata>"> img.src = files[0].getasdataurl(); } specification not part of any specification.
File.getAsText() - Web APIs
note: this method is obsolete; you should use the filereader method readastext() instead.
...cified encoding.
File.webkitRelativePath - Web APIs
t.
... content <input type="file" id="filepicker" name="filelist" webkitdirectory multiple /> <ul id="listing"></ul> javascript content document.getelementbyid("filepicker").addeventlistener("change", function(event) { let output = document.getelementbyid("listing"); let files = event.target.files; for (let i=0; i<files.length; i++) { let item = document.createelement("li"); item.inner
html = files[i].webkitrelativepath; output.appendchild(item); }; }, false); result specifications specification status comment file and directory entries apithe definition of 'webkitrelativepath' in that specification.
FileReader.readAsDataURL() - Web APIs
e file's data as a base64 encoded string.
...file() { const preview = document.queryselector('img'); const file = document.queryselector('input[type=file]').files[0]; const reader = new filereader(); reader.addeventlistener("load", function () { // convert image file to base64 string preview.src = reader.result; }, false); if (file) { reader.readasdataurl(file); } } live result example reading multiple files
html <input id="browse" type="file" onchange="previewfiles()" multiple> <div id="preview"></div> javascript function previewfiles() { var preview = document.queryselector('#preview'); var files = document.queryselector('input[type=file]').files; function readandpreview(file) { // make sure `file.name` matches our extensions criteria if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) { ...
FileSystemEntry - Web APIs
nd directories, but it also includes a convenient method for obtaining the url of the entry: tourl().
...enient method for obtaining the url of the entry: tourl().
FileSystemEntrySync - Web APIs
es and directories, but it also include a really handy method for getting a url of the entry: tourl().
...eally handy method for getting a url of the entry: tourl().
FormDataEvent - Web APIs
the formdataevent interface represents a formdata event — such an event is fired on an
htmlformelement object after the entry list representing the form's data is constructed.
...tener('formdata', (e) => { console.log('formdata fired'); // get the form data from the event object let data = e.formdata; for (var value of data.values()) { console.log(value); } // submit the data via xhr var request = new xmlhttprequest(); request.open("post", "/formhandler"); request.send(data); }); specifications specification status comment
html living standardthe definition of 'formdataevent' in that specification.
Fullscreen API - Web APIs
ode not being supported).
...een mode is turned on and off, as well as when errors occur during the process of changing between full-screen and windowed modes.
GainNode.gain - Web APIs
source.connect(gainnode); gainnode.connect(audioctx.destination); ...
...te() { if(mute.id == "") { // 0 means mute.
GainNode - Web APIs
source.connect(gainnode); gainnode.connect(audioctx.destination); ...
...te() { if(mute.id == "") { // 0 means mute.
GlobalEventHandlers.onblur - Web APIs
able on element, document, and window.
...script let input = document.queryselector('input'); input.onblur = inputblur; input.onfocus = inputfocus; function inputblur() { input.value = 'focus has been lost'; } function inputfocus() { input.value = 'focus is here'; } result try clicking in and out of the form field, and watch its contents change accordingly.
GlobalEventHandlers.onchange - Web APIs
onchange event handler is not necessarily called for each alteration to an element's value.
...e, then click outside of the field." size="50"> <p id="log"></p> javascript let input = document.queryselector('input'); let log = document.getelementbyid('log'); input.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.oncuechange - Web APIs
the oncuechange property of the globaleventhandlers mixin is the eventhandler for processing cuechange events.
...texttrack and to the <track> element the track is being presented by, if any; in the latter case, its handler is on an
htmltrackelement object.
GlobalEventHandlers.onfocus - Web APIs
given the tabindex attribute (see building keyboard accessibility back in for more details).
...script let input = document.queryselector('input'); input.onblur = inputblur; input.onfocus = inputfocus; function inputblur() { input.value = 'focus has been lost'; } function inputfocus() { input.value = 'focus is here'; } result try clicking in and out of the form field, and watch its contents change accordingly.
GlobalEventHandlers.onformdata - Web APIs
the onformdata property of the globaleventhandlers mixin is the eventhandler for processing formdata events, fired after the entry list representing the form's data is constructed.
...melem.onformdata = (e) => { console.log('formdata fired'); // get the form data from the event object let data = e.formdata; for (var value of data.values()) { console.log(value); } // submit the data via xhr var request = new xmlhttprequest(); request.open("post", "/formhandler"); request.send(data); }; specifications specification status comment
html living standardthe definition of 'onformdata' in that specification.
GlobalEventHandlers.oninput - Web APIs
ote: unlike oninput, the onchange event handler is not necessarily called for each alteration to an element's value.
...something here to see its length." size="50"> <p id="log"></p> javascript let input = document.queryselector('input'); let log = document.getelementbyid('log'); input.oninput = handleinput; function handleinput(e) { log.textcontent = `the field's value is ${e.target.value.length} character(s) long.`; } result specifications specification status comment
html living standardthe definition of 'oninput' in that specification.
GlobalEventHandlers.oninvalid - Web APIs
re submitting their owner form, or after the checkvalidity() method of the element or its owner form is called.
...getelementbyid('thanks'); city.oninvalid = invalid; form.onsubmit = submit; function invalid(event) { error.removeattribute('hidden'); } function submit(event) { form.setattribute('hidden', ''); thanks.removeattribute('hidden'); // for this example, don't actually submit the form event.preventdefault(); } result specification specification status comment
html living standardthe definition of 'oninvalid' in that specification.
GlobalEventHandlers.onloadstart - Web APIs
the onloadstart property of the globaleventhandlers mixin is an eventhandler representing the code to be called when the loadstart event is raised (when progress has begun on the loading of a resource.) syntax img.onloadstart = funcref; value funcref is the handler function to be called when the resource's loadstart event fires.
...tent // 'loadstart' fires first, then 'load', then 'loadend' image.addeventlistener('load', function(e) { console.log('image loaded'); }); image.addeventlistener('loadstart', function(e) { console.log('image load started'); }); image.addeventlistener('loadend', function(e) { console.log('image load finished'); }); specifications specification status comment
html living standardthe definition of 'onloadstart' in that specification.
GlobalEventHandlers.onmousedown - Web APIs
the mouse button.
...px'; view.style.top = event.clienty - 50 + 'px'; } function hideview(event) { view.setattribute('hidden', ''); } const container = document.queryselector('.container'); const view = document.queryselector('.view'); container.onmousedown = showview; container.onmousemove = moveview; document.onmouseup = hideview; result specification specification status comment
html living standardthe definition of 'onmousedown' in that specification.
GlobalEventHandlers.onmousemove - Web APIs
mousemove events.
...nt.queryselectorall('a'); links.foreach(link => { link.onmouseover = tooltip.show; link.onmousemove = tooltip.follow; link.onmouseout = tooltip.hide; }); result draggable elements we also have an example available showing the use of the onmousemove event handler with draggable objects — view the example in action.
GlobalEventHandlers.onmouseup - Web APIs
on.
...anslate(-50%, -50%); } javascript function depress() { toast.classlist.add('depressed'); } function release() { toast.classlist.remove('depressed'); } const toaster = document.queryselector('.toaster'); const toast = document.queryselector('.toast'); toaster.onmousedown = depress; document.onmouseup = release; result specification specification status comment
html living standardthe definition of 'onmouseup' in that specification.
GlobalEventHandlers.onplay - Web APIs
var handlerfunction = element.onplay; handlerfunction should be either null or a javascript function specifying the handler for the event.
...urce src="mov_bbb.mp4" type="video/mp4"> <source src="mov_bbb.ogg" type="video/ogg"> your browser does not support
html5 video.
GlobalEventHandlers.onpointerout - Web APIs
the onpointerout property of the globaleventhandlers mixin is an eventhandler that processes pointerout events.
... use onpointerout to set an element's pointerout event handler.
GlobalEventHandlers.onpointerup - Web APIs
the onpointerup property of the globaleventhandlers mixin is an eventhandler that processes pointerup events.
...ays to use onpointerup to set an element's pointerup event handler.
GlobalEventHandlers.onreset - Web APIs
s mixin is an eventhandler that processes reset events.
...e="text"></label> <br><br> <button type="reset">reset form</button> </form> <p id="log"></p> javascript function logreset(event) { log.textcontent = `form reset!
GlobalEventHandlers.onscroll - Web APIs
function name, or a function expression.
...p id="log"></p> css textarea { width: 4rem; height: 8rem; font-size: 3rem; } javascript const textarea = document.queryselector('textarea'); const log = document.getelementbyid('log'); textarea.onscroll = logscroll; function logscroll(e) { log.textcontent = `scroll position: ${e.target.scrolltop}`; } result specifications specification status comment
html living standardthe definition of 'onscroll' in that specification.
GlobalEventHandlers.onselect - Web APIs
s mixin is an eventhandler that processes select events.
...nction 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 textarea = document.queryselector('textarea'); textarea.onselect = logselection; result specification specification status comment
html living standardthe definition of 'onselect' in that specification.
GlobalEventHandlers.onsubmit - Web APIs
roperty of the globaleventhandlers mixin is an eventhandler that processes submit events.
...etelementbyid('thanks'); city.oninvalid = invalid; form.onsubmit = submit; function invalid(event) { error.removeattribute('hidden'); } function submit(event) { form.setattribute('hidden', ''); thanks.removeattribute('hidden'); // for this example, don't actually submit the form event.preventdefault(); } result specifications specification status comment
html living standardthe definition of 'onsubmit' in that specification.
GlobalEventHandlers.onwheel - Web APIs
fuse onwheel with onscroll: onwheel handles general wheel rotation, while onscroll handles scrolling of an object's content.
... scale *= event.deltay * -2; } else { // zoom out scale /= event.deltay * 2; } // restrict scale scale = math.min(math.max(.125, scale), 4); // apply scale transform el.style.transform = `scale(${scale})`; } let scale = 1; const el = document.queryselector('div'); document.onwheel = zoom; result specification specification status comment
html living standardthe definition of 'onwheel' in that specification.
contentDocument - Web APIs
me origin, returns a document (that is, the active document in the inline frame's nested browsing context), else returns null.
... the active document in the inline frame's nested browsing context), else returns null.
msStereo3DPackingMode - Web APIs
e it on production sites facing the web: it will not work for every user.
...r set, the stereo 3-d content packing as "topbottom", "sidebyside", or "none" for regular 2-d video.
History - Web APIs
recent entry on the history stack to have the specified data, title, and, if provided, url.
...y specify any javascript object that can be serialized.
IDBCursor.advance() - Web APIs
works in a similar way to idbcursor.continue, except that it allows you to jump multiple records at a time, not just always go onto the next record.
...cursor example (view example live.) function advanceresult() { list.inner
html = ''; var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.inner
html = '<strong>' + cursor.value.albumtitle + '</strong>, ' + cursor.value.year; list.appendchild(listitem); cursor.advance(2); } else { console.log('every other entry displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'advance()' in that specification.
IDBCursor.delete() - Web APIs
ntire record using var request = cursor.delete();.
...nt) { var cursor = event.target.result; if(cursor) { if(cursor.value.albumtitle === 'grace under pressure') { var request = cursor.delete(); request.onsuccess = function() { console.log('deleted that mediocre album from 1984.
IDBCursor.direction - Web APIs
using the 2nd argument of idbobjectstore.opencursor.
...e (view example live.) function backwards() { list.inner
html = ''; var transaction = db.transaction(['rushalbumlist'], 'readonly'); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor(null,'prev').onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.inner
html = '<strong>' + cursor.value.albumtitle + '</strong>, ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.direction); cursor.continue(); } else { console.log('entries displayed backwards.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'direction' in that spec...
IDBCursor.request - Web APIs
rsor interface returns the idbrequest used to obtain the cursor.
...mple: function displaydata() { list.inner
html = ''; var transaction = db.transaction(['rushalbumlist'], 'readonly'); var objectstore = transaction.objectstore('rushalbumlist'); var request = objectstore.opencursor(); request.onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.inner
html = '<strong>' + cursor.value.albumtitle + '</strong>, ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.request); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api draftthe definition of 'request' in that specification.
IDBCursor.update() - Web APIs
example using an intermediary updatedata variable.
...get.result; if (cursor) { if (cursor.value.albumtitle === 'a farewell to kings') { const updatedata = cursor.value; updatedata.year = 2050; const request = cursor.update(updatedata); request.onsuccess = function() { console.log('a better album year?'); }; }; const listitem = document.createelement('li'); listitem.inner
html = '<strong>' + cursor.value.albumtitle + '</strong>, ' + cursor.value.year; list.appendchild(listitem); cursor.continue(); } else { console.log('entries displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'update()' in that specification.
IDBDatabase.createObjectStore() - Web APIs
("todolist", 4); // this handler is called when a new version of the database // is created, either when one has not been created before // or when a new version number is submitted by calling // window.indexeddb.open().
...objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "day", { unique: false }); objectstore.createindex("month", "month", { unique: false }); objectstore.createindex("year", "year", { unique: false }); objectstore.createindex("notified", "notified", { unique: false }); note.inner
html += "<li>object store created.</li>"; }; specification specification status comment indexed database api 2.0the definition of 'createobjectstore()' in that specification.
IDBDatabase.name - Web APIs
esulting idbdatabase object being stored in a db variable, and the name property then being logged.
...a full example, see our to-do notifications app (view example live).
IDBDatabase.objectStoreNames - Web APIs
syntax var list[] = idbdatabase.objectstorenames; value a domstringlist containing a list of the names of the object stores currently in the connected database.
...ames of the object stores currently in the connected database.
IDBDatabase.transaction() - Web APIs
led with an empty list of store names.
... db = dbopenrequest.result; // run the displaydata() function to populate the task list with // all the to-do list data already in the idb displaydata(); }; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.inner
html += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.inner
html += '<li>transaction not opened due to error.
IDBIndex.isAutoLocale - Web APIs
ndex lname from a simple contacts database.
...
html = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.isautolocale); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.inner
html = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</td>' + '<td>' + cursor.value.email + '</td>' ...
IDBIndex.locale - Web APIs
the index lname from a simple contacts database.
....inner
html = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.locale); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.inner
html = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</td>' + '<td>' + cursor.value.email + '</td>' ...
IDBRequest - Web APIs
nerror and onsuccess functions are included to handle the success and error cases.
...ample, see our to-do notifications app (view example live.) var db; // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database being // opened successfully, or not dbopenrequest.onerror = function(event) { note.inner
html += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.inner
html += '<li>database initialised.</li>'; // store the result of opening the database.
IIRFilterNode.getFrequencyResponse() - Web APIs
ng the input frequencies, and two to receive the output magnitude and phase values: var myfrequencyarray = new float32array(5); myfrequencyarray[0] = 1000; myfrequencyarray[1] = 2000; myfrequencyarray[2] = 3000; myfrequencyarray[3] = 4000; myfrequencyarray[4] = 5000; var magresponseoutput = new float32array(5); var phaseresponseoutput = new float32array(5); next we create a <ul> element in our
html to contain our results, and grab a reference to it in our javascript: <p>iir filter frequency response for: </p> <ul class="freq-response-output"> </ul> var freqresponseoutput = document.queryselector('.freq-response-output'); finally, after creating our filter, we use getfrequencyresponse() to generate the response data and put it in our arrays, then loop through each data set and output them...
...]; var feedbackcoefficients = [0.5, 0.4, 0.3, 0.2, 0.1]; var iirfilter = audioctx.createiirfilter(feedforwardcoefficients, feedbackcoefficients); ...
ImageBitmapRenderingContext - Web APIs
the imagebitmaprenderingcontext interface is a canvas rendering context that provides the functionality to replace the canvas's contents with the given imagebitmap.
...context.transferfromimagebitmap() displays the given imagebitmap in the canvas associated with this rendering context.
ImageData() - Web APIs
creating a blank imagedata object this example creates an imagedata object that is 200 pixels wide and 100 pixels tall, containing a total of 20,000 pixels.
...or (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
xels tall, making 10,000 pixels in all.
...55 - 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().
InputEvent.dataTransfer - Web APIs
t interface returns a datatransfer object containing information about richtext or plaintext data being added to or removed from editible content.
...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('input', (e) => { result.textcontent = e.datatransfer.getdata('text/
html'); }); specifications specification status comment input events level 2the definition of 'datatransfer' in that specification.
KeyboardEvent.altKey - Web APIs
the keyboardevent.altkey read-only property is a boolean that indicates if the alt key (option or ⌥ on os x) was pressed (true) or not (false) when the event occured.
...vascript"> function showchar(e){ alert( "key keydown: " + string.fromcharcode(e.charcode) + "\n" + "charcode: " + e.charcode + "\n" + "alt key keydown: " + e.altkey + "\n" ); } </script> </head> <body onkeydown="showchar(event);"> <p> press any character key, with or without holding down the alt key.<br /> you can also use the shift key together with the alt key.
KeyboardEvent.charCode - Web APIs
the charcode read-only property of the keyboardevent interface returns the unicode value of a character key pressed during a keypress event.
...e.
KeyboardEvent.ctrlKey - Web APIs
the keyboardevent.ctrlkey read-only property returns a boolean that indicates if the control key was pressed (true) or not (false) when the event occured.
...> <head> <title>ctrlkey example</title> <script type="text/javascript"> function showchar(e){ alert( "key pressed: " + e.key + "\n" + "ctrl key pressed: " + e.ctrlkey + "\n" ); } </script> </head> <body onkeypress="showchar(event);"> <p>press any character key, with or without holding down the ctrl key.<br /> you can also use the shift key together with the ctrl key.</p> </body> </
html> specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'keyboardevent.ctrlkey' in that specification.
KeyboardEvent.shiftKey - Web APIs
the keyboardevent.shiftkey read-only property is a boolean that indicates if the shift key was pressed (true) or not (false) when the event occurred.
...y pressed: " + string.fromcharcode(e.charcode) + "\n" + "charcode: " + e.charcode + "\n" + "shift key pressed: " + e.shiftkey + "\n" + "alt key pressed: " + e.altkey + "\n" ); } </script> </head> <body onkeypress="showchar(event);"> <p>press any character key, with or without holding down the shift key.<br /> you can also use the shift key together with the alt key.</p> </body> </
html> specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'keyboardevent.shiftkey' in that specification.
KeyboardEvent.which - Web APIs
returns the numeric keycode of the key pressed, or the character code (charcode) for an alphanumeric key pressed.
...code + "\n" + "character key pressed: " + string.fromcharcode(evt.charcode) + "\n" ); } function keydown(evt) { alert("onkeydown handler: \n" + "keycode property: " + evt.keycode + "\n" + "which property: " + evt.which + "\n" ); } </script> </head> <body onkeypress="showkeypress(event);" onkeydown="keydown(event);" > <p>please press any key.</p> </body> </
html> specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'keyboardevent.which' in that specification.
LinkStyle - Web APIs
the linkstyle interface provides access to the associated css style sheet of a node.
... the linkstyle interface provides access to the associated css style sheet of a node.
MathMLElement - Web APIs
the mathmlelement interface represents any mathml element.
...the mathmlelement interface represents any mathml element.
MediaDevices.getSupportedConstraints() - Web APIs
getsupportedconstraints(); parameters none.
... <ul id="constraintlist"> </ul> css body { font: 15px arial, sans-serif; } javascript let constraintlist = document.getelementbyid("constraintlist"); let supportedconstraints = navigator.mediadevices.getsupportedconstraints(); for (let constraint in supportedconstraints) { if (supportedconstraints.hasownproperty(constraint)) { let elem = document.createelement("li"); elem.inner
html = "<code>" + constraint + "</code>"; constraintlist.appendchild(elem); } } result specifications specification status comment media capture and streamsthe definition of 'getsupportedconstraints()' in that specification.
MediaElementAudioSourceNode.mediaElement - Web APIs
the mediaelementaudiosourcenode interface's read-only mediaelement property indicates the
htmlmediaelement that contains the audio track from which the node is receiving audio.
...nterface's read-only mediaelement property indicates the
htmlmediaelement that contains the audio track from which the node is receiving audio.
MediaError.message - Web APIs
supported by your browser."; break; default: s += "an unknown error occurred."; break; } let message = err.message; if (message && message.length) { s += " " + message; } displayerrormessage("<strong>error " + err.code + ":</strong> " + s + "<br>"); }; this gets the mediaerror object describing the error from the error property on the
htmlaudioelement representing the audio player.
...e audio player.
MediaError - Web APIs
the mediaerror interface represents an error which occurred while handling media in an
html media element based on
htmlmediaelement, such as <audio> or <video>.
... what exactly went wrong.
MediaSource - Web APIs
the mediasource interface of the media source extensions api represents a source of media data for an
htmlmediaelement object.
... the mediasource interface of the media source extensions api represents a source of media data for an
htmlmediaelement object.
MediaStream.onaddtrack - Web APIs
the mediastream.onaddtrack property is an eventhandler which specifies a function to be called when the addtrack event occurs on a mediastream instance.
... was added is specified in the event's track property.
MediaStream.onremovetrack - Web APIs
the mediastream.onremovetrack property is an eventhandler which specifies a function to be called when the removetrack event occurs on a mediastream instance.
... which has occurred.
MediaStreamAudioSourceNode - Web APIs
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) { video.play(); video.muted = true; }; // create a mediastreamaudiosourcenode // feed the
htmlmediaelement into it var audioctx = new audiocontext(); var source = audioctx.createmediastreamsource(stream); // create a biquadfilter var biquadfilter = audioctx.createbiquadfilter(); biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = range.value; // connect the audiobuffersourcenode to ...
...ouse pointer coordinates when mouse is moved // then set new gain value range.oninput = 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.inner
html = myscript.inner
html; note: as a consequence of calling createmediastreamsource(), audio playback from the media stream will be re-routed into the processing graph of the audiocontext.
MediaStreamTrack.enabled - Web APIs
activity indicators to show that the camera is not currently recording or streaming.
...nclick = function(evt) { const newstate = !myaudiotrack.enabled; pausebutton.inner
html = newstate ?
MediaStreamTrack.onmute - Web APIs
d when the mute event is received.
...yntax track.onmute = mutehandler; value a function to serve as an eventhandler for the mute event.
MediaStreamTrackAudioSourceNode - Web APIs
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) { video.play(); video.muted = true; }; // create a mediastreamaudiosourcenode // feed the
htmlmediaelement into it var audioctx = new audiocontext(); var source = audioctx.createmediastreamsource(stream); // create a biquadfilter var biquadfilter = audioctx.createbiquadfilter(); biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = range.value; // connect the audiobuffersourcenode to ...
...ouse pointer coordinates when mouse is moved // then set new gain value range.oninput = 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.inner
html = myscript.inner
html; note: as a consequence of calling createmediastreamsource(), audio playback from the media stream will be re-routed into the processing graph of the audiocontext.
MessageChannel() - Web APIs
var channel = new messagechannel(); var para = document.queryselector('p'); var ifr = document.queryselector('iframe'); var otherwindow = ifr.contentwindow; ifr.addeventlistener("load", iframeloaded, false); function iframeloaded() { otherwindow.postmessage('hello from the main page!', '*', [channel.port2]); } channel.port1.onmessage = handlemessage; function handlemessage(e) { para.inner
html = e.data; } for a full working example, see our channel messaging basic demo on github (run it live too).
...d", iframeloaded, false); function iframeloaded() { otherwindow.postmessage('hello from the main page!', '*', [channel.port2]); } channel.port1.onmessage = handlemessage; function handlemessage(e) { para.inner
html = e.data; } for a full working example, see our channel messaging basic demo on github (run it live too).
MessageChannel.port2 - Web APIs
var channel = new messagechannel(); var para = document.queryselector('p'); var ifr = document.queryselector('iframe'); var otherwindow = ifr.contentwindow; ifr.addeventlistener("load", iframeloaded, false); function iframeloaded() { otherwindow.postmessage('hello from the main page!', '*', [channel.port2]); } channel.port1.onmessage = handlemessage; function handlemessage(e) { para.inner
html = e.data; } for a full working example, see our channel messaging basic demo on github (run it live too).
...d", iframeloaded, false); function iframeloaded() { otherwindow.postmessage('hello from the main page!', '*', [channel.port2]); } channel.port1.onmessage = handlemessage; function handlemessage(e) { para.inner
html = e.data; } for a full working example, see our channel messaging basic demo on github (run it live too).
MessageChannel - Web APIs
cument.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) { output.inner
html = e.data; } for a full working example, see our channel messaging basic demo on github (run it live too).
...ge = onmessage; // transfer port2 to the iframe iframe.contentwindow.postmessage('hello from the main page!', '*', [channel.port2]); } // handle messages received on port1 function onmessage(e) { output.inner
html = e.data; } for a full working example, see our channel messaging basic demo on github (run it live too).
MessagePort.onmessage - Web APIs
var channel = new messagechannel(); var para = document.queryselector('p'); var ifr = document.queryselector('iframe'); var otherwindow = ifr.contentwindow; ifr.addeventlistener("load", iframeloaded, false); function iframeloaded() { otherwindow.postmessage('hello from the main page!', '*', [channel.port2]); } channel.port1.onmessage = handlemessage; function handlemessage(e) { para.inner
html = e.data; } for a full working example, see our channel messaging basic demo on github (run it live too).
...d", iframeloaded, false); function iframeloaded() { otherwindow.postmessage('hello from the main page!', '*', [channel.port2]); } channel.port1.onmessage = handlemessage; function handlemessage(e) { para.inner
html = e.data; } for a full working example, see our channel messaging basic demo on github (run it live too).
MessagePort.postMessage() - Web APIs
var channel = new messagechannel(); var para = document.queryselector('p'); var ifr = document.queryselector('iframe'); var otherwindow = ifr.contentwindow; ifr.addeventlistener("load", iframeloaded, false); function iframeloaded() { otherwindow.postmessage('hello from the main page!', '*', [channel.port2]); } channel.port1.onmessage = handlemessage; function handlemessage(e) { para.inner
html = e.data; } for a full working example, see our channel messaging basic demo on github (run it live too).
...d", iframeloaded, false); function iframeloaded() { otherwindow.postmessage('hello from the main page!', '*', [channel.port2]); } channel.port1.onmessage = handlemessage; function handlemessage(e) { para.inner
html = e.data; } for a full working example, see our channel messaging basic demo on github (run it live too).
MessagePort.start() - Web APIs
listener; it is implied when using messagechannel.onmessage.
... channel.port1.onmessage = handlemessage; function handlemessage(e) { para.inner
html = 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.inner
html = e.data; textinput.value = ''; } channel.port1.start(); specifications specification status comment
html living standardthe definition of 'start()' in that specification.
MessagePort - Web APIs
cument.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) { output.inner
html = e.data; } for a full working example, see our channel messaging basic demo on github (run it live too).
...ge = onmessage; // transfer port2 to the iframe iframe.contentwindow.postmessage('hello from the main page!', '*', [channel.port2]); } // handle messages received on port1 function onmessage(e) { output.inner
html = e.data; } for a full working example, see our channel messaging basic demo on github (run it live too).
MouseEvent.movementX - Web APIs
the x coordinate of the mouse pointer between the given event and the previous mousemove event.
...s, the value of the property is computed like this: currentevent.movementx = currentevent.screenx - previousevent.screenx.
MouseEvent.pageX - Web APIs
useenter", updatedisplay, false); box.addeventlistener("mouseleave", updatedisplay, false); the javascript code uses addeventlistener() to register the function updatedisplay() as the event handler for the mousemove, mouseenter, and mouseleave events.
...ve events.
NavigatorID - Web APIs
returns the user-agent string for the current browser.
...untaint functions were removed in javascript 1.2.
NavigatorPlugins.plugins - Web APIs
if (typeof flash != 'object') { // flash is not present return undefined; } if(flash.version){ return flash.version; } else { //no version property (e.g.
...on; newrow.insertcell().textcontent = navigator.plugins[i].version?navigator.plugins[i].version:""; } notes the plugin object exposes a small interface for getting information about the various plugins installed in your browser.
Node.childNodes - Web APIs
box.removechild(box.firstchild); } notes the items in the collection of nodes are objects, not strings.
...child); } notes the items in the collection of nodes are objects, not strings.
Node.isEqualNode() - Web APIs
t match varies depending on the types of the nodes.
...v>this is the first element.</div> <div>this is the second element.</div> <div>this is the first element.</div> <p id="output"></p> css #output { width: 440px; border: 2px solid black; border-radius: 5px; padding: 10px; margin-top: 20px; display: block; } javascript let output = document.getelementbyid("output"); let divlist = document.getelementsbytagname("div"); output.inner
html += "div 0 equals div 0: " + divlist[0].isequalnode(divlist[0]) + "<br/>"; output.inner
html += "div 0 equals div 1: " + divlist[0].isequalnode(divlist[1]) + "<br/>"; output.inner
html += "div 0 equals div 2: " + divlist[0].isequalnode(divlist[2]) + "<br/>"; results specifications specification status comment domthe definition of 'node.isequalnode' in that specificat...
Node.isSameNode() - Web APIs
(that is, whether they reference the same object).
...v>this is the first element.</div> <div>this is the second element.</div> <div>this is the first element.</div> <p id="output"></p> css #output { width: 440px; border: 2px solid black; border-radius: 5px; padding: 10px; margin-top: 20px; display: block; } javascript let output = document.getelementbyid("output"); let divlist = document.getelementsbytagname("div"); output.inner
html += "div 0 same as div 0: " + divlist[0].issamenode(divlist[0]) + "<br/>"; output.inner
html += "div 0 same as div 1: " + divlist[0].issamenode(divlist[1]) + "<br/>"; output.inner
html += "div 0 same as div 2: " + divlist[0].issamenode(divlist[2]) + "<br/>"; results specifications specification status comment domthe definition of 'node: issamenode' in that specifica...
Node.ownerDocument - Web APIs
the ownerdocument read-only property of the node interface returns the top-level document object of the node.
...e interface returns the top-level document object of the node.
Node.removeChild() - Web APIs
hrows the following exception: uncaught notfounderror: failed to execute 'removechild' on 'node': the node to be removed is not a child of this node.
...vechild(d_nested); to remove a specified element without having to specify its parent node: let node = document.getelementbyid("nested"); if (node.parentnode) { node.parentnode.removechild(node); } to remove all children from an element: let element = document.getelementbyid("top"); while (element.firstchild) { element.removechild(element.firstchild); } causing a typeerror <!--sample
html code--> <div id="top"> </div> <script type="text/javascript"> let top = document.getelementbyid("top"); let nested = document.getelementbyid("nested"); // throws uncaught typeerror let garbage = top.removechild(nested); </script> causing a notfounderror <!--sample
html code--> <div id="top"> <div id="nested"></div> </div> <script type="text/javascript"> let top = document.getele...
PannerNode.distanceModel - Web APIs
0; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.inner
html = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner...
... + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner.setposition(xpos,ypos,zpos); } pannerdata.inner
html = 'panner data: x ' + xpos + ' y ' + ypos + ' z ' + zpos; } note: in terms of working out what position values to apply to the listener and panner, to make the sound appropriate to what the visuals are doing on screen, there is quite a bit of math involved, but you will soon get used to it with a bit of experimentation.
PannerNode.maxDistance - Web APIs
0; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.inner
html = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner...
... + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner.setposition(xpos,ypos,zpos); } pannerdata.inner
html = 'panner data: x ' + xpos + ' y ' + ypos + ' z ' + zpos; } note: in terms of working out what position values to apply to the listener and panner, to make the sound appropriate to what the visuals are doing on screen, there is quite a bit of math involved, but you will soon get used to it with a bit of experimentation.
PannerNode.panningModel - Web APIs
0; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.inner
html = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner...
... + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner.setposition(xpos,ypos,zpos); } pannerdata.inner
html = 'panner data: x ' + xpos + ' y ' + ypos + ' z ' + zpos; } note: in terms of working out what position values to apply to the listener and panner, to make the sound appropriate to what the visuals are doing on screen, there is quite a bit of math involved, but you will soon get used to it with a bit of experimentation.
PannerNode.setOrientation() - Web APIs
0; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.inner
html = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner...
... + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner.setposition(xpos,ypos,zpos); } pannerdata.inner
html = 'panner data: x ' + xpos + ' y ' + ypos + ' z ' + zpos; } note: in terms of working out what position values to apply to the listener and panner, to make the sound appropriate to what the visuals are doing on screen, there is quite a bit of math involved, but you will soon get used to it with a bit of experimentation.
PannerNode.setPosition() - Web APIs
0; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.inner
html = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner...
... + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner.setposition(xpos,ypos,zpos); } pannerdata.inner
html = 'panner data: x ' + xpos + ' y ' + ypos + ' z ' + zpos; } note: in terms of working out what position values to apply to the listener and panner, to make the sound appropriate to what the visuals are doing on screen, there is quite a bit of math involved, but you will soon get used to it with a bit of experimentation.
PannerNode.setVelocity() - Web APIs
0; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.inner
html = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner...
... + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner.setposition(xpos,ypos,zpos); } pannerdata.inner
html = 'panner data: x ' + xpos + ' y ' + ypos + ' z ' + zpos; } note: in terms of working out what position values to apply to the listener and panner, to make the sound appropriate to what the visuals are doing on screen, there is quite a bit of math involved, but you will soon get used to it with a bit of experimentation.
PannerNode - Web APIs
0; rightbound = xpos - 50; xiterator = width/150; // listener will always be in the same place for this demo if(listener.positionx) { listener.positionx.setvalueattime(xpos, audioctx.currenttime); listener.positiony.setvalueattime(ypos, audioctx.currenttime); listener.positionz.setvalueattime(300, audioctx.currenttime); } else { listener.setposition(xpos,ypos,300); } listenerdata.inner
html = 'listener data: x ' + xpos + ' y ' + ypos + ' z ' + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner...
... + 300; // panner will move as the boombox graphic moves around on the screen function positionpanner() { if(panner.positionx) { panner.positionx.setvalueattime(xpos, audioctx.currenttime); panner.positiony.setvalueattime(ypos, audioctx.currenttime); panner.positionz.setvalueattime(zpos, audioctx.currenttime); } else { panner.setposition(xpos,ypos,zpos); } pannerdata.inner
html = 'panner data: x ' + xpos + ' y ' + ypos + ' z ' + zpos; } note: in terms of working out what position values to apply to the listener and panner, to make the sound appropriate to what the visuals are doing on screen, there is quite a bit of math involved, but you will soon get used to it with a bit of experimentation.
ParentNode.querySelectorAll() - Web APIs
ector is used to return a list of the list items contained within a list whose id is userlist which have a data-active attribute whose value is 1: var container = document.queryselector("#userlist"); var matches = container.queryselectorall("li[data-active=1]"); user notes queryselectorall() behaves differently than most common javascript dom libraries, which might lead to unexpected results.
...urn a list of the list items contained within a list whose id is userlist which have a data-active attribute whose value is 1: var container = document.queryselector("#userlist"); var matches = container.queryselectorall("li[data-active=1]"); user notes queryselectorall() behaves differently than most common javascript dom libraries, which might lead to unexpected results.
Path2D.addPath() - Web APIs
th() method of the canvas 2d api adds one path2d object to another path2d object.
... 100, 75); // create transformation matrix that moves 200 points to the right let m = document.createelementns('http://www.w3.org/2000/svg', 'svg').createsvgmatrix(); m.a = 1; m.b = 0; m.c = 0; m.d = 1; m.e = 200; m.f = 0; // add second path to the first path p1.addpath(p2, m); // draw the first path ctx.fill(p1); result specifications specification status comment
html living standardthe definition of 'path2d.addpath()' in that specification.
PluginArray - Web APIs
uginarray.item returns the plugin at the specified index into the array.
...tring() + " plugin(s)<br>" + "name | filename | description<br>" ); for(var i = 0; i < pluginslength; i++) { document.write( navigator.plugins[i].name + " | " + navigator.plugins[i].filename + " | " + navigator.plugins[i].description + " | " + navigator.plugins[i].version + "<br>" ); } specifications specification status comment
html living standardthe definition of 'pluginarray' in that specification.
Pinch zoom gestures - Web APIs
ag var logevents = false; // logging/debugging functions function enablelog(ev) { logevents = logevents ?
... false : true; } function log(prefix, ev) { if (!logevents) return; var o = document.getelementsbytagname('output')[0]; var s = prefix + ": pointerid = " + ev.pointerid + " ; pointertype = " + ev.pointertype + " ; isprimary = " + ev.isprimary; o.inner
html += s + " "; } function clearlog(event) { var o = document.getelementsbytagname('output')[0]; o.inner
html = ""; } ...
RadioNodeList.value - Web APIs
utton is returned as a string.
...input type="radio" name="color" value="blue">blue</label> <label><input 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.
Range.cloneContents() - Web APIs
the range.clonecontents() returns a documentfragment copying the objects of type node included in the range.
... the range.clonecontents() returns a documentfragment copying the objects of type node included in the range.
Range.setStart() - Web APIs
ter than or equal to zero representing the offset for the start of the range from the start of startnode.
...cument.createrange(); range.setstart(address, startoffset); range.setend(address, endoffset); const mark = document.createelement('mark'); range.surroundcontents(mark); result get characters from a text node this example uses the range.setstart() and range.setend() methods to define the contents of a range.
ReadableStream.cancel() - Web APIs
eam.cancel(reason); parameters reason a domstring providing a human-readable reason for the cancellation.
...e whatwg
html spec chunk by chunk; each chunk is searched for the string "service workers".
RenderingContext - Web APIs
rom a specification and browser implementation perspective to have a shorthand that means "one of these interfaces." as such, renderingcontext is an implementation detail, and isn't something web developers directly use.
...pers directly use.
ResizeObserverEntry.contentRect - Web APIs
r resizeobserverentry.contentboxsize, but it is left over from an earlier implementation of the resize observer api, is still included in the spec for web compat reasons, and may be deprecated in future versions.
... contentrect = resizeobserverentry.contentrect; value a domrectreadonly object containing the new size of the element indicated by the target property.
Response.redirected - Web APIs
textual message is inserted into an element when a redirect occurred during the fetch operation.
...irect occurred during the fetch operation.
SVGAElement.target - Web APIs
the svgaelement.target read-only property of svgaelement returns an svganimatedstring object that specifies the portion of a target window, frame, pane into which a document is to be opened when a link is activated.
... the svgaelement.target read-only property of svgaelement returns an svganimatedstring object that specifies the portion of a target window, frame, pane into which a document is to be opened when a link is activated.
Using server-sent events - Web APIs
t evtsource = new eventsource("//api.example.com/ssedemo.php", { withcredentials: true } ); once you've instantiated your event source, you can begin listening for messages from the server by attaching a handler for the message event: evtsource.onmessage = function(event) { const newelement = document.createelement("li"); const eventlist = document.getelementbyid("list"); newelement.inner
html = "message: " + event.data; eventlist.appendchild(newelement); } this code listens for incoming messages (that is, notices from the server that do not have an event field on them) and appends the message text to a list in the document's
html.
...is code listens for incoming messages (that is, notices from the server that do not have an event field on them) and appends the message text to a list in the document's
html.
SharedWorker - Web APIs
is an eventlistener that is called whenever an errorevent of type error bubbles through the worker.
...e main threads.
Slottable: assignedSlot - Web APIs
the assignedslot read-only property of the slottable interface returns an
htmlslotelement representing the <slot> element the node is inserted in.
... the assignedslot read-only property of the slottable interface returns an
htmlslotelement representing the <slot> element the node is inserted in.
Storage.getItem() - Web APIs
en uses them to set custom styles on a page.
...ment.getelementbyid('font').value = currentfont; document.getelementbyid('image').value = currentimage;
htmlelem.style.backgroundcolor = '#' + currentcolor; pelem.style.fontfamily = currentfont; imgelem.setattribute('src', currentimage); } note: to see this used within a real world example, see our web storage demo.
Storage - Web APIs
, document.getelementbyid('image').value); } function setstyles() { var currentcolor = localstorage.getitem('bgcolor'); var currentfont = localstorage.getitem('font'); var currentimage = localstorage.getitem('image'); document.getelementbyid('bgcolor').value = currentcolor; document.getelementbyid('font').value = currentfont; document.getelementbyid('image').value = currentimage;
htmlelem.style.backgroundcolor = '#' + currentcolor; pelem.style.fontfamily = currentfont; imgelem.setattribute('src', currentimage); } note: to see this running as a complete working example, see our web storage demo.
...getelementbyid('font').value = currentfont; document.getelementbyid('image').value = currentimage;
htmlelem.style.backgroundcolor = '#' + currentcolor; pelem.style.fontfamily = currentfont; imgelem.setattribute('src', currentimage); } note: to see this running as a complete working example, see our web storage demo.
Stylesheet.href - Web APIs
the href property of the stylesheet interface returns the location of the style sheet.
...ylesheet.href parameters uri is a string containing the stylesheet's uri.
Text - Web APIs
properties inherits properties from its parent, characterdata.
...xt read only returns a domstring containing the text of all text nodes logically adjacent to this node, concatenated in document order.
TextMetrics - Web APIs
y is a double giving the distance from the horizontal line indicated by the canvasrenderingcontext2d.textbaseline property to the ideographic baseline of the line box, in css pixels.
...anvas'); const ctx = canvas.getcontext('2d'); const text = 'abcdefghijklmnop'; ctx.font = 'italic 50px serif'; const textmetrics = ctx.measuretext(text); console.log(textmetrics.width); // 459.8833312988281 console.log(math.abs(textmetrics.actualboundingboxleft) + math.abs(textmetrics.actualboundingboxright)); // 462.8833333333333 specifications specification
html living standardthe definition of 'textmetrics' in that specification.
TextTrack - Web APIs
a custom label may need to be generated by your code using other attributes of the track, if the track's label needs to be exposed to the user.
...o available via the oncuechange property.
TextTrackCue - Web APIs
at represents the video time that the cue will stop being displayed, in seconds.
...a boolean for whether the video will pause when this cue stops being displayed.
TextTrackList - Web APIs
the texttracklist interface is used to represent a list of the text tracks defined by the <track> element, with each track represented by a separate texttrack object in the list.
...n about the number of channels available.
Touch events - Web APIs
matching the given identifier then returns that touch's index into the array.
...ier then returns that touch's index into the array.
TrackEvent() - Web APIs
boolean indicating whether or not the event can be canceled.
...nt will trigger listeners outside of a shadow root; see event.composed for more details.
TrackEvent.track - Web APIs
track object to which the event applies.
...rack; value an object which is one of the types audiotrack, videotrack, or texttrack, depending on the type of media represented by the track.
Transferable - Web APIs
ing the [transferable] webidl extended attribute).
...does not implement or inherit specific properties.
UIEvent.layerX - Web APIs
his property takes scrolling of the page into account and returns a value relative to the whole of the document unless the event occurs inside a positioned element, where the returned value is relative to the top left of the positioned element.
...n> </div> <div id="d3"> <form name="form_coords" id="form1"> parent element id: <input type="text" name="parentid" size="7" /><br /> pagex:<input type="text" name="pagexcoords" size="7" /> pagey:<input type="text" name="pageycoords" size="7" /><br /> layerx:<input type="text" name="layerxcoords" size="7" /> layery:<input type="text" name="layerycoords" size="7" /> </form> </div> </body> </
html> specifications this property is not part of any specification.
UIEvent.layerY - Web APIs
property takes scrolling of the page into account, and returns a value relative to the whole of the document, unless the event occurs inside a positioned element, where the returned value is relative to the top left of the positioned element.
...n> </div> <div id="d3"> <form name="form_coords" id="form1"> parent element id: <input type="text" name="parentid" size="7" /><br /> pagex:<input type="text" name="pagexcoords" size="7" /> pagey:<input type="text" name="pageycoords" size="7" /><br /> layerx:<input type="text" name="layerxcoords" size="7" /> layery:<input type="text" name="layerycoords" size="7" /> </form> </div> </body> </
html> specifications this property is not part of any specification.
UIEvent.pageY - Web APIs
the uievent.pagey read-only property returns the vertical coordinate of the event relative to the whole document.
...olling.</span> </div> <div id="d3"> <form name="form_coords"> parent element id: <input type="text" name="parentid" size="7" /><br /> pagex:<input type="text" name="pagexcoords" size="7" /> pagey:<input type="text" name="pageycoords" size="7" /><br /> layerx:<input type="text" name="layerxcoords" size="7" /> layery:<input type="text" name="layerycoords" size="7" /> </form> </div> </body> </
html> specifications this property is not part of any specification.
VideoTrackList - Web APIs
the videotracklist interface is used to represent a list of the video tracks contained within a <video> element, with each track represented by a separate videotrack object in the list.
...bout the number of channels available.
WebGLRenderingContext.makeXRCompatible() - Web APIs
while this method is available through the webglrenderingcontext interface, it's actually defined by the webxr device api rather than by webgl.
... method is available through the webglrenderingcontext interface, it's actually defined by the webxr device api rather than by webgl.
Detect WebGL - Web APIs
anvas is not added to the // document itself, so it is never displayed in the // browser window.
...indow.
WebGL: 2D and 3D graphics for the web - Web APIs
webgl (web graphics library) is a javascript api for rendering high-performance interactive 3d and 2d graphics within any compatible web browser without the use of plug-ins.
...niers that introduces the basics of webgl.
Writing a WebSocket server in C# - Web APIs
for (int i = 0; i < msglen; ++i) decoded[i] = (byte)(bytes[offset + i] ^ masks[i % 4]); string text = encoding.utf8.getstring(decoded); console.writeline("{0}", text); } else console.writeline("mask bit not set"); console.writeline(); } } } } client.
html <!doctype
html> <style> textarea { vertical-align: bottom; } #output { overflow: auto; } #output > p { overflow-wrap: break-word; } #output span { color: blue; } #output span.error { color: red; } </style> <h2>websocket test</h2> <textarea cols=60 rows=6></textarea> <button>send</button> <div id=output></div> <script> // http://www.websocket.org/echo.
html var button ...
...cket.onmessage = function (e) { writetoscreen("<span>response: " + e.data + "</span>"); }; websocket.onerror = function (e) { writetoscreen("<span class=error>error:</span> " + e.data); }; function dosend(message) { writetoscreen("sent: " + message); websocket.send(message); } function writetoscreen(message) { output.insertadjacent
html("afterbegin", "<p>" + message + "</p>"); } function onclickbutton() { var text = textarea.value; text && dosend(text); textarea.value = ""; textarea.focus(); } </script> related writing websocket servers ...
Example and tutorial: Simple synth keyboard - Web APIs
witch among the standard waveforms as well as one custom waveform, and you can control the master gain using a volume slider beneath the keyboard.
...e element for later use, and assigns event handlers for the events we care about.
Using IIR filters - Web APIs
buffer, attaches it to the default destination, starts it playing, and returns it: function playsourcenode(audiocontext, audiobuffer) { const soundsource = audiocontext.createbuffersource(); soundsource.buffer = audiobuffer; soundsource.connect(audiocontext.destination); soundsource.start(); return soundsource; } this function is called when the play button is pressed.
...ton class="button-play" role="switch" data-playing="false" aria-pressed="false">play</button> and the click event listener starts like so: playbutton.addeventlistener('click', function() { if (this.dataset.playing === 'false') { srcnode = playsourcenode(audioctx, sample); ...
Using the Web Audio API - Web APIs
to the context we have created.
...xt.resume(); } // play or pause track depending on state if (this.dataset.playing === 'false') { audioelement.play(); this.dataset.playing = 'true'; } else if (this.dataset.playing === 'true') { audioelement.pause(); this.dataset.playing = 'false'; } }, false); we also need to take into account what to do when the track finishes playing.
Web Audio API - Web APIs
it contains and the execution of the audio processing, or decoding.
...once decoded into this form, the audio can then be put into an audiobuffersourcenode.
Using the Web Storage API - Web APIs
nt, and returns the data value.
...e these in our demo, but they are very simple to add to your project: storage.removeitem() takes a single argument — the key of the data item you want to remove — and removes it from the storage object for that domain.
Window: DOMContentLoaded event - Web APIs
the domcontentloaded event fires when the initial
html document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
...on the document: domcontentloaded event.
Window.closed - Web APIs
of the popup's location object to refresh its data.
...er has closed it a new window is opened.
Window.confirm() - Web APIs
two buttons: ok and cancel.
...indow.alert dialog boxes are modal windows — they prevent the user from accessing the rest of the program's interface until the dialog box is closed.
Window.customElements - Web APIs
le you'll see of this property being used is to get access to the customelementregistry.define() method to define and register a new custom element, e.g.: let customelementregistry = window.customelements; customelementregistry.define('my-custom-element', mycustomelement); however, it is usually shortened to something like the following: customelements.define('element-details', class extends
htmlelement { constructor() { super(); const template = document .getelementbyid('element-details-template') .content; const shadowroot = this.attachshadow({mode: 'open'}) .appendchild(template.clonenode(true)); } } ); see our web-components-examples repo for more usage examples.
...lelement { constructor() { super(); const template = document .getelementbyid('element-details-template') .content; const shadowroot = this.attachshadow({mode: 'open'}) .appendchild(template.clonenode(true)); } } ); see our web-components-examples repo for more usage examples.
Window.document - Web APIs
window.document returns a reference to the document contained in the window.
... window.document returns a reference to the document contained in the window.
Window.frames - Web APIs
dow).
...r frames = window.frames; // or // var frames = window.parent.frames; for (var i = 0; i < frames.length; i++) { // do something with each subframe as frames[i] frames[i].document.body.style.background = "red"; } specifications specification status comment
html living standardthe definition of 'window.frames' in that specification.
Window.history - Web APIs
the session history, but it does allow it to navigate the session history.
...ory or to disable the back/forward navigation from unprivileged code.
Window.length - Web APIs
returns the number of frames (either <frame> or <iframe> elements) in the window.
...umber of frames (either <frame> or <iframe> elements) in the window.
Window: load event - Web APIs
es no cancelable no interface event event handler property onload examples log a message when the page is fully loaded: window.addeventlistener('load', (event) => { console.log('page is fully loaded'); }); the same, but using the onload event handler property: window.onload = (event) => { console.log('page is fully loaded'); }; live example
html <div class="controls"> <button id="reload" type="button">reload</button> </div> <div class="event-log"> <label>event log:</label> <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> </div> css body { display: grid; grid-template-areas: "control log"; } .controls { grid-area: control; display: flex; align-items: center; justify-content: center; } ...
...e', (event) => { log.textcontent = log.textcontent + `readystate: ${document.readystate}\n`; }); document.addeventlistener('domcontentloaded', (event) => { log.textcontent = log.textcontent + `domcontentloaded\n`; }); result specifications specification status comment ui eventsthe definition of 'load' in that specification.
Window.name - Web APIs
ars and dojo's dojox.io.windowname) as a more secure alternative to jsonp.
...sensitive data should, however, not rely on window.name for cross-domain messaging but instead utilize the postmessage api.
Window: pagehide event - Web APIs
if (event.persisted) { /* the page isn't being discarded, so it can be reused later */ } }, false); this can also be written using the onpagehide event handler property on the window: window.onpagehide = event => { if (event.persisted) { /* the page isn't being discarded, so it can be reused later */ } } specifications specification status comment
html living standardthe definition of 'pagehide' in that specification.
... written using the onpagehide event handler property on the window: window.onpagehide = event => { if (event.persisted) { /* the page isn't being discarded, so it can be reused later */ } } specifications specification status comment
html living standardthe definition of 'pagehide' in that specification.
window.postMessage() - Web APIs
“message”) are exposed to the receiving window through the event object.
...icate with content scripts (with randomly generated event names, if needed, to prevent snooping from the guest page).
Window.status - Web APIs
the status property of the window interface was originally intended to set the text in the status bar at the bottom of the browser window.
... the status property of the window interface was originally intended to set the text in the status bar at the bottom of the browser window.
Window.stop() - Web APIs
further resource loading in the current browsing context, equivalent to the stop button in the browser.
...ecause of how scripts are executed, this method cannot interrupt its parent document's loading, but it will stop its images, new windows, and other still-loading objects.
Window.top - Web APIs
s where the window.parent property returns the immediate parent of the current window, window.top returns the topmost window in the hierarchy of window objects.
...the topmost window in the hierarchy of window objects.
WindowOrWorkerGlobalScope.clearTimeout() - Web APIs
meoutid = window.settimeout(function(msg) { this.remind(msg); }.bind(this), 1000, 'wake up!'); }, cancel: function() { window.cleartimeout(this.timeoutid); } }; window.onclick = function() { alarm.setup(); }; notes passing an invalid id to cleartimeout() silently does nothing; no exception is thrown.
...() { alarm.setup(); }; notes passing an invalid id to cleartimeout() silently does nothing; no exception is thrown.
WorkerGlobalScope.importScripts() - Web APIs
the importscripts() method of the workerglobalscope interface synchronously imports one or more scripts into the worker's scope.
...some functionality written in a separate script called foo.js that you wanted to use inside worker.js, you could import it using the following line: importscripts('foo.js'); importscripts() and self.importscripts() are effectively equivalent — both represent importscripts() being called from inside the worker's inner scope.
WorkerGlobalScope.navigator - Web APIs
nt: "mozilla/5.0 (macintosh; intel mac os x 10_10_1) ap…ml, like gecko) chrome/40.0.2214.93 safari/537.36", product: "gecko", platform: "macintel", appversion: "5.0 (macintosh; intel mac os x 10_10_1) applewebki…ml, like gecko) chrome/40.0.2214.93 safari/537.36"…} appcodename: "mozilla" appname: "netscape" appversion: "5.0 (macintosh; intel mac os x 10_10_1) applewebkit/537.36 (k
html, like gecko) chrome/40.0.2214.93 safari/537.36" hardwareconcurrency: 4 online: true platform: "macintel" product: "gecko" useragent: "mozilla/5.0 (macintosh; intel mac os x 10_10_1) applewebkit/537.36 (k
html, like gecko) chrome/40.0.2214.93 safari/537.36" __proto__: object you could use this navigator object to return more information about the runtime envinronment, as yo...
...tel" product: "gecko" useragent: "mozilla/5.0 (macintosh; intel mac os x 10_10_1) applewebkit/537.36 (k
html, like gecko) chrome/40.0.2214.93 safari/537.36" __proto__: object you could use this navigator object to return more information about the runtime envinronment, as you might do with a normal navigator object.
XMLDocument.load() - Web APIs
est", null); function documentloaded (e) { alert(new xmlserializer().serializetostring(e.target)); // gives querydata.xml contents as string } xmldoc.addeventlistener("load", documentloaded, false); xmldoc.load('querydata.xml'); see also the load sample in the xml tests directory.
...lizetostring(e.target)); // gives querydata.xml contents as string } xmldoc.addeventlistener("load", documentloaded, false); xmldoc.load('querydata.xml'); see also the load sample in the xml tests directory.
XRSystem: isSessionSupported() - Web APIs
e or the browser doesn't have permission to use the xr device, the promise is rejected with an appropriate domexception.
... session in a method called onsessionstarted(), not shown.
mssitemodejumplistitemremoved - Web APIs
istener method object.addeventlistener("mssitemodejumplistitemremoved", handler, usecapture) general info synchronous no bubbles no cancelable no note this event is raised once for every item that has been removed since the last time mssitemodeshowjumplist was called.
...ventlistener("mssitemodejumplistitemremoved", handler, usecapture) general info synchronous no bubbles no cancelable no note this event is raised once for every item that has been removed since the last time mssitemodeshowjumplist was called.
msthumbnailclick - Web APIs
dge.
...property object.onmsthumbnailclick = handler; addeventlistener method object.addeventlistener("msthumbnailclick", handler, usecapture) general info synchronous no bubbles no cancelable no note the onmsthumbnailclick event is available only to documents that are launched from a pinned site shortcut.
Using the log role - Accessibility
the user is idle, unless aria-live=”assertive” has been set and in which case the user may be interrupted.
...ase the user may be interrupted.
Using the status role - Accessibility
e should be announced when the user is idle, unless aria-live=”assertive” has been set and in which case the user may be interrupted.
... has been set and in which case the user may be interrupted.
ARIA: contentinfo role - Accessibility
each page should only include one contentinfo landmark, created by either using the <footer> element or by declaring role="contentinfo".
...ter aria-label="footer"> <!-- footer content --> </footer> </body> redundant descriptions screen readers will announce the type of role the landmark is.
ARIA: Main role - Accessibility
t can be represented programmatically.
...ntains two main roles, say updating page content when triggered by javascript, the inactive main role's presence should be removed from assistive technology via techniques such as toggling the hidden attribute.
ARIA: search role - Accessibility
identify and navigate to large sections of the document.
...type="search" id="search-input" name="search" spellcheck="false"> <input value="submit" type="submit"> </form> accessibility concerns landmark roles are intended to be used sparingly, to identify larger overall sections of the document.
ARIA: Suggestion role - Accessibility
efault black strikethrough for deletions, and a black underline for insertions, but you’ll probably want to use accessibility concerns landmark roles are intended to be used sparingly, to identify larger overall sections of the document.
...re intended to be used sparingly, to identify larger overall sections of the document.
Alerts - Accessibility
he function is simple: it looks for an element with id “alert”, and if found, removes that from the document object model.
...d “alert”, and if found, removes that from the document object model.
Keyboard-navigable JavaScript widgets - Accessibility
active elements like <a> have this behavior by default, they don't need the attribute).
... non-native controls native
html elements that are interactive, like <a>, <input> and <select>, are already accessible by keyboards, so to use one of them is the fastest path to make components work with keyboards.
::first-letter (:first-letter) - CSS: Cascading Style Sheets
ration-color, text-decoration-line, text-decoration-style, box-shadow, float, vertical-align (only if float is none) css properties syntax /* css3 syntax */ ::first-letter /* css2 syntax */ :first-letter examples simple drop cap in this example we will use the ::first-letter pseudo-element to create a simple drop cap effect on the first letter of the paragraph coming right after the <h2>.
...dth: 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-letter on special punctuation and non-latin characters.
::part() - CSS: Cascading Style Sheets
the ::part css pseudo-element represents any element within a shadow tree that has a matching part attribute.
...or: #0c0c0d33; } tabbed-custom-element::part(tab):focus { box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3); } tabbed-custom-element::part(active) { color: #0060df; border-color: #0a84ff !important; } javascript let template = document.queryselector("#tabbed-custom-element"); globalthis.customelements.define(template.id, class extends
htmlelement { constructor() { super(); this.attachshadow({ mode: "open" }); this.shadowroot.appendchild(template.content); } }); result specifications specification status comment shadow partsthe definition of '::part' in that specification.
::placeholder - CSS: Cascading Style Sheets
e -ms-high-contrast labels placeholders are not a replacement for the <label> element.
...nput using a combination of the for and id attributes, assistive technology such as screen readers cannot parse <input> elements.
::slotted() - CSS: Cascading Style Sheets
the ::slotted() css pseudo-element represents any element that has been placed into a slot inside an
html template (see using templates and slots for more information).
... id="person-template"> <div> <h2>personal id card</h2> <slot name="person-name">name missing</slot> <ul> <li><slot name="person-age">age missing</slot></li> <li><slot name="person-occupation">occupation missing</slot></li> </ul> </div> </template> a custom element — <person-details> — is defined like so: customelements.define('person-details', class extends
htmlelement { constructor() { super(); let template = document.getelementbyid('person-template'); let templatecontent = template.content; const shadowroot = this.attachshadow({mode: 'open'}); let style = document.createelement('style'); style.textcontent = 'div { padding: 10px; border: 1px solid gray; width: 200px; margin: 10px; }' + ...
:defined - CSS: Cascading Style Sheets
font-style: italic; } /* selects any instance of a specific custom element */ simple-custom:defined { display: block; } syntax :defined examples hiding elements until they are defined the following snippets are taken from our defined-pseudo-class demo (see it live also).
...efined) { display: none; } simple-custom:defined { display: block; } this is useful if you have a complex custom element that takes a while to load into the page — you might want to hide instances of the element until definition is complete, so that you don't end up with flashes of ugly unstyled elements on the page specifications specification status comment
html living standardthe definition of ':defined' in that specification.
:fullscreen - CSS: Cascading Style Sheets
lass lets you configure your stylesheets to automatically adjust the size, style, or layout of content when elements switch back and forth between full-screen and traditional presentations.
...figure your stylesheets to automatically adjust the size, style, or layout of content when elements switch back and forth between full-screen and traditional presentations.
:link - CSS: Cascading Style Sheets
ntax :link examples by default, most browsers apply a special color value to visited links.
...e likely to remain, as most browsers do not set that property on visited links by default.
:visited - CSS: Cascading Style Sheets
ted selector.
...ef="">you've already visited this link.</a> css a { /* specify non-transparent defaults to certain properties, allowing them to be styled with the :visited state */ background-color: white; border: 1px solid white; } a:visited { background-color: yellow; border-color: hotpink; color: hotpink; } result specifications specification status comment
html living standardthe definition of ':visited' in that specification.
system - CSS: Cascading Style Sheets
entation will produce correct roman numerals only until the counter value of 3999.
...dditive-symbols: 1000 m, 900 cm, 500 d, 400 cd, 100 c, 90 xc, 50 l, 40 xl, 10 x, 9 ix, 5 v, 4 iv, 1 i; } ul { list-style: upper-roman; } result extends example this example will use the algorithm, symbols, and other properties of the lower-alpha counter style, but will remove the period ('.') after the counter representation, and enclose the characters in paranthesis; like (a), (b), etc.
@font-face - CSS: Cascading Style Sheets
ngs>; ] | [ font-variation-settings: <font-variation-settings>; ] | [ font-stretch: <font-stretch>; ] | [ font-weight: <font-weight>; ] | [ font-style: <font-style>; ] }where <family-name> = <string> | <custom-ident>+ examples specifying a downloadable font this example simply specifies a downloadable font to use, applying it to the entire body of the document: view the live example <
html> <head> <title>web font sample</title> <style type="text/css" media="screen, print"> @font-face { font-family: "bitstream vera serif bold"; src: url("https://mdn.mozillademos.org/files/2468/verasebd.ttf"); } body { font-family: "bitstream vera serif bold", serif } </style> </head> <body> this is bitstream vera serif bold.
...t: view the live example <
html> <head> <title>web font sample</title> <style type="text/css" media="screen, print"> @font-face { font-family: "bitstream vera serif bold"; src: url("https://mdn.mozillademos.org/files/2468/verasebd.ttf"); } body { font-family: "bitstream vera serif bold", serif } </style> </head> <body> this is bitstream vera serif bold.
aspect-ratio - CSS: Cascading Style Sheets
ure is specified as a <ratio> value representing the width-to-height aspect ratio of the viewport.
...edia (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> <input id="w" name="w" type="range" min="100" max="250" step="5" value="165"> <label id="hf" for="w">height:165</label> <input id="h" name="h" type="range" min="100" max="250" step="5" value="165"> <iframe id="outer" src="data:text/
html,<style> @media (min-aspect-ratio: 8/5) { div { background: %239af; } } @media (max-aspect-ratio: 3/2) { div { backgroun...
color-index - CSS: Cascading Style Sheets
le.
...it is a range feature, meaning that you can also use the prefixed min-color-index and max-color-index variants to query minimum and maximum values, respectively.
Detecting CSS animation support - CSS: Cascading Style Sheets
ish to handle that case by using javascript code to simulate a similar effect.
...ix + 'keyframes rotate { '+ 'from {' + keyframeprefix + 'transform:rotate( 0deg ) }'+ 'to {' + keyframeprefix + 'transform:rotate( 360deg ) }'+ '}'; if( document.stylesheets && document.stylesheets.length ) { document.stylesheets[0].insertrule( keyframes, 0 ); } else { var s = document.createelement( 'style' ); s.inner
html = keyframes; document.getelementsbytagname( 'head' )[ 0 ].appendchild( s ); } } this code looks at the value of animation; if it's false, we know we need to use our javascript fallback code to perform our animation.
CSS Backgrounds and Borders - CSS: Cascading Style Sheets
border-right-width border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width box-shadow tools using multiple backgrounds explains how to set one or more backgrounds on an element.
...der-top-left-radius border-top-right-radius border-top-style border-top-width border-width box-shadow tools using multiple backgrounds explains how to set one or more backgrounds on an element.
CSS Color - CSS: Cascading Style Sheets
css color is a css module that deals with colors, color types, color blending, opacity, and how you can apply these colors and effects to
html content.
... css color is a css module that deals with colors, color types, color blending, opacity, and how you can apply these colors and effects to
html content.
CSS Grid Layout - CSS: Cascading Style Sheets
css grid layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from
html primitives.
...a three-column track grid with new rows created at a minimum of 100 pixels and a maximum of auto.
Using CSS counters - CSS: Cascading Style Sheets
s initial value is 0.
...style-type: none; } li::before { counter-increment: section; /* increments only this instance of the section counter */ content: counters(section, ".") " "; /* combines the values of all instances of the section counter, separated by a period */ }
html <ol> <li>item</li> <!-- 1 --> <li>item <!-- 2 --> <ol> <li>item</li> <!-- 2.1 --> <li>item</li> <!-- 2.2 --> <li>item <!-- 2.3 --> <ol> <li>item</li> <!-- 2.3.1 --> <li>item</li> <!-- 2.3.2 --> </ol> <ol> <li>item</li> <!-- 2.3.1 --> <li>item</li> ...
Using CSS transitions - CSS: Cascading Style Sheets
>; } examples simple example this example performs a four-second font size transition with a two-second delay between the time the user mouses over the element and the beginning of the animation effect: #delay { font-size: 14px; transition-property: font-size; transition-duration: 4s; transition-delay: 2s; } #delay:hover { font-size: 36px; } multiple animated properties example
html content <body> <p>the box below combines transitions for: width, height, background-color, transform.
...sition-duration: 3s, 5s; } using transitions when highlighting menus a common use of css is to highlight items in a menu as the user hovers the mouse cursor over them.
Layout and the containing block - CSS: Cascading Style Sheets
by the edge of the padding box of the nearest ancestor element that has the following: a transform or perspective value other than none a will-change value of transform or perspective a filter value other than none or a will-change value of filter (only works on firefox).
...ue, the computed value depends on the element's containing block.
CSS reference - CSS: Cascading Style Sheets
t is not necessarily a direct child.
...omputed value initial value resolved value specified value used value layout block formatting context box model containing block layout mode margin collapsing replaced elements stacking context visual formatting model dom-css / cssom major object types documentorshadowroot.stylesheets stylesheets[i].cssrules cssrules[i].csstext (selector & style) cssrules[i].selectortext
htmlelement.style
htmlelement.style.csstext (just style) element.classname element.classlist important methods cssstylesheet.insertrule() cssstylesheet.deleterule() ...
Viewport concepts - CSS: Cascading Style Sheets
g the width and height attributes of the <svg> element.
...0px) and (max-width: 500px) { /* css goes here */ } generally, when you write the above media query, the styles are applied if the viewport, generally the browser window, is between 400px and 500px, inclusive.
backdrop-filter - CSS: Cascading Style Sheets
entage>, <percentage>, <alpha-value>?
...20px 40px; }
html, body { height: 100%; width: 100%; } body { background-image: url(https://picsum.photos/id/1080/6858/4574), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172)); background-position: center center; background-repeat: no-repeat; background-size: cover; } .container { align-items: center; display: flex; justify-content: center; height: 100%; width: 100%; }
html <div class="container"> <div class="box"> <p>backdrop-filter: blur(10px)</p> </div> </div> result specifications specification status comment filter effects module level 2the definition of 'backdrop-filter' in that specification.
background-attachment - CSS: Cascading Style Sheets
relative to the element itself and does not scroll with its contents.
... </p> css p { background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"); background-attachment: fixed; } result multiple background images this property supports multiple background images.
border-image - CSS: Cascading Style Sheets
rete formal syntax <'border-image-source'> | <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>?
...{ width: 200px; background-color: #ffa; border: 36px solid orange; margin: 30px; padding: 10px; border-image: url("https://udn.realityripple.com/samples/2c/fa0192d18e.png") /* source */ 27 / /* slice */ 36px 28px 18px 8px / /* width */ 18px 14px 9px 4px /* outset */ round; /* repeat */ } result gradient
html <div id="gradient">this element is surrounded by a gradient-based border image!</div> css #gradient { width: 200px; border: 30px solid; border-image: repeating-linear-gradient(45deg, #f33, #3bf, #f33 30px) 60; padding: 20px; } result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-image' ...
break-after - CSS: Cascading Style Sheets
umn-span: all) and a series of <h2>s and paragraphs laid out in multiple columns using column-width: 200px.
...eo, malesuada quis nisl nec, volutpat egestas tellus.
calc() - CSS: Cascading Style Sheets
...
... 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.
clamp() - CSS: Cascading Style Sheets
font-size will be set at 1.8rem, until the computed value of 2.5vw becomes greater than that of 1.8rem.
...>integer rutrum sollicitudin tellus, quis cursus nulla scelerisque nec.
column-gap (grid-column-gap) - CSS: Cascading Style Sheets
elements, flex containers, grid containersinheritednopercentagesrefer to corresponding dimension of the content areacomputed valueas specified, with <length>s made absolute, and normal computing 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: 100px; column-gap: 20px; } #flexbox > div { border: 1px solid green; background-color: lime; flex: auto; } result grid layout
html <div id="grid"> <div></div> <div></div> <div></div> </div> css #grid { grid-column-gap: 20px; } #grid { display: grid; he...
... lime; flex: auto; } result grid layout
html <div id="grid"> <div></div> <div></div> <div></div> </div> css #grid { grid-column-gap: 20px; } #grid { display: grid; height: 100px; grid-template-columns: repeat(3, 1fr); grid-template-rows: 100px; column-gap: 20px; } #grid > div { border: 1px solid green; background-color: lime; } result multi-column layout
html <p class="content-box"> this is some multi-column text with a 40px column gap created with the css `column-gap` property.
counter() - CSS: Cascading Style Sheets
lic simple predefined counter style, a complex longhand east asian or ethiopic predefined counter style, or other predefined counter style.
...here <counter-style-name> = <custom-ident> examples default value compared to upper roman
html <ol> <li></li> <li></li> <li></li> </ol> css ol { counter-reset: listcounter; } li { counter-increment: listcounter; } li::after { content: "[" counter(listcounter) "] == [" counter(listcounter, upper-roman) "]"; } result decimal-leading-zero compared to lower-alpha
html <ol> <li></li> <li></li> <li></li> </ol> css ol { counter-reset: count; } li { counter-increment: count; } li::after { content: "[" counter(count, decimal-leading-zero) "] == [" counter(count, lower-alpha) "]"; } result specifications specification status comment css lists module level 3the definition of 'css counters' in that specifi...
counters() - CSS: Cascading Style Sheets
decimal <string> any number of text characters.
... <li></li> </ol> </li> </ol> </li> </ol> css ol { counter-reset: listcounter; } li { counter-increment: listcounter; } li::marker { content: counters(listcounter, '.', upper-roman) ') '; } li::before { content: counters(listcounter, ".") " == " counters(listcounter, ".", lower-roman) ; } result decimal-leading-zero compared to lower-alpha
html <ol> <li> <ol> <li></li> <li></li> <li></li> </ol> </li> <li></li> <li></li> <li> <ol> <li></li> <li> <ol> <li></li> <li></li> <li></li> </ol> </li> </ol> </li> </ol> css ol { counter-reset: count; } li { counter-increment: count; } li::marker { ...
direction - CSS: Cascading Style Sheets
or arabic), and ltr for those written from left to right (like english and most other languages).
...ned within a document (e.g., with
html's dir attribute) rather than through direct use of the direction property.
<display-box> - CSS: Cascading Style Sheets
to no longer be announced by screen reading technology.
...xt</p> <p class="secret">invisible text</p> css p.secret { display: none; } result display: contents in this example the outer <div> has a 2-pixel red border and a width of 300px.
font-smooth - CSS: Cascading Style Sheets
ize> = 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.
...amples basic usage example the following example shows the safari/chromium and firefox equivalents that turn on font-smoothing on macos.
font-style - CSS: Cascading Style Sheets
the oblique keyword.
...ere under the terms of its license: https://github.com/typenetwork/amstelvar/blob/master/ofl.txt */ @font-face { src: url('https://mdn.mozillademos.org/files/16044/amstelvaralpha-vf.ttf'); font-family:'amstelvaralpha'; font-style: normal; } label { font: 1rem monospace; } .container { max-height: 150px; overflow: scroll; } .sample { 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 slantinput = document.queryselector('#slant'); let sampletext = doc...
font - CSS: Cascading Style Sheets
% of the parent element or default value (if no parent element present).
...ent.getelementbyid(curelemname); curelem.value = oradio[i].value; return oradio[i].value; } } } setcss = function () { getproperties(); injectcss(shorttext); } injectcss = function(cssfragment) { old = document.body.getelementsbytagname("style"); if (old.length > 1) { old[1].parentelement.removechild(old[1]); } css = document.createelement("style"); css.inner
html = ".fontshorthand{font: " + cssfragment + "}"; document.body.appendchild(css); } setcss(); specifications specification status comment css fonts module level 3the definition of 'font' in that specification.
justify-self - CSS: Cascading Style Sheets
y-items value of stretch — the default — which causes the grid items to stretch across the entire width of their cells.
...tems are then given different values of justify-self, to show how these override the justify-items value.
mask-type - CSS: Cascading Style Sheets
elative luminance values must be used when applying it.
...ght="0"> <defs> <mask id="m" maskcontentunits="objectboundingbox" style="mask-type:alpha"> <rect x=".1" y=".1" width=".8" height=".8" fill="red" fill-opacity="0.7"/> </mask> </defs> </svg> css .redsquare { height: 100px; width: 100px; background-color: rgb(128, 128, 128); border: solid 1px black; mask: url("#m"); } result setting a luminance mask
html <div class="redsquare"></div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> <defs> <mask id="m" maskcontentunits="objectboundingbox" style="mask-type:luminance"> <rect x=".1" y=".1" width=".8" height=".8" fill="red" fill-opacity="0.7"/> </mask> </defs> </svg> css .redsquare { height...
mix-blend-mode - CSS: Cascading Style Sheets
ss="item firefox"></div> <svg viewbox="0 0 150 150"> <ellipse class="item r" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item g" cx="75" cy="75" rx="25" ry="70"></ellipse> <ellipse class="item b" cx="75" cy="75" rx="25" ry="70"></ellipse> </svg> </div> </div> </div> </div> </div> </div>
html,body { height: 100%; box-sizing: border-box; background: #eee; } .grid { width: 100%; display: flex; font: 1em monospace; } .row { display: flex; flex: 1 auto; flex-direction: row; flex-wrap: wrap; height: auto; } .col { display: flex; flex: 1 auto; flex-direction: column; height: auto; } .cell { margin: .5em; padding: .5em; background-color: #fff; overfl...
...blend-mode: hard-light; } .soft-light .item { mix-blend-mode: soft-light; } .difference .item { mix-blend-mode: difference; } .exclusion .item { mix-blend-mode: exclusion; } .hue .item { mix-blend-mode: hue; } .saturation .item { mix-blend-mode: saturation; } .color .item { mix-blend-mode: color; } .luminosity .item { mix-blend-mode: luminosity; } using mix-blend-mode with
html html <div class="isolate"> <div class="circle circle-1"></div> <div class="circle circle-2"></div> <div class="circle circle-3"></div> </div> css .circle { width: 80px; height: 80px; border-radius: 50%; mix-blend-mode: screen; position: absolute; } .circle-1 { background: red; } .circle-2 { background: lightgreen; left: 40px; } .circle-3 { background: blue; left: ...
object-position - CSS: Cascading Style Sheets
, percentage, or calc formal syntax <position>where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
...alc formal syntax <position>where <position> = [ [ left | center | right ] | [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]?
opacity - CSS: Cascading Style Sheets
ast 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 elementsinheritednocomputed 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 { opacity: 0.2; /* barely see the text over the background */ } .medium { opacity: 0.5; /* see the text more clearly over the background */ } .heavy { opacity: 0.9; /* see the text very clearly o...
...="medium">this is easier to see.</div> <div class="heavy">this is very easy to see.</div> css div { background-color: yellow; } .light { opacity: 0.2; /* barely see the text over the background */ } .medium { opacity: 0.5; /* see the text more clearly over the background */ } .heavy { opacity: 0.9; /* see the text very clearly over the background */ } result setting opacity on hover
html <img src="//developer.mozilla.org/static/img/opengraph-logo.png" alt="mdn logo" width="128" height="146" class="opacity"> css img.opacity { opacity: 1; filter: alpha(opacity=100); /* ie8 and lower */ zoom: 1; /* triggers "haslayout" in ie 7 and lower */ } img.opacity:hover { opacity: 0.5; filter: alpha(opacity=50); zoom: 1; } result specifications specification...
<percentage> - CSS: Cascading Style Sheets
he interpolation is determined by the timing function associated with the animation.
...e;"> width: 50%, left margin: 20% </div> <div style="width:30%; margin-left:60%; background-color:pink;"> width: 30%, left margin: 60% </div> </div> the above
html will output: font-size <div style="font-size:18px;"> <p>full-size text (18px)</p> <p><span style="font-size:50%;">50% (9px)</span></p> <p><span style="font-size:200%;">200% (36px)</span></p> </div> the above
html will output: specifications specification status comment css values and units module level 4the definition of '<percentage>' in that specification.
perspective - CSS: Cascading Style Sheets
neapplies totransformable elementsinheritednocomputed 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.
...totransformable elementsinheritednocomputed 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-self - CSS: Cascading Style Sheets
which causes the grid items to stretch across the entire width of their cells.
...ifferent values of place-self, to show how these override the default placements.
resize - CSS: Cascading Style Sheets
rflow other than visible, and optionally replaced elements representing images or videos, and iframesinheritednocomputed 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.
...nts are resizable by default.
right - CSS: Cascading Style Sheets
itial valueautoapplies topositioned elementsinheritednopercentagesrefer to the width of the containing blockcomputed 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 #relative { width: 100px; height: 100px; background-color: #ffc7e4; position: relative; top: 20px; left: 20px; } #absolute { width: 100px; height: 100px; background-color: #ffd7c2; position: absolute; bottom: 10px; right: 20px; } result declaring both left and righ...
... will stretch to meet both, unless other constraints prevent it from doing so.
ruby-position - CSS: Cascading Style Sheets
in text for horizontal scripts and left to it for vertical scripts.
...ormal definition initial valueoverapplies toruby annotations containersinheritedyescomputed 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> </ruby> css ruby { ruby-position:under; } result specifications specification status comment css ruby layout module level 1the definition of 'ruby-position' in that specification.
scroll-margin-inline-end - CSS: Cascading Style Sheets
cifiedanimation typeby computed 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.
...ation typeby computed 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
ecifiedanimation typeby computed 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.
...mation typeby computed 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
danimation typeby computed 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.
... typeby computed 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 - CSS: Cascading Style Sheets
edanimation typeby computed 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.
...n typeby computed 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.
shape-outside - CSS: Cascading Style Sheets
2 specification path().
...number> | <percentage><hue> = <number> | <angle><linear-color-stop> = <color> <color-stop-length>?<linear-color-hint> = <length-percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples funneling text
html <div class="main"> <div class="left"></div> <div class="right"></div> <p> sometimes a web page's text content appears to be funneling your attention towards a spot on the page to drive you to follow a particular link.
text-decoration-style - CSS: Cascading Style Sheets
rce for this interactive example is stored in a github repository.
...ng a wavy underline .example { -moz-text-decoration-line: underline; -moz-text-decoration-style: wavy; -moz-text-decoration-color: red; -webkit-text-decoration-line: underline; -webkit-text-decoration-style: wavy; -webkit-text-decoration-color: red; } css .wavy { text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; }
html <p class="wavy">this text has a wavy red line beneath it.</p> results specifications specification status comment css text decoration module level 3the definition of 'text-decoration-style' in that specification.
text-emphasis-position - CSS: Cascading Style Sheets
cannot be set, and therefore are not reset either, using the text-emphasis shorthand property.
... 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-indent - CSS: Cascading Style Sheets
l definition initial value0applies toblock containersinheritedyespercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute length, plus any keywords as specifiedanimation typea length, percentage or calc(); formal syntax <length-percentage> && hanging?
...p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> css p { text-indent: 5em; background: powderblue; } result percentage indent
html <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> css p { text-indent: 30%; background: plum; } result specifications ...
rotate() - CSS: Cascading Style Sheets
ockwise one.
...kyblue; } .rotated { transform: rotate(45deg); /* equal to rotatez(45deg) */ background-color: pink; } result combining rotation with another transformation if you want apply multiple transformations to an element, be careful about the order in which you specify your transformations.
rotate3d() - CSS: Cascading Style Sheets
presented on the plane.
...a))1+(1-cos(a))(z2-1)t0001 homogeneous coordinates on ℝℙ3 examples rotating on the y-axis
html <div>normal</div> <div class="rotated">rotated</div> css body { perspective: 800px; } div { width: 80px; height: 80px; background-color: skyblue; } .rotated { transform: rotate3d(0, 1, 0, 60deg); background-color: pink; } result rotating on a custom axis
html <div>normal</div> <div class="rotated">rotated</div> css body { perspective: 800px; } div { width: 80px; height: 80px; background-color: skyblue; } .rotated { transform: rotate3d(1, 2, -1, 192deg); background-color: pink; } result specifications specification status comment css transforms level 2the definition of 'rotate3d()' in that specificatio...
scale() - CSS: Cascading Style Sheets
also, consider making use of the prefers-reduced-motion media feature — use it to write a media query that will turn off animations if the user has reduced animation specified in their system preferences.
....3.3 | w3c understanding wcag 2.1 examples scaling the x and y dimensions together
html <div>normal</div> <div class="scaled">scaled</div> css div { width: 80px; height: 80px; background-color: skyblue; } .scaled { transform: scale(0.7); /* equal to scalex(0.7) scaley(0.7) */ background-color: pink; } result scaling x and y dimensions separately, and translating the origin
html <div>normal</div> <div class="scaled">scaled</div> css div { width: 80px; height: 80px; background-color: skyblue; } .scaled { transform: scale(2, 0.5); /* equal to scalex(2) scaley(0.5) */ transform-origin: left; background-color: pink; } result specifications specification status comment css transforms level 1the definition of 'scale()' in that ...
skew() - CSS: Cascading Style Sheets
e is 0, resulting in a purely horizontal skewing.
...0001 1tan(ax)0tan(ay)10001 1tan(ax)00tan(ay)10000100001 [1 tan(ay) tan(ax) 1 0 0] examples using a single x-angle
html <div>normal</div> <div class="skewed">skewed</div> css div { width: 80px; height: 80px; background-color: skyblue; } .skewed { transform: skew(10deg); /* equal to skewx(10deg) */ background-color: pink; } result using two angles
html <div>normal</div> <div class="skewed">skewed</div> css div { width: 80px; height: 80px; background-color: skyblue; } .skewed { transform: skew(10deg, 10deg); background-color: pink; } result specifications specification status comment css transforms level 1the definition of 'skew()' in that specification.
translate() - CSS: Cascading Style Sheets
ordinates on ℝ3 homogeneous coordinates on ℝℙ3 a translation is not a linear transformation in ℝ2 and can't be represented using a cartesian-coordinate matrix.
...entage> , <length-percentage>?) examples using a single-axis translation
html <div>static</div> <div class="moved">moved</div> <div>static</div> css div { width: 60px; height: 60px; background-color: skyblue; } .moved { transform: translate(10px); /* equal to: translatex(10px) or translate(10px, 0) */ background-color: pink; } result combining y-axis and x-axis translation
html <div>static</div> <div class="moved">moved</div> <div>static</div> css div { width: 60px; height: 60px; background-color: skyblue; } .moved { transform: translate(10px, 10px); background-color: pink; } result specifications specification status comment css transforms level 1the definition of 'translate()' in that specification.
translate3d() - CSS: Cascading Style Sheets
eneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 this transformation applies to the 3d space and can't be represented on the plane.
... examples using a single axis translation
html <div>static</div> <div class="moved">moved</div> <div>static</div> css div { width: 60px; height: 60px; background-color: skyblue; } .moved { /* equivalent to perspective(500px) translatex(10px) */ transform: perspective(500px) translate3d(10px, 0, 0px); background-color: pink; } result combining z-axis and x-axis translation
html <div>static</div> <div class="moved">moved</div> <div>static</div> css div { width: 60px; height: 60px; background-color: skyblue; } .moved { transform: perspective(500px) translate3d(10px, 0, 100px); background-color: pink; } result specifications specification status comment css transforms level 2the definition of 'translate3d()' in that specifica...
<transform-function> - CSS: Cascading Style Sheets
() skews an element in the vertical direction.
...forms, and a select menu allowing you to choose different transform functions to transform the cube with, so you can compare the effects of the different types.
translate - CSS: Cascading Style Sheets
ormal definition initial valuenoneapplies totransformable elementsinheritednopercentagesrefer to the size of bounding boxcomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typea transformcreates stacking contextyes formal syntax none | <length-percentage> [ <length-percentage> <length>?
... the size of bounding boxcomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typea transformcreates stacking contextyes formal syntax none | <length-percentage> [ <length-percentage> <length>?
user-select - CSS: Cascading Style Sheets
r-select: initial; user-select: unset; /* mozilla-specific values */ -moz-user-select: none; -moz-user-select: text; -moz-user-select: all; /* webkit-specific values */ -webkit-user-select: none; -webkit-user-select: text; -webkit-user-select: all; /* doesn't work in safari; use only "none" or "text", or else it will allow typing in the <
html> container */ /* microsoft-specific values */ -ms-user-select: none; -ms-user-select: text; -ms-user-select: element; note: user-select is not an inherited property, though the initial auto value makes it behave like it is inherited most of the time.
...; however, the selection will be contained by the bounds of that element.
visibility - CSS: Cascading Style Sheets
columns.
...l 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.
zoom - CSS: Cascading Style Sheets
.
...sinheritednocomputed 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" class="circle"></div> <div id="b" class="circle"></div> <div id="c" class="circle"></div> css div.circle { width: 25px; height: 25px; border-radius: 100%; text-align: center; vertical-align: middle; display: inline-block; zoom: 1.5; } div#a { background-color: gold; zoom: normal; } div#b { background-color: green; zoom: 200%; } div#c { background-color: blue...
CSS: Cascading Style Sheets
cascading style sheets (css) is a stylesheet language used to describe the presentation of a document written in
html or xml (including xml dialects such as svg, mathml or x
html).
...ading style sheets) is used to style and layout web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.
Media buffering, seeking, and time ranges - Developer guides
19 21 for this audio instance, the associated timeranges object would have the following available properties: myaudio.buffered.length; // returns 2 myaudio.buffered.start(0); // returns 0 myaudio.buffered.end(0); // returns 5 myaudio.buffered.start(1); // returns 15 myaudio.buffered.end(1); // returns 19 to try out and visualize buffered time ranges we can write a little bit of
html: <p> <audio id="my-audio" controls> <source src="music.mp3" type="audio/mpeg"> </audio> </p> <p> <canvas id="my-canvas" width="300" height="20"> </canvas> </p> and a little bit of javascript: window.onload = function(){ var myaudio = document.getelementbyid('my-audio'); var mycanvas = document.getelementbyid('my-canvas'); var context = mycanvas.getcontext('2d'); ...
...'t then audio.seekable will be equivalent to audio.buffered, which will give a valid indication of the end of seekable media.
Challenge solutions - Developer guides
y the red letters are underlined.
...unter-increment: headnum; } boxes ocean border challenge add one rule to your stylesheet, making a wide border all around the oceans in a color that reminds you of the sea.
Media events - Developer guides
various events are sent when handling media that are embedded in
html documents using the <audio> and <video> elements; this section lists them and provides some helpful information about using them.
...ecome empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to reload it.
Event developer guide - Developer guides
event, mouse events, mouse gesture events, and both touch events and the earlier mozilla experimental touch events, now deprecated.
...eate and dispatch dom events.
Separate sites for mobile and desktop - Developer guides
it is right to choose this option firstly, if your target audience includes users on older or low-end feature phones, it is worth noting that you may need to employ this strategy to some degree no matter what.
...formats like x
html-mp or the older wml.
Choosing between www and non-www URLs - HTTP
urls as the canonical type, you should redirect all www urls to their equivalent url without the www.
... (when the canonical domain is example.org) the server answers with a code 301 with the header location: http://example.org/whaddup.
HTTP caching - HTTP
however, common http caches are typically limited to caching responses to get and may decline other methods.
...read.
Configuring servers for Ogg media - HTTP
html <audio> and <video> elements allow media presentation without the need for the user to install any plug-ins or other software to do so.
...clude key frames at regular intervals.
Content negotiation - HTTP
in http, content negotiation is the mechanism that is used for serving different representations of a resource at the same uri, so that the user agent can specify which is best suited for the user (for example, which language of a document, which image format, or which content encoding).
...ader the accept header lists the mime types of media resources that the agent is willing to process.
Using HTTP cookies - HTTP
he header attributes mentioned below, refer to the set-cookie reference article.
...cookie-name>=<cookie-value> this shows the server sending headers to tell the client to store a pair of cookies: http/2.0 200 ok content-type: text/
html set-cookie: yummy_cookie=choco set-cookie: tasty_cookie=strawberry [page content] then, with every subsequent request to the server, the browser sends back all previously stored cookies to the server using the cookie header.
Feature-Policy: autoplay - HTTP
the http feature-policy header autoplay directive controls whether the current document is allowed to autoplay media requested through the
htmlmediaelement interface.
... the http feature-policy header autoplay directive controls whether the current document is allowed to autoplay media requested through the
htmlmediaelement interface.
Feature-Policy - HTTP
owed to gather information about the acceleration of the device through the accelerometer interface.
...t-sensor controls whether the current document is allowed to gather information about the amount of light in the environment around the device through the ambientlightsensor interface.
Index - HTTP
http feature-policy header provides a mechanism to allow and deny the use of browser features in its own frame, and in iframes that it embeds.
...nd in iframes that it embeds.
SameSite cookies - HTTP
specify it explicitly to clearly communicate your intent which samesite policy applies to your cookie.
...tp_host}" "^example\.org$" [nc] rewriterule "^(.*)" "https://www.example.org/index.
html" [r=301,l,qsa] rewriterule "^(.*)\.ht$" "index.php?nav=$1 [nc,l,qsa,co=rewriterule;01;https://www.example.org;30/;samesite=none;secure] rewriterule "^(.*)\.htm$" "index.php?nav=$1 [nc,l,qsa,co=rewriterule;02;https://www.example.org;30/;samesite=none;secure] rewriterule "^(.*)\.
html$" "index.php?nav=$1 [nc,l,qsa,co=rewriterule;03;https://www.example.org;30/;samesite=none;secure] [...] rewriterule "^admin/(.*)\.
html$" "admin/index.php?nav=$1 [nc,l,qsa,co=rewriterule;09;https://www.example.org:30/;samesite=strict;secure] specifications specification title rfc 6265, section 4.1: set-cookie http state management mechanism draft-ietf-...
GET - HTTP
the http get method requests a representation of the specified resource.
... the http get method requests a representation of the specified resource.
HEAD - HTTP
umed to describe the response which a similar get request would have received.
...r get request would have received.
TRACE - HTTP
bed below, back to the client as the message body of a 200 (ok) response with a content-type of message/http.
...body of a 200 (ok) response with a content-type of message/http.
HTTP
hypertext transfer protocol (http) is an application-layer protocol for transmitting hypermedia documents, such as
html.
...then returns the cookie's value with every request to the same server in the form of a cookie request header.
Grammar and types - JavaScript
an error too function f() { const g = 5; var g; //statements } however, the properties of objects assigned to constants are not protected, so the following statement is executed without problems.
...ever, the properties of objects assigned to constants are not protected, so the following statement is executed without problems.
Arrow function expressions - JavaScript
@ vm51800:1 > f3 = x => (z1 = x + 1) x => (z1 = x + 1) > z1 vm51891:1 uncaught referenceerror: z1 is not defined at <anonymous>:1:1 (anonymous) @ vm51891:1 > f3(10) 11 > z1 11 f2 illustrates that when explicitly setting the arrow function to apply strict mode, it does throw an error when attempting to assign an undeclared variable.
...eferenceerror: z1 is not defined at <anonymous>:1:1 (anonymous) @ vm51891:1 > f3(10) 11 > z1 11 f2 illustrates that when explicitly setting the arrow function to apply strict mode, it does throw an error when attempting to assign an undeclared variable.
String.prototype.blink() - JavaScript
the blink() method creates a <blink>
html element that causes a string to blink.
... the blink() method creates a <blink>
html element that causes a string to blink.
String.prototype.bold() - JavaScript
the bold() method creates a <b>
html element that causes a string to be displayed as bold.
... the bold() method creates a <b>
html element that causes a string to be displayed as bold.
String.prototype.fixed() - JavaScript
the fixed() method creates a <tt>
html element that causes a string to be displayed in fixed-pitch font.
... the fixed() method creates a <tt>
html element that causes a string to be displayed in fixed-pitch font.
String.prototype.italics() - JavaScript
the italics() method creates an <i>
html element that causes a string to be italic.
... the italics() method creates an <i>
html element that causes a string to be italic.
String.prototype.small() - JavaScript
the small() method creates a <small>
html element that causes a string to be displayed in a small font.
... the small() method creates a <small>
html element that causes a string to be displayed in a small font.
String.prototype.strike() - JavaScript
the strike() method creates a <strike>
html element that causes a string to be displayed as struck-out text.
... the strike() method creates a <strike>
html element that causes a string to be displayed as struck-out text.
String.prototype.sub() - JavaScript
the sub() method creates a <sub>
html element that causes a string to be displayed as subscript.
... the sub() method creates a <sub>
html element that causes a string to be displayed as subscript.
String.prototype.sup() - JavaScript
the sup() method creates a <sup>
html element that causes a string to be displayed as superscript.
... the sup() method creates a <sup>
html element that causes a string to be displayed as superscript.
String - JavaScript
om the beginning of the string.
...f() returns the primitive value of the specified object.
WebAssembly.instantiate() - JavaScript
webassembly function that is exported by the instance.
...: function(arg) { console.log(arg); } } }; fetch('simple.wasm').then(response => response.arraybuffer() ).then(bytes => webassembly.instantiate(bytes, importobject) ).then(result => result.instance.exports.exported_func() ); note: you can also find this example at index.
html on github (view it live also).
JavaScript
e complete course is available for a small one-time payment.
...questions tagged with "javascript".
MathML attribute reference - MathML
divstyle <mlongdiv> controls the style of the long division layout.
...<mo>, <mpadded> the amount of space before the operator (see length for values and units).
<msubsup> - MathML
the mathml <msubsup> element is used to attach both a subscript and a superscript, together, to an expression.
...ubscript and a superscript, together, to an expression.
<msup> - MathML
the mathml <msup> element is used to attach a superscript to an expression.
...mathml <msup> element is used to attach a superscript to an expression.
<mtext> - MathML
nal meaning, such as comments or annotations.
...al meaning, use <mi> and <mo> instead.
MathML
ew mozilla forums...
...x os webapp, firefox add-on, using in a web page, js program etc) latexml - convert latex documents into
html+mathml web pages web equation - turn handwritten equations into mathml or latex mathjax - cross-browser javascript display engine for mathematics.
Web audio codec guide - Web media technologies
20 khz[3] latency 5 ms to 66.5 ms browser compatibility feature chrome edge firefox internet explorer opera safari opus support 33 14 15 no 20 11[2] this information refers to support for opus in
html <audio> and <video> elements, and not to webrtc.
... audio frequency bandwidth latency at least 100 ms browser compatibility feature chrome edge firefox internet explorer opera safari vorbis support 4 17 3.5 no 11.5 no this information refers to support for vorbis in
html <audio> and <video> elements, and not to webrtc.
Understanding latency - Web Performance
equests will have less latency because the connection to the server is already set.
... latency describes the amount of delay on a network or internet connection.
How to make PWAs installable - Progressive web apps (PWAs)
nu, or an icon on the desktop), and a background color to use in loading or splash screens.
...", "description": "progressive web app that lists games submitted to the a-frame category in the js13kgames 2017 competition.", "icons": [ { "src": "icons/icon-32.png", "sizes": "32x32", "type": "image/png" }, // ...
SVG Styling Attributes - SVG: Scalable Vector Graphics
the svg styling attributes are all the attributes that can be specified on any svg element to apply css styling effects.
...e all the attributes that can be specified on any svg element to apply css styling effects.
begin - SVG: Scalable Vector Graphics
an event and an optional offset that determines the time at which the element's animation should begin.
...begin-5-accesskey.svg specifications specification status comment svg animations level 2the definition of 'begin for <discard>' in that specification.
class - SVG: Scalable Vector Graphics
(u+000c).
...fill: #00cc00; } circle.circleclass { stroke: #006600; fill: #cc0000; } ]]> </style> <rect class="rectclass" x="10" y="10" width="100" height="100"/> <circle class="circleclass" cx="40" cy="50" r="26"/> </svg> </body> </
html> elements the following elements can use the class attribute: <a> <altglyph> <circle> <clippath> <defs> <desc> <ellipse> <feblend> <fecolormatrix> <fecomponenttransfer> <fecomposite> <feconvolvematrix> <fediffuselighting> <fedisplacementmap> <feflood> <fegaussianblur> <feimage> <femerge> <femorphology> <feoffset> <fespecularlighting> <fetile> <feturbulence> <filter> ...
cx - SVG: Scalable Vector Graphics
the cx attribute define the x-axis coordinate of a center point.
... default value 0 animatable yes note: starting with svg2 cx, is a geometry property, meaning this attribute can also be used as css property for ellipses.
cy - SVG: Scalable Vector Graphics
the cy attribute define the y-axis coordinate of a center point.
... default value 0 animatable yes note: starting with svg2, cy is a geometry property meaning this attribute can also be used as a css property for ellipses.
height - SVG: Scalable Vector Graphics
wenty five elements are using this attribute: <feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fegaussianblur>, <feimage>, <femerge>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <image>, <mask>, <pattern>, <rect>, <svg>, and <use>
html,body,svg { height:100% } <svg viewbox="0 0 300 100" xmlns="http://www.w3.org/2000/svg"> <!-- with a height of 0 or less, nothing will be rendered --> <rect y="0" x="0" width="90" height="0"/> <rect y="0" x="100" width="90" height="60"/> <rect y="0" x="200" width="90" height="100%"/> </svg> feblend for <feblend>, height defines the vertical length for the rendering area of the primi...
...al length for the rectangle.
mask - SVG: Scalable Vector Graphics
the mask attribute is a presentation attribute mainly used to bind a given <mask> element with the element the attribute belongs to.
...th>, <pattern>, <polygon>, <polyline>, <rect>, <svg>, <symbol>, <text>, <use> usage notes value see the css property mask default value none animatable yes specifications specification status comment css masking module level 1the definition of 'mask' in that specification.
stroke - SVG: Scalable Vector Graphics
g paint servers like gradients or patterns) used to paint the outline of the shape; note: as a presentation attribute stroke can be used as a css property.
... firefox android ?
width - SVG: Scalable Vector Graphics
wenty five elements are using this attribute: <feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <fediffuselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fegaussianblur>, <feimage>, <femerge>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile>, <feturbulence>, <filter>, <foreignobject>, <image>, <mask>, <pattern>, <rect>, <svg>, and <use>
html,body,svg { height:100% } <svg viewbox="0 0 100 300" xmlns="http://www.w3.org/2000/svg"> <!-- with a width of 0 or less, nothing will be rendered --> <rect x="0" y="0" width="0" height="90"/> <rect x="0" y="100" width="60" height="90"/> <rect x="0" y="200" width="100%" height="90"/> </svg> feblend for <feblend>, width defines the horizontal length for the rendering area of the primi...
...ntal length for the rectangle.
<linearGradient> - SVG: Scalable Vector Graphics
the <lineargradient> element lets authors define linear gradients that can be applied to fill or stroke of graphical elements.
... the <lineargradient> element lets authors define linear gradients that can be applied to fill or stroke of graphical elements.
<radialGradient> - SVG: Scalable Vector Graphics
the <radialgradient> element lets authors define radial gradients that can be applied to fill or stroke of graphical elements.
... the <radialgradient> element lets authors define radial gradients that can be applied to fill or stroke of graphical elements.
<text> - SVG: Scalable Vector Graphics
the svg <text> element draws a graphics element consisting of text.
...is different than being hidden by default, as setting the display property won't show the text.
SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
implementation status unknown 0 0 as default value of transform-origin except root <svg> and <svg> children of <foreign> implementation status unknown use of white-space instead of deprecated xml:space attribute in ua style sheet implementation status unknown @font-face, ::first-letter and ::first-line on <text> implementation status unknown svg and
html style sheets in
html document with inline svg applying to whole document content implementation status unknown presentation attributes on any svg namespaced element implementation status unknown display behavior of <style> defined via ua style sheet implementation status unknown !important user agent style rules controlling never-rendered elements implementa...
...shpatch) not implemented (bug 1238882) <hatch> not implemented (bug 1239147) <hatchpath> (renamed hatchpath) not implemented (bug 1239147) display behavior of paint server elements defined by ua style sheet not implemented clipping, masking, and compositing change notes overflow respected on outermost <svg> elements inline in
html implementation status unknown interactivity change notes tabindex attribute implemented (bug 778654) bounding-box on pointer-events not implemented (bug 945187) load, abort, error, and unload instead of svgload, svgabort, svgerror, and svgunload not implemented (bug 620002) only structurally external elements and outermost <s...
SVG and CSS - SVG: Scalable Vector Graphics
kseagreen; stroke: none; } #inner-petals .segment:hover > .segment-edge { stroke: green; } open the document in your svg-enabled browser.
...ay" cx="0" cy="0" r="200" stroke="none" fill="url(#fade)"/> <use id="outer-petals" xlink:href="#petals"/> <use id="inner-petals" xlink:href="#petals" transform="rotate(9) scale(0.33)"/> </g> </svg> what next?
XML: Extensible Markup Language
the extensible markup language is a strict serialisation of the document object model.
...nxml is a markup language similar to
html.
Communicating using "port" - Archive of obsolete content
();" + " event.preventdefault();" + "}, false);" + "self.port.on('warning', function(message) {" + "window.alert(message);" + "});" var pagemod = require('sdk/page-mod').pagemod({ include: ['*'], contentscript: pagemodscript, onattach: function(worker) { worker.port.on('click', function(
html) { worker.port.emit('warning', 'do not click this again'); }); } }); in the add-on above there are two user-defined messages: click is sent from the page-mod to the add-on, when the user clicks an element in the page warning sends a silly string back to the page-mod port.emit() the port.emit() function sends a message from the "main.js", or another add-on module, to a content...
DMD
attrandchildarray::sizeofexcludingthis(unsigned long (*)(void const*)) const (/home/njn/moz/mi5/dom/base/nsattrandchildarray.cpp:880) #04: mozilla::dom::fragmentorelement::sizeofexcludingthis(unsigned long (*)(void const*)) const (/home/njn/moz/mi5/dom/base/fragmentorelement.cpp:2337) #05: nsinode::sizeofincludingthis(unsigned long (*)(void const*)) const (/home/njn/moz/mi5/go64dmd/parser/
html/../../../dom/base/nsinode.h:307) #06: mozilla::dom::nodeinfo::nodetype() const (/home/njn/moz/mi5/go64dmd/dom/base/../../dist/include/mozilla/dom/nodeinfo.h:127) #07: ns
htmldocument::docaddsizeofexcludingthis(nswindowsizes*) const (/home/njn/moz/mi5/dom/
html/ns
htmldocument.cpp:3710) #08: nsidocument::docaddsizeofincludingthis(nswindowsizes*) const (/home/njn/moz/mi5/dom/base/nsdocumen...
Leak Gauge
agerleak:5 nspr_log_file=nspr.log # or any other filename of your choice this will overwrite any existing file called nspr.log.
about:memory
fzosoflzsoxg@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/output-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/zones/zone(0x100...
Patches and pushes
utf-8</inputencoding> <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?output=fxjson&command={searchterms}" />*** <url type="text/
html" method="get" template="http://search.yahoo.com/search"> <param name="p" value="{searchterms}"/> <param name="ei" value="utf-8"/> <mozparam name="fr" condition="pref" pref="yahoo-fr" /> </url> <searchform>http://search.yahoo.com/</searchform> </searchplugin> create xml files for each search plugin preference following the above example.
Installing JSHydra
g copy of spidermonkey; it is possible via the --moz-src and --moz-obj configure arguments to tell jshydra to use existing copies of the source and build.
McCoy
have to enter it each time you run mccoy.
NSPR Contributor Guide
code in pr/src/md/platform/*.c make rules in config/_platform.mk documentation the files for nspr's documentation are maintained using a proprietary word processing system [don't ask].
Building NSS
o /etc/hosts (on windows, c:\windows\system32\drivers\etc\hosts) as follows: 127.0.0.1 localhost.localdomain validate this opening a command shell and typing: ping localhost.localdomain.
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/computername.#/results.
html.
NSS 3.12.9 release notes
ccess_location error code for bad crl distribution point urls bug 619268: memory leaks in cert_changecerttrust and cert_savesmimeprofile bug 585518: addtrust qualified ca root serial wrong in certdata.txt trust entry bug 337433: need cert_findcertbynicknameoremailaddrbyusage bug 592939: expired cas in certdata.txt documentation <for a="" class="new " documentation="" href="/en/index.
html#documentation" list="" nss="" of="" pages="" primary="" rel="internal" see="" the="" title="en/index.
html#documentation">nss documentation.
NSS 3.14 release notes
s (rfc 5705) in addition to the above new features, the following major changes have been introduced: support for certificate signatures using the md5 hash algorithm is now disabled by default.
NSS tools : modutil
n32/setup.cab { relativepath { %temp%/setup.cab } } } } win95::x86 { equivalentplatform {winnt::x86} } sunos:5.5.1:sparc { modulename { "example unix module" } modulefile { unix/fort.so } defaultmechanismflags{0x0001} cipherenableflags{0x0001} files { unix/fort.so { relativepath{%root%/lib/fort.so} absolutepath{/usr/local/netscape/lib/fort.so} filepermissions{555} } xplat/instr.
html { relativepath{%root%/docs/inst.
html} absolutepath{/usr/local/netscape/docs/inst.
html} filepermissions{555} } } } irix:6.2:mips { equivalentplatform { sunos:5.5.1:sparc } } } script grammar the script is basic java, allowing lists, key-value pairs, strings, and combinations of all of them.
NSS tools : ssltab
records and handshaking options -v print a version string for the tool.
NSS tools : ssltap
records and handshaking options -v print a version string for the tool.
NSS Tools modutil
equivalentplatform {winnt::x86} } sunos:5.5.1:sparc { modulename { "fortezza unix module" } modulefile { unix/fort.so } defaultmechanismflags{0x0001} cipherenableflags{0x0001} files { unix/fort.so { relativepath{%root%/lib/fort.so} absolutepath{/usr/local/netscape/lib/fort.so} filepermissions{555} } xplat/instr.
html { relativepath{%root%/docs/inst.
html} absolutepath{/usr/local/netscape/docs/inst.
html} filepermissions{555} } } } irix:6.2:mips { equivalentplatform { sunos:5.5.1:sparc } }} script grammar the script file grammar is as follows: --> valuelistvaluelist --> value valuelist <null>value ---> key_value_pair stringke...
NSS Tools ssltap
command are the following: -v print a version string for the tool.
NSS tools : modutil
t::x86} } sunos:5.5.1:sparc { modulename { "example unix module" } modulefile { unix/fort.so } defaultmechanismflags{0x0001} cipherenableflags{0x0001} files { unix/fort.so { relativepath{%root%/lib/fort.so} absolutepath{/usr/local/netscape/lib/fort.so} filepermissions{555} } xplat/instr.
html { relativepath{%root%/docs/inst.
html} absolutepath{/usr/local/netscape/docs/inst.
html} filepermissions{555} } } } irix:6.2:mips { equivalentplatform { sunos:5.5.1:sparc } } } script grammar the script is basic java, allowing lists, key-value pairs, strings, and combinations of all of them.
Rhino and BSF
lan-java extensions for more information on adding javascript to xsl and the description of the optional script task in the apache ant manual for using scripting in ant build files.
XSLT 2.0
although xslt 2.0 is not natively supported in firefox, it is possible via saxon-b (java) or, more recently, saxon-ce (javascript) to perform xslt 2.0.
ASan Nightly Project
moved in-tree: https://firefox-source-docs.mozilla.org/tools/sanitizer/asan_nightly.
html ...
Clang static analysis
moved to https://firefox-source-docs.mozilla.org/code-quality/static-analysis.
html ...
Fuzzing Interface
documentation moved in-tree: https://firefox-source-docs.mozilla.org/tools/fuzzing/fuzzing_interface.
html ...
LDAP Support
company company workcountry countryname _aimscreenname nscpaimscreenname webpage1 workurl webpage2 homeurl birthyear birthyear custom1 custom1 custom2 custom2 custom3 custom3 custom4 custom4 notes notes notes description prefermailformat xmozillause
htmlmail lastmodifieddate modifytimestamp custom ldap attributes thunderbird supports custom ldap attributes for various address book attributes.
Use SQLite
opendatabase('mydb', '1.0', 'test db', 2 * 1024 * 1024); var msg; db.transaction(function (tx) { tx.executesql('create table if not exists logs (id unique, log)'); tx.executesql('insert into logs (id, log) values (1, "foobar")'); tx.executesql('insert into logs (id, log) values (2, "logmsg")'); msg = '<p>log message created and row inserted.</p>'; document.queryselector('#status').inner
html = msg; }); db.transaction(function (tx) { tx.executesql('select * from logs', [], function (tx, results) { var len = results.rows.length, i; msg = "<p>found rows: " + len + "</p>"; document.queryselector('#status').inner
html += msg; for (i = 0; i < len; i++){ msg = "<p><b>" + results.rows.item(i).log + "</b></p>"; document.queryselector('#status').inner
html += msg; ...
Using js-ctypes
r; var unichar = ctypes.jschar; // uint16 with automatic conversion // define constants var kcfusernotificationstopalertlevel = 0; var kcfusernotificationnotealertlevel = 1; var kcfusernotificationcautionalertlevel = 2; var kcfusernotificationplainalertlevel = 3; // declare functions /* https://developer.apple.com/library/mac/documentation/corefoundation/reference/cfusernotificationref/index.
html#//apple_ref/c/func/cfusernotificationdisplaynotice * sint32 cfusernotificationdisplaynotice ( * cftimeinterval timeout, * cfoptionflags flags, * cfurlref iconurl, * cfurlref soundurl, * cfurlref localizationurl, * cfstringref alertheader, * cfstringref alertmessage, * cfstringref defaultbuttontitle * ); */ var cfusernotificationdisplaynotice = libcf.declare("cfusernotif...
Gecko Plugin API Reference - Plugins
plug-in basics how plug-ins are used plug-ins and helper applications how plug-ins work understanding the runtime model plug-in detection how gecko finds plug-ins checking plug-ins by mime type overview of plug-in structure understanding the plug-in api plug-ins and platform independence windowed and windowless plug-ins the default plug-in using
html to display plug-ins plug-in display modes using the object element for plug-in display nesting rules for
html elements using the appropriate attributes using the embed element for plug-in display using custom embed attributes plug-in references plug-in development overview writing plug-ins registering plug-ins ms windows unix mac os x drawing a p...
IDBCursor.continue() - Web APIs
king example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.inner
html = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'continue()' in that specification.
IDBCursor.key - Web APIs
king example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.inner
html = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.key); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'key' in that specification.
IDBCursor.primaryKey - Web APIs
king example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.inner
html = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.primarykey); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'primarykey' in that specification.
IDBCursor.source - Web APIs
king example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.inner
html = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.source); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'source' in that specification.
IDBCursor - Web APIs
king example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.inner
html = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; } specifications specification status comment indexed database api 2.0the definition of 'cursor' in that specification.
IDBCursorWithValue.value - Web APIs
king example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.inner
html = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.value); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'source' in that specification.
IDBCursorWithValue - Web APIs
king example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.inner
html = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'idbcursorwithvalue' in that specification.
IDBFactory.open() - Web APIs
ge = window.idbkeyrange || window.webkitidbkeyrange || window.msidbkeyrange; // (mozilla has never prefixed these objects, so we don't // need window.mozidb*) // let us open version 4 of our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database being opened // successfully, or not dbopenrequest.onerror = function(event) { note.inner
html += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.inner
html += '<li>database initialised.</li>'; // store the result of opening the database in the db // variable.
IDBKeyRange.bound() - Web APIs
function displaydata() { var keyrangevalue = idbkeyrange.bound("a", "f"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.inner
html = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'bound()' in that specification.
IDBKeyRange.lower - Web APIs
= idbkeyrange.bound("f", "w", true, true); console.log(keyrangevalue.lower); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.inner
html = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'lower' in that specification.
IDBKeyRange.lowerBound() - Web APIs
function displaydata() { var keyrangevalue = idbkeyrange.lowerbound("f"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.inner
html = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'lowerbound()' in that specification.
IDBKeyRange.lowerOpen - Web APIs
bkeyrange.bound("f", "w", true, true); console.log(keyrangevalue.loweropen); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.inner
html = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'loweropen' in that specification.
IDBKeyRange.only() - Web APIs
too.) function displaydata() { var keyrangevalue = idbkeyrange.only("a"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.inner
html = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'only' in that specification.
IDBKeyRange.upper - Web APIs
= idbkeyrange.bound("f", "w", true, true); console.log(keyrangevalue.upper); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.inner
html = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'upper' in that specification.
IDBKeyRange.upperBound() - Web APIs
function displaydata() { var keyrangevalue = idbkeyrange.upperbound("f"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.inner
html = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'upperbound()' in that specification.
IDBKeyRange.upperOpen - Web APIs
bkeyrange.bound("f", "w", true, true); console.log(keyrangevalue.upperopen); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.inner
html = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed database api 2.0the definition of 'upperopen' in that specification.
IDBKeyRange - Web APIs
too.) function displaydata() { var keyrangevalue = idbkeyrange.bound("a", "f"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.inner
html = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; } specifications specification status comment indexed database api 2.0the definition of 'idbkeyrange' in that specification.
IDBLocaleAwareKeyRange - Web APIs
ue = idblocaleawarekeyrange.bound("a", "f"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); var myindex = objectstore.index('lname'); myindex.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.inner
html = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</td>' + ...
IDBVersionChangeEvent.newVersion - Web APIs
action; window.idbkeyrange = window.idbkeyrange || window.webkitidbkeyrange || window.msidbkeyrange; // (mozilla has never prefixed these objects, // so we don't need window.mozidb*) // let us open version 4 of our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database being opened dbopenrequest.onerror = function(event) { note.inner
html += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.inner
html += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
IDBVersionChangeEvent - Web APIs
bkeyrange = window.idbkeyrange || window.webkitidbkeyrange || window.msidbkeyrange; // (mozilla has never prefixed these objects, so we don't need window.mozidb*) // let us open version 4 of our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database being opened successfully, or not dbopenrequest.onerror = function(event) { note.inner
html += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.inner
html += '<li>database initialised.</li>'; // store the result of opening the database in the db variable.
ImageBitmap.close() - Web APIs
imagebitmap.close() examples var offscreen = new offscreencanvas(256, 256); var gl = offscreen.getcontext('webgl'); // ...
ImageBitmap - Web APIs
imagebitmap.height read only is an unsigned long representing the height, in css pixels, of the imagedata.
ImageData - Web APIs
ensional array containing the data in the rgba order, with integer values between 0 and 255 (inclusive).
ServiceWorkerGlobalScope.onpush - Web APIs
data.message || "here's something you might want to check out."; var icon = "images/new-notification.png"; var notification = new notification(title, { body: message, tag: 'simple-push-demo-notification', icon: icon }); notification.addeventlistener('click', function() { if (clients.openwindow) { clients.openwindow('https://example.blog.com/2015/03/04/something-new.
html'); } }); }); specifications specification status comment push apithe definition of 'onpush' in that specification.
ShadowRoot - Web APIs
adowroot property, provided it was created using element.attachshadow() with the mode option set to open.
SharedWorker() - Web APIs
ond.onchange = function() { myworker.port.postmessage([first.value,second.value]); console.log('message posted to worker'); } myworker.port.onmessage = function(e) { result1.textcontent = e.data; console.log('message received from worker'); } for a full example, see our basic shared worker example (run shared worker.) specifications specification status comment
html living standardthe definition of 'sharedworker()' in that specification.
SharedWorkerGlobalScope.close() - Web APIs
to close your worker instance from inside the worker itself, you can call the following: close(); close() and self.close() are effectively equivalent — both represent close() being called from inside the worker's inner scope.
SharedWorkerGlobalScope: connect event - Web APIs
n shared worker.) addeventlistener equivalent you could also set up an event handler using the addeventlistener() method: self.addeventlistener('connect', function(e) { var port = e.ports[0]; port.onmessage = function(e) { var workerresult = 'result: ' + (e.data[0] * e.data[1]); port.postmessage(workerresult); } }); specifications specification status
html living standardthe definition of 'connect event' in that specification.
SharedWorkerGlobalScope.onconnect - Web APIs
* e.data[1]); port.postmessage(workerresult); } port.start(); } for a complete running example, see our basic shared worker example (run shared worker.) note: the data property of the event object used to be null in firefox.
SourceBuffer - Web APIs
the sourcebuffer interface represents a chunk of media to be passed into an
htmlmediaelement and played, via a mediasource object.
SpeechRecognition.abort() - Web APIs
| 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('.output'); 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 specification status comment ...
SpeechRecognition.start() - Web APIs
| 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('.output'); 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 specification status comment ...
SpeechRecognition.stop() - Web APIs
| 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('.output'); 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 specification status comment ...
SpeechSynthesis.getVoices() - Web APIs
option.textcontent += ' -- default'; } option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); document.getelementbyid("voiceselect").appendchild(option); } } populatevoicelist(); if (typeof speechsynthesis !== 'undefined' && speechsynthesis.onvoiceschanged !== undefined) { speechsynthesis.onvoiceschanged = populatevoicelist; }
html <select id="voiceselect"></select> specifications specification status comment web speech apithe definition of 'getvoices()' in that specification.
TextTrackList: addtrack event - Web APIs
element.texttracks.addeventlistener('addtrack', (event) => { console.log(`text track: ${event.track.label} added`); }); using the onaddtrack event handler property: const mediaelement = document.queryselector('video, audio'); mediaelement.texttracks.onaddtrack = (event) => { console.log(`text track: ${event.track.label} added`); }; specifications specification status
html living standardthe definition of 'addtrack' in that specification.
TextTrackList: change event - Web APIs
ideo, audio')[0]; mediaelement.texttracks.addeventlistener('change', (event) => { console.log(`'${event.type}' event fired`); }); using the onchange event handler property: const mediaelement = document.queryselector('video, audio'); mediaelement.texttracks.onchange = (event) => { console.log(`'${event.type}' event fired`); }; specifications specification status
html living standardthe definition of 'change' in that specification.
TextTrackList.onchange - Web APIs
ndler for the change event that looks at each of the tracks in the list, calling a function to update the state of a user interface control that indicates the current state of the track.
TextTrackList: removeTrack event - Web APIs
racks.addeventlistener('removetrack', (event) => { console.log(`text track: ${event.track.label} removed`); }); using the onremovetrack event handler property: const mediaelement = document.queryselector('video, audio'); mediaelement.texttracks.onremovetrack = (event) => { console.log(`text track: ${event.track.label} removed`); }; specifications specification status
html living standardthe definition of 'removetrack' in that specification.
TimeRanges.end() - Web APIs
buf.length; if (buf.length == 1) { // only one range if (buf.start(0) == 0 && buf.end(0) == v.duration) { // the one range starts at the beginning and ends at // the end of the video, so the whole thing is loaded } } this example looks at the time ranges and looks to see if the entire video has been loaded.
TimeRanges.length - Web APIs
buf.length; if (buf.length == 1) { // only one range if (buf.start(0) == 0 && buf.end(0) == v.duration) { // the one range starts at the beginning and ends at // the end of the video, so the whole thing is loaded } } this example looks at the time ranges and looks to see if the entire video has been loaded.
TimeRanges.start() - Web APIs
s = buf.length; if (buf.length == 1) { // only one range if (buf.start(0) == 0 && buf.end(0) == v.duration) { // the one range starts at the beginning and ends at // the end of the video, so the whole thing is loaded } } this example looks at the time ranges and looks to see if the entire video has been loaded.
URLSearchParams.set() - Web APIs
.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*\/\/.*|\s*[^:]\/\/.*)/g // single-line comments ,[ "these should work:", "", "// eslint-disable-next-line no-unused-vars", "lockpref( 'keyword.url',\t\t'https://duckduckgo.com/
html/?q=!+' )\t// test", "/*", " * bla bla ", "*/", "", "/* bla bla */", "", "// bla bla ", "", "these shouldn\'t work:", "console.log(\"http://foo.co.uk/\")", "var url = \"http://regexr.com/foo.
html?q=bar\"", "alert(\"https://mediatemple.net\")", ] , true ) console.info( url, url.tostring() ) // window.open( url, 'regex_site' ) specifications specificatio...
URL API - Web APIs
s name: url urlsearchparams older versions of the specification included an interface called urlutilsreadonly, which has since been merged into the workerlocation interface.
VideoPlaybackQuality.droppedVideoFrames - Web APIs
the read-only droppedvideoframes property of the videoplaybackquality interface returns the number of video frames which have been dropped rather than being displayed since the last time the media was loaded into the
htmlvideoelement.
Window.innerHeight - Web APIs
yntax let intviewportheight = window.innerheight; value an integer value indicating the window's layout viewport height in pixels.
Window.innerWidth - Web APIs
ewportwidth = window.innerwidth; value an integer value indicating the width of the window's layout viewport in pixels.
Window: languagechange event - Web APIs
examples you can use the languagechange event in an addeventlistener method: window.addeventlistener('languagechange', function() { console.log('languagechange event detected!'); }); or use the onlanguagechange event handler property: window.onlanguagechange = function(event) { console.log('languagechange event detected!'); }; specification specification status
html living standardthe definition of 'languagechange' in that specification.
Window.localStorage - Web APIs
is as follows: const cat = localstorage.getitem('mycat'); the syntax for removing the localstorage item is as follows: localstorage.removeitem('mycat'); the syntax for removing all the localstorage items is as follows: localstorage.clear(); note: please refer to the using the web storage api article for a full example.
Window.matchMedia() - Web APIs
pt let mql = window.matchmedia('(max-width: 600px)'); document.queryselector(".mq-value").innertext = mql.matches; the javascript code simply passes the media query to match into matchmedia() to compile it, then sets the <span>'s innertext to the value of the results' matches property, so that it indicates whether or not the document matches the media query at the moment the page was loaded.
Window: message event - Web APIs
an listen for the message using addeventlistener() with code like this: window.addeventlistener('message', (event) => { console.log(`received message: ${event.data}`); }); alternatively the listener could use the onmessage event handler property: window.onmessage = (event) => { console.log(`received message: ${event.data}`); }; specifications specification status
html living standard living standard ...
Window: messageerror event - Web APIs
vent event handler property onmessageerror examples listen for messageerror using addeventlistener(): window.addeventlistener('messageerror', (event) => { console.error(event); }); the same, but using the onmessageerror event handler property: window.onmessageerror = (event) => { console.error(event); }; specifications specification status
html living standard living standard ...
Window: offline event - Web APIs
interface event event handler property onoffline examples // addeventlistener version window.addeventlistener('offline', (event) => { console.log("the network connection has been lost."); }); // onoffline version window.onoffline = (event) => { console.log("the network connection has been lost."); }; specifications specification status
html living standardthe definition of 'offline event' in that specification.
Window: online event - Web APIs
interface event event handler property ononline examples // addeventlistener version window.addeventlistener('online', (event) => { console.log("you are now connected to the network."); }); // ononline version window.ononline = (event) => { console.log("you are now connected to the network."); }; specifications specification status
html living standardthe definition of 'online event' in that specification.
Window: rejectionhandled event - Web APIs
event handler property onrejectionhandled example you can use the rejectionhandled event to log promises that get rejected to the console, along with the reasons why they were rejected: window.addeventlistener("rejectionhandled", event => { console.log("promise rejected; reason: " + event.reason); }, false); specifications specification status comment
html living standardthe definition of 'rejectionhandled' in that specification.
Window.requestAnimationFrame() - Web APIs
orm = 'translatex(' + math.min(0.1 * elapsed, 200) + 'px)'; if (elapsed < 2000) { // stop the animation after 2 seconds window.requestanimationframe(step); } } window.requestanimationframe(step); notes edge versions below 17 and internet explorer do not reliably fire requestanimationframe before the paint cycle.
::spelling-error - CSS: Cascading Style Sheets
can be used in a rule with ::spelling-error in its selector: color background-color cursor caret-color outline and its longhands text-decoration and its associated properties text-emphasis-color text-shadow syntax ::spelling-error examples simple document spell check in this example, eventual supporting browsers should highlight any flagged spelling errors with the styles shown.
:first - CSS: Cascading Style Sheets
e.) /* selects the first page when printing */ @page :first { margin-left: 50%; margin-top: 50%; } note: you can't change all css properties with this pseudo-class.
:focus-within - CSS: Cascading Style Sheets
dow trees.) /* selects a <div> when one of its descendants is focused */ div:focus-within { background: cyan; } this selector is useful, to take a common example, for highlighting an entire <form> container when the user focuses on one of its <input> fields.
:nth-of-type() - CSS: Cascading Style Sheets
/* selects every fourth <p> element among any group of siblings */ p:nth-of-type(4n) { color: lime; } syntax the nth-of-type pseudo-class is specified with a single argument, which represents the pattern for matching elements.
additive-symbols - CSS: Cascading Style Sheets
lor-stop> = <color> <color-stop-length>?<linear-color-hint> = <length-percentage><length-percentage> = <length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples specifying additive symbols
html <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> css @counter-style additive-symbols-example { system: additive; additive-symbols: v 5, iv 4, i 1; } .list { list-style: additive-symbols-example; } result specifications specification status comment css counter styles level 3the definition of 'additive-s...
negative - CSS: Cascading Style Sheets
lor-stop> = <color> <color-stop-length>?<linear-color-hint> = <length-percentage><length-percentage> = <length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples rendering negative counters
html <ul class="list" start="-3"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> css @counter-style neg { system: numeric; symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9"; negative: "(-" ")"; } .list { list-style: neg; } result specifications specification status comment css counter styles level 3the definition of 'sys...
pad - CSS: Cascading Style Sheets
<linear-color-stop> = <color> <color-stop-length>?<linear-color-hint> = <length-percentage><length-percentage> = <length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples padding 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 pad-example { system: numeric; symbols: "0" "1" "2" "3" "4" "5"; pad: 2 "0"; } .list { list-style: pad-example; } result specifications specification status comment css counter styles level 3the definition of 'pad' in that specifica...
prefix - CSS: Cascading Style Sheets
r-stop> = <color> <color-stop-length>?<linear-color-hint> = <length-percentage><length-percentage> = <length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples adding a prefix to a counter
html <ul class="index"> <li>the boy who lived</li> <li>the vanishing glass</li> <li>the letters from no one</li> <li>the keeper of the keys</li> <li>diagon alley</li> </ul> css @counter-style chapters { system: numeric; symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9"; prefix: 'chapter '; } .index { list-style: chapters; padding-left: 15ch; } result specifications ...
font-variant-alternates - CSS: Cascading Style Sheets
and ::first-line.inheritedyescomputed 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 class="variant">firefox rocks!</p> css @font-feature-values "leitura display swashes" { @swash { fancy: 1 } } p { font-size: 1.5rem; } .variant { font-family: leitura display swashes; font-variant-alternates: swash(fancy); } result note: you need to install the opentype font leitura display swashes for this example to work.
font-variant-east-asian - CSS: Cascading Style Sheets
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, other fonts may not support opentype features.
font-variant-ligatures - CSS: Cascading Style Sheets
|| <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-historical-ligatures ]<contextual-alt-values> = [ contextual | no-contextual ] examples setting font ligatures and contextual forms
html <link href="//fonts.googleapis.com/css?family=lora" rel="stylesheet"> <p class="normal"> normal<br> if fi ff tf ft jf fj </p> <p class="none"> none<br> if fi ff tf ft jf fj </p> <p class="common-ligatures"> common-ligatures<br> if fi ff tf ft jf fj </p> <p class="no-common-ligatures"> no-common-ligatures<br> if fi ff tf ft jf fj </p> <p class="discretionary-ligatures"> discreti...
font-variant-numeric - CSS: Cascading Style Sheets
cifiedanimation 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 numeric forms
html <p class="ordinal">1st, 2nd, 3rd, 4th, 5th</p> css /* this example uses the source sans pro opentype font, developed by adobe and used here under the terms of the sil open font license, version 1.1: http://scripts.sil.org/cms/scripts/page.php?item_id=ofl_web */ @font-face { font-family: "source sans pro"; font-style: normal; font-weight: 400; src: url("https://mdn.mozillademos.org/fil...
font-variant - CSS: Cascading Style Sheets
m-ident><numeric-figure-values> = [ lining-nums | oldstyle-nums ]<numeric-spacing-values> = [ proportional-nums | tabular-nums ]<numeric-fraction-values> = [ diagonal-fractions | stacked-fractions ]<east-asian-variant-values> = [ jis78 | jis83 | jis90 | jis04 | simplified | traditional ]<east-asian-width-values> = [ full-width | proportional-width ] examples setting the small-caps font variant
html <p class="normal">firefox rocks!</p> <p class="small">firefox rocks!</p> css p.normal { font-variant: normal; } p.small { font-variant: small-caps; } result specifications specification status comment css fonts module level 3the definition of 'font-variant' in that specification.
grid-area - CSS: Cascading Style Sheets
dnocomputed 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
rack-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-content | autowhere <length-percentage> = <length> | <percentage> examples setting grid column size
html <div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> </div> css #grid { height: 100px; display: grid; grid-template-areas: "a a"; grid-gap: 10px; grid-auto-columns: 200px; } #grid > div { background-color: lime; } result specifications specification status comment css grid layoutthe definition of 'grid-auto-co...
grid-auto-rows - CSS: Cascading Style Sheets
<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-content | autowhere <length-percentage> = <length> | <percentage> examples setting grid row size
html <div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> </div> css #grid { width: 200px; display: grid; grid-template-areas: "a a"; grid-gap: 10px; grid-auto-rows: 100px; } #grid > div { background-color: lime; } result specifications specification status comment css grid layoutthe definition of 'grid-auto-rows' ...
grid-column - CSS: Cascading Style Sheets
ining block is a grid containerinheritednocomputed valueas each of the properties of the shorthand:grid-column-start: as specifiedgrid-column-end: as specifiedanimation typediscrete formal syntax <grid-line> [ / <grid-line> ]?where <grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>?
mask-image - CSS: Cascading Style Sheets
stop> = <color> <color-stop-length>?<linear-color-hint> = <length-percentage><length-percentage> = <length> | <percentage><angular-color-stop> = <color> && <color-stop-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples setting a mask image with a url
html <div id="masked"></div> css #masked { width: 100px; height: 100px; background-color: #8cffa0; -webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); } result specifications specification status comment css masking module level 1the definition of 'mask-image' in th...
mask-mode - CSS: Cascading Style Sheets
nocomputed 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 <div id="masked"> </div> <select id="maskmode"> <option value="alpha">alpha</option> <option value="luminance">luminance</option> <option value="match-source">match-source</option> </select> javascript var maskmode = document.getelementbyid("maskmode"); maskmode.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskmode = evt.target.value; }); resu...
mask-origin - CSS: Cascading Style Sheets
> = <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; padding: 10px; mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-origin: border-box; /* can be changed in the live sample */ }
html <div id="masked"> </div> <select id="origin"> <option value="content-box">content-box</option> <option value="padding-box">padding-box</option> <option value="border-box" selected>border-box</option> <option value="margin-box">margin-box</option> <option value="fill-box">fill-box</option> <option value="stroke-box">stroke-box</option> <option value="view-box">view-box</option> </se...
mask-position - CSS: Cascading Style Sheets
age> examples setting mask position css #wrapper { border: 1px solid black; width: 250px; height: 250px; } #masked { width: 250px; height: 250px; background: blue linear-gradient(red, blue); mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-repeat: no-repeat; mask-position: top right; /* can be changed in the live sample */ margin-bottom: 10px; }
html <div id="wrapper"> <div id="masked"> </div> </div> <select id="maskposition"> <option value="top">top</option> <option value="center">center</option> <option value="bottom">bottom</option> <option value="top right" selected>top right</option> <option value="center center">center center</option> <option value="bottom left">bottom left</option> <option value="10px 20px">10px 20px...
mask-repeat - CSS: Cascading Style Sheets
eat-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-repeat: repeat; /* can be changed in the live sample */ margin-bottom: 10px; }
html content <div id="masked"> </div> <select id="repetition"> <option value="repeat-x">repeat-x</option> <option value="repeat-y">repeat-y</option> <option value="repeat" selected>repeat</option> <option value="space">space</option> <option value="round">round</option> <option value="no-repeat">no-repeat</option> </select> javascript content var repetition = document.getelementbyid("r...
mask-size - CSS: Cascading Style Sheets
> examples setting mask size as a percentage css #masked { width: 200px; height: 200px; background: blue linear-gradient(red, blue); -webkit-mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg); mask-image: url(https://mdn.mozillademos.org/files/12668/mdn.svg); -webkit-mask-size: 50%; mask-size: 50%; /* can be changed in the live sample */ margin-bottom: 10px; }
html <div id="masked"> </div> <select id="masksize"> <option value="auto">auto</option> <option value="40% 80%">40% 80%</option> <option value="50%" selected>50%</option> <option value="200px 100px">200px 100px</option> <option value="cover">cover</option> <option value="contain">contain</option> </select> javascript var masksize = document.getelementbyid("masksize"); masksize.addevent...
mask - CSS: Cascading Style Sheets
ngle-percentage> = <angle> | <percentage> examples masking an image .target { mask: url(#c1) luminance; } .anothertarget { mask: url(resources.svg#c1) 50px 30px/10px 10px repeat-x exclude; } specifications specification status comment css masking module level 1the definition of 'mask' in that specification.
max-width - CSS: Cascading Style Sheets
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," whichever is smaller.
minmax() - CSS: Cascading Style Sheets
: grid-template-columns grid-template-rows grid-auto-columns grid-auto-rows examples css #container { display: grid; grid-template-columns: minmax(min-content, 300px) minmax(200px, 1fr) 150px; grid-gap: 5px; box-sizing: border-box; height: 200px; width: 100%; background-color: #8cffa0; padding: 10px; } #container > div { background-color: #8ca0ff; padding: 5px; }
html <div id="container"> <div> item as wide as the content, but at most 300 pixels.
offset-distance - CSS: Cascading Style Sheets
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.