<nextid>: The NeXT ID element (Obsolete) - HTML: Hypertext Markup Language
accepts the global attributes. n reference to anchor. example the user enters four section headings into the table of contents (and presumably also writing paragraph material within these sections). the heading for each of the four sections would be assigned name values of "z0", "z1", "z2", and "z3". the first of these would produce an entry in the table of contents like this: <a name="z0" href="#z4">first section name</a> and the section header would be marked like this: <h2><a name="z4">first section name</a></h2>. this continues for the next three sections, z5, z6, and z7 (and table of contents entries named z1, z2, and z3), each automatically given anchors with these names. the user then saves and closes the document. next would then add, within the header of the html document, a sp...
...inds and reads this <nextid n="z8"> tag, and now knows to give the first of these new sections the name of z8 in the table of contents, and z14 to the content body. this might look like this: <html> <head> <title> ... whatever ... </title> <link, meta, base, etc. ...
...give the first of these new sections the name of z8 in the table of contents, and z14 to the content body. this might look like this: <html> <head> <title> ... whatever ... </title> <link, meta, base, etc. ...
...And 15 more matches

Styling links - Learn web development
ey or similar, or programmatically focused using htmlelement.focus()) — this is styled using the :focus pseudo class. active: a link when it is being activated (e.g. clicked on), styled using the :active pseudo class. default styles the following example illustrates what a link will behave like by default (the css is simply enlarging and centering the text to make it stand out more.) <p><a href="#">a simple link</a></p> p { font-size: 2rem; text-align: center; } note: all the links in the examples in this page are fake links — a # (hash, or pound sign) is put in place of the real url. this is because if the real links were included, clicking on them would break the examples (you'd end up with an error, or a page loaded in the embedded example that you couldn't get back from.
... the third rule use...
... the third rule uses the a selector to get rid of th...
...And 14 more matches

Creating hyperlinks - Learn web development
se you can try to deal with it later on). for example, the bbc homepage contains a many links that point not only to multiple news stories, but also different areas of the site (navigation functionality), login/registration pages (user tools), and more. anatomy of a link a basic link is created by wrapping the text or other content, see block level links, inside an <a> element and using the href attribute, also known as a hypertext reference, or target, that contains the web address. <p>i'm creating a link to <a href="https://www.mozilla.org/">the mozilla homepage</a>. </p> this gives us the following result: i'm creating a link to the mozilla homepage. adding supporting information with the title attribute another attribute you may want to add to your links is title. the title cont...
...page</a>. </p> this gives us the following result: i'm creating a link to the mozilla homepage. adding supporting information with the title attribute another attribute you may want to add to your links is title. the title contains additional information about the link, such as which kind of information the page contains, or things to be aware of on the web site. <p>i'm creating a link to <a href="https://www.mozilla.org/" title="the best place to find more information about mozilla's mission and how to contribute">the mozilla homepage</a>. </p> this gives us the following result and hovering over the link displays the title as a tooltip. i'm creating a link to the mozilla homepage. note: a link title is only revealed on mouse hover, which means that people relying on key...
...the html body, add one or more paragraphs or other types of content you already know about. change some of the content into links. include title attributes. block level links as mentioned before, almost any content can be made into a link, even block-level elements. if you have an image you want to make into a link, use the <a> element and reference the image file with the <img> element. <a href="https://www.mozilla.org/"> <img src="mozilla-image.png" alt="mozilla logo that links to the mozilla homepage"> </a> note: you'll find out more about using images on the web in a future article. a quick primer on urls and paths to fully understand link targets, you need to understand urls and file paths. this section gives you the information you need to achieve this. a url, or uniform re...
...And 12 more matches

Index - Web APIs
api, deprecated, document, html dom, needsspectable, property, reference the document.linkcolor property gets/sets the color of links within the document. 935 document.links api, document, html dom, property, reference 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. 936 document.location api, document, html dom, property, read-only, reference the document.location read-only property returns a location object, which contains information about the url of the document and provides methods for changing that url and loading another url. 937 document.mozsetimageelement() api, dom, dom reference, method, non-standard, ...
... filesystementry.tourl() api, file system api, file and directory entries api, filesystementry, files, method, non-standard, reference, tourl the filesystementry interface's method tourl() creates and returns a string containing a url which can be used to identify the file system entry. this is done by exposing a new url scheme—filesystem:—that can be used as the value of src and href attributes. 1382 filesystementrysync api, entrysync, file api, file system api, file and directory entries api, filesystementrysync, interface, non-standard, offline, reference, filesystem the filesystementrysync interface of the file and directory entries api represents an entry in a file system; it can be either a fileentrysync or directoryentry. 1383 filesystemf...
...ing containing the host, that is the hostname, and then, if the port of the url is nonempty, a ':', and the port of the url. 1692 htmlhyperlinkelementutils.hostname api, experimental, htmlhyperlinkelementutils, property, reference, url api the htmlhyperlinkelementutils.hostname property is a usvstring containing the domain of the url. 1693 htmlhyperlinkelementutils.href api, experimental, htmlhyperlinkelementutils, location, property, reference, url api the htmlhyperlinkelementutils.href property is a usvstring containing the whole url. 1694 htmlhyperlinkelementutils.origin api, experimental, htmlhyperlinkelementutils, property, read-only, reference, url api the htmlhyperlinkelementutils.origin read-only property is a usvstring con...
...And 12 more matches

Getting started with HTML - Learn web development
utes should be separated by spaces too.) the attribute name, followed by an equal sign. an attribute value, wrapped with opening and closing quote marks. active learning: adding attributes to an element another example of an element is <a>. this stands for anchor. an anchor can make the text it encloses into a hyperlink. anchors can take a number of attributes, but several are as follows: href: this attribute's value specifies the web address for the link. for example: href="https://www.mozilla.org/". title: the title attribute specifies extra information about the link, such as a description of the page that is being linked to. for example, title="the mozilla homepage". this appears as a tooltip when a cursor hovers over the element. target: the target attribute specifies the browsi...
...hen a cursor hovers over the element. target: the target attribute specifies the browsing context used to display the link. for example, target="_blank" will display the link in a new tab. if you want to display the linked content in the current tab, just omit this attribute. edit the line below in the input area to turn it into a link to your favorite website. add the <a> element. add the href attribute and the title attribute. specify the target attribute to open the link in the new tab. you'll be able to see your changes update live in the output area. you should see a link—that when hovered over—displays the value of the title attribute, and when clicked, navigates to the web address in the href attribute. remember that you need to include a space between the element name, an...
... solutionentry = htmlsolution; solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); var htmlsolution = '<p>a link to my <a href="https://www.mozilla.org/" title="the mozilla homepage" target="_blank">favorite website</a>.</p>'; var solutionentry = htmlsolution; textarea.addeventlistener('input', updatecode); window.addeventlistener('load', updatecode); // stop tab key tabbing out of textarea and // make it write a tab at the caret position instead textarea.onkeydown = function(e){ if (e.keycode === 9) { e.prevent...
...And 10 more matches

Document and website structure - Learn web development
rning: exploring the code for our example our example seen above is represented by the following code (you can also find the example in our github repository). we'd like you to look at the example above, and then look over the listing below to see what parts make up what section of the visual. ...
...thub repository). we'd like you to look at the example above, and then look over the listing below to see what parts make up what section of the visual. ...
...--> <form> <input type="search" name="q" placeholder="search query"> <input type="submit" value="go!"> </form> </n...
...And 9 more matches

Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
we go to a two column layout, and then to a three column layout by redefi...
...we go to a two column layout, and then to a three column layout by redefining the grid, and the placement of items on t...
...we go to a two column layout, and then to a three column layout by redefining the grid, and the placement of items on the grid.</p> </article> <aside...
...And 9 more matches

filter - CSS: Cascading Style Sheets
files/3710/test_form_2.jpg" style="width: 100%;" /></td> <td> <div class="svg-container"> <svg id="img3" overflow="visible" viewbox="0 0 212 161" color-interpolation-filters="srgb"> <filter id="svgblur" x="-5%" y="-5%" width="110%" height="110%"> <fegaussianblur 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...
...dth: 100%;" /></td> <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 286 217" color-interpolation-filters="srgb"> <filter id="brightness"> <fecomponenttransfer> <fefuncr type="linear" slope="2"/> <fefuncg 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...
...vg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 240 151" color-interpolation-filters="srgb"> <filter id="contrast"> <fecomponenttransfer> <fefuncr type="linear" slope="2" intercept="-0.5"/> <fefuncg type="linear" slope="2" intercept="-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,s...
...And 9 more matches

preserveAspectRatio - SVG: Scalable Vector Graphics
escribed below). ...
...40,40,1,1,1,50,90 a40,40,1,1,1,50,10 m30,40 q36,35,42,40 m58,40 q64,35,70,40 m30,60 q50,75,70,60 q50,75,30,60" /> </defs> <!-- (width>height) meet --> <svg preserveaspectratio="xmidymid meet" x="0" y="0" viewbox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> <svg preserveaspectratio="xminymid meet" x="25" y="0" viewbox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> <svg preserveaspectratio="xmaxymid meet" x="50" y="0" viewbox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> <!-- (width>height) slice --> <svg preserveaspectratio="xmidymin slice" x="0" y="15" viewbox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> <svg preserveaspectratio="xmidymid slice" x="25" y="15" viewbox="0 0 100 100...
...erveaspectratio="xmaxymid meet" x="50" y="0" viewbox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> <!-- (width>height) slice --> <svg preserveaspectratio="xmidymin slice" x="0" y="15" viewbox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> <svg preserveaspectratio="xmidymid slice" x="25" y="15" viewbox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> <svg preserveaspectratio="xmidymax slice" x="50" y="15" viewbox="0 0 100 100" width="20" height="10"><use href="#smiley" /></svg> <!-- (width<height) meet --> <svg preserveaspectratio="xmidymin meet" x="75" y="0" viewbox="0 0 100 100" width="10" height="25"><use href="#smiley" /></svg> <svg preserveaspectratio="xmidymid meet" x="90" y="0" viewbox="0 0 100 100"...
...And 9 more matches

Appendix E: DOM Building and Insertion (HTML & XUL) - Archive of obsolete content
l, childelem) : doc.createtextnode(childelem)); } }); return elem; } return tag.apply(null, jsontemplate); } in the above, the namespaces object defines the namespace prefixes which can be used in the given dom tree. ...
... the above, the namespaces object defines the namespace prefixes which can be used in the given dom tree. ...
...bove, the namespaces object defines the namespace prefixes which can be used in the given dom tree. ...
...And 7 more matches

Examples - Archive of obsolete content
y a comment and javascript contained in a <code>script</code> element and surrounded by a comment. </p> <dl> <dt>mozilla 1.1+/opera 7</dt> <dd>do not apply css or execute the javascript.</dd> <dt>netscape 7.0x/mozilla 1.0.x</dt> <dd>do not apply css but does execute the javascript.</dd> <dt>internet explorer 5.5+</dt> <dd>can not display the document.</dd> </dl> <p> <a href="http://validator.w3.org/check/referer"><img src="https://udn.realityripple.com/samples/8a/9e64asf935.png" alt="valid xhtml 1.0!" height="31" width="88" /></a> </p> </body> </html> back to the article problem 3 <!-- this file should have a .xhtml extension and will generate an error when parsed. --> <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.or...
...strict as text/html</h1> <p> this document is valid xhtml 1.0 strict served as <code>text/html</code>. </p> <p> this document contains inline css rules contained in a <code>style</code> element and surrounded by a sgml comment. </p> <p> note how the css rules for the background are applied in netscape 7.x, mozilla, opera 7 and internet explorer 5.5+. ...
...t served as <code>text/xml</code>. </p> <p> this document contains inline css rules contained in a <code>style</code> element and surrounded by a sgml comment. </p> <p> note how the css rules for the background are <strong>not</strong> applied in netscape 7.x, mozilla and opera 7 and that internet explorer 5.5+ can not display the page correctly at all. ...
...And 7 more matches

Preloading content with rel="preload" - HTML: Hypertext Markup Language
you want to start loading early in the page lifecycle, before browsers' main rendering machinery kicks in. this ensures they are available earlier and are less likely to block the page's render, improving performance. this article provides a basic guide to how <link rel="preload"> works. the basics you most commonly use <link> to load a css file to style your page with: <link rel="stylesheet" href="styles/main.css"> here however, we will use a rel value of preload, which turns <link> into a preloader for any resource we want. you will also need to specify: the path to the resource in the href attribute. the type of resource in the as attribute. a simple example might look like this (see our js and css example source, and also live): <head> <meta charset="utf-8"> <title>js and c...
...el value of preload, which turns <link> into a preloader for any resource we want. you will also need to specify: the path to the resource in the href attribute. the type of resource in the as attribute. a simple example might look like this (see our js and css example source, and also live): <head> <meta charset="utf-8"> <title>js and css preload example</title> <link rel="preload" href="style.css" as="style"> <link rel="preload" href="main.js" as="script"> <link rel="stylesheet" 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. this example is trivial, as t...
...this is especially useful when preloading resources — the browser will use the type attribute value to work out if it supports that resource, and will only download it if so, ignoring it if not. ...
...And 7 more matches

Microformats - HTML: Hypertext Markup Language
ute. to add a property to an object, the p-*, u-*, dt-*, e-* class names are used on one of the object's descendants. there are open source parsing libraries for most languages for microformats2. how microformats work an author of a webpage can add microformats to their html. for example if they wanted to identify themselves they could use an h-card such as: html example <a class="h-card" href="http://alice.example.com">alice blogger</a> when a parser encounters this data, it will know that this page contains a "card" which describes a person or organization named alice blogger with a url of http://alice.example.com/. the parser makes this data available via apis that can be used for different applications. as in this example, some markup patterns require only a single microformat ro...
...ream or feed of posts you can find many more vocabularies on the microformats2 wiki. "p-*" for plain (text) properties, e.g. "p-name", "p-summary" generic plain text parsing, element text in general. on certain html elements, use special attributes first, e.g. img/alt, abbr/title. "u-*" for url properties, e.g. "u-url", "u-photo", "u-logo" special parsing: element attributes a/href, img/src, object/data etc. attributes over element contents. "dt-*" for datetime properties, e.g. "dt-start", "dt-end", "dt-bday" special parsing: time element datetime attribute, value-class-pattern and separate date time value parsing for readability. "e-*" for element tree properties where the entire contained element hierarchy is the value, e.g. "e-content". the "e-" prefix can ...
...remembered as "element tree", "embedded markup", or "encapsulated markup". some microformats examples h-card the h-card microformat represents a a person or organization. the value of each property is defined in html using the class property any element can carry example h-card <p class="h-card"> <img class="u-photo" src="http://example.org/photo.png" alt="" /> <a class="p-name u-url" href="http://example.org">joe bloggs</a> <a class="u-email" href="mailto:joebloggs@example.com">joebloggs@example.com</a>, <span class="p-street-address">17 austerstræti</span> <span class="p-locality">reykjavík</span> <span class="p-country-name">iceland</span> </p> property description p-name the full/formatted name of the person or organization. u-email ...
...And 7 more matches

Structural overview of progressive web apps - Progressive web apps (PWAs)
escription" content="a list of a-frame entries submitted to the js13kgames 2017 competition, used as an example for the mdn articles about progressive web apps."> <meta name="author" content="end3r"> <meta name="theme-color" content="#b12a34"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="og:image" content="icons/icon-512.png"> <link rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" href="style.css"> <link rel="manifest" href="js13kpwa.webmanifest"> <script src="data/games.js" defer></script> <script src="app.js" defer></script> </head> <body> <header> <p><a class="logo" href="http://js13kgames.com"><img src="img/js13kgames.png" alt="js13kgames"></a></p> </header> <main> <h1>js13kgames a-frame entries</h1> <p class="description">l...
...sheet" href="style.css"> <link rel="manifest" href="js13kpwa.webmanifest"> <script src="data/games.js" defer></script> <script src="app.js" defer></script> </head> <body> <header> <p><a class="logo" href="http://js13kgames.com"><img src="img/js13kgames.png" alt="js13kgames"></a></p> </header> <main> <h1>js13kgames a-frame entries</h1> <p class="description">list of games submitted to the <a href="http://js13kgames.com/aframe"> a-frame category</a> in the <a href="http://2017.js13kgames.com">js13kgames 2017</a> competition. ...
.../head> <body> <header> <p><a class="logo" href="http://js13kgames.com"><img src="img/js13kgames.png" alt="js13kgames"></a></p> </header> <main> <h1>js13kgames a-frame entries</h1> <p class="description">list of games submitted to the <a href="http://js13kgames.com/aframe"> a-frame category</a> in the <a href="http://2017.js13kgames.com">js13kgames 2017</a> competition. ...
...And 7 more matches

XInclude - MDN Web Docs Glossary: Definitions of Web-related terms
elements in the language) with all of the attributes of <xi:include> be included in an xml document so as to be resolvable into a single xml document. ...
... all of the attributes of <xi:include> be included in an xml document so as to be resolvable into a single xml document. (note that this has not been thoroughly tested for all circumstances and may not necessarily reflect the standard behavior completely.) note also that if you wish to allow xml:base, you will need the xml:base function, and the line beginning var href = ... ...
... as to be resolvable into a single xml document. (note that this has not been thoroughly tested for all circumstances and may not necessarily reflect the standard behavior completely.) note also that if you wish to allow xml:base, you will need the xml:base function, and the line beginning var href = ... ...
...And 6 more matches

HTML: A good basis for accessibility - Learn web development
layout is complex and has many nested tables. ...
...ple, which looks something like this: <table width="1200"> <!-- main heading row --> <tr id="heading"> <td colspan="6"> <h1 align="center">header</h1> </td> </tr> <!-- nav menu row --> <tr id="nav" bgcolor="#ffffff"> <td width="200"> <a href="#" align="center">home</a> </td> <td width="200"> <a href="#" align="center">our team</a> </td> <td width="200"> <a href="#" align="center">projects</a> </td> <td width="200"> <a href="#" align="center">contact</a> </td> <td width="300"> <form width="300"> <input type="search" name="q" placeholder="search query" width="300"> </form> </td> ...
...controls, for example, the <select> element can have its options displayed and cycled between using the up and down arrow keys. note: different browsers may have different keyboard control options available. see using native keyboard accessibility for more details. you essentially get this behavior for free, just by using the appropriate elements, e.g. ...
...And 6 more matches

HTML: A good basis for accessibility - Learn web development
layout is complex and has many nested tables. ...
...ple, which looks something like this: <table width="1200"> <!-- main heading row --> <tr id="heading"> <td colspan="6"> <h1 align="center">header</h1> </td> </tr> <!-- nav menu row --> <tr id="nav" bgcolor="#ffffff"> <td width="200"> <a href="#" align="center">home</a> </td> <td width="200"> <a href="#" align="center">our team</a> </td> <td width="200"> <a href="#" align="center">projects</a> </td> <td width="200"> <a href="#" align="center">contact</a> </td> <td width="300"> <form width="300"> <input type="search" name="q" placeholder="search query" width="300"> </form> </td> ...
...controls, for example, the <select> element can have its options displayed and cycled between using the up and down arrow keys. note: different browsers may have different keyboard control options available. see using native keyboard accessibility for more details. you essentially get this behavior for free, just by using the appropriate elements, e.g. ...
...And 6 more matches

HTMLAreaElement - Web APIs
s available to it by inheritance) for manipulating the layout and presentation of <area> elements. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 6 more matches

HTML attribute: rel - HTML: Hypertext Markup Language
icon, but this link type is non-conforming, ignored and web authors must not use it anymore. alternate indicates an alternate representation of the current document. valid for link, a, and area, the meaning depends on the values of the other attributes. with the stylesheet keyword on a <link>, it creates an alternate stylesheet. <!-- a persistent style sheet --> <link rel="stylesheet" href="default.css"> <!-- alternate style sheets --> <link rel="alternate stylesheet" href="highcontrast.css" title="high contrast"> with an hreflang attribute that differs from the document language, it indicates a translation. with the type attribute, it indicates that the referenced document is the same content in a different format. for example, with type="application/rss+xml" it creates a h...
...trast.css" title="high contrast"> with an hreflang attribute that differs from the document language, it indicates a translation. with the type attribute, it indicates that the referenced document is the same content in a different format. for example, with type="application/rss+xml" it creates a hyperlink referencing a syndication feed. ...
...n hreflang attribute that differs from the document language, it indicates a translation. with the type attribute, it indicates that the referenced document is the same content in a different format. for example, with type="application/rss+xml" it creates a hyperlink referencing a syndication feed. ...
...And 6 more matches

Progressive web app structure - Progressive web apps (PWAs)
escription" content="a list of a-frame entries submitted to the js13kgames 2017 competition, used as an example for the mdn articles about progressive web apps."> <meta name="author" content="end3r"> <meta name="theme-color" content="#b12a34"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="og:image" content="icons/icon-512.png"> <link rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" href="style.css"> <link rel="manifest" href="js13kpwa.webmanifest"> <script src="data/games.js" defer></script> <script src="app.js" defer></script> </head> <body> <header> <p><a class="logo" href="http://js13kgames.com"><img src="img/js13kgames.png" alt="js13kgames"></a></p> </header> <main> <h1>js13kgames a-frame entries</h1> <p class="description">l...
...sheet" href="style.css"> <link rel="manifest" href="js13kpwa.webmanifest"> <script src="data/games.js" defer></script> <script src="app.js" defer></script> </head> <body> <header> <p><a class="logo" href="http://js13kgames.com"><img src="img/js13kgames.png" alt="js13kgames"></a></p> </header> <main> <h1>js13kgames a-frame entries</h1> <p class="description">list of games submitted to the <a href="http://js13kgames.com/aframe">a-frame category</a> in the <a href="http://2017.js13kgames.com">js13kgames 2017</a> competition. ...
...fer></script> </head> <body> <header> <p><a class="logo" href="http://js13kgames.com"><img src="img/js13kgames.png" alt="js13kgames"></a></p> </header> <main> <h1>js13kgames a-frame entries</h1> <p class="description">list of games submitted to the <a href="http://js13kgames.com/aframe">a-frame category</a> in the <a href="http://2017.js13kgames.com">js13kgames 2017</a> competition. ...
...And 6 more matches

Document Loading - From Load Start to Finding a Handler - Archive of obsolete content
a docshell and handles most of the data types that mozilla handles internally. nsiexternalhelperappservice if we can't do anything else with a load, we give it to the nsiexternalhelperappservice and let it look for a helper app, put up the "what do i do now?" dialog, and so forth. ...
...a load, we give it to the nsiexternalhelperappservice and let it look for a helper app, put up the "what do i do now?" dialog, and so forth. ...
...er app, put up the "what do i do now?" dialog, and so forth. ...
...And 5 more matches

Location - Web APIs
the location interface represents the location (url) of the object it is linked to. changes done on it are reflected on the object it relates to. both the document and window interface have such a linked location, accessible via document.location and window.location respectively. ...
... the location interface represents the location (url) of the object it is linked to. changes done on it are reflected on the object it relates to. both the document and window interface have such a linked location, accessible via document.location and window.location respectively. ...
...electorall('[title]'), function (node) { node.addeventlistener("click", function(e) { e.preventdefault(); e.stoppropagation(); window.location.hash = ''; }); }); result properties location.ancestororigins is a static domstringlist containing, in reverse order, the origins of all ancestor browsing contexts of the document associated with the given location object. location.href is a stringifier that returns a usvstring containing the entire url. if changed, the associated document navigates to the new page. it can be set from a different origin than the associated document. location.protocol is a usvstring containing the protocol scheme of the url, including the final ':'. location.host is a usvstring containing the host, that is the hostname, a ':', and the port o...
...And 5 more matches

SVGTSpanElement - Web APIs
the svgtspanelement interface represents a <tspan> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 5 more matches

SVGTextElement - Web APIs
the svgtextelement interface corresponds to the <text> elements. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 5 more matches

Window.open() - Web APIs
will be brought on top of any other window. */ } else { windowobjectreference.focus(); /* else the window reference must exist and the window is not closed; therefore, we can bring it back on top of any other window with the focus() method. there would be no need to re-create the window or to reload the referenced resource. */ }; } </script> (...) <p><a href="http://www.spreadfirefox.com/" target="promotefirefoxwindowname" onclick="openffpromotionpopup(); return false;" title="this link will create a new window or will re-use an already opened one" >promote firefox adoption</a></p> the above code solves a few usability problems related to links opening secondary window. the purpose of the return false in the code is to cancel default action of t...
...pts and webpages: <script type="text/javascript"> var windowobjectreference = null; // global variable function openrequestedpopup(url, windowname) { if(windowobjectreference == null || windowobjectreference.closed) { windowobjectreference = window.open(url, windowname, "resizable,scrollbars,status"); } else { windowobjectreference.focus(); }; } </script> (...) <p><a href="http://www.spreadfirefox.com/" target="promotefirefoxwindow" onclick="openrequestedpopup(this.href, this.target); return false;" title="this link will create a new window or will re-use an already opened one" >promote firefox adoption</a></p> you can also make such function able to open only 1 secondary window and to reuse such single secondary window for other links in this manner: <scrip...
... then we load it in the already opened secondary window and then we bring such window back on top/in front of its parent window. */ windowobjectreference.focus(); } else { windowobjectreference.focus(); }; previousurl = url; /* explanation: we store the current url in order to compare url in the event of another call of this function. ...
...And 5 more matches

Using HTML sections and outlines - Developer guides
metimes some links. in the context of a section, a footer might contain the sectioned content's publication date, license information, etc. <article>, <section>, <aside>, and <nav> can have their own <footer>. despite its name, the footer is not necessarily positioned at the end of a page or section. ...
...section, a footer might contain the sectioned content's publication date, license information, etc. <article>, <section>, <aside>, and <nav> can have their own <footer>. despite its name, the footer is not necessarily positioned at the end of a page or section. ...
...ioned content's publication date, license information, etc. <article>, <section>, <aside>, and <nav> can have their own <footer>. despite its name, the footer is not necessarily positioned at the end of a page or section. ...
...And 5 more matches

<area> - HTML: Hypertext Markup Language
content categories flow content, phrasing content. permitted content none, it is an empty element. tag omission must have a start tag and must not have an end tag. permitted parents any element that accepts phrasing content. the <area> element must have an ancestor <map>, but it need not be a direct parent. implicit aria role link when href attribute is present, otherwise no corresponding role permitted aria roles no role permitted dom interface htmlareaelement attributes this element's attributes include the global attributes. alt a text string alternative to display on browsers that do not display images. the text should be phrased so that it presents the user with the same kind of choice as the...
...ed dom interface htmlareaelement attributes this element's attributes include the global attributes. alt a text string alternative to display on browsers that do not display images. the text should be phrased so that it presents the user with the same kind of choice as the image would offer when displayed without the alternative text. this attribute is required only if the href attribute is used. coords a set of values specifying the coordinates of the hot-spot region. the number and meaning of the values depend upon the value specified for the shape attribute. rect or rectangle: the value is two x,y pairs: left, top, right, bottom. circle: the value is x,y,r where x,y is a pair specifying the center of the circle and r is a value for the radius. poly or ...
...ing the center of the circle and r is a value for the radius. poly or polygon: the value is a set of x,y pairs for each point in the polygon: x1,y1,x2,y2,x3,y3, and so on. the values are numbers of css pixels. download this attribute, if present, indicates that the author intends the hyperlink to be used for downloading a resource. see <a> for a full description of the download attribute. href the hyperlink target for the area. its value is a valid url. this attribute may be omitted; if so, the <area> element does not represent a hyperlink. hreflang indicates the language of the linked resource. allowed values are determined by bcp47. use this attribute only if the href attribute is present. ping contains a space-separated list of urls to which, when the hyperlink is followed, pos...
...And 5 more matches

Mobile first - Progressive web apps (PWAs)
ding to media query and feature tests (require.js is built in, which is helpful and very easy to use.) html structure for this example app, the html structure is going to be very simple: i am just including a heading, navigation menu and filler text to highlight the fact that articles can get very long on narrow screen devices. ...
...s (require.js is built in, which is helpful and very easy to use.) html structure for this example app, the html structure is going to be very simple: i am just including a heading, navigation menu and filler text to highlight the fact that articles can get very long on narrow screen devices. ...
...ful and very easy to use.) html structure for this example app, the html structure is going to be very simple: i am just including a heading, navigation menu and filler text to highlight the fact that articles can get very long on narrow screen devices. ...
...And 5 more matches

<feComposite> - SVG: Scalable Vector Graphics
k3=".5" k4=".5"/> </filter> <path id="blue100" d="m 0 0 l 100 0 l 100 100 z" fill="#00ffff" /> <path id="red100" d="m 0 0 l 0 100 l 100 0 z" fill="#ff00ff" /> <path id="blue50" d="m 0 125 l 100 125 l 100 225 z" fill="#00ffff" fill-opacity=".5" /> <path id="red50" d="m 0 125 l 0 225 l 100 125 z" fill="#ff00ff" fill-opacity=".5" /> <g id="twobluetriangles"> <use xlink:href="#blue100"/> <use xlink:href="#blue50"/> </g> <g id="bluetriangles"> <use transform="translate(275,25)" xlink:href="#twobluetriangles"/> <use transform="translate(400,25)" xlink:href="#twobluetriangles"/> <use transform="translate(525,25)" xlink:href="#twobluetriangles"/> <use transform="translate(650,25)" xlink:href="#twobluetriangles"/> <use transform...
...ink:href="#blue50"/> </g> <g id="bluetriangles"> <use transform="translate(275,25)" xlink:href="#twobluetriangles"/> <use transform="translate(400,25)" xlink:href="#twobluetriangles"/> <use transform="translate(525,25)" xlink:href="#twobluetriangles"/> <use transform="translate(650,25)" xlink:href="#twobluetriangles"/> <use transform="translate(775,25)" xlink:href="#twobluetriangles"/> <use transform="translate(900,25)" xlink:href="#twobluetriangles"/> </g> </defs> <rect fill="none" stroke="blue" x="1" y="1" width="1098" height="648"/> <g font-family="verdana" font-size="40" shape-rendering="crispedges"> <desc>render the examples using the filters that draw on top of an opaque white surface, thus obliterating the background.<...
...nder the examples using the filters that draw on top of an opaque white surface, thus obliterating the background.</desc> <g enable-background="new"> <text x="15" y="75">opacity 1.0</text> <text x="15" y="115" font-size="27">(with feflood)</text> <text x="15" y="200">opacity 0.5</text> <text x="15" y="240" font-size="27">(with feflood)</text> <use xlink:href="#bluetriangles"/> <g transform="translate(275,25)"> <use xlink:href="#red100" filter="url(#overflood)" /> <use xlink:href="#red50" filter="url(#overflood)" /> <text x="5" y="275">over</text> </g> <g transform="translate(400,25)"> <use xlink:href="#red100" filter="url(#inflood)" /> <use xlink:href="#red50" filter="url(#inflood)" /> ...
...And 5 more matches

Installing Extensions and Themes From Web Pages - Archive of obsolete content
ays you can install extensions and themes from web pages, including direct linking to the xpi files and using the installtrigger object. extension and web authors are encouraged to use the method described below to install xpis, as it provides the best experience to users. ...
...e xpi files and using the installtrigger object. extension and web authors are encouraged to use the method described below to install xpis, as it provides the best experience to users. ...
...nstall (aevent) { for (var a = aevent.target; a.href === undefined;) a = a.parentnode; var params = { "foo": { url: aevent.target.href, iconurl: aevent.target.getattribute("iconurl"), hash: aevent.target.getattribute("hash"), tostring: function () { return this.url; } } }; installtrigger.install(params); return false; } //--> </script> <a href="http://www.example.com/foo.xpi" iconurl="http://www.example.com/foo.png" hash="sha1:28857e60d043447c5f4550853f2d40770b326a13" onclick="return install(event);">install extension!</a> let's go through this piece by piece. the html <a> is the install link. ...
...And 4 more matches

Making it into a static overlay - Archive of obsolete content
tually changing the code of the file itself, which is necessary when installing an extension like ours. we'll first make the file into a static overlay, then we'll make it into a dynamic overlay. ...
...n statusbar. if insertbefore is omitted, the element will be added as the last child of statusbar, usually before the resizer grippy. we could instead have used an insertafter attribute to place the element after another. to use this overlay instead of our changes to navigator.xul we need to remove our changes, then add a reference to the overlay to the top of navigator.xul: ... ...
... last child of statusbar, usually before the resizer grippy. we could instead have used an insertafter attribute to place the element after another. to use this overlay instead of our changes to navigator.xul we need to remove our changes, then add a reference to the overlay to the top of navigator.xul: ... ...
...And 4 more matches

Mozilla DOM Hacking Guide
meter, and not a url string. instead, in the helper class for the window object (nswindowsh, see the next section), we define the getproperty() member function. getproperty() is a function used by xpconnect when we are setting an unknown property on the object (window, in our case). in getproperty(), we check if the property being set is "location". if that is the case, we call nsidomlocation::sethref(). in fact, when setting window.location, we really set window.location.href. this is all possible thanks to the magic of the interaction between xpconnect and the dom. the second example is the history object. other browsers allow the history object to be used like an array, e.g. history[1]. the behavior "act as an array" cannot be reflected in the idl itself. fortunately, xpconnect provides us...
...out each nsixpcscriptable function, please see the nsixpcscriptable documentation. to illustrate the use of nsixpcscriptable and scriptable helper functions, we will take the example of the "location" property of the window object. window.location is a dom object of type "location". however a common technique is to do window.location = "http://mozilla.org" instead of the correct window.location.href = "http://mozilla.org". so, we have to override the default behavior of "setting the location property on the window object". the default behavior would be that xpconnect expects a nsidomlocation object. however it would be passed a js string. a bad conversion exception would be thrown. before we start looking at the implementation of the nsixpcscriptable interface, the implementor needs the fo...
...rsion exception would be thrown. before we start looking at the implementation of the nsixpcscriptable interface, the implementor needs the following information: which dom object is concerned what action does he want to override what should happen for our example, it is the window object. the action is setting a property. what should happen is that setting .location should set .location.href. with that information in hand, we can start coding. what there is to do locate the dom object classinfo data in the sclassinfodata array. in our example, it is the window object. the three parameters passed to the macro, as described in the previous section, are the dom object name, the scriptable helper class, and the scriptable flags. the scriptable flags tell you which nsixpcscriptable i...
...And 4 more matches

HTMLAnchorElement - Web APIs
rresponds to <a> element; not to be confused with <link>, which is represented by htmllinkelement) <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1=...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 4 more matches

Ajax navigation example - Web APIs
top: 0; left: 0; width: 100%; height: 100%; } #ajax-loader > div { display: table-cell; width: 100%; height: 100%; vertical-align: middle; text-align: center; background-color: #000000; opacity: 0.65; } include/after_content.php: <p>this is the footer. ...
... #ajax-loader > div { display: table-cell; width: 100%; height: 100%; vertical-align: middle; text-align: center; background-color: #000000; opacity: 0.65; } include/after_content.php: <p>this is the footer. ...
... height: 100%; vertical-align: middle; text-align: center; background-color: #000000; opacity: 0.65; } include/after_content.php: <p>this is the footer. ...
...And 4 more matches

SVGCircleElement - Web APIs
the svgcircleelement interface is an interface for the <circle> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 4 more matches

SVGEllipseElement - Web APIs
gellipseelement interface provides access to the properties of <ellipse> elements. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 4 more matches

SVGLineElement - Web APIs
ccess to the properties of <line> elements, as well as methods to manipulate them. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 4 more matches

SVGPathElement - Web APIs
the svgpathelement interface corresponds to the <path> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 4 more matches

SVGPolygonElement - Web APIs
ss to the properties of <polygon> elements, as well as methods to manipulate them. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 4 more matches

SVGPolylineElement - Web APIs
s to the properties of <polyline> elements, as well as methods to manipulate them. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 4 more matches

SVGRectElement - Web APIs
ccess to the properties of <rect> elements, as well as methods to manipulate them. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 4 more matches

SVGTextPathElement - Web APIs
the svgtextpathelement interface corresponds to the <textpath> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 4 more matches

SVGTextPositioningElement - Web APIs
glyphs. it is inherited by svgtextelement, svgtspanelement, svgtrefelement and svgaltglyphelement. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 4 more matches

SVGURIReference - Web APIs
the svgurireference interface is used to reflect the href attribute and the deprecated xlink:href attribute. ...
...face is used to reflect the href attribute and the deprecated xlink:href attribute. ...
... m...
...And 4 more matches

Namespaces crash course - SVG: Scalable Vector Graphics
y default, parameters don't have a namespace at all, and are only known to be unique because they appear on an element that itself has a unique name. however, sometimes it is necessary to define parameters so that they can be reused on many different elements and still be considered to be the same parameter, independently of the element with which they are used. ...
...as you may guess from the first 'xmlns' part, this is another namespace declaration. however, instead of setting the default namespace, this namespace declaration sets the namespace for something called a "namespace prefix". ...
... this tells the user agent that that particular parameter belongs to the namespace assigned to the namespace prefix (xlink), and is a parameter that can be used with the same meaning on other elements. note that it is an xml error to use a prefix that hasn't been bound to a namespace name. the binding created by the xmlns:xlink parameter in the example above is absolutely essential for the xlink:href parameter to not cause an error. this xlink parameter is also frequently used in svg on the <a>, <use> and <image> elements among others, so it's a good idea to always include the xlink declaration in your documents. as an aside, it's useful to know that namespace prefixes can also be used for element names. this tells the user agent that that particular element (but not its children this time!)...
...And 4 more matches

Menu - Archive of obsolete content
. individual menus are drawn from the set using on(): on(selector) returns a new contextmenuset whose context menus are those that arise from nodes that match the given css selector(s). the selector must be a true css selector, not a jquery or other type of pseudo-selector. note: selectors don't automatically include the children of nodes they match. for example, jetpack.menu.context.page.on("a[href]") does not match images contained in links. to match links and all elements contained in links, use jetpack.menu.context.page.on("a[href], a[href] *"). a future version of jetpack may change this behavior; see bug 527924. what do you think? leave a comment on that bug or send a message to the mailing list. parameters selector one or more css selectors. a string. examples: "a...
... return value a new contextmenuset object. jetpack.menu.context the feature's context menu. ...
... return value a new contextmenuset object. jetpack.menu.context the feature's context menu. all of the feature's context menus are exposed through jetpack.menu.context, including slidebar, panel, toolbar, and status bar item context menus. ...
...And 3 more matches

MathML Demo: <mspace> - space
nts has been set to yellow for easier viewing. you can set the width ∑ x y height ∫ x y and depth [ x y ] of mspace elements (click the math text to view the numeric values that are set). interactive sizing html content <p> use the control buttons below to adjust the parameters of the <code>mspace</code> element and see the effects. ...
... y height ∫ x y and depth [ x y ] of mspace elements (click the math text to view the numeric values that are set). interactive sizing html content <p> use the control buttons below to adjust the parameters of the <code>mspace</code> element and see the effects. ...
... text to view the numeric values that are set). interactive sizing html content <p> use the control buttons below to adjust the parameters of the <code>mspace</code> element and see the effects. ...
...And 3 more matches

nsACString_internal
a single contiguous array of characters, which may or may not be null-terminated. this type is not instantiated directly. a sub-class is instantiated instead. for example, see nststring. names: nsastring for wide characters nsacstring for narrow characters many of the accessors on nstsubstring are inlined as an optimization. ...
...nstantiated instead. for example, see nststring. names: nsastring for wide characters nsacstring for narrow characters many of the accessors on nstsubstring are inlined as an optimization. ...
...s many of the accessors on nstsubstring are inlined as an optimization. ...
...And 3 more matches

nsAString (External)
class declaration this header provides wrapper classes around the frozen string api which are roughly equivalent to the internal string classes. ...
... class declaration this header provides wrapper classes around the frozen string api which are roughly equivalent to the internal string classes. ...
...o the internal string classes. ...
...And 3 more matches

nsAString_internal
a single contiguous array of characters, which may or may not be null-terminated. this type is not instantiated directly. a sub-class is instantiated instead. for example, see nststring. names: nsastring for wide characters nsacstring for narrow characters many of the accessors on nstsubstring are inlined as an optimization. ...
... instantiated instead. for example, see nststring. names: nsastring for wide characters nsacstring for narrow characters many of the accessors on nstsubstring are inlined as an optimization. ...
...cters many of the accessors on nstsubstring are inlined as an optimization. ...
...And 3 more matches

HTMLAudioElement - Web APIs
ate them. it's based on, and inherits properties and methods from, the htmlmediaelement interface. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 3 more matches

HTMLBaseElement - Web APIs
this object inherits all of the properties and methods as described in the htmlelement interface. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 3 more matches

HTMLLinkElement - Web APIs
chorelement). this object inherits all of the properties and methods of the htmlelement interface. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 3 more matches

HTMLTextAreaElement - Web APIs
pecial properties and methods for manipulating the layout and presentation of <textarea> elements. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 3 more matches

HTMLVideoElement - Web APIs
in enough different formats that all the browsers you need to support are covered. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 3 more matches

SVGAnimateElement - Web APIs
the svganimateelement interface corresponds to the <animate> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 3 more matches

SVGAnimateMotionElement - Web APIs
the svganimatemotionelement interface corresponds to the <animatemotion> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 3 more matches

SVGAnimateTransformElement - Web APIs
vganimatetransformelement interface corresponds to the <animatetransform> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 3 more matches

SVGAnimationElement - Web APIs
t, svganimatecolorelement, svganimatemotionelement and svganimatetransformelement. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 3 more matches

SVGDefsElement - Web APIs
the svgdefselement interface corresponds to the <defs> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 3 more matches

SVGFEFuncAElement - Web APIs
the svgfefuncaelement interface corresponds to the <fefunca> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 3 more matches

SVGFEFuncBElement - Web APIs
the svgfefuncbelement interface corresponds to the <fefuncb> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 3 more matches

SVGFEFuncGElement - Web APIs
the svgfefuncgelement interface corresponds to the <fefuncg> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 3 more matches

SVGFEFuncRElement - Web APIs
the svgfefuncrelement interface corresponds to the <fefuncr> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 3 more matches

SVGForeignObjectElement - Web APIs
the properties of <foreignobject> elements, as well as methods to manipulate them. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 3 more matches

SVGGElement - Web APIs
the svggelement interface corresponds to the <g> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 3 more matches

SVGGeometryElement - Web APIs
th, and which can be filled and stroked. this includes paths and the basic shapes. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 3 more matches

SVGImageElement - Web APIs
the svgimageelement interface corresponds to the <image> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 3 more matches

SVGLinearGradientElement - Web APIs
he svglineargradientelement interface corresponds to the <lineargradient> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 3 more matches

SVGRadialGradientElement - Web APIs
he svgradialgradientelement interface corresponds to the <radialgradient> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 3 more matches

SVGSVGElement - Web APIs
rations and the ability to control the time of redraw on visual rendering devices. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 3 more matches

SVGSetElement - Web APIs
the svgsetelement interface corresponds to the <set> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 3 more matches

SVGSwitchElement - Web APIs
the svgswitchelement interface corresponds to the <switch> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 3 more matches

SVGTextContentElement - Web APIs
uch as svgtextelement, svgtspanelement, svgtrefelement, svgaltglyphelement and svgtextpathelement. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 3 more matches

SVGUseElement - Web APIs
g use dom interface the svguseelement interface corresponds to the <use> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 3 more matches

Attribute selectors - CSS: Cascading Style Sheets
the css attribute selector matches elements based on the presence or value of a given attribute. /* <a> elements with a title attribute */ a[title] { color: purple; } /* <a> elements with an href matching "https://example.org" */ a[href="https://example.org"] { color: green; } /* <a> elements with an href containing "example" */ a[href*="example"] { font-size: 2em; } /* <a> elements with an href ending ".org" */ a[href$=".org"] { font-style: italic; } /* <a> elements whose class attribute contains the word "logo" */ a[class~="logo"] { padding: 2px; } syntax [attr] represents elements with an attribute name of attr. [attr=value] represents elements with an attribute name of attr whose value is exactly value. [attr~=value] represents elements with an attribute name of a...
...alue i] adding an i (or i) before the closing bracket causes the value to be compared case-insensitively (for characters within the ascii range). [attr operator value s] adding an s (or s) before the closing bracket causes the value to be compared case-sensitively (for characters within the ascii range). ...
...-insensitively (for characters within the ascii range). [attr operator value s] adding an s (or s) before the closing bracket causes the value to be compared case-sensitively (for characters within the ascii range). ...
...And 3 more matches

<base>: The Document Base URL element - HTML: Hypertext Markup Language
content categories metadata content. permitted content none, it is an empty element. tag omission there must be no closing tag. ...
...ain another <base> element. implicit aria role no corresponding role permitted aria roles no role permitted dom interface htmlbaseelement attributes this element's attributes include the global attributes. if either of the following attributes are specified, this element must come before other elements with attribute values of urls, such as <link>’s href attribute. href the base url to be used throughout the document for relative urls. absolute and relative urls are allowed. target a keyword or author-defined name of the default browsing context to show the results of navigation from <a>, <area>, or <form> elements without explicit target attributes. the following keywords have special meanings: _self (default): show the result in the...
...ing context of the current one, if the current page is inside a frame. if there is no parent, acts the same as _self. _top: show the result in the topmost browsing context (the browsing context that is an ancestor of the current one and has no parent). if there is no parent, acts the same as _self. ...
...And 3 more matches

<a> - SVG: Scalable Vector Graphics
he same page, email addresses, or any other url. it is very similar to html’s <a> element. svg's <a> element is a container, which means you can create a link around text (like in html) but also around any shape. ...
...ntainer, which means you can create a link around text (like in html) but also around any shape. @namespace svg url(http://www.w3.org/2000/svg); html,body,svg { height:100% } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <!-- a link around a shape --> <a href="/docs/web/svg/element/circle"> <circle cx="50" cy="40" r="35"/> </a> <!-- a link around a text --> <a href="/docs/web/svg/element/text"> <text x="50" y="90" text-anchor="middle"> &lt;circle&gt; </text> </a> </svg> /* as svg does not provide a default visual style for links, it's considered best practice to add some */ @namespace svg url(http://www.w3.org/2000/svg); /* necessary to select only svg <a> elements, and not also html’s. see warning below */ svg|a:link, svg|a:visit...
...nce this element shares its tag name with html's <a> element, selecting a with css or queryselector may apply to the wrong kind of element. try the @namespace rule to distinguish the two. attributes download instructs browsers to download a url instead of navigating to it, so the user will be prompted to save it as a local file. value type: <string> ; default value: none; animatable: no href the url or url fragment the hyperlink points to. value type: <url> ; default value: none; animatable: yes hreflang the human language of the url or url fragment that the hyperlink points to. value type: <string> ; default value: none; animatable: yes ping a space-separated list of urls to which, when the hyperlink is followed, post requests with the body ping will be sent by the browser ...
...And 3 more matches

<use> - SVG: Scalable Vector Graphics
the <use> element takes nodes from within the svg document, and duplicates them somewhere else. html,body,svg { height:100% } <svg viewbox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> <circle id="mycircle" cx="5" cy="5" r="4" stroke="blue"/> <use href="#mycircle" x="10" fill="blue"/> <use href="#mycircle" x="20" fill="white" stroke="red"/> <!-- stroke="red" will be ignored here, as stroke was already set on mycircle. most attributes (except for x, y, width, height and (xlink:)href) do not override those set in the ancestor. that's why the circles have different x positions, but the same stroke value. --> </svg> the effect is the same as if the nodes were deeply cloned into a non-exposed dom, then pasted where the use element is, much like cloned template elements in html...
...</svg> the effect is the same as if the nodes were deeply cloned into a non-exposed dom, then pasted where the use element is, much like cloned template elements in html5. most attributes on use do not override those already on the element referenced by use. (this differs from how css style attributes override those set 'earlier' in the cascade). only the attributes x, y, width, height and href on the use element will override those set on the referenced element. however, any other attributes not set on the referenced element will be applied to the use element. since the cloned nodes are not exposed, care must be taken when using css to style a use element and its cloned descendants. css properties are not guaranteed to be inherited by the cloned dom unless you explicitly request the...
...he use element. since the cloned nodes are not exposed, care must be taken when using css to style a use element and its cloned descendants. css properties are not guaranteed to be inherited by the cloned dom unless you explicitly request them using css inheritance. ...
...And 3 more matches

context-menu - Archive of obsolete content
ntext() the page context. selectioncontext() this context occurs when the menu is invoked on a page in which the user has made a selection. selectorcontext(selector) this context occurs when the menu is invoked on a node that either matches selector, a css selector, or has an ancestor that matches. selector may include multiple selectors separated by commas, e.g., "a[href], img". urlcontext(matchpattern) this context occurs when the menu is invoked on pages with particular urls. matchpattern is a match pattern string or an array of match pattern strings. when matchpattern is an array, the context occurs when the menu is invoked on a page whose url matches any of the patterns. these are the same match pattern strings that you use with the page-mod incl...
... var cm = require("sdk/context-menu"); var googleitem = cm.item...
....google.com/search?q=" }); var wikipediaitem = cm.item({ label: "wikipedia", data: "http://en.wikipedia.org/wiki/special:search?search=" }); var searchmenu = cm.menu({ label: "search with", context: cm.selectorcontext("a[href]"), contentscript: 'self.on("click", function (node, data) {' + ' var searchurl = data + node.textcontent;' + ' window.location.href = searchurl;' + '});', items: [googleitem, wikipediaitem] }); to create sub-menus, one of the items in your main menu must be defined as a menu. var cm = require("sdk/context-menu"); var googleitem = cm.item({ label: "google", data: "http://www.google.com/search?q=" }); var wikipediaitem = cm.item({ label: "wikipedia", data: "http://en.wikipedia.org/wiki/special:searc...
...And 2 more matches

SVG General - Archive of obsolete content
commended that you do not use dtd's with svg documents. the tutorial and authoring guidelines have more information. dynamic scripting helper this little helper script can be used to simplify creation of svg elements in script. svg requires you to use setattributens to add attributes to a newly created svg dom element. no properties like html. ...
...etattributens to add attributes to a newly created svg dom element. no properties like html. svg image also requires the use of xlink for the href attribute, which can be tricky to remember, especially when you're mixing svg with html or xul. ...
...utens to add attributes to a newly created svg dom element. no properties like html. svg image also requires the use of xlink for the href attribute, which can be tricky to remember, especially when you're mixing svg with html or xul. ...
...And 2 more matches

Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
r, please include them. because a xul document is also an xml document, it can contain xhtml, svg, mathml, and other elements; if you use external entity references, the xml document's contents are modularized; combined with other xml-related technologies, such as dom, xlink, or xslt, you can use it for a number of different applications. <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet href="chrome://global/skin/"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <!-- contents go here. --> </window> listing 2: general structure of a xul document even with the internationalization of firefox and extensions, this kind of xml function is being used. reading in style sheets xul uses css to specify the appearance of its elements. again, since xul is ...
...y strings as their values. the action taken when pressing one of these buttons is defined by an event handler with the name ondialog<button name>. if these event handlers are not defined, pressing either the accept button or cancel button will simply close that dialog. listing 8 shows a simple dialog example, and figure 5 shows its output. ...
...t specified by the xul-overlay will be read in at the same time as the current xul document. the xul document that actually gets displayed will be a combination of the original xul document and the one specified in xul-overlay. try typing up listing 23 and saving it as base.xul. take a look at the overlay example used by this xul document. ...
...And 2 more matches

Using the Right Markup to Invoke Plugins - Archive of obsolete content
the data attribute points to the swf file to play, and the configuration parameters (the param elements) are used in a consistent manner both for ie and for mozilla-based br...
...if you don't specify a codebase attribute, and the plugin is not installed,the browser will...
...users installing netscape 6.x and netscape 7 have a choice of whether or not to install java. unlike netscape commun...
...And 2 more matches

Audio for Web games - Game development
dio context. you'll need to take account of the time between creating an audio context and when the first audio track starts playing. recording this offset and querying the playing track's current time gives you enough information to synchronize separate pieces of audio. ...
...is in action, let's lay out some separate tracks: <section id="tracks"> <ul> <li data-loading="true"> <a href="leadguitar.mp3" class="track">lead guitar</a> <p class="loading-text">loading...</p> <button data-playing="false" aria-decribedby="guitar-play-label"> <span id="guitar-play-label">play</span> </button> </li> <li data-loading="true"> <a href="bassguitar.mp3" class="track">bass guitar</a> <p class="loading-text">loading...</p> <button data-playing="false" aria-describedby="bass-play-label"> <span id="bass-play-label">play</span> </button> </li> <li data-loading="true"> <a href="drums.mp3" class="track">drums</a> <p class="loading-text">loading...</p> <button data-playing="false" aria...
..."bass-play-label"> <span id="bass-play-label">play</span> </button> </li> <li data-loading="true"> <a href="drums.mp3" class="track">drums</a> <p class="loading-text">loading...</p> <button data-playing="false" aria-describedby="drums-play-label"> <span id="drums-play-label">play</span> </button> </li> <li data-loading="true"> <a href="horns.mp3" class="track">horns</a> <p class="loading-text">loading...</p> <button data-playing="false" aria-describedby="horns-play-label"> <span id="horns-play-label">play</span> </button> </li> <li data-loading="true"> <a href="clav.mp3" class="track">clavi</a> <p class="loading-text">loading...</p> <button data-playing="false" aria-described...
...And 2 more matches

Advanced text formatting - Learn web development
want to make the source of the quotation available on the page you need to make it available in the text via a link or some other appropriate way. there is a <cite> element, but this is meant to contain the title of the resource being quoted, e.g. the name of the book. ...
... active learning: who said that? time for another active learning example! in this example we'd like you to: turn the middle paragraph into a blockquote, which includes a cite attribute. turn "the need to eliminate negative self talk" in the third paragraph into an inline quote, an...
... solution.value = 'show solution'; updatecode(); }); solution.addeventlistener('click', function() { if(solution.value === 'show solution') { textarea.value = solutionentry; solution.value = 'hide solution'; } else { textarea.value = userentry; solution.value = 'show solution'; } updatecode(); }); const htmlsolution = '<p>hello and welcome to my motivation page. ...
...And 2 more matches

What’s in the head? Metadata in HTML - Learn web development
marks panel. ...
... <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> here is an example of a favicon in a bookmarks panel: there are lots of other icon types to consider these days as well. ...
...ll. ...
...And 2 more matches

nsIHTMLEditor
ly on the selection, and is not sensitive to context. used primarily to supply new element for various insert element dialogs (image, link, table, and horizontalrule are the only returned elements as of 9/12/18); namedanchor was removed in firefox 63. nsidomelement createelementwithdefaults( in astring atagname ); parameters atagname the html tagname. special input value for links: use "href" to get a link node (an "a" tag with the "href" attribute set) return value the new element created. decreasefontsize() decrease font size for text in selection by 1 html unit all existing text is scanned for existing <font size> attributes so they will be decreased instead of inserting new <font> tag. void decreasefontsize(); parameters none. dodrag() transfers the relevant data (as a...
...r none. getelementorparentbytagname() return the input node or a parent matching the given atagname, starting the search at the supplied node. an example of use is for testing if a node is in a table cell given a selection anchor node. nsidomelement getelementorparentbytagname( in astring atagname, in nsidomnode anode ); parameters atagname the html tagname special input values: use "href" to get a link node (an "a" tag with the "href" attribute set) use "list" to get an ol, ul, or dl list node use "td" to get either a td or th cell node. anode the node in the document to start the search. if it is null, the anchor node of the current selection is used. return value ns_editor_element_not_found if an element is not found (passes ns_succeeded macro) getfontcolorstate() return...
... nsisupportsarray getlinkedobjects(); parameters none. return value anodelist the linked nodes found. getlistitemstate() getlistitemstate returns what list item type is in the selection. void getlistitemstate( out boolean amixed, out boolean ali, out boolean adt, out boolean add ); parameter...
...And 2 more matches

CDATASection - Web APIs
use an error ]]> note that cdata sections should not be used within html; they only work in xml. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/characterdata" target="_top"><rect x="266" y="1" width="130" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="331" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">characterdata</text></a><polyline points="396,25 406,20 406,30 396,25" stroke="#d4dde4" fill="none"/><l...
...And 2 more matches

HTMLBRElement - Web APIs
htmlbrelement interface represents a html line break element (<br>). it inherits from htmlelement. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLBodyElement - Web APIs
(beyond those inherited from the regular htmlelement interface) for manipulating <body> elements. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLButtonElement - Web APIs
lelement interface it also has available to it by inheritance) for manipulating <button> elements. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLCanvasElement - Web APIs
htmlcanvaselement interface also inherits the properties and methods of the htmlelement interface. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLDListElement - Web APIs
face it also has available to it by inheritance) for manipulating definition list (<dl>) elements. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLDataElement - Web APIs
tmlelement interface it also has available to it by inheritance) for manipulating <data> elements. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLDataListElement - Web APIs
e it also has available to it by inheritance) to manipulate <datalist> elements and their content. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLDivElement - Web APIs
htmlelement interface it also has available to it by inheritance) for manipulating <div> elements. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLEmbedElement - Web APIs
defined in the standard. it does not address earlier, non-standardized version of the interface. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLFieldSetElement - Web APIs
ailable to it by inheritance) for manipulating the layout and presentation of <fieldset> elements. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLFormElement - Web APIs
in some cases, modification of—aspects of the form, as well as access to its component elements. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLHRElement - Web APIs
htmlelement interface it also has available to it by inheritance) for manipulating <hr> elements. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLHeadElement - Web APIs
nt. this object inherits all of the properties and methods described in the htmlelement interface. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLHeadingElement - Web APIs
ng elements, <h1> through <h6>. it inherits methods and properties from the htmlelement interface. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLHtmlElement - Web APIs
element object for a given document by reading the value of the document.documentelement property. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLIFrameElement - Web APIs
lable to it by inheritance) for manipulating the layout and presentation of inline frame elements. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLImageElement - Web APIs
nts an html <img> element, providing the properties and methods used to manipulate image elements. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLInputElement - Web APIs
properties and methods for manipulating the options, layout, and presentation of <input> elements. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLLIElement - Web APIs
htmlelement interface it also has available to it by inheritance) for manipulating list elements. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLLabelElement - Web APIs
cific to <label> elements. it inherits methods and properties from the base htmlelement interface. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLLegendElement - Web APIs
rties of the <legend> elements. it inherits properties and methods from the htmlelement interface. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLMapElement - Web APIs
has available to it by inheritance) for manipulating the layout and presentation of map elements. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLMediaElement.onencrypted - Web APIs
the media is encrypted. this interface inherits from the extendableevent interface. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLMediaElement.onwaitingforkey - Web APIs
for an encryption key. this interface inherits from the extendableevent interface. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLMediaElement - Web APIs
o audio and video. the htmlvideoelement and htmlaudioelement elements both inherit this interface. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLMenuElement - Web APIs
tmlelement interface it also has available to it by inheritance) for manipulating <menu> elements. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLMenuItemElement - Web APIs
lement interface it also has available to it by inheritance) for manipulating <menuitem> elements. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLMetaElement - Web APIs
a document. it inherits all of the properties and methods described in the htmlelement interface. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLMeterElement - Web APIs
vailable to them by inheritance) for manipulating the layout and presentation of <meter> elements. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLModElement - Web APIs
available to them by inheritance) for manipulating modification elements, that is <del> and <ins>. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLOListElement - Web APIs
ment interface it also has available to it by inheritance) for manipulating ordered list elements. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLObjectElement - Web APIs
for manipulating the layout and presentation of <object> element, representing external resources. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLOptGroupElement - Web APIs
lable to them by inheritance) for manipulating the layout and presentation of <optgroup> elements. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLOptionElement - Web APIs
ce represents <option> elements and inherits all classes and methods of the htmlelement interface. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLOutputElement - Web APIs
ose inherited from htmlelement) for manipulating the layout and presentation of <output> elements. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLParagraphElement - Web APIs
yond those of the regular htmlelement object interface it inherits) for manipulating <p> elements. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLParamElement - Web APIs
ements, representing a pair of a key and a value that acts as a parameter for an <object> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLPictureElement - Web APIs
nterface represents a <picture> html element. it doesn't implement specific properties or methods. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLPreElement - Web APIs
it also has available to it by inheritance) for manipulating a block of preformatted text (<pre>). ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLProgressElement - Web APIs
ailable to it by inheritance) for manipulating the layout and presentation of <progress> elements. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLQuoteElement - Web APIs
ritance) for manipulating quoting elements, like <blockquote> and <q>, but not the <cite> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLScriptElement - Web APIs
f the script is blocked, its element receives an error event; otherwise, it receives a load event. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLSelectElement - Web APIs
also share all of the properties and methods of other html elements via the htmlelement interface. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLShadowElement - Web APIs
the htmlshadowelement interface represents a <shadow> html element, which is used in shadow dom. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLSourceElement - Web APIs
t object interface it also has available to it by inheritance) for manipulating <source> elements. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLSpanElement - Web APIs
ves from the htmlelement interface, but without implementing any additional properties or methods. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLStyleElement - Web APIs
ormation for an overview of the objects used to manipulate specified css properties using the dom. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLTableCaptionElement - Web APIs
ent interface it also has available to it by inheritance) for manipulating table caption elements. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLTableCellElement - Web APIs
ting the layout and presentation of table cells, either header or data cells, in an html document. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLTableColElement - Web APIs
it also has available to it inheritance) for manipulating single or grouped table column elements. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLTableElement - Web APIs
to it by inheritance) for manipulating the layout and presentation of tables in an html document. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLTableRowElement - Web APIs
lable to it by inheritance) for manipulating the layout and presentation of rows in an html table. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLTableSectionElement - Web APIs
ng the layout and presentation of sections, that is headers, footers and bodies, in an html table. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLTemplateElement - Web APIs
the htmltemplateelement interface enables access to the contents of an html <template> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLTimeElement - Web APIs
tmlelement interface it also has available to it by inheritance) for manipulating <time> elements. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLTitleElement - Web APIs
a document. this element inherits all of the properties and methods of the htmlelement interface. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLTrackElement - Web APIs
o> or <video> to specify a text track containing information such as closed captions or subtitles. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLUListElement - Web APIs
nt interface it also has available to it by inheritance) for manipulating unordered list elements. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

HTMLUnknownElement - Web APIs
ves from the htmlelement interface, but without implementing any additional properties or methods. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

SVGClipPathElement - Web APIs
s to the properties of <clippath> elements, as well as methods to manipulate them. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

SVGComponentTransferFunctionElement - Web APIs
rface defines a base interface used by the component transfer function interfaces. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

SVGCursorElement - Web APIs
ess to the properties of <cursor> elements, as well as methods to manipulate them. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

SVGDescElement - Web APIs
the svgdescelement interface corresponds to the <desc> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

SVGFEBlendElement - Web APIs
the svgfeblendelement interface corresponds to the <feblend> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

SVGFEColorMatrixElement - Web APIs
the svgfecolormatrixelement interface corresponds to the <fecolormatrix> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

SVGFEComponentTransferElement - Web APIs
mponenttransferelement interface corresponds to the <fecomponenttransfer> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

SVGFECompositeElement - Web APIs
the svgfecompositeelement interface corresponds to the <fecomposite> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

SVGFEConvolveMatrixElement - Web APIs
vgfeconvolvematrixelement interface corresponds to the <feconvolvematrix> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

SVGFEDiffuseLightingElement - Web APIs
fediffuselightingelement interface corresponds to the <fediffuselighting> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

SVGFEDisplacementMapElement - Web APIs
fedisplacementmapelement interface corresponds to the <fedisplacementmap> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

SVGFEDistantLightElement - Web APIs
he svgfedistantlightelement interface corresponds to the <fedistantlight> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

SVGFEDropShadowElement - Web APIs
the svgfedropshadowelement interface corresponds to the <fedropshadow> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

SVGFEFloodElement - Web APIs
the svgfefloodelement interface corresponds to the <feflood> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

SVGFEGaussianBlurElement - Web APIs
he svgfegaussianblurelement interface corresponds to the <fegaussianblur> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

SVGFEImageElement - Web APIs
the svgfeimageelement interface corresponds to the <feimage> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

SVGFEMergeElement - Web APIs
the svgfemergeelement interface corresponds to the <femerge> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

SVGFEMergeNodeElement - Web APIs
the svgfemergenodeelement interface corresponds to the <femergenode> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

SVGFEMorphologyElement - Web APIs
the svgfemorphologyelement interface corresponds to the <femorphology> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

SVGFEOffsetElement - Web APIs
the svgfeoffsetelement interface corresponds to the <feoffset> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

SVGFEPointLightElement - Web APIs
the svgfepointlightelement interface corresponds to the <fepointlight> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

SVGFESpecularLightingElement - Web APIs
specularlightingelement interface corresponds to the <fespecularlighting> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

SVGFESpotLightElement - Web APIs
the svgfespotlightelement interface corresponds to the <fespotlight> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

SVGFETileElement - Web APIs
the svgfetileelement interface corresponds to the <fetile> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

SVGFETurbulenceElement - Web APIs
the svgfeturbulenceelement interface corresponds to the <feturbulence> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

SVGFilterElement - Web APIs
ess to the properties of <filter> elements, as well as methods to manipulate them. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

SVGGradientElement - Web APIs
is a base interface used by svglineargradientelement and svgradialgradientelement. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

SVGGraphicsElement - Web APIs
terface represents svg elements whose primary purpose is to directly render graphics into a group. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

SVGMPathElement - Web APIs
the svgmpathelement interface corresponds to the <mpath> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

SVGMaskElement - Web APIs
ccess to the properties of <mask> elements, as well as methods to manipulate them. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

SVGMetadataElement - Web APIs
the svgmetadataelement interface corresponds to the <metadata> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

SVGPatternElement - Web APIs
the svgpatternelement interface corresponds to the <pattern> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

SVGScriptElement - Web APIs
the svgscriptelement interface corresponds to the svg <script> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

SVGStopElement - Web APIs
the svgstopelement interface corresponds to the <stop> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

SVGStyleElement - Web APIs
e interface the svgstyleelement interface corresponds to the svg <style> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

SVGSymbolElement - Web APIs
the svgsymbolelement interface corresponds to the <symbol> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

SVGTitleElement - Web APIs
the svgtitleelement interface corresponds to the <title> element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...And 2 more matches

<symbol> - SVG: Scalable Vector Graphics
value type: <len...
... value type: <length>|<percentage> ; default value: auto; animatable: yes prese...
... value type: <length>|<percentage> ; default value: auto; animatable: yes preserveaspectratio this attribute defines how the svg fragment mus...
...And 2 more matches

SVG documentation index - SVG: Scalable Vector Graphics
al deprecated, svg, svg attribute the glyph-orientation-horizontal attribute affects the amount that hte current text position advances as each glyph is rendered. 95 glyph-orientation-vertical deprecated, svg, svg attribute the glyph-orientation-vertical attribute affects the amount that hte current text position advances as each glyph is rendered. 96 glyphref deprecated, svg, svg attribute the glyphref attribute represents the glyph identifier, the format of which is dependent on the format of the given font. 97 gradienttransform svg, svg attribute the gradienttransform attribute contains the definition of an optional additional transformation from the gradient coordinate system onto the target coordinate system (i.e., u...
...igin-x attribute indicates the x-coordinate in the font coordinate system of the origin of a glyph to be used when drawing horizontally oriented text. 103 horiz-origin-y deprecated, svg, svg attribute the horiz-origin-y attribute indicates the y-coordinate in the font coordinate system of the origin of a glyph to be used when drawing horizontally oriented text. 104 href svg, svg attribute the href attribute defines a link to a resource as a reference url. the exact meaning of that link depends on the context of each element using it. 105 id svg, svg attribute the id attribute assigns a unique name to an element. 106 ideographic deprecated, svg, svg attribute the ideographic attribute indicates the alignment coo...
...ctor filters, needsexample, svg, svg attribute the xchannelselector attribute indicates which color channel from in2 to use to displace the pixels in in along the x-axis. 256 xlink:arcrole deprecated, svg, svg attribute the xlink:arcrole attribute specifies a contextual role for the element and corresponds to the rdf primer notion of a property. 257 xlink:href needscompattable, svg, svg attribute the xlink:href attribute defines a reference to a resource as a reference iri. the exact meaning of that link depends on the context of each element using it. 258 xlink:show deprecated, svg, svg attribute the xlink:show attribute indicates how a linked resource should be opened and is meant for xlink-aware processors. in case of ...
...And 2 more matches

Introduction to using XPath in JavaScript - XPath
ation with namespace-uri() instead of name()), a more challenging situation occurs, however, if one wishes to grab an element with a particular namespaced attribute in a predicate (given the absence of implementation-independent variables in xpath 1.0). ...
...in a predicate (given the absence of implementation-independent variables in xpath 1.0). for example, one might try (incorrectly) to grab an element with a namespaced attribute as follows: var xpathlink = someelements[local-name(@*)="href" and namespace-uri(@*)='http://www.w3.org/1999/xlink']; this could inadvertently grab some elements if one of its attributes existed that had a local name of "href", but it was a different attribute which had the targeted (xlink) namespace (instead of @href). ...
...a namespaced attribute as follows: var xpathlink = someelements[local-name(@*)="href" and namespace-uri(@*)='http://www.w3.org/1999/xlink']; this could inadvertently grab some elements if one of its attributes existed that had a local name of "href", but it was a different attribute which had the targeted (xlink) namespace (instead of @href). ...
...And 2 more matches

getAttributeNS - Archive of obsolete content
ttribute(nsatt); } else if (ns === 'http://www.w3.org/xml/1998/namespace') { // this is assumed so don't try to get an xmlns for the 'xml' prefix return thisitem.getattribute('xml:'+nsatt); // prefix must be 'xml' per the specs } var attrs2, result; var attrs = thisitem.attributes; var prefixatt = new regexp('^(.*):'+nsatt.replace(/\./g, '\\.')+'$'); // e.g., xlink:href // find any prefixes with the local-name being searched (escape period since only character (besides colon) allowed in an xml name which needs escaping) for (var j = 0; j < attrs.length; j++) { // thisitem's atts // e.g., abc:href, xlink:href while (((result = prefixatt.exec(attrs[j].nodename)) !== null) && thisitem.nodename !== '#document' && thisitem.nodename !
...on current element, conditionally on whether its prefix matches a declared namespace see also http://www.w3.org/tr/dom-level-3-cor...mespaceurialgo ...
...on current element, conditionally on whether its prefix matches a declared namespace see also http://www.w3.org/tr/dom-level-3-cor...mespaceurialgo ...
...on current element, conditionally on whether its prefix matches a declared namespace see also http://www.w3.org/tr/dom-level-3-cor...mespaceurialgo ...

Introduction to XUL - Archive of obsolete content
lay semantics, there must always be associated stylesheets. mozilla includes a standard stylesheet, "xul.css". you can load as many style sheets as you wish using repeated processing directives, although you should always make sure to load the xul.css file initially. and finally, any namespaces used in the document must be declared. so a xul file will begin <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/xul.css" type="text/css"?> <!doctype window> <window xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> the html namespace is of course the standard one. the xul namespace is obviously a temporary one, but at least serves to explain the pronunciation. note that the above example is using an implicit xul namesp...
...n html content area. the menu bar has a menu, file, with a single menu item that dumps "hello world!" to the debug console when selected. the content area will display the contents of the file contentframe.html. this code introduces several concepts useful for creating real world windows not explicitly covered in this document. follow the links for details. ...
... object being used inside a default xul namespace. the frame also has a special attribute called flex, which indicates how much the frame is allowed to stretch to consume available space inside its window. (see the box system for details). idealistic future direction ideally, packages of xul ui descriptions could be shipped in a single file something like <?xml version="1.0"?> <?xml-stylesheet href="xul.css" type="text/css"?> <!doctype package> <package xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <window id="main"> ... </window> <window id="help"> ... </window> </package> and a window (or other service) could be instantiated by first parsing the whole package and then picking out a window from its contents package *package = loadpackage("http://...
...ing the whole package and then picking out a window from its contents package *package = loadpackage("http://xxx/package.xul"); instantiatewindow(package, getnodewithid("main"); this happy scheme doesn't work today, because the code expects the result of parsing an xml document to be a window. so currently, a single xul file must contain a single window. <?xml version="1.0"?> <?xml-stylesheet href="xul.css" type="text/css"?> <!doctype window> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> ... </window> we would like to head more toward the "package" implementation in the future. internationalization for practical reasons, the locale-specific attributes of a ui description would be most happily developed (and possibly distributed) in separate files, whe...

Adding Style Sheets - Archive of obsolete content
art of a theme. let's assume that we are building the find files dialog for themeability, because the find files dialog can be referred to with the url chrome://findfile/content/findfile.xul so the style sheet file will be stored in chrome://findfile/skin/findfile.css. all the xul examples so far have actually been using a style sheet already. the second line has always been: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> this line indicates that we want to use the style provided by chrome://global/skin/. in mozilla, this will be translated as the file global.css, which contains default style information for xul elements. you could leave the line out and the elements will still work, however they will look fairly plain. the style sheet applies various fonts, colors and bo...
...le, or where a difference in layout might change the meaning of the element. however you should avoid this as much as possible. for installed files, you'll have to create or modify a manifest file and install the skin. our find files dialog example let's modify the find files dialog so that its style comes from a separate style file. first, the modifed lines of findfile.xul: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <?xml-stylesheet href="findfile.css" type="text/css"?> ... <spacer class="titlespace"/> <groupbox orient="horizontal"> <caption label="search criteria"/> <menulist id="searchtype"> <menupopup> <menuitem label="name"/> <menuitem label="size"/> <menuitem label="date modified"/> </menupopup> ...
...asier for someone to change the look of the find files dialog now because they could add or modify the style declarations by either modifying the file or by changing the skin. if the user changes the interface skin, the files in a directory other than default will be applied. importing style sheets we've already seen how to import style sheets for use. an example is shown below: <?xml-stylesheet href="chrome://bookmarks/skin/" type="text/css"?> this might be the first lines of a bookmarks window. it imports the bookmarks style sheet, which is bookmarks.css. mozilla's skin system is smart enough to figure out which style sheet to use, because the specific filename was not indicated here. we have done a similar thing with the global style sheet file (chrome://global/skin). a style sheet may im...
...rome://global/skin). a style sheet may import styles from another stylesheet using the import directive. normally, you will only import one style sheet from each xul file. the global style sheet can be imported from within the style sheet associated with the xul file. this can be done with the code below, allowing you to remove the import from the xul file: style import from xul: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> style import from css: @import url(chrome://global/skin/); the second syntax is preferred because it reduces the number of dependencies within the xul file itself. remove the global style sheet import from findfile.xul and add the import to findfile.css. all elements can be styled using css. you can use selectors to select the element that you wish...

Using the standard theme - Archive of obsolete content
, which does by no means correspond to the standard theme (the theme currently chosen by the user in the theme selector), or even the default theme delivered with your the base application. applying the standard theme in order to use the theme currently chosen by the user of the base application (the so called "global skin"), you have to add the following line to your xul file: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> this imports the styles found in the <tt>global/skin</tt> chrome directory and will make the standard xul widgets of your application use the selected chosen theme. you do not have to specify a specific file; mozilla will determine by its own which files in the directory it needs to use. if you are only going to use these global style sheets, you of cour...
...do not forget to register your custom skin in the <tt>chrome.manifest</tt>. note that you can also mix these two approaches, although it makes your code more readable when sticking to only one way. ...
...ifest</tt>. note that you can also mix these two approaches, although it makes your code more readable when sticking to only one way. ...
...that is, depending on the theme currently selected by the user, you can provide different custom style sheets for your extensions. ...

window - Archive of obsolete content
"activate" and "deactivate" events. see window activation events. more information is available in the xul tutorial. ...
...to change the icon to a window's title bar check this page on window icons. to add a favicon to the address bar and browser tab (ie dialog is not a popup) then use the following code snippet to use the html namespace and link. <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"> <!-- icon from chrome --> <html:link rel="icon" href="chrome://myextension/content/path/to/favicon.png"/> <!-- from a remote site --> <html:link rel="icon" href="http://www.mozilla.org/favicon.ico"/> since firefox 3.6 the above listed code does not work correctly - it produces the following message: "warning: xul box for box element contained an inline link child, forcing all its children to be wrapped in a block". if this code is placed between...
...the following message: "warning: xul box for box element contained an inline link child, forcing all its children to be wrapped in a block". ...
...rapped in a block". if this code is placed between window tags it messes up all other controls on the window. if it is placed between box tags, window controls are rendered fine, but still there is this error message. ...

How CSS is structured - Learn web development
ss to a document. you can link a single css file to multiple web pages, styling all of them with the same css stylesheet. in the getting started with css, we linked an external stylesheet to our web page. you reference an external css stylesheet from an html <link> element: <!doctype html> <html> <head> <meta charset="utf-8"> <title>my css experiment</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>hello world!</h1> <p>this is my first css example</p> </body> </html> the css stylesheet file might look like this: h1 { color: blue; background-color: yellow; border: 1px solid black; } p { color: red; } the href attribute of the <link> element needs to reference a file on your file system. in the example above, the css file is in the sa...
... border: 1px solid black; } p { color: red; } the href attribute of the <link> element needs to reference a file on your file system. in the example above, the css file is in the same folder as the html document, but you could place it somewhere else and adjust the path. ...
...s file is in the same folder as the html document, but you could place it somewhere else and adjust the path. here are three examples: <!-- inside a subdirectory called styles inside the current directory --> <link rel="stylesheet" href="styles/style.css"> <!-- inside a subdirectory called general, which is in a subdirectory called styles, inside the current directory --> <link rel="stylesheet" href="styles/general/style.css"> <!-- go up one directory level, then inside a subdirectory called styles --> <link rel="stylesheet" href="../styles/style.css"> internal stylesheet an internal stylesheet resides within an html document. to create an internal stylesheet, you place css inside a <style> element contained inside the html <head>. the html for an internal stylesheet might look like this...
...lity with as many email clients as possible. playing with the css in this article for the exercise that follows, create a folder on your computer. you can name the folder whatever you want. inside the folder, copy the text below to create two files: index.html: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>my css experiments</title> <link rel="stylesheet" href="styles.css"> </head> <body> <p>create your test html here</p> </body> </html> styles.css: /* create your test css here */ p { color: red; } when you find css that you want to experiment with, replace the html <body> contents with some html to style, and then add your test css code to your css file. as an altenative, you can also use the interactive editor below. read on an...

What HTML features promote accessibility? - Learn web development
at can be used to make a web page more accessible to people with different disabilities. tabbing users who do not or cannot use pointing devices can tab through links and, as such, links should be in a logical tabbing order. the tabindex attribute allows you to define this order. if the html is linear, as it should be, a logical tabbing order should automatically fall into place. <ul> <li><a href="here.html" tabindex="1">here</a></li> <li><a href="there.html" tabindex="3">there</a></li> <li><a href="anywhere.html" tabindex="2">anywhere</a></li> </ul> in this example (which is used purely as a demonstration—do not do this), tabbing would jump from “here” to “anywhere” to “there”. link titles if you have a link that isn’t self-descriptive, or the link destination coul...
...li> </ul> in this example (which is used purely as a demonstration—do not do this), tabbing would jump from “here” to “anywhere” to “there”. link titles if you have a link that isn’t self-descriptive, or the link destination could benefit from being explained in more detail, you can add information to a link using the title attribute. <p>i'm really bad at writing link text. ...
...i'm really bad at writing link text. <a href="inept.html" title="why i'm rubbish at writing link text: an explanation and an apology.">click here</a> to find out more.</p> access keys access keys provide easier navigation by assigning a keyboard shortcut to a link, which will usually gain focus when the user presses alt or ctrl + the access key. the exact key combination varies by platform. <a href="somepage.html" accesskey="s">some page</a> skip links to aid tabbing, you can supply links that allow users to jump over chunks of your web page. you might want to allow someone to jump over a plethora of navigation links, for example, so they can just read a page’s main content rather than cycle through all of the links. ...
...ion varies by platform. <a href="somepage.html" accesskey="s">some page</a> skip links to aid tabbing, you can supply links that allow users to jump over chunks of your web page. you might want to allow someone to jump over a plethora of navigation links, for example, so they can just read a page’s main content rather than cycle through all of the links. ...

Video and audio content - Learn web development
ur webpages; if you use that route, you can avoid some of the difficulties we discuss in this article. we'll be discussing this kind of service a bit more in the next article. the <video> element the <video> element allows you to embed a video very easily. a really simple example looks like this: <video src="rabbit320.webm" controls> <p>your browser doesn't support html5 video. here is a <a href="rabbit320.webm">link to the video</a> instead.</p> </video> the features of note are: src in the same way as for the <img> element, the src (source) attribute contains a path to the video you want to embed. it works in exactly the same way. controls users must be able to control video and audio playback (it's especially critical for people who have epilepsy.) you must either use the contr...
...specific types it can't handle internally). this means media support is partly dependent on what software the user has installed. so how do we do this? take a look at the following updated example (try it live here, also): <video controls> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> <p>your browser doesn't support html5 video. here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> </video> here we've taken the src attribute out of the actual <video> tag, and instead included separate <source> elements that point to their own sources. in this case the browser will go through the <source> elements and play the first one that it has the codec to support. including webm and mp4 sources should be enough to play your video on m...
...eo> features there are a number of other features you can include when displaying an html video. take a look at our next example: <video controls width="400" height="400" autoplay loop muted preload="auto" poster="poster.png"> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> <p>your browser doesn't support html video. here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> </video> the resulting ui looks something like this: the new features are: width and height you can control the video size either with these attributes or with css. in both cases, videos maintain their native width-height ratio — known as the aspect ratio. if the aspect ratio is not maintained by the sizes you set, the video will grow ...
... to play as soon as the page loads, you don't get to see the poster! the <audio> element the <audio> element works just like the <video> element, with a few small differences as outlined below. a typical example might look like so: <audio controls> <source src="viper.mp3" type="audio/mp3"> <source src="viper.ogg" type="audio/ogg"> <p>your browser doesn't support html5 audio. here is a <a href="viper.mp3">link to the audio</a> instead.</p> </audio> this produces something like the following in a browser: note: you can run the audio demo live on github (also see the audio player source code.) this takes up less space than a video player, as there is no visual component — you just need to display controls to play the audio. other differences from html video are as follows: th...

Ember app structure and componentization - Learn web development
now we need to break up our html code into dynamic component...
...now we need to break up our html code into dynamic components; later we'll turn it into ...
...now we need to break up our html code into dynamic components; later we'll turn it into a fully interactive app. looki...
...abel>buy movie tickets</label> <button type="button" class="destroy" title="remove this todo" ></button> </div> <input autofocus class="edit" value="todo text"> </li> footer.hbs should be updated to contain the following: <footer class="footer"> <span class="todo-count"> <strong>0</strong> todos left </span> <ul class="filters"> <li> <a href="#">all</a> <a href="#">active</a> <a href="#">completed</a> </li> </ul> <button type="button" class="clear-completed"> clear completed </button> </footer> finally, the contents of application.hbs should be updated so that they call the appropriate components, like so: <section class="todoapp"> <h1>todos</h1> <header /> <todolist /> <footer /> </secti...

Getting started with Svelte - Learn web development
/ </style> <!-- markup (zero or more html elements) goes here --> note: for more information on the component format, have a look at the svelte documentation. with this in mind, let's have a look at the src/app.svelte file that came with the starter template. ...
...ple of svelte extending javascript syntax to make it more useful, while keeping it familiar. the markup section in the markup section you can insert any html you like, and in addition you can insert valid javascript expression inside single curly brackets ({}). in this case we are embedding the value of the name prop right after the hello text. <main> <h1>hello {name}!</h1> <p>visit the <a href="https://svelte.dev/tutorial">svelte tutorial</a> to learn how to build svelte apps.</p> </main> svelte also supports tags like {#if...}, {#each...}, and {#await...} — these examples allow you to conditionally render a portion of the markup, iterate through a list of elements, and work with async values, respectively. the <style> section if you have experience working with css, the following...
... include a togglename() function in our app component, and a button to run it. try updating your <script> and markup sections like so: <script> export let name; function togglename() { if (name === 'world') { name = 'svelte' } else { name = 'world' } } </script> <main> <h1>hello {name}!</h1> <button on:click={togglename}>toggle name</button> <p>visit the <a href="https://svelte.dev/tutorial">svelte tutorial</a> to learn how to build svelte apps.</p> </main> whenever the button is clicked, svelte executes the togglename() function, which in turn updates the value of the name variable. as you can see, the <h1> label is automatically updated. behind the scenes, svelte created the javascript code to update the dom whenever the value of the name variable ch...
... public/build/bundle.js. it also adds the code in src/main.js to reference the features of each component. finally the file public/index.html includes the generated bundle.css and bundle.js files: <!doctype html> <html lang="en"> <head> <meta charset='utf-8'> <meta name='viewport' content='width=device-width,initial-scale=1'> <title>svelte app</title> <link rel='icon' type='image/png' href='/favicon.png'> <link rel='stylesheet' href='/global.css'> <link rel='stylesheet' href='/build/bundle.css'> <script defer src='/build/bundle.js'></script> </head> <body> </body> </html> the minified version of bundle.js weighs a little more than 3kb, which includes the "svelte runtime" (just 300 lines of javascript code) and the app.svelte compiled component. as you can see, bundle.js is...

Implementing feature detection - Learn web development
whereas the other two css files contain the css we want to selectively apply to browser depending on their support levels. you can look at the different effects these two files have by manually changing the css file referred to by the second <link> element, but let's instead implement some javascript to automatically swap them as needed. first, remove the contents of the second <link> element's href attribute. we will fill this in dynamically later on. next, add a <script></script> element at the bottom of your body (just before the closing </body> tag). give it the following contents: const conditional = document.queryselector('.conditional'); const testelem = document.createelement('div'); if (testelem.style.flex !== undefined && testelem.style.flexflow !== undefined) { conditional.s...
...e will fill this in dynamically later on. next, add a <script></script> element at the bottom of your body (just before the closing </body> tag). give it the following contents: const conditional = document.queryselector('.conditional'); const testelem = document.createelement('div'); if (testelem.style.flex !== undefined && testelem.style.flexflow !== undefined) { conditional.setattribute('href', 'flex-layout.css'); } else { conditional.setattribute('href', 'float-layout.css'); } here we are grabbing a reference to the second <link> element, and creating a <div> element as part of our test. in our conditional statement, we test that the flex and flex-flow properties exist in the browser. note how the javascript representations of those properties that are stored inside the htmlele...
...: if (window.matchmedia("(max-width: 480px)").matches) { // run javascript in here. } as an example, our snapshot demo makes use of it to selectively apply the brick javascript library and use it to handle the ui layout, but only for the small screen layout (480px wide or less). we first use the media attribute to only apply the brick css to the page if the page width is 480px or less: <link href="dist/brick.css" type="text/css" rel="stylesheet" media="all and (max-width: 480px)"> we then use matchmedia() in the javascript several times, to only run brick navigation functions if we are on the small screen layout (in wider screen layouts, everything can be seen at once, so we don't need to navigate between different views). if (window.matchmedia("(max-width: 480px)").matches) { deck.sh...
...smaller file size. css let's have a look at how modernizr works in terms of selectively applying css. first, make a copy of supports-feature-detect.html and supports-styling.css. save them as modernizr-css.html and modernizr-css.css. update your <link> element in your html so it points to the correct css file (you should also update your <title> element to something more suitable!): <link href="modernizr-css.css" rel="stylesheet"> above this <link> element, add a <script> element to apply the modernizr library to the page, as shown below. this needs to be applied to the page before any css (or javascript) that might make use of it. <script src="modernizr-custom.js"></script> now edit your opening <html> tag, so that it looks like this: <html class="no-js"> at this point, ...

L20n HTML Bindings
html bindings we maintain a repository with l20n optimized for production use: one file (~110kb) one file, minified (~35kb) it's recommended to include the l20n.js file as the last script in the head element. <head> … <script src="l20n.js"></script> </head> create manifest use a localization manifest to define available languages and their resource files. <link rel="localization" href="../locales/manifest.json"> an example of the manifest file (all keys are required): { "locales": [ "en-us", "pl"], "default_locale": "en-us", "resources": [ "../locales/{{locale}}/strings.l20n", "/shared/{{locale}}/date.l20n"¨ ] } make html elements localizable use the data-l10n-id attribute on an html element to mark it as localizable. <p data-l10n-id="about"></p> noti...
...n if you want to). all content lives in the localization resources. a safe subset of html elements (e.g. em, sup), attributes (e.g. title) and entities can be used in translations. in addition to the pre-defined whitelists, any element found in the original source html is allowed in the translation as well. ...
...d entities can be used in translations. in addition to the pre-defined whitelists, any element found in the original source html is allowed in the translation as well. consider the following source html: <p data-l10n-id="save"> <input type="submit"> <a href="/main" class="btn-cancel"></a> </p> assume the following malicious translation: <save """ <input value="save" type="text"> or <a href="http://myevilwebsite.com" onclick="alert('pwnd!')" title="back to the homepage">cancel</a>. """> the result will be: <p data-l10n-id="back"> <input value="save" type="submit"> or <a href="/main" class="btn-cancel" title="back to the homepage">cancel</a>. </p> the input element is not on the default whitelist but since it's present in the source html, it is also allowed in ...
...however, the title attribute is safe. it is important to note that applying translations doesn't replace dom elements, but only modifies their text nodes and their attributes. ...

Building the WebLock UI
ent in which the user interface for the dialog and the events that initiate interaction with the web locking are defined. at the top of all xul documents, an xml declaration is followed by the root element for the document, which is usually <window/> but for dialog boxes can also be the element <dialog/>. ...
...case the <hbox/> centers the textbox and the button children, and it orients them horizontally (in contrast to the <vbox/>, which orients its children vertically). notice also that when it's clicked, the button executes a javascript function called addthissite(), which we've already defined in the weblock.js file in client code overview above. ...
... icon that calls a javascript function to load the weblock.xul file we defined previously. the icon is actually a separate <statusbarpanel/> element that gets overlaid into the main browser, along with some javascript and some css to control the behavior and appearance of the element, respectively. ...
...utorial makes use of only two different states, but you can further customize the look of the weblock using the three images if you wish.) since the presentation of the weblock manager dialog itself doesn't require any special styles, these are all the rules you need in the weblock.css. note that the weblock.xul file in which the manager is defined imports only the global skin: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> save weblock.css in your working directory. you should now have the four files listed at the top of this chapter as the "packing list" for the weblock package (see user interface package list). don't worry for now about where these files are. in the next chapter, packaging weblock, we'll describe how to organize and package them so that they can be ins...

AudioBufferSourceNode - Web APIs
the network or played from disk, use a audioworkletnode to implement its playback. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audionode" target="_top"><rect x="151" y="1" width="90" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="196" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audionode</text></a><polyline points="241,25 251,20 251,30 241,25" stroke="#d4dde4" fill="none"/><line x1="2...
...="1" width="90" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="196" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audionode</text></a><polyline points="241,25 251,20 251,30 241,25" stroke="#d4dde4" fill="none"/><line x1="251" y1="25" x2="281" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audioscheduledsourcenode" target="_top"><rect x="281" y="1" width="240" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audioscheduledsourcenode</text></a><polyline points="521,25 531,20 531,30 521,25" stroke="#d...
... height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="401" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audioscheduledsourcenode</text></a><polyline points="521,25 531,20 531,30 521,25" stroke="#d4dde4" fill="none"/><line x1="531" y1="25" x2="561" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audiobuffersourcenode" target="_top"><rect x="561" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="666" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audiobuffersourcenode</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: ...

Comment - Web APIs
--' and '-->'. in xml, the character sequence '--' cannot be used within a comment. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/characterdata" target="_top"><rect x="266" y="1" width="130" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="331" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">characterdata</text></a><polyline points="396,25 406,20 406,30 396,25" stroke="#d4dde4" fill="none"/><l...
...width="130" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="331" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">characterdata</text></a><polyline points="396,25 406,20 406,30 396,25" stroke="#d4dde4" fill="none"/><line x1="406" y1="25" x2="436" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/comment" target="_top"><rect x="436" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="473.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">comment</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties thi...

HTMLDocument - Web APIs
ent property to include methods and properties that are specific to html documents. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/document" target="_top"><rect x="266" y="1" width="80" height="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...
...y="1" width="80" height="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 th...

HTMLElement - Web APIs
lement this interface, while others implement it via an interface that inherits it. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...="1" width="75" height="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;} properti...

Web-based protocol handlers - Web APIs
when the link is activated, the browser should launch the default desktop application for handling email. you can think of this as a desktop-based protocol handler. web-based protocol handlers allow web-based applications to participate in the process too. this is becoming more important as more types of applications migrate to the web. ...
...terprotocolhandler() to register itself with the browser as a potential handler for a given protocol. for example: navigator.registerprotocolhandler("web+burger", "http://www.google.co.uk/?uri=%s", "burger handler"); where the parameters are: the protocol. the url template, used as the handler. the "%s" is replaced with the href of the link and a get is executed on the resultant url. the user friendly name for the protocol handler. when a browser executes this code, it should display a prompt to the user, asking permission to allow the web application to register as a handler for the protocol. firefox displays a prompt in the notification bar area: note:the url template supplied when registering must be of the same...
... user activates a link that uses the registered protocol, the browser will route the action to the url supplied when the web application registered. firefox will, by default, prompt the user before handing off the action. example <!doctype html public "-//w3c//dtd html 4.01//en"> <html lang="en"> <head> <title>web protocol handler sample - test</title> </head> <body> <p>hey have you seen <a href="web+burger:cheeseburger">this</a> before?</p> </body> </html> handling the next phase is handling the action. the browser extracts the href from the activated link, combines it with the url template supplied during handler registration and performs an http get on the url. so, using the above examples, the browser would perform a get on this url: http://www.google.co.uk/?uri=web+burger:cheese...
...d link, combines it with the url template supplied during handler registration and performs an http get on the url. so, using the above examples, the browser would perform a get on this url: http://www.google.co.uk/?uri=web+burger:cheeseburger server side code can extract the query string parameters and perform the desired action. note:the server side code is passed the entire contents of the href. this means the server side code will have to parse out the protocol from the data. example <?php $value = ""; if ( isset ( $_get["value"] ) ) { $value = $_get["value"]; } ?> <!doctype html public "-//w3c//dtd html 4.01//en"> <html lang="en"> <head> <title>web protocol handler sample</title> </head> <body> <h1>web protocol handler sample - handler</h1> <p>this web page is called when...

ProcessingInstruction - Web APIs
ml-stylesheet ?>). the processinginstruction interface inherits methods and properties from node. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/characterdata" target="_top"><rect x="266" y="1" width="130" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="331" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">characterdata</text></a><polyline points="396,25 406,20 406,30 396,25" stroke="#d4dde4" fill="none"/><l...
...width="130" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="331" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">characterdata</text></a><polyline points="396,25 406,20 406,30 396,25" stroke="#d4dde4" fill="none"/><line x1="406" y1="25" x2="436" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/processinginstruction" target="_top"><rect x="436" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="541" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">processinginstruction</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: ...

SVGElement - Web APIs
pond directly to elements in the svg language derive from the svgelement interface. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="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...
...="1" width="75" height="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/svgelement" target="_top"><rect x="381" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-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...

Text - Web APIs
method merges adjacent text objects back into a single node for each block of text. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/characterdata" target="_top"><rect x="266" y="1" width="130" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="331" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">characterdata</text></a><polyline points="396,25 406,20 406,30 396,25" stroke="#d4dde4" fill="none"/><l...
...width="130" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="331" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">characterdata</text></a><polyline points="396,25 406,20 406,30 396,25" stroke="#d4dde4" fill="none"/><line x1="406" y1="25" x2="436" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/text" target="_top"><rect x="436" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="473.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">text</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor text()...

URL - Web APIs
t referencing the url specified using an absolute url string, or a relative url string and a base url string. properties hash a usvstring containing a '#' followed by the fragment identifier of the url. host a usvstring containing the domain (that is the hostname) followed by (if a port was specified) a ':' and the port of the url. hostname a usvstring containing the domain of the url. href a stringifier that returns a usvstring containing the whole url. origin read only returns a usvstring containing the origin of the url, that is its scheme, its domain and its port. password a usvstring containing the password specified before the domain name. pathname a usvstring containing an initial '/' followed by the path of the url. port a usvstring containing the port number of th...
...ameters are provided, this string includes all of them, beginning with the leading ? character. searchparams read only a urlsearchparams object which can be used to access the individual query parameters found in search. username a usvstring containing the username specified before the domain name. methods tostring() returns a usvstring containing the whole url. it is a synonym for url.href, though it can't be used to modify the value. tojson() returns a usvstring containing the whole url. it returns the same string as the href property. static methods createobjecturl() returns a domstring containing a unique blob url, that is a url with blob: as its scheme, followed by an opaque string uniquely identifying the object in the browser. revokeobjecturl() revokes an object url...
...l.createobjecturl(). usage notes the constructor takes a url parameter, and an optional base parameter to use as a base if the url parameter is a relative 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. for instance: url.pathname = 'démonstration.html'; console.log(url.href); // "http://www.example.com/d%c3%a9monstration.html" the urlsearchparams interface can be used to build and manipulate the url query string. to get the search params from the current window's url, you can do this: // h...
...ing to the rules found in rfc 3986. for instance: url.pathname = 'démonstration.html'; console.log(url.href); // "http://www.example.com/d%c3%a9monstration.html" the urlsearchparams interface can be used to build and manipulate the url query string. to get the search params from the 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. const response = await fetch(new url('http://www.example.com/démonstration.html')); specifications specification status comment file apithe definition of 'url' in...

WheelEvent - Web APIs
etect value changes to scrollleft and scrolltop of the target in the scroll event. ...
... x="1" y="1" width="75" height="50" fill="#fff" 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">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201...
...="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mouseevent" target="_top"><rect x="231" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mouseevent</text></a><polyline points="331,25 341,20 341,30 331,25" stroke="#d4dde4" fill="none"/><line x1...
...1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mouseevent</text></a><polyline points="331,25 341,20 341,30 331,25" stroke="#d4dde4" fill="none"/><line x1="341" y1="25" x2="371" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/wheelevent" target="_top"><rect x="371" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="421" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">wheelevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructo...

XMLDocument - Web APIs
evertheless, several algorithms behave differently with the two types of documents. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/document" target="_top"><rect x="266" y="1" width="80" height="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...
...y="1" width="80" height="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/xmldocument" target="_top"><rect x="386" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="441" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">xmldocument</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} property...

Cross-browser audio basics - Developer guides
mp4 files typically contain aac encoded audio. you can use type="audio/mp4". (currently, browsers that support mp3 also support mp4 audio). here we define an <audio> element with multiple sources — we do this as not all browsers support the same audio formats. to ensure reasonable cover...
... media file, as we showed earlier, or via a fallback written in a plugin technology such as adobe flash or microsoft silverlight. ...
...vascript to create a very simple player with a play and a pause button. ...
...the volume has changed; that includes being muted. ...

Audio and Video Delivery - Developer guides
/instantiate the media (e.g. a <video> element, or document.createelement('video') perhaps?) deliver the media file to the player. html audio <audio controls preload="auto"> <source src="audiofile.mp3" type="audio/mpeg"> <!-- fallback for browsers that don't support mp3 --> <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. note: the preload attribute may be ignored by some mobile browsers. for further info see cross browser audio basics (html5 audio in detail) html video <video controls width="640" height="480" poster="initialimage.png" autoplay muted>...
...we instruct the video to autoplay but to be muted by default. note: the autoplay attribute may be ignored by some mobile browsers. also, the autoplay feature can be controversial when misused. it's strongly recommended that you rea...
...oplay wisely.. for further info see <video> element and creating a cross-browser video player. audio and video fallback you can create a more comprehensive fallback using flash. using flashmediaelement.swf is one way. ...
... the specified resource. showing fallback content when no source could be decoded another way to show the fallback content of a video, when none of the sources could be decoded in the current browser, is to add an error handler on the last source element. ...

clipPathUnits - SVG: Scalable Vector Graphics
...
... value userspaceonuse | objectboundingbox def...
... value userspaceonuse | objectboundingbox default value userspaceonuse animatable yes ...
...55" y="0" width="45" height="45" /> <!-- the first 3 rect are clipped with usespaceonuse units --> <use clip-path="url(#myclip1)" xlink:href="#r1" fill="red" /> <use clip-path="url(#myclip1)" xlink:href="#r2" fill="red" /> <use clip-path="url(#myclip1)" xlink:href="#r3" fill="red" /> <!-- the last rect is clipped with objectboundingbox units --> <use clip-path="url(#myclip2)" xlink:href="#r4" fill="red" /> </svg> clippath for <clippath>, clippathunits define the coordinate system in use for the content of the element. value userspaceonuse | objectboundingbox default value userspaceonuse animatable yes userspaceonuse this value indicates that all coordinates inside the <clippath> element refer to the user coordinate system as de...

d - SVG: Scalable Vector Graphics
command parameters notes ...
...it is sometimes easier to draw highly regular curves with an elliptical arc than with a bézier curve. command parameters notes ...
...it is sometimes easier to draw highly regular curves with an elliptical arc than with a bézier curve. command parameters notes a (rx ry angle large-arc-flag sweep-flag x y)+ ...
...it is sometimes easier to draw highly regular curves with an elliptical arc than with a bézier curve. command parameters notes a (rx ry angle large-arc-flag sweep-flag x y)+ draw an arc curve from the current point to th...

maskContentUnits - SVG: Scalable Vector Graphics
value use...
... value userspaceonuse | objectboundingbox default value u...
... value userspaceonuse | objectboundingbox default value userspaceonuse animatable yes userspace...
.../> <rect id="r4" x="55" y="0" width="45" height="45" /> <!-- the first 3 rect are masked with usespaceonuse units --> <use mask="url(#mymask1)" xlink:href="#r1" fill="red" /> <use mask="url(#mymask1)" xlink:href="#r2" fill="red" /> <use mask="url(#mymask1)" xlink:href="#r3" fill="red" /> <!-- the last rect is masked with objectboundingbox units --> <use mask="url(#mymask2)" xlink:href="#r4" fill="red" /> </svg> mask for <mask>, maskcontentunits defines the coordinate system in use for the content of the element. value userspaceonuse | objectboundingbox default value userspaceonuse animatable yes userspaceonuse this value indicates that all coordinates inside the <mask> element refer to the user coordinate system as defined wh...

<metadata> - SVG: Scalable Vector Graphics
hub</desc> <text x="0" y="15">hub</text> <g transform="translate(0 20)"> <rect width="253" height="84"/> <rect width="229" height="44" x="12" y="10"/> <circle fill="red" cx="227" cy="71" r="7" /> <!-- five groups each using the defined socket --> <g id="sock1et" transform="translate(25 20)"> <title>socket 1</title> <use xlink:href="#hubplug"/> </g> <g id="socket2" transform="translate(70 20)"> <title>socket 2</title> <use xlink:href="#hubplug"/> </g> <g id="socket3" transform="translate(115 20)"> <title>socket 3</title> <use xlink:href="#hubplug"/> </g> <g id="socket4" transform="translate(160 20)"> <title>socket 4</title> ...
... </g> <g id="socket2" transform="translate(70 20)"> <title>socket 2</title> <use xlink:href="#hubplug"/> </g> <g id="socket3" transform="translate(115 20)"> <title>socket 3</title> <use xlink:href="#hubplug"/> </g> <g id="socket4" transform="translate(160 20)"> <title>socket 4</title> <use xlink:href="#hubplug"/> </g> <g id="socket5" transform="translate(205 20)"> <title>socket 5</title> <use xlink:href="#hubplug"/> </g> </g> </symbol> <!-- computer symbol --> <symbol id="computer"> <desc>a common desktop pc</desc> <g id="monitorstand" transform="translate(40 121)"> <title>monitor stand</title> <desc>on...
.../title> <desc>a built-in disc drive</desc> <rect width="58" height="3" x="12" y="8"/> <rect width="8" height="2" x="12" y="15"/> </g> <circle cx="135" cy="40" r="5"/> </g> </symbol> </defs> <text x="0" y="15">network</text> <!-- use the hub symbol. ...
... <circle cx="135" cy="40" r="5"/> </g> </symbol> </defs> <text x="0" y="15">network</text> <!-- use the hub symbol. --> <g id="hub" transform="translate(80 45)"> <title>hub</title> <use xlink:href="#hub" transform="scale(0.75)"/> </g> <!-- use the computer symbol. --> <g id="computera" transform="translate(20 170)"> <title>computer a</title> <use xlink:href="#computer" transform="scale(0.5)"/> </g> <!-- use the same computer symbol. --> <g id="computerb" transform="translate(300 170)"> <title>computer b</title> <use xlink:href="#computer" transform="scale(0.5)"/> </g> <!-- draw cable a. --> <g id="cablea" transform="translate(107 88)"> <title>cable a</title> <desc>10baset twisted pair cable</desc> <path d="m0,0c100,...

SVG and CSS - SVG: Scalable Vector Graphics
iewbox="-300 -300 600 600" xmlns="http://www.w3.org/2000/svg"> <title>svg demonstration</title> <desc>mozilla css getting started - svg demonstration</desc> <defs> <g id="segment" class="segment"> <path class="segment-fill" d="m0,0 v-200 a40,40 0 0,0 -62,10 z"/> <path class="segment-edge" d="m0,-200 a40,40 0 0,0 -62,10"/> </g> <g id="quadrant"> <use xlink:href="#segment"/> <use xlink:href="#segment" transform="rotate(18)"/> <use xlink:href="#segment" transform="rotate(36)"/> <use xlink:href="#segment" transform="rotate(54)"/> <use xlink:href="#segment" transform="rotate(72)"/> </g> <g id="petals"> <use xlink:href="#quadrant"/> <use xlink:href="#quadrant" transform="rotate(90)"/> <use xlink:href="#quadra...
...transform="rotate(18)"/> <use xlink:href="#segment" transform="rotate(36)"/> <use xlink:href="#segment" transform="rotate(54)"/> <use xlink:href="#segment" transform="rotate(72)"/> </g> <g id="petals"> <use xlink:href="#quadrant"/> <use xlink:href="#quadrant" transform="rotate(90)"/> <use xlink:href="#quadrant" transform="rotate(180)"/> <use xlink:href="#quadrant" transform="rotate(270)"/> </g> <radialgradient id="fade" cx="0" cy="0" r="200" gradientunits="userspaceonuse"> <stop id="fade-stop-1" offset="33%"/> <stop id="fade-stop-2" offset="95%"/> </radialgradient> </defs> <text id="heading" x="-280" y="-270">svg demonstration</text> <text id="caption" x="-280" y="-250">move your mouse pointer over the fl...
...the stylesheet only modifies the display in certain ways. this is also true for html and xul documents. but you can use css for general-purpose xml documents, where there is no ...
...the stylesheet only modifies the display in certain ways. this is also true for html and xul documents. but you can use css for general-purpose xml documents, where there is no predefined way to display the elements. the next p...

Content Scripts - Archive of obsolete content
-mod receiving a customevent sent from a context-menu item when the context menu item is clicked. the page-mod script will then issue an alert with the url of the link on which the context menu was displayed. the url is passed to the page-mod script in the customevent. ...
... clicked. the page-mod script will then issue an alert with the url of the link on which the context menu was displayed. the url is passed to the page-mod script in the customevent. ...
...indow.alert("the context menu was clicked on url:\\n" + href);' + '};' + 'window.addeventlistener("myaddonid-contextmenu-clicked",' + ' function(event){contextmenualert(event.detail);});' }); let cm = require("sdk/context-menu"); cm.item({ label: "alert url", context: [ cm.urlcontext(["*.mozilla.org"]), cm.selectorcontext("a[href]") ], contentscript: 'self.on("click", function (node, data) {' + ' var event = new customevent("myaddonid-contextmenu-clicked",' + ' {detail:node.href});' + ' window.dispatchevent(event);' + '});' }); cross-domain content scripts by default, content scripts don't have any cross-doma...

HTML to DOM - Archive of obsolete content
s = false; frame.webnavigation.allowjavascript = false; frame.webnavigation.allowmetaredirects = true; frame.webnavigation.allowplugins = false; frame.webnavigation.allowsubframes = false; // listen for load frame.addeventlistener("load", function (event) { // the document of the html in the dom var doc = event.originaltarget; // skip blank page or frame if (doc.location.href == "about:blank" || doc.defaultview.frameelement) return; // do something with the dom of doc alert(doc.location.href); // when done remove frame or set location "about:blank" settimeout(function (){ var frame = document.getelementbyid("sample-frame"); // remove frame // frame.destroy(); // if using browser element instead of iframe frame.parentnode.r...
...oc alert(doc.location.href); // when done remove frame or set location "about:blank" settimeout(function (){ var frame = document.getelementbyid("sample-frame"); // remove frame // frame.destroy(); // if using browser element instead of iframe frame.parentnode.removechild(frame); // or set location "about:blank" // frame.contentdocument.location.href = "about:blank"; },10); }, true); } // load a page frame.contentdocument.location.href = "http://www.mozilla.org/"; // or // frame.webnavigation.loaduri("http://www.mozilla.org/",components.interfaces.nsiwebnavigation,null,null,null); if you are starting with an html string, you can convert it to a data uri and use that to load in the browser element. using a hidden xul iframe (a...
...ageload(e); }, true); } with that code, we obtain a reference to the iframe element we declared in the .xul file. the most interesting piece of code here is the domcontentloaded event listener we define for the element. ...

Sidebar - Archive of obsolete content
y. to access your sidebar's window or document objects, you need to use the contentwindow or contentdocument properties of document.getelementbyid("sidebar") respectively. for example the code below calls a function defined in the sidebar's context: var sidebarwindow = document.getelementbyid("sidebar").contentwindow; // verify that our sidebar is open at this moment: if (sidebarwindow.location.href == "chrome://yourextension/content/whatever.xul") { // call "yournotificationfunction" in the sidebar's context: sidebarwindow.yournotificationfunction(anyarguments); } testing which sidebar is open the sidebar content may contain different panels (bookmarks, history, webpanel, etc.) and sometimes one wants to only act on the sidebar when it contains a specific panel. the good practi...
...s open the sidebar content may contain different panels (bookmarks, history, webpanel, etc.) and sometimes one wants to only act on the sidebar when it contains a specific panel. ...
... resizing the sidebar programmatically in case you need to change the width of the sidebar, use the followin...

Displaying web content in an extension without security issues - Archive of obsolete content
ype" attribute is ignored at that point). so if we look at the frame hierarchy there is a boundary between chrome and content, and at that boundary a number of security mechanisms apply. in particular, a content document can only go up in the frame hierarchy until the topmost content document, it cannot access the chrome documents above it. this means for example that javascript code top.location.href = "about:blank" will only unload the content document but won’t have any effect on the chrome. note: this has really nothing to do with the source of the document. if you open "chrome://foo/content/foo.xul" in the browser, it will open as a content document despite having extended privileges. this also means that you won’t be able to establish a security boundary between your extension and un...
...and scripts won’t run anyway when inserted via innerhtml, right? well, not quite. it is right that <script>alert('xss')</script> won’t run if inserted via innerhtml. but <img src="does_n...
...and scripts won’t run anyway when inserted via innerhtml, right? well, not quite. it is right that <script>alert('xss')</script> won’t run if inserted via innerhtml. but <img src="does_not_exist" onerror="alert('xss')"> for exa...

Chapter 5: Let's build a Firefox extension - Archive of obsolete content
lock (listing 5) and its controller (listing 6). we’ve already covered the dialog element in chapter 3. in this case, we only want to display an ok button, so we set the buttons attribute to accept. within the window are a label element and textbox element, wrapped in a hbox element so that they are arranged horizontally. ...
...ve it to a dtd file. the dtd file is located inside the locale package, and the correct file is picked automatically to match the user’s language preferences. edit clock.xul to match listing 8. add the doctype declaration that references the dtd file, and replace “clock” and “current time” with entity references. ...
...ibute. furthermore, by matching the preference element’s id to the preference attribute of a checkbox or radiogroup, you can specify the interface widget that will be used to set your preferences. add the contents of listing 27 to your install manifest to make it so that the add-on manager can open your preference panel. ...

Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
agname="nde:"+tagname; valuee=article.getelementsbytagname(tagname).item(0).firstchild.nodevalue; tagname="summary"; // ie fix if(document.all) tagname="nde:"+tagname; paraa=article.getelementsbytagname(tagname).item(0).firstchild.nodevalue; linkk=article.getattribute("url"); strvalue="<div class='nde-blurb'><h3><a href='"+linkk+"'>"+valuee+"</a></h3><p>"+paraa+"</p></div>"; document.getelementbyid("container").innerhtml+=strvalue; } } if(previousele) { previousele.style.backgroundcolor="white"; } ele.style.backgroundcolor="#ddeeff"; previousele=ele; } var previousele=null; </script> <style> .tab { position:relative;top:1px; border: 1px solid #dddddd; color:white; background-color:white; pa...
... detection // var xcomp=null; var testxmlhttprequest=false; try { xcomp = new xmlhttprequest(); if(xcomp) testxmlhttprequest=true; } catch (e) { try { xcomp = new activexobject("microsoft.xmlhttp"); if(xcomp) testxmlhttprequest=true; } catch (e) { } } if(testxmlhttprequest&&document.getelementsbytagname) { document.write("<span style=\"margin-left:1em;\"> <a href=\"javascript:\" class=\"tab \" onclick=\"calldevedge('/viewsource/catalog-new_en.xml',this);return false;\">devedge news</a> <a href=\"javascript:\" class=\"tab\" onclick=\"calldevedge('/central/css/catalog-new_en.xml',this);return false;\" title=\"css articles\">css</a> <a href=\"javascript:\" class=\"tab\" onclick=\"calldevedge('/central/xml/catalog-new_en.xml',this);return false;\" title=\"xml...
...\"tab \" onclick=\"calldevedge('/viewsource/catalog-new_en.xml',this);return false;\">devedge news</a> <a href=\"javascript:\" class=\"tab\" onclick=\"calldevedge('/central/css/catalog-new_en.xml',this);return false;\" title=\"css articles\">css</a> <a href=\"javascript:\" class=\"tab\" onclick=\"calldevedge('/central/xml/catalog-new_en.xml',this);return false;\" title=\"xml articles\">xml</a> <a href=\"javascript:\" class=\"tab\" onclick=\"calldevedge('/central/dom/catalog-new_en.xml ',this);return false;\" title=\"dom articles\">dom</a></span>"); } </script> <!-- ***** this represents the container ***** --> <div style="margin-left:0px;border:1px solid #dddddd;" > <div style="padding:10px;" id="container"> </div> </div> </body> </html> original document information author(s)...

Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
n dofinish() { var element = document.getelementbyid("foo"); element.innerhtml = "done."; } </script> ... such timing-related issues are also hardware-related -- slower systems can reveal bugs that faster systems hide. one concrete example is window.open, which opens a new window: <script> function doopenwindow(){ var mywindow = window.open("about:blank"); mywindow.location.href = "http://www.ibm.com"; } </script> the problem with the code is that window.open is asynchronous -- it does not block the javascript execution until the window has finished loading. therefore, you may execute the line after the window.open line before the new window has finished. you can deal with this by having an onload handler in the new window and then call back into the opener window (u...
...internet explorer behavior, simply do not specify a height on the outer element. figure 4. div overflow hover differences the nonstandard css hover behavior in internet explorer occurs on quite a few web sites. it usually manifests itself by changing text style when hovered over in mozilla, but not in internet explorer. this is because the a:hover css selector in internet explorer matches <a href="">...</a> but not <a name="">...</a>, which sets anchors in html. the text changes occur because authors encapsulate the areas with the anchor-setting markup: css: a:hover {color: green;} html: <a href="foo.com">this text should turn green when you hover over it.</a> <a name="anchor-name"> this text should change color when hovered over, but doesn't in internet explorer. </a>...
...t in internet explorer. </a> mozilla follows the css specification correctly and will change the color to green in this example. you can use two ways to make mozilla behave like internet explorer and not change the color of the text when hovered over: first, you can change the css rule to be a:link:hover {color: green;}, which will only change the color if the element is a link (has an href attribute). alternatively, you can change the markup and close the opened <a /> before the start of the text -- the anchor will continue to work this way. quirks versus standards mode older legacy browsers, such as internet explorer 4, rendered with so-called quirks under certain conditions. while mozilla aims to be a standards-compliant browser, it has three modes that support older web page...

Creating a Window - Archive of obsolete content
« previousnext » we're going to be creating a simple find files utility throughout this tutorial. first, however, we should look at the basic syntax of a xul file. creating a xul file an xul file can be given any name but it really should have a .xul extension. the simplest xul file has the following structure: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <!-- other elements go here --> </window> this window will not do anything since it doesn't contain any ui elements. those will be added in the next section. in fact, there will not be shown any window at all. if you want to ...
... the next section. in fact, there will not be shown any window at all. if you want to force the window to become visible you can add the width and height attribute to the window tag. here is a line by line breakdown of the code above: <?xml version="1.0"?> this line simply declares that this is an xml file. you would normally add this line as is at the top of each xul file. <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> this line is used to specify the style sheets to use for the file. this is the syntax that xml files use to import style sheets. in this case, we import the styles found in the global part of a skin package. we didn't specify a specific file so mozilla will determine which files in the directory to use. in this case, the all-important global.css file is...
...dditional privileges. the extension developer's extension contains an xul editor that allows you to type in xul code and see the results in real-time from within mozilla! troubleshooting if the xul window fails to show up on the desktop but has an icon on the desktop tool bar, check the xml-stylesheet declaration. make sure that you have included the stylesheet correctly: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> in the next section, we will add some buttons to the window. « previousnext » ...

label - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] this element is used to provide a label for a control element. if the user clicks the label, it will move the focus to the associated control, specified with the control attribute. more information is available in the xul tutorial. attributes accesskey, control, crop, disabled, href, value properties accesskey, accessibletype, control, crop, disabled, value style classes header, indent, monospace, plain, small-margin, text-link examples <label value="email address" control="email"/> <textbox id="email"/> attributes accesskey type: character this should be set to a character that is used as a shortcut key. this should be one of the characters that appea...
...s allowed only for form controls. using it with an anchor tag (an <a> link) will have no effect. the element will, however, still respond to mouse events. to enable the element, leave this attribute out entirely. visible controls have a disabled property which, except for menus and menuitems, is normally preferred to use of the attribute, as it may need to update additional state. href type: string defines a url to open when this element is clicked. requires the class attribute to include text-link. value type: string the text to be used for the label. properties accesskey type: character gets and sets the value of the accesskey attribute. accessibletype type: integer a value indicating the type of accessibility o...
...s class causes the text to be indented on its left side. monospace this class causes the text to be displayed in a monospace font. plain this class causes the element to be displayed with no border or margin. small-margin this class causes the text to be displayed with a smaller margin. text-link labels with this class may be focused and the click handler run or the address in the href attribute opened on a mouse click or enter key press. labels will appear like a link (blue and underlined). related elements description attributes label interfaces nsiaccessibleprovider, nsidomxullabelelement notes labels are not focusable note: starting in gecko 2.0, labels are properly not focusable. they used to incorrectly inherit from nsidomxulcontrolelement. t...

Add a hitmap on top of an image - Learn web development
d to provide in coords. for a circle, provide the center's x and y coordinates, followed by the length of the radius. for a rectangle, provide the x/y coordinates of the upper-left and bottom-right corners. for a polygon, to provide the x/y coordinates of each corner (so, at least six values). coordinates are given in css pixels. in case of overlap, source order carries the day. href the url of the resource you’re linking to. you may leave this attribute blank if you don’t want the current area to link anywhere (say, if you’re making a hollow circle.) alt a mandatory attribute, telling people where the link goes or what it does. alt text only displays when the image is unavailable. please refer to our guidelines for writing accessible link text. you may write alt...
...f the resource you’re linking to. you may leave this attribute blank if you don’t want the current area to link anywhere (say, if you’re making a hollow circle.) alt a mandatory attribute, telling people where the link goes or what it does. alt text only displays when the image is unavailable. please refer to our guidelines for writing accessible link text. ...
...ollow circle.) alt a mandatory attribute, telling people where the link goes or what it does. alt text only displays when the image is unavailable. please refer to our guidelines for writing accessible link text. you may write alt="" if the href attribute is blank and the entire image already has an alt attribute. <map name="example-map-1"> <area shape="circle" coords="200,250,25" href="page-2.html" alt="circle example" /> <area shape="rect" coords="10, 5, 20, 15" href="page-3.html" alt="rectangle example" /> </map> step 3: make sure it works for everybody you aren’t done until you test image maps rigorously on many browsers and devices. try following links with your keyboard alone. try turning images off. if your image map is wider than about 240px, you’ll need...

Debugging HTML - Learn web development
nts: if an element is <strong>not closed properly, then its effect can spread to areas you didn't intend <li>badly nested elements: nesting elements properly is also very important for code behaving correctly. <strong>strong <em>strong emphasised?</strong> what is this?</em> <li>unclosed attributes: another common source of html problems. let's look at an example: <a href="https://www.mozilla.org/>link to mozilla homepage</a> </ul> let's review the problems: the paragraph and list item elements have no closing tags. looking at the image above, this doesn't seem to have affected the markup rendering too badly, as it is easy to infer where one element should end and another should begin. the first <strong> element has no closing tag. this is a bit ...
...t <strong> element has no closing tag. this is a bit more problematic, as it isn't easy to tell where the element is supposed to end. in fact, the whole of the rest of the text has been strongly emphasised. this section is badly nested: <strong>strong <em>strong emphasised?</strong> what is this?</em>. it is not easy to tell how this has been interpreted because of the previous problem. the href attribute value is missing a closing double quote. this seems to have caused the biggest problem — the link has not rendered at all. now let's look at the markup the browser has rendered, as opposed to the markup in the source code. to do this, we can use the browser developer tools. if you are not familiar with how to use your browser's developer tools, take a few minutes to review disco...
...he link should give us a good clue as to what element is at fault. "end of file seen and there were open elements": this is a bit ambiguous, but basically refers to the fact there are open elements that need to be properly closed. the line numbers point to the last few lines of the file, and this error message comes with a line of code that points out an example of an open element: example: <a href="https://www.mozilla.org/>link to mozilla homepage</a> ↩ </ul>↩ </body>↩</html> note: an attribute missing a closing quote can result in an open element because the rest of the document is interpreted as the attribute's content. "unclosed element ul": this is not very helpful, as the <ul> element is closed correctly. this error comes up because the <a> element is not closed, due...

Routing in Ember - Learn web development
the todos are re-looked-up so that our changes to the todo list are represented in the rendered list. getting the footer links working so our route functionality is now all in place, but we can't access them from our app. let's get the footer links active so that clicking on them goes to the desired routes. ...
...ked-up so that our changes to the todo list are represented in the rendered list. getting the footer links working so our route functionality is now all in place, but we can't access them from our app. let's get the footer links active so that clicking on them goes to the desired routes. ...
...ges to the todo list are represented in the rendered list. getting the footer links working so our route functionality is now all in place, but we can't access them from our app. let's get the footer links active so that clicking on them goes to the desired routes. go back to todomvc/app/components/footer.hbs, and find the following bit of markup: <a href="#">all</a> <a href="#">active</a> <a href="#">completed</a> update it to <linkto @route='index'>all</linkto> <linkto @route='active'>active</linkto> <linkto @route='completed'>completed</linkto> <linkto> is a built-in ember component that handles all the state changes when navigating routes, as well as setting an "active" class on any link that matches the url, in case there is a desire to style it differently from inactive links. up...

Firefox UI considerations for web developers
refox does its best to avoid having to scale the images, which can result in fuzzy or distorted images, especially at smaller sizes. providing a top sites ready icon the simple rule is to provide an icon which is at least 96x96 pixels in size, using a <link> element whose rel attribute is a reference to a file containing an icon of a supported type. <link rel="apple-touch-icon" sizes="128x128" href="touch-icon-128x128.png"> <link rel="apple-touch-icon" sizes="46x46" href="touch-icon-46x46.png"> <link rel="apple-touch-icon" sizes="256x256" href="touch-icon-256x256.png"> <link rel="icon" href="favicon.ico"> in this code, the 128x128 pixel icon will be used by firefox, as it's the smallest icon which is larger than the 96-pixel size it requires. note: only "rich" icons (apple-touch-icon an...
... specify the size for rel="icon" using the sizes attribute. examples consider again the example top sites box shown at the top of the page, repeated below: let's look at some examples among the icons shown here (note that this discussion is based on the site designs as of early january, 2019). usa today the only icon provided by usa today is its classic favicon: <link rel="shortcut icon" href="https://www.gannett-cdn.com/sites/usatoday/images/favicon.png"> since no rich icon is available, firefox creates a screenshot of the home page rendered 560 pixels wide. the screenshot is then drawn in the icon box, which scales and crops the image as needed to fit. the favicon is rendered in a small box in the lower-right corner of the icon box to further identify the site. hootsuite the html...
...no rich icon is available, firefox creates a screenshot of the home page rendered 560 pixels wide. the screenshot is then drawn in the icon box, which scales and crops the image as needed to fit. the favicon is rendered in a small box in the lower-right corner of the icon box to further identify the site. hootsuite the html on hootsuite's site looks roughly like this: <link rel="shortcut icon" href="/dist/images/icons/favicon.ico"> <link rel="apple-touch-icon-precomposed" href="/dist/images/icons/apple-touch-icon.png"> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/dist/images/icons/apple-touch-icon_72.png"> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/dist/images/icons/apple-touch-icon@2x.png"> firefox starts by looking for an svg icon; there is none. so ...

mozbrowsermanifestchange
n-standard and is not on a standards track. do not use it on production sites facing the web: it will not work for every user. there may also be large incompatibilities between implementations and the behavior may change in the future. the mozbrowsermanifestchange event is fired when the manifest location of the app loaded in the browser <iframe> changes. by this, we are referring to the href of the manifest, as defined in <link rel="manifest" href=" … ">. general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the type of event. ...
... type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. details read only object a custom object. ...
...le or not. details read only object a custom object. details the details property returns an anonymous javascript object with the following properties: href the url of the new app manifest. ...

nsACString (External)
class declaration <map id="classes" name="classes"><area alt="" coords="1005,6,1096,54" href="http://developer.mozilla.org/en/nsacstring_(external)" shape="rect" title="nsacstring_(external)"> <area alt="" coords="980,102,1121,150" href="http://developer.mozilla.org/en/nscstringcontainer_(external)" shape="rect" title="nscstringcontainer_(external)"> <area alt="" coords="571,198,707,246" href="http://developer.mozilla.org/en/nscstring_external" shape="rect" title="nscstring_external"> <area alt="" coords="731,198,955,246" href="http://developer.mozilla.org/en/nsdependentcsubstring_external" shape="rect" title="nsdependentcsubstring_external"> <area alt="" coords="979,198,1123,246" href="http://developer.mozilla.org/en/promiseflatcstring_(external)" shape="rect" title="promiseflatcstrin...
...ape="rect" title="nscstring_external"> <area alt="" coords="731,198,955,246" href="http://developer.mozilla.org/en/nsdependentcsubstring_external" shape="rect" title="nsdependentcsubstring_external"> <area alt="" coords="979,198,1123,246" href="http://developer.mozilla.org/en/promiseflatcstring_(external)" shape="rect" title="promiseflatcstring_(external)"> <area alt="" coords="1147,198,1259,246" href="http://developer.mozilla.org/en/nscautostring_(external)" shape="rect" title="nscautostring_(external)"> <area alt="" coords="5,294,208,342" href="http://developer.mozilla.org/en/nsdependentcstring_external" shape="rect" title="nsdependentcstring_external"> <area alt="" coords="232,294,475,342" href="http://developer.mozilla.org/en/ns_convertutf16toutf8_external" shape="rect" title="ns_convertut...
... shape="rect" title="nscautostring_(external)"> <area alt="" coords="5,294,208,342" href="http://developer.mozilla.org/en/nsdependentcstring_external" shape="rect" title="nsdependentcstring_external"> <area alt="" coords="232,294,475,342" href="http://developer.mozilla.org/en/ns_convertutf16toutf8_external" shape="rect" title="ns_convertutf16toutf8_external"> <area alt="" coords="499,294,779,342" href="http://developer.mozilla.org/en/ns_lossyconvertutf16toascii_external" shape="rect" title="ns_lossyconvertutf16toascii_external"> <area alt="" coords="803,294,925,342" href="http://developer.mozilla.org/en/nsliteralcstring_(external)" shape="rect" title="nsliteralcstring_(external)"></map> method overview beginreading endreading charat operator[] first...

AnalyserNode - Web APIs
" inheritance this interface inherits from the following parent interfaces: <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1=...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audionode" target="_top"><rect x="151" y="1" width="90" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="196" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audionode</text></a><polyline points="241,25 251,20 251,30 241,25" stroke="#d4dde4" fill="none"/><line x1="2...
...="1" width="90" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="196" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audionode</text></a><polyline points="241,25 251,20 251,30 241,25" stroke="#d4dde4" fill="none"/><line x1="251" y1="25" x2="281" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/analysernode" target="_top"><rect x="281" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="341" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">analysernode</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constr...

Attr - Web APIs
nctions (e.g., element.getattributenode()) or means of iterating return attr types. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/attr" target="_top"><rect x="266" y="1" width="75" height="50" fill="#f4f7f8" 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">attr</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} warning: starting in ...

CharacterData - Web APIs
her interfaces, like text, comment, or processinginstruction which aren't abstract. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/characterdata" target="_top"><rect x="266" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="331" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">characterdata</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} prop...

CompositionEvent - Web APIs
ositionevent represents events that occur due to the user indirectly entering text. ...
... x="1" y="1" width="75" height="50" fill="#fff" 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">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201...
...="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/compositionevent" target="_top"><rect x="231" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="311" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">compositionevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} ...

Document - Web APIs
ocument, like how to obtain the page's url and create new elements in the document. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/document" target="_top"><rect x="266" y="1" width="80" height="50" fill="#f4f7f8" 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></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} the document in...

DocumentFragment - Web APIs
the document (even on reflow) or incur any performance impact when changes are made. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/documentfragment" target="_top"><rect x="266" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="346" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">documentfragment</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} ...

DocumentType - Web APIs
the documenttype interface represents a node containing a doctype. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/documenttype" target="_top"><rect x="266" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="326" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">documenttype</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} proper...

Element - Web APIs
he web platform, like xul through the xulelement interface, also implement element. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="...
..." y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a><polyline points="226,25 236,20 236,30 226,25" stroke="#d4dde4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#f4f7f8" 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></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties inh...

FocusEvent - Web APIs
face represents focus-related events, including focus, blur, focusin, and focusout. ...
... x="1" y="1" width="75" height="50" fill="#fff" 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">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201...
...="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/focusevent" target="_top"><rect x="231" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">focusevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructo...

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. ...
...rlinkelementutils.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. ...
... living standard initial definition ...

HTMLImageElement.alt - Web APIs
se of the button. in other words, it should be the same text you would use in a textual button to serve the same purpose. for example, in the snippet of html below, a toolbar which uses icon images as link labels provides alt attributes for each giving a textual label to use instead of the icon when the icons cannot be or are intentionally not used. ...
...xtual button to serve the same purpose. for example, in the snippet of html below, a toolbar which uses icon images as link labels provides alt attributes for each giving a textual label to use instead of the icon when the icons cannot be or are intentionally not used. ...
... toolbar which uses icon images as link labels provides alt attributes for each giving a textual label to use instead of the icon when the icons cannot be or are intentionally not used. <li class="toolbar" aria-role="toolbar"> <a href="songs.html" aria-role="button"><img src="songicon.svg" alt="songs"</a> <a href="albums.html" aria-role="button"><img src="albumicon.svg" alt="albums"</a> <a href="artists.html" aria-role="button"><img src="artisticon.svg" alt="artists"</a> <a href="playlists.html" aria-role="button"><img src="playlisticon.svg" alt="playlists"</a> </li> images containining diagrams or maps when an image contains information presented as a diagram, chart, graph, or map, the alt text should provide the same information, at least in summary form. this is true whether the...

HashChangeEvent - Web APIs
ragment identifier is the part of the url that follows (and includes) the # symbol. ...
... x="1" y="1" width="75" height="50" fill="#fff" 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">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/hashchangeevent" target="_top"><rect x="116" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">hashchangeevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} ...
...back scripts listed on the modernizr github page. basically, those scripts check the location.hash at a regular interval. here is a version that allows only one handler to be bound to the onhashchange property: ;(function(window) { // exit if the browser implements that event if ( "onhashchange" in window.document.body ) { return; } var location = window.location, oldurl = location.href, oldhash = location.hash; // check the location hash on a 100ms interval setinterval(function() { var newurl = location.href, newhash = location.hash; // if the hash has changed and a handler has been bound... if ( newhash != oldhash && typeof window.onhashchange === "function" ) { // execute the handler window.onhashchange({ type: "hashchange",...

IDBOpenDBRequest - Web APIs
pecific event handler attributes. note: this feature is available in web workers. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbrequest" target="_top"><rect x="151" y="1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="201" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbrequest</text></a><polyline points="251,25 261,20 261,30 251,25" stroke="#d4dde4" fill="none"/><line x1...
...1" width="100" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="201" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbrequest</text></a><polyline points="251,25 261,20 261,30 251,25" stroke="#d4dde4" fill="none"/><line x1="261" y1="25" x2="291" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbopendbrequest" target="_top"><rect x="291" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="371" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbopendbrequest</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} ...

InputEvent - Web APIs
the inputevent interface represents an event notifying of editable content change. ...
... x="1" y="1" width="75" height="50" fill="#fff" 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">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201...
...="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/inputevent" target="_top"><rect x="231" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">inputevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructo...

InstallEvent - Web APIs
d during installation. this interface inherits from the extendableevent interface. ...
... x="1" y="1" width="75" height="50" fill="#fff" 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">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/extendableevent" target="_top"><rect x="116" y="1" width="150" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">extendableevent</text></a><polyline points="266,25 276,20 276,30 266,25" stroke="#d4dde4" fill="none"...
...dth="150" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">extendableevent</text></a><polyline points="266,25 276,20 276,30 266,25" stroke="#d4dde4" fill="none"/><line x1="276" y1="25" x2="306" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/installevent" target="_top"><rect x="306" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="366" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">installevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constr...

KeyboardEvent - Web APIs
eans of entering text, such as a handwriting system on a tablet or graphics tablet. ...
... x="1" y="1" width="75" height="50" fill="#fff" 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">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201...
...="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/keyboardevent" target="_top"><rect x="231" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="296" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">keyboardevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} cons...

Location: host - Web APIs
the host property of the location interface 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 host property of the location interface 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. ...
...url. syntax string = object.host; object.host = string; examples var anchor = document.createelement("a"); anchor.href = "https://developer.mozilla.org/location.host" anchor.host == "developer.mozilla.org" anchor.href = "https://developer.mozilla.org:443/location.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/location.host" anchor.host == "developer.mozilla.org:4097" specifications specification status comment html living standardthe definition of 'host' in that specification. living standard initial definition ...

MouseEvent - Web APIs
l more specific events are based on mouseevent, including wheelevent and dragevent. ...
... x="1" y="1" width="75" height="50" fill="#fff" 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">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201...
...="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mouseevent" target="_top"><rect x="231" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mouseevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructo...

OfflineAudioContext - Web APIs
tead, it generates it, as fast as it can, and outputs the result to an audiobuffer. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audiocontext" target="_top"><rect x="151" y="1" width="120" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audiocontext</text></a><polyline points="271,25 281,20 281,30 271,25" stroke="#d4dde4" fill="none"/><lin...
... width="120" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audiocontext</text></a><polyline points="271,25 281,20 281,30 271,25" stroke="#d4dde4" fill="none"/><line x1="281" y1="25" x2="311" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/offlineaudiocontext" target="_top"><rect x="311" y="1" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="406" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">offlineaudiocontext</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;...

Using the Payment Request API - Web APIs
st = new paymentrequest(buildsupportedpaymentmethodnames(), buildshoppingcartdetails()); checkoutbutton.addeventlistener('click', function() { request.show().then(function(paymentresponse) { // handle successful payment }).catch(function(error) { // handle cancelled or failed payment. for example, redirect to // the legacy web form checkout: window.location.href = '/legacy-web-form-checkout'; }); // every click on the checkout button should use a new instance of // paymentrequest object, because paymentrequest.show() can be // called only once per instance. request = new paymentrequest(buildsupportedpaymentmethodnames(), buildshoppingcartdetails()); }); } note: see our feature detect support demo for the full code. chec...
...ved(checkoutobject) { if (shouldcallpaymentrequest) { const request = new paymentrequest(supportedpaymentmethods, checkoutobject); request.show().then(function(paymentresponse) { // post the results to the server and call `paymeresponse.complete()`. }).catch(function(error) { console.log(error); if (fallbacktolegacyonpaymentrequestfailure) { window.location.href = '/legacy-web-form-checkout'; } else { showcheckouterrortouser(); } }); } else { window.location.href = '/legacy-web-form-checkout'; } } note: see our checking user can make payments before prices are known demo for the full code. recommending a payment app when user has no apps if you select to pay with the bobpay demo payment provider on this merchant page,...
...se) { // here we would process the payment. for this demo, simulate immediate success: paymentresponse.complete('success') .then(function() { // for demo purposes: intropanel.style.display = 'none'; successpanel.style.display = 'block'; }); }).catch(function(error) { if (error.code == domexception.not_supported_err) { window.location.href = 'https://bobpay.xyz/#download'; } else { // other kinds of errors; cancelled or failed payment. for demo purposes: intropanel.style.display = 'none'; legacypanel.style.display = 'block'; } }); }); note: see our recommending a payment app when user has no apps demo for the full code. showing additional user interface after successful payments if the merch...

ServiceWorkerGlobalScope - Web APIs
ore implements properties from windowtimers, windowbase64, and windoweventhandlers. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/workerglobalscope" target="_top"><rect x="151" y="1" width="170" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="236" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">workerglobalscope</text></a><polyline points="321,25 331,20 331,30 321,25" stroke="#d4dde4" fill="n...
...h="170" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="236" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">workerglobalscope</text></a><polyline points="321,25 331,20 331,30 321,25" stroke="#d4dde4" fill="none"/><line x1="331" y1="25" x2="361" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/serviceworkerglobalscope" target="_top"><rect x="361" y="1" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="481" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">serviceworkerglobalscope</text></a></svg></div> a:hover text { fill: #0095dd; pointer-ev...

SyncEvent - Web APIs
pe of a serviceworker. this interface inherits from the extendableevent interface. ...
... x="1" y="1" width="75" height="50" fill="#fff" 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">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/extendableevent" target="_top"><rect x="116" y="1" width="150" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">extendableevent</text></a><polyline points="266,25 276,20 276,30 266,25" stroke="#d4dde4" fill="none"...
...dth="150" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">extendableevent</text></a><polyline points="266,25 276,20 276,30 266,25" stroke="#d4dde4" fill="none"/><line x1="276" y1="25" x2="306" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/syncevent" target="_top"><rect x="306" y="1" width="90" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="351" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">syncevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor ...

Text.wholeText - Web APIs
y text node and obtain all adjacent text as a single string. syntax str = textnode.wholetext; notes and example suppose you have the following simple paragraph within your webpage (with some whitespace added to aid formatting throughout the code samples here), whose dom node is stored in the variable para: <p>thru-hiking is great! <strong>no insipid election coverage!</strong> however, <a href="http://en.wikipedia.org/wiki/absentee_ballot">casting a ballot</a> is tricky.</p> you decide you don’t like the middle sentence, so you remove it: para.removechild(para.childnodes[1]); later, you decide to rephrase things to, “thru-hiking is great, but casting a ballot is tricky.” while preserving the hyperlink. so you try this: para.firstchild.data = "thru-hiking is great, but "; ...
...ky.” while preserving the hyperlink. so you try this: para.firstchild.data = "thru-hiking is great, but "; all set, right? wrong! what happened was you removed the strong element, but the removed sentence’s element separated two text nodes. one for the first sentence, and one for the first word of the last. instead, you now effectively have this: <p>thru-hiking is great, but however, <a href="http://en.wikipedia.org/wiki/absentee_ballot">casting a ballot</a> is tricky.</p> you’d really prefer to treat all those adjacent text nodes as a single one. that’s where wholetext comes in: if you have multiple adjacent text nodes, you can access the contents of all of them using wholetext. let’s pretend you never made that last mistake. in that case, we have: assert(para.firstchild.
...e the whole text with new text. that’s where replacewholetext() comes in: para.firstchild.replacewholetext("thru-hiking is great, but "); we’re removing every adjacent text node (all the ones that constituted the whole text) but the one on which replacewholetext() is called, and we’re changing the remaining one to the new text. what we have now is this: <p>thru-hiking is great, but <a href="http://en.wikipedia.org/wiki/absentee_ballot">casting a ballot</a> is tricky.</p> some uses of the whole-text functionality may be better served by using node.textcontent, or the longstanding element.innerhtml; that’s fine and probably clearer in most circumstances. if you have to work with mixed content within an element, as seen here, wholetext and replacewholetext() may be useful. rep...

TouchEvent - Web APIs
ressure, and target element. lists of touches are represented by touchlist objects. ...
... x="1" y="1" width="75" height="50" fill="#fff" 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">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201...
...="1" width="75" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a><polyline points="191,25 201,20 201,30 191,25" stroke="#d4dde4" fill="none"/><line x1="201" y1="25" x2="231" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/touchevent" target="_top"><rect x="231" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="281" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">touchevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructo...

URLUtilsReadOnly.toString() - Web APIs
if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
...if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...
...if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. ...

URLUtilsReadOnly - Web APIs
the obsolete urlutilsreadonly interface previously defined utility methods for working with urls. these were then inherited by other interfaces, such as workerlocation. urlutilsreadonly has been removed from the specification, and the properties it defined are now directly part of the affected interfaces. properties this interface doesn't inherit any properties. urlutilsreadonly.href read only is a domstring containing the whole url. urlutilsreadonly.protocol read only is a domstring containing the protocol scheme of the url, including the final ':'. urlutilsreadonly.host read only is a domstring containing the host, that is the hostname, a ':', and the port of the url. urlutilsreadonly.hostname read only is a domstring containing the domain of the url. urlutilsreadonly.ori...
...e url. urlutilsreadonly.search read only is a domstring containing a '?' followed by the parameters of the url. urlutilsreadonly.hash read only is a domstring containing a '#' followed by the fragment identifier of the url. methods this interface doesn't inherit any methods. urlutilsreadonly.tostring() returns a domstring containing the whole url. it is a synonym for urlutilsreadonly.href. browser compatibility the compatibility table in this page is generated from structured data. if you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. desktopmobilechromeedgefirefoxinternet exploreroperasafariandroid webviewchrome for androidfirefox for androidopera for androidsafari on iossamsung interneturlutilsreadonl...
... nochrome android no support nofirefox android full support 4opera android no support nosafari ios no support nosamsung internet android no support nohref experimentalchrome no support noedge no support nofirefox full support 3.5ie no support noopera no support nosafari no support no...

XMLHttpRequest - Web APIs
upting what the user is doing. xmlhttprequest is used heavily in ajax programming. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmlhttprequesteventtarget" target="_top"><rect x="151" y="1" width="250" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="276" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">xmlhttprequesteventtarget</text></a><polyline points="401,25 411,20 411,30 401,25" stroke="...
...height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="276" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">xmlhttprequesteventtarget</text></a><polyline points="401,25 411,20 411,30 401,25" stroke="#d4dde4" fill="none"/><line x1="411" y1="25" x2="441" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmlhttprequest" target="_top"><rect x="441" y="1" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="511" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">xmlhttprequest</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} de...

Using the link role - Accessibility
the target of the fake link has been visited before, and therefore use :visited styles (e.g. the default purple color for visited links). opening a page using the open() method counts as being a popup, and certain browsers may issue a warning when you try to activate it, or make you explicitly agree to allowing popups form the domain it exists on. ...
.... opening a page using the open() method counts as being a popup, and certain browsers may issue a warning when you try to activate it, or make you explicitly agree to allowing popups form the domain it exists on. ...
... aria attributes used link related aria techniques button ro...

Using the presentation role - Accessibility
ements. non-table related elements should retain their semantic meaning, however. possible effects on user agents and assistive technology note: opinions may differ on how assistive technology should handle this technique. the information provided above is one of those opinions and therefore not normative. ...
... however. possible effects on user agents and assistive technology note: opinions may differ on how assistive technology should handle this technique. the information provided above is one of those opinions and therefore not normative. ...
...te: opinions may differ on how assistive technology should handle this technique. the information provided above is one of those opinions and therefore not normative. ...

ARIA: Complementary role - Accessibility
within a container with the complementary landmark role should make sense if separated from the main content of the document. using the <aside> element will automatically communicate a section has a role of complementary. developers should always prefer using the correct semantic html element over using aria. ...
...eparated from the main content of the document. using the <aside> element will automatically communicate a section has a role of complementary. developers should always prefer using the correct semantic html element over using aria. ...
...cate a section has a role of complementary. developers should always prefer using the correct semantic html element over using aria. examples <div role="complementary"> <h2>trending articles</h2> <ul> <li><a href="#">18 tweets that will make you feel all the feels</a></li> <li><a href="#">stop searching for the perfect lunch containers because i've found them</a></li> <li><a href="#">the time has come to finally decide what we should be calling these foods</a></li> <li><a href="#">17 really good posts we saw on tumblr this 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. using t...

ARIA: contentinfo role - Accessibility
nts do not count towards this limit. using the <footer> element will automatically communicate a section has a role of contentinfo. developers should always prefer using the correct semantic html element over using aria, making sure to test for known issues in voiceover. ...
... <footer> element will automatically communicate a section has a role of contentinfo. developers should always prefer using the correct semantic html element over using aria, making sure to test for known issues in voiceover. examples <body> <!-- other page content --> <div role="contentinfo"> <h2>mdn web docs</h2> <ul> <li><a href="#">web technologies</a></li> <li><a href="#">learn web development</a></li> <li><a href="#">about mdn</a></li> <li><a href="#">feedback</a></li> </ul> <p>© 2005-2018 mozilla and individual contributors. content is available under <a href="#">these licenses</a>.</p> </div> </body> accessibility concerns use sparingly landmark roles are intended to identify larger overall sections of the document. using too many...
...ement in a document, provide a label with the aria-label attribute for each landmark. this label will allow assitive technology users to quickly understand the purpose of each landmark. <body> ... <article> <h2>everyday pad thai</h2> <!-- article content --> <footer aria-label="everyday pad thai metadata"> <p>posted on <time datetime="2018-09-23 12:17">may 16</time> by <a href="#">lisa</a>.</p> </footer> </article> ... <footer aria-label="footer"> <!-- footer content --> </footer> </body> redundant descriptions screen readers will announce the type of role the landmark is. because of this, you do not need to describe what the landmark is in its label. for example, a declaration of role="contentinfo" with an of aria-label="footer" may be announced re...

An overview of accessible web applications and widgets - Accessibility
ss indicators, and similar content modify the dom in ways that an assistive technology (at) may not be aware of. that's where aria comes in. example 1: markup for a tabs widget built without aria labeling. there's no information in the markup to describe the widget's form and function. <!-- this is a tabs widget. ...
... assistive technology (at) may not be aware of. that's where aria comes in. example 1: markup for a tabs widget built without aria labeling. there's no information in the markup to describe the widget's form and function. <!-- this is a tabs widget. how would you know, looking only at the markup? --> <ol> <li id="ch1tab"> <a href="#ch1panel">chapter 1</a> </li> <li id="ch2tab"> <a href="#ch2panel">chapter 2</a> </li> <li id="quiztab"> <a href="#quizpanel">quiz</a> </li> </ol> <div> <div id="ch1panel">chapter 1 content goes here</div> <div id="ch2panel">chapter 2 content goes here</div> <div id="quizpanel">quiz content goes here</div> </div> example 2: how the tabs widget might be styled visually. users might recognize it visually, but there are no machine-read...
...ion of web applications, since assistive technology users can apply all of their knowledge of how desktop applications work when they are using web-based applications. example 3: markup for the tabs widget with aria attributes added. <!-- now *these* are tabs! --> <!-- we've added role attributes to describe the tab list and each tab. --> <ol role="tablist"> <li id="ch1tab" role="tab"> <a href="#ch1panel">chapter 1</a> </li> <li id="ch2tab" role="tab"> <a href="#ch2panel">chapter 2</a> </li> <li id="quiztab" role="tab"> <a href="#quizpanel">quiz</a> </li> </ol> <div> <!-- notice the role and aria-labelledby attributes we've added to describe these panels. --> <div id="ch1panel" role="tabpanel" aria-labelledby="ch1tab">chapter 1 content goes here</div> <div id="...

HTML To MSAA - Accessibility
s mapping rules for specific elements only, it doesn't reflect any general rules applicable to all elements. for example, if name column has n/a value then it means specific elements doesn't provide own rules to calculate name but name can be computed from aria markup or @title attribute. ...
... elements. for example, if name column has n/a value then it means specific elements doesn't provide own rules to calculate name but name can be computed from aria markup or @title attribute. ...
...e but name can be computed from aria markup or @title attribute. ...

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

:target - CSS: Cascading Style Sheets
.example.com/index.html#section2 the following element would be selected by a :target selector when the current url is equal to the above: <section id="section2">example</section> syntax :target examples a table of contents the :target pseudo-class can be used to highlight the portion of a page that has been linked to from a table of contents. html <h3>table of contents</h3> <ol> <li><a href="#p1">jump to the first paragraph!</a></li> <li><a href="#p2">jump to the second paragraph!</a></li> <li><a href="#nowhere">this link goes nowhere, because the target doesn't exist.</a></li> </ol> <h3>my fun article</h3> <p id="p1">you can target <i>this paragraph</i> using a url fragment. click on the link above to try out!</p> <p id="p2">this is <i>another paragraph</i>, also accessible...
...x you can use the :target pseudo-class to create a lightbox without using any javascript. this technique relies on the ability of anchor links to point to elements that are initially hidden on the page. once targeted, the css changes their display so that they are shown. note: a more complete pure-css lightbox based on the :target pseudo-class is available on github (demo). html <ul> <li><a href="#example1">open example #1</a></li> <li><a href="#example2">open example #2</a></li> </ul> <div class="lightbox" id="example1"> <figure> <a href="#" class="close"></a> <figcaption>lorem ipsum dolor sit amet, consectetur adipiscing elit. donec felis enim, placerat id eleifend eu, semper vel sem.</figcaption> </figure> </div> <div class="lightbox" id="example2"> <figure> ...
...nunc et diam quis sapien dignissim auctor. ...

CSS grids, logical values, and writing modes - CSS: Cascading Style Sheets
<p>nori grape silver beet broccoli kombu beet greens fava bean potato quandong celery. bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. ...
... greens fava bean potato quandong celery. bunya nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. ...
... nuts black-eyed pea prairie turnip leek lentil turnip greens parsnip. sea lettuce lettuce water chestnut eggplant winter purslane fennel azuki bean earthnut pea sierra leone bologi leek soko chicory celtuce parsley jícama salsify.</p> </div> <nav> <ul> <li><a href="">link 1</a></li> <li><a href="">link 2</a></li> <li><a href="">link 3</a></li> </ul> </nav> </div> physical values and grid layout we encounter physical properties frequently when building websites, and while the grid placement and alignment properties and values respect writing modes, there are things you may want to do with grid that force you to use physical properties and values. in the guide to box alignment and grids, i...

content - CSS: Cascading Style Sheets
content: open-quote; } q::after { content: close-quote; } h1::before { content: "chapter "; /* the trailing space creates separation between the added content and the rest of the content */ } result image combined with text this example inserts an image before the link. if the image is not found, it inserts text instead. html <a href="http://www.mozilla.org/">mozilla home page</a> css a::before { content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") / " mozilla: "; font: x-small arial, sans-serif; color: gray; } result targeting classes this example inserts additional text after special items in a list. html <h2>paperback best sellers</h2> <ol> <li>political thriller</li> <li class="new-entry...
..."new-entry">vampire romance</li> </ol> css .new-entry::after { content: " new!"; /* the leading space creates separation between the added content and the rest of the content */ color: red; } result images and element attributes this example inserts an image before each link, and adds its id attribute after. ...
...!"; /* the leading space creates separation between the added content and the rest of the content */ color: red; } result images and element attributes this example inserts an image before each link, and adds its id attribute after. ...

scroll-behavior - CSS: Cascading Style Sheets
the scrolling box scrolls in a smooth fashion using a user-agent-defined timing function over a user-agent-defined period of time. user agents should follow platform conventions, if any. ...
...in a smooth fashion using a user-agent-defined timing function over a user-agent-defined period of time. user agents should follow platform conventions, if any. ...
...a user-agent-defined timing function over a user-agent-defined period of time. user agents should follow platform conventions, if any. ...

itemprop - HTML: Hypertext Markup Language
the example below shows the source for a set of elements marked up with itemprop attributes, followed by a table showing the resulting structured data. ...
...tem itemprop name itemprop value itemprop name avatar itemprop director james cameron itemprop genre science fiction itemprop trailer ../movies/avatar-theatrical-trailer.html properties properties have values that are either a string or a url. when a string value is a url, it is expressed using the <a> element and its href attribute, the <img> element and its src attribute, or other elements that link to or embed external resources. three properties with values that are strings <div itemscope> <p>my name is <span itemprop="name">neil</span>.</p> <p>my band is called <span itemprop="band">four parts water</span>.</p> <p>i am <span itemprop="nationality">british</span>.</p> </div> one property, "image"...
...urce, track, or video element the value is the resulting url string that results from parsing the value of the element's src attribute relative to the node document (part of the microdata dom api) of the element at the time the attribute is set if the element is an a, area, or link element the value is the resulting url string that results from parsing the value of the element's href attribute relative to the node document of the element at the time the attribute is set if the element is an object element the value is the resulting url string that results from parsing the value of the element's data attribute relative to the node document of the element at the time the attribute is set if the element is a data element the value is the value of the elem...

Link prefetching FAQ - HTTP
e prefetched documents, it can be served up quickly out of the browser's cache. does prefetching work with https? starting in gecko 1.9.1 (firefox 3.5), https content can be prefetched. what are the prefetching hints? the browser looks for either an html <link> or an http link: header with a relation type of either next or prefetch. an example using the link tag follows: <link rel="prefetch" href="/images/big.jpeg"> the same prefetching hint using an http link: header: link: </images/big.jpeg>; rel=prefetch the format for the link: header is described in rfc 5988 section 5. the browser observes all of these hints and queues up each unique request to be prefetched when the browser is idle. there can be multiple hints per page, as it might make sense to prefetch multiple documents. fo...
...n rfc 5988 section 5. the browser observes all of these hints and queues up each unique request to be prefetched when the browser is idle. there can be multiple hints per page, as it might make sense to prefetch multiple documents. for example, the next document might contain several large images. some more examples follow: <link rel="prefetch alternate stylesheet" title="designed for mozilla" href="mozspecific.css"> <link rel="next" href="2.html"> are anchor (<a>) tags prefetched? no, only <link> tags with a relation type of next or prefetch are prefetched. however, if there is sufficient interest, we may expand link prefetching support to include prefetching <a> tags, which include a relation type of next or prefetch in the future. doing so would probably help content providers avoid t...
...tain a referer: header? yes, prefetched requests include a http referer: header indicating the document from which the prefetching hint was extracted. this may impact referrer tracking that is commonly used on many sites. for this reason, link prefetching may not be appropriate for all content. however, it is possible to instruct mozilla to validate a prefetched document when the user follows a href to the prefetched document by specifying the cache-control: must-revalidate http response header. this header enables caching, but requires an if-modified-since or if-none-match validation request before the serving the document out of the browser's cache. as a server admin, can i distinguish prefetch requests from normal requests? yes, we send the following header along with each prefetch requ...

MathML attribute reference - MathML
this is an alphabetical list of mathml attributes. more details for each attribute are available on particular element pages. notes: the mathml <mstyle> and <math> elements accept all attributes of all mathml presentation elements. see values for notes on values and units in mathml. the attributes background, color, fontfamily, fontsize, fontstyle, fontweight and xlink:href are deprecated. the xlink attributes on mathml elements: xlink:actuate, xlink:href, xlink:show and xlink:type are deprecated as well. name elements accepting attribute description accent <mo>, <mover>, <munderover> a boolean value specifying whether the operator should be treated as an accent. accentunder <munder>, <munderover> a boolean value specifying whether th...
... specifies borders of an entire <mtable>. possible values are: none (default), solid and dashed. framespacing <mtable> specifies additional space added between the table and frame. unimplemented groupalign <maligngroup>, <mtable>, <mtd>, <mtr> height <mglyph>, <mpadded>, <mspace> specifies the desired height. see lengths for possible values. href all used to set a hyperlink to a specified uri. id all sets up a unique identifier associated with the element. unimplemented indentalign <mo>, <mspace> unimplemented indentalignfirst <mo>, <mspace> unimplemented indentalignlast <mo>, <mspace> unimplemented indentshift <mo>, <mspace> unimplemented indent...
... symmetric <mo> if stretchy is true, this attribute specifies whether the operator should be vertically symmetric around the imaginary math axis (centered fraction line). voffset <mpadded> sets the vertical position of the child content. width <mglyph>, <mpadded>, <mspace>, <mtable> specifies the desired width. see lengths for possible values. xlink:href all can be used to set a hyperlink to a specfied uri. however, authors are encouraged to use the href attribute instead. xmlns <math> specifies the uri for the mathml namespace (http://www.w3.org/1998/math/mathml) ...

Using dns-prefetch - Web Performance
duce this latency, dns resolution can add significant latency to requests. for websites that open connections to many third parties, this latency can significantly reduce loading performance. dns-prefetch helps developers mask dns resolution latency. the html <link> element offers this functionality by way of a rel attribute value of dns-prefetch. ...
...ant latency to requests. for websites that open connections to many third parties, this latency can significantly reduce loading performance. dns-prefetch helps developers mask dns resolution latency. the html <link> element offers this functionality by way of a rel attribute value of dns-prefetch. the cross-origin domain is then specified in the href attribute: syntax <link rel="dns-prefetch" href="https://fonts.gstatic.com/" > examples <html> <head> <link rel="dns-prefetch" href="https://fonts.gstatic.com/"> <!-- and all other head elements --> </head> <body> <!-- your page content --> </body> </html> you should place dns-prefetch hints in the <head> element any time your site references resources on cross-origin domains, but there are some things to keep in mind. ...
...only performs a dns lookup, preconnect establishes a connection to a server. this process includes dns resolution, as well as establishing the tcp connection, and performing the tls handshake—if a site is served over https. combining the two provides an opportunity to further reduce the perceived latency of cross-origin requests. you can safely use them together like so: <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin> <link rel="dns-prefetch" href="https://fonts.gstatic.com/"> note: if a page needs to make connections to many third-party domains, preconnecting them all is counterproductive. the preconnect hint is best used for only the most critical connections. for the others, just use <link rel="dns-prefetch"> to save time on the first step — the dns lookup. t...

dx - SVG: Scalable Vector Graphics
the dx attribute indicates a shift along the x-axis on the position of an element or its content. ...
...he <filter> element. value <number> default value 2 animatable yes feoffset for <feoffset>, dx defines the x offset of the filter input graphic. the unit used to resolve the value of the attribute is set by the primitiveunits attribute of the <filter> element. value <number> default value 0 animatable yes glyphref warning: as of svg2 <glyphref> is deprecated and shouldn't be used. for <glyphref>, dx defines the x offset of the glyph, in the font metric system. value <number> default value 0 animatable yes text for <text>, if it contains a single value, dx defines a shift along the x-axis for all glyphs. if there are multiple values, dx defines a shift along t...
... 'dx' in that specification. recommendation initial definition for <feoffset> scalable vector graphics (svg) 1.1 (second edition)the definition of 'dx' in that specification. recommendation initial definition for <altglyph> scalable vector graphics (svg) 1.1 (second edition)the definition of 'dx' in that specification. recommendation initial definition for <glyphref> scalable vector graphics (svg) 1.1 (second edition)the definition of 'dx' in that specification. recommendation initial definition for <text> scalable vector graphics (svg) 1.1 (second edition)the definition of 'dx' in that specification. recommendation initial definition for <tref> and <tspan> ...

dy - SVG: Scalable Vector Graphics
the dy attribute indicates a shift along the y-axis on the position of an element or its content. ...
...he <filter> element. value <number> default value 2 animatable yes feoffset for <feoffset>, dy defines the y offset of the filter input graphic. the unit used to resolve the value of the attribute is set by the primitiveunits attribute of the <filter> element. value <number> default value 0 animatable yes glyphref warning: as of svg2 <glyphref> is deprecated and shouldn't be used. for <glyphref>, dy defines the y offset of the glyph, in the font metric system. value <number> default value 0 animatable yes text for <text>, if it contains a single value, dy defines a shift along the y-axis for all glyphs. if there are multiple values, dy defines a shift along t...
... 'dy' in that specification. recommendation initial definition for <feoffset> scalable vector graphics (svg) 1.1 (second edition)the definition of 'dy' in that specification. recommendation initial definition for <altglyph> scalable vector graphics (svg) 1.1 (second edition)the definition of 'dy' in that specification. recommendation initial definition for <glyphref> scalable vector graphics (svg) 1.1 (second edition)the definition of 'dy' in that specification. recommendation initial definition for <text> scalable vector graphics (svg) 1.1 (second edition)the definition of 'dy' in that specification. recommendation initial definition for <tref> and <tspan> ...

format - SVG: Scalable Vector Graphics
the format attribute indicates the format of the given font. two elements are using this attribute: <altglyph> and <glyphref> context notes value <string> default value none animatable no <string> this value specifies the format of the given font. here is a list of font formats and their strings that can be used as values for this attribute: format string format truedoc-pfr truedoc™ portable font resource embedded-opentype embedded opentype type-1 postscript™ type 1 truetype truetype opentype opentype, including truetype open truetype-gx truetype with gx extensions speedo speedo intellifont i...
... recommendation initial definition for <altglyph> ...
... recommendation initial definition for <altglyph> ...

rotate - SVG: Scalable Vector Graphics
ne of the motion path in grey --> <path d="m10,110 a120,120 -45 0,1 110 10 a120,120 -45 0,1 10,110" stroke="lightgrey" stroke-width="2" fill="none" id="themotionpath"/> <!-- red arrow which will not rotate --> <path fill="red" d="m-5,-5 l10,0 -5,5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="0"> <mpath href="#themotionpath"/> </animatemotion> </path> <g transform="translate(100, 0)"> <use href="#themotionpath"/> <!-- green arrow which will rotate along the motion path --> <path fill="green" d="m-5,-5 l10,0 -5,5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="auto"> <mpath href="#themotionpath"/> </animate...
...nslate(100, 0)"> <use href="#themotionpath"/> <!-- green arrow which will rotate along the motion path --> <path fill="green" d="m-5,-5 l10,0 -5,5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="auto"> <mpath href="#themotionpath"/> </animatemotion> </path> </g> <g transform="translate(200, 0)"> <use href="#themotionpath"/> <!-- blue arrow which will rotate backwards along the motion path --> <path fill="blue" d="m-5,-5 l10,0 -5,5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="auto-reverse"> <mpath href="#themotionpath"/> </animatemotion> </path> </g> <g transform="translate(300, 0)"> <use href="#themo...
... <mpath href="#themotionpath"/> </animatemotion> </path> </g> <g transform="translate(300, 0)"> <use href="#themotionpath"/> <!-- purple arrow which will have a static rotation of 210 degrees --> <path fill="purple" d="m-5,-5 l10,0 -5,5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="210"> <mpath href="#themotionpath"/> </animatemotion> </path> </g> </svg> result specifications specification status comment svg animations level 2the definition of 'rotate' in that specification. editor's draft initial definition ...

x - SVG: Scalable Vector Graphics
lyph>, <feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <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 shou...
...efault value -10% animatable yes foreignobject for <foreignobject>, x defines the x coordinate of the uper left corner of its viewport. value <length> | <percentage> default value 0 animatable yes note: starting with svg2, x is a geometry property meaning this attribute can also be used as a css property for <foreignobject>. glyphref warning: as of svg2 <glyphref> is deprecated and shouldn't be used. for <glyphref>, x defines the x-axis coordinate of the glyph. value <number> default value 0 for the first glyphref, and the end x coordinate of the previous <glyphref> for all subsequent sibling <glyphref>. animatable yes image for <image>, x defines the x coordinate of the uper le...
...tion of 'x' in that specification. recommendation initial definition for <mask> scalable vector graphics (svg) 1.1 (second edition)the definition of 'x' in that specification. recommendation initial definition for <altglyph> scalable vector graphics (svg) 1.1 (second edition)the definition of 'x' in that specification. recommendation initial definition for <glyphref> scalable vector graphics (svg) 1.1 (second edition)the definition of 'x' in that specification. recommendation initial definition for <text> scalable vector graphics (svg) 1.1 (second edition)the definition of 'x' in that specification. recommendation initial definition for <tref> and <tspan> scalable vector graphics (svg) 1.1 (second edition)the definition...

y - SVG: Scalable Vector Graphics
lyph>, <feblend>, <fecolormatrix>, <fecomponenttransfer>, <fecomposite>, <feconvolvematrix>, <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 shou...
...default value -10% animatable yes foreignobject for <foreignobject>, y defines the y coordinate of the uper left corner of its viewport. value <length> | <percentage> default value 0 animatable yes note: starting with svg2, y is a geometry property meaning this attribute can also be used as a css property for <foreignobject>. glyphref warning: as of svg2 <glyphref> is deprecated and shouldn't be used. for <glyphref>, y defines the y-axis coordinate of the glyph. value <number> default value none animatable yes image for <image>, y defines the y coordinate of the uper left corner of the image. value <length> | <percentage> default value 0 animatabl...
...tion of 'y' in that specification. recommendation initial definition for <mask> scalable vector graphics (svg) 1.1 (second edition)the definition of 'y' in that specification. recommendation initial definition for <altglyph> scalable vector graphics (svg) 1.1 (second edition)the definition of 'y' in that specification. recommendation initial definition for <glyphref> scalable vector graphics (svg) 1.1 (second edition)the definition of 'y' in that specification. recommendation initial definition for <text> scalable vector graphics (svg) 1.1 (second edition)the definition of 'y' in that specification. recommendation initial definition for <tref> and <tspan> scalable vector graphics (svg) 1.1 (second edition)the definition...

SVG Attribute reference - SVG: Scalable Vector Graphics
dy e edgemode elevation enable-background end exponent externalresourcesrequired f fill fill-opacity fill-rule filter filterres filterunits flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight format from fr fx fy g g1 g2 glyph-name glyph-orientation-horizontal glyph-orientation-vertical glyphref gradienttransform gradientunits h hanging height href hreflang horiz-adv-x horiz-origin-x i id ideographic image-rendering in in2 intercept k k k1 k2 k3 k4 kernelmatrix kernelunitlength kerning keypoints keysplines keytimes l lang lengthadjust letter-spacing lighting-color limitingconeangle local m marker-end marker-mid marker-start markerhei...
...u1 u2 underline-position underline-thickness unicode unicode-bidi unicode-range units-per-em v v-alphabetic v-hanging v-ideographic v-mathematical values vector-effect version vert-adv-y vert-origin-x vert-origin-y viewbox viewtarget visibility w width widths word-spacing writing-mode x x x-height x1 x2 xchannelselector xlink:actuate xlink:arcrole xlink:href xlink:role xlink:show xlink:title xlink:type xml:base xml:lang xml:space y y y1 y2 ychannelselector z z zoomandpan svg attributes by category generic attributes core attributes id, lang, tabindex, xml:base, xml:lang, xml:space style attributes class, style conditional processing attributes externalresourcesrequired, requiredextensions, requiredfeatures, systemlangua...
...nk:title xlink:type xml:base xml:lang xml:space y y y1 y2 ychannelselector z z zoomandpan svg attributes by category generic attributes core attributes id, lang, tabindex, xml:base, xml:lang, xml:space style attributes class, style conditional processing attributes externalresourcesrequired, requiredextensions, requiredfeatures, systemlanguage. xlink attributes xlink:href, xlink:type, xlink:role, xlink:arcrole, xlink:title, xlink:show, xlink:actuate presentation attributes note that all svg presentation attributes can be used as css properties. alignment-baseline, baseline-shift, clip, clip-path, clip-rule, color, color-interpolation, color-interpolation-filters, color-profile, color-rendering, cursor, direction, display, dominant-baseline, enable-background, f...

<feColorMatrix> - SVG: Scalable Vector Graphics
aspectratio="xmidymid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- ref --> <defs> <g id="circles"> <circle cx="30" cy="30" r="20" fill="blue" fill-opacity="0.5" /> <circle cx="20" cy="50" r="20" fill="green" fill-opacity="0.5" /> <circle cx="40" cy="50" r="20" fill="red" fill-opacity="0.5" /> </g> </defs> <use href="#circles" /> <text x="70" y="50">reference</text> <!-- identity matrix --> <filter id="colormethesame"> <fecolormatrix in="sourcegraphic" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0" /> </filter> <use href="#circles" transform="translate(0 70)" filter="url(#colormethesame)" /> <text x="70" y="120"...
... </filter> <use href="#circles" transform="translate(0 70)" filter="url(#colormethesame)" /> <text x="70" y="120">identity matrix</text> <!-- combine rgb into green matrix --> <filter id="colormegreen"> <fecolormatrix in="sourcegraphic" type="matrix" values="0 0 0 0 0 1 1 1 1 0 0 0 0 0 0 0 0 0 1 0" /> </filter> <use href="#circles" transform="translate(0 140)" filter="url(#colormegreen)" /> <text x="70" y="190">rgbtogreen</text> <!-- saturate --> <filter id="colormesaturate"> <fecolormatrix in="sourcegraphic" type="saturate" values="0.2" /> </filter> <use href="#circles" transform="translate(0 210)" filter="url(#colormesaturate)" /> <text x="70" y="260">saturate</text> <!-- hue...
...lormesaturate"> <fecolormatrix in="sourcegraphic" type="saturate" values="0.2" /> </filter> <use href="#circles" transform="translate(0 210)" filter="url(#colormesaturate)" /> <text x="70" y="260">saturate</text> <!-- huerotate --> <filter id="colormehuerotate"> <fecolormatrix in="sourcegraphic" type="huerotate" values="180" /> </filter> <use href="#circles" transform="translate(0 280)" filter="url(#colormehuerotate)" /> <text x="70" y="330">huerotate</text> <!-- luminancetoalpha --> <filter id="colormelta"> <fecolormatrix in="sourcegraphic" type="luminancetoalpha" /> </filter> <use href="#circles" transform="translate(0 350)" filter="url(#colormelta)" /> <text x="70" y="400">luminancetoalpha</text> </svg> result ...

<feImage> - SVG: Scalable Vector Graphics
svg image, it is rasterized.) usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <animatetransform>, <set> attributes global attributes core attributes presentation attributes filter primitive attributes xlink attributes class style externalresourcesrequired specific attributes preserveaspectratio xlink:href dom interface this element implements the svgfeimageelement interface. example svg <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="image"> <feimage xlink:href="/files/6457/mdn_logo_only_color.png"/> </filter> </defs> <rect x="10%" y="10%" width="80%" height="80%" style="filter:url(#im...
...added crossorigin attribute. scalable vector graphics (svg) 1.1 (second edition)the definition of '<feimage>' in that specification. ...
...added crossorigin attribute. scalable vector graphics (svg) 1.1 (second edition)the definition of '<feimage>' in that specification. ...

<image> - SVG: Scalable Vector Graphics
ntation attributes xlink attributes class style externalresourcesrequired transform specific attributes x: positions the image horizontally from the origin. y: positions the image vertically from the origin. width: the width the image renders at. unlike html's <img>, this attribute is required. height: the height the image renders at. unlike html's <img>, this attribute is required. ...
...tes xlink attributes class style externalresourcesrequired transform specific attributes x: positions the image horizontally from the origin. y: positions the image vertically from the origin. width: the width the image renders at. unlike html's <img>, this attribute is required. height: the height the image renders at. unlike html's <img>, this attribute is required. ...
...e html's <img>, this attribute is required. href and xlink:href: points at a url for the image file. preserveaspectratio: controls how the image is scaled. dom interface <image> implements the svgimageelement interface. example basic rendering of a png image in svg: svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <image href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="200" width="200"/> </svg> result specifications specification status comment scalable vector graphics (svg) 2the definition of '<image>' in that specification. candidate recommendation allows omitting height and width scalable vector graphics (svg) 1.1 (second edition)the def...

<linearGradient> - SVG: Scalable Vector Graphics
svg> attributes gradientunits this attribute defines the coordinate system for attributes x1, x2, y1, y2 value type: userspaceonuse|objectboundingbox ; default value: objectboundingbox; animatable: yes gradienttransform this attribute provides additional transformation to the gradient coordinate system. value type: <transform-list> ; default value: identity transform; animatable: yes href this attribute defines a reference to another <lineargradient> element that will be used as a template. value type: <url> ; default value: none; animatable: yes spreadmethod this attribute indicates how the gradient behaves if it starts or ends inside the bounds of the shape containing the gradient. value type: pad|reflect|repeat ; default value: pad; animatable: yes x1 this attribute defi...
...table: yes x1 this attribute defines the x coordinate of the starting point of the vector gradient along which the linear gradient is drawn. value type: <length> ; default value: 0%; animatable: yes x2 this attribute defines the x coordinate of the ending point of the vector gradient along which the linear gradient is drawn. value type: <length> ; default value: 100%; animatable: yes xlink:href an <iri> reference to another <lineargradient> element that will be used as a template. value type: <iri> ; default value: none; animatable: yes y1 this attribute defines the y coordinate of the starting point of the vector gradient along which the linear gradient is drawn. value type: <length> ; default value: 0%; animatable: yes y2 this attribute defines the y coordinate of the ending p...
... candidate recommendation scal...

<radialGradient> - SVG: Scalable Vector Graphics
s cy; animatable: yes gradientunits this attribute defines the coordinate system for attributes x1, x2, y1, y2 value type: userspaceonuse|objectboundingbox ; default value: objectboundingbox; animatable: yes gradienttransform this attribute provides additional transformation to the gradient coordinate system. value type: <transform-list> ; default value: identity transform; animatable: yes href this attribute defines a reference to another <lineargradient> element that will be used as a template. value type: <url> ; default value: none; animatable: yes r this attribute defines the radius of the end circle of the radial gradient. the gradient will be drawn such that the 100% <stop> is mapped to the perimeter of the end circle. value type: <length> ; default value: 50%; animatable: y...
... the radial gradient. the gradient will be drawn such that the 100% <stop> is mapped to the perimeter of the end circle. value type: <length> ; default value: 50%; animatable: yes spreadmethod this attribute indicates how the gradient behaves if it starts or ends inside the bounds of the shape containing the gradient. value type: pad|reflect|repeat ; default value: pad; animatable: yes xlink:href an <iri> reference to another <lineargradient> element that will be used as a template. value type: <iri> ; default value: none; animatable: yes global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document element event attributes presentation attributes most notably: clip-path, clip-rule, color, color-interpo...
... candidate recommendation added fr attrib...

<view> - SVG: Scalable Vector Graphics
specifications specifica...
... specifications specification status comment scalable vector graphics (svg) 2the definition of '<view...
...cy="50" style="fill:url(#gradient)"/> <view id="halfsizeview" viewbox="0 0 1200 400"/> <view id="normalsizeview" viewbox="0 0 600 200"/> <view id="doublesizeview" viewbox="0 0 300 100"/> <a xlink:href="#halfsizeview"> <text x="5" y="20" font-size="20">half size</text> </a> <a xlink:href="#normalsizeview"> <text x="5" y="40" font-size="20">normal size</text> </a> <a xlink:href="#doublesizeview"> <text x="5" y="60" font-size="20">double size</text> </a> </svg> result dom interface this element implements the svgviewelement interface. specifications specification status comment scalable vector graphics (svg) 2the definition of '<view>' in that specification. candidate recommendation scalable vector graphics (svg) ...

dev/panel - Archive of obsolete content
however, it can receive messages from the add-on that created it, and the add-on can pass it the debuggee so it c...
...rary called volcan.js which gives you a javascript api to the remote debugging protocol. note that at the moment volcan.js does not support the complete remote debugging protocol. we're still working on documenting exactly which messages are supported by volcan.js. ...

Storing annotations - Archive of obsolete content
annotation list's content script: self.on("message", function onmessage(storedannotations) { var annotationlist = $('#annotation-list'); annotationlist.empty(); storedannotations.foreach( function(storedannotation) { var annotationhtml = $('#template .annotation-details').clone(); annotationhtml.find('.url').text(storedannotation.url) .attr('href', storedannotation.url); annotationhtml.find('.url').bind('click', function(event) { event.stoppropagation(); event.preventdefault(); self.postmessage(storedannotation.url); }); annotationhtml.find('.selection-text') .text(storedannotation.anchortext); annotationhtml.find('.annotation-text') .text(storedannota...
... than the panel. so the content script binds a click handler to the links which will send the url to the add-on. save this file in data/list as annotation-list.js. ...

Boxes - Archive of obsolete content
ping contents in html you can use a div as a container and when the div changes size, the contents will wrap or adjust the layout. this does not happen with xul box (or hbox and vbox) by default. however, you can easily add this capability with a style change. ...
... <label value="sss"/> <label value="ttt"/> <label value="uuu"/> <label value="vvv"/> <label value="www"/> <label value="xxx"/> <label value="yyy"/> <label value="zzz"/> </hbox> </window> images if you put image in the contents, you should probably add align="start" attribute to the box. ...

Dialogs and Prompts - Archive of obsolete content
events (enter/esc and more), which is good for keyboard accessibility. add ok and cancel buttons in an order that is consistent with os default (but the button set and layout is highly customizable, see below). simple dialog code the following xul code defines a simple dialog with two buttons, ok and cancel (buttons="accept,cancel" attribute on dialog). <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> <dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="..." title="..." buttons="accept,cancel" ondialogaccept="return onaccept();" ondialogcancel="return oncancel();"> <script src="chrome://..."/> <!-- content --> </dialog> you need to implement onaccept and oncancel functions in your script. if they return a...
...d a dlgtype attribute to them. valid values for dlgtype are the six button types listed above. be sure to use ondialog* attributes on dialog element instead of putting oncommand on the button with dlgtype, because button's oncommand is executed only when the button is pressed, and ondialog* handlers are executed for keyboard and other events too. ...

On page load - Archive of obsolete content
er("load", function(event) { myextension.onpageload(event); }, true); } }, onpageload: function(aevent) { var doc = aevent.originaltarget; // doc is document that triggered "onload" event // do something with the loaded page. // doc.location is a location object (see below for a link). // you can use it to make your code executed on certain pages only. ...
...oc is document that triggered the event var win = doc.defaultview; // win is the window for the doc // test desired conditions and do something // if (doc.nodename != "#document") return; // only documents // if (win != win.top) return; //only top window. // if (win.frameelement) return; // skip iframes/frames alert("page is loaded \n" +doc.location.href); } } window.addeventlistener("load", function load(event){ window.removeeventlistener("load", load, false); //remove listener, no longer needed myextension.init(); },false); references if you need to have a more complicated listener (not just onload), use progress listeners. see also domcontentloaded event in listening to events: simple dom events ...

Creating a Firefox sidebar extension - Archive of obsolete content
sidebar"> <!entity openemptysidebar.commandkey "e"> <!entity openemptysidebar.modifierskey "shift accel"> the content folder includes our sidebar, the emptysidebar.xul is shown in example 3. it creates a page holding one label. other elements can be included, please read the xul tutorials for more information. example 3. ...
...emptysidebar.modifierskey "shift accel"> the content folder includes our sidebar, the emptysidebar.xul is shown in example 3. it creates a page holding one label. other elements can be included, please read the xul tutorials for more information. example 3. ...

Specifying the appearance - Archive of obsolete content
there is one rule for each possible tinderbox state. make your own icons fo...
...there is one rule for each possible tinderbox state. make your own icons for the four states or use the following icons: no status , success , test ...

Creating a Microsummary - Archive of obsolete content
ide using the same tools and languages you already use to generate pages. for example, if you use php scripts to generate pages on your site, you could write php code to output a microsummary when the view=microsummary url parameter is present. then just link to the microsummaries from within the 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. if the url points to a generator, it uses the generator to generate the microsummary for the page. otherwise, if the url returns plain text content (or html content that can be converted to plain text), firefox uses the content as the microsummary for the p...
...he spread firefox home page to its microsummary. specifying the page to which the generator applies now that we've written the transform sheet, we have to specify the page to which it applies. if we were the spread firefox webmasters, we might simply reference the generator within the page itself by adding a <link rel="microsummary"> tag to its <head> element: <head> <link rel="microsummary" href="path/to/our/generator.xml"> </head> since we're not that site's webmasters, however, we can specify the page to which the generator applies within the generator itself and then make the generator available for download and installation. to specify pages to which a generator applies, we use a <pages> element within the <generator> element: <?xml version="1.0" encoding="utf-8"?> <generator xmln...

Creating Dialogs - Archive of obsolete content
our buttons along the bottom of the dialog forok,cancel, and so on. you do not need to include the xul for each button; however, you do need to supply code to perform the appropriate tasks when the user presses each button. this mechanism is necessary because different platforms have a specific order in which the buttons appear. ...
...uttonlabelaccept - label to appear on the accept button egsave buttonaccesskeyaccept - access key to use for the accept button egs defaultbutton - button is activated when the enter key is pressed note: the label attributes are required by remote sites and are probably missing in the above examples due to bug 224996. ...

Introduction to XBL - Archive of obsolete content
s that the xbl defined element has. binding example the box is generic enough that you can use it to create custom widgets (although you can use any element, even one you make up yourself). by assigning a class to a box tag, you can associate a binding to only those boxes that belong to that class. the following example demonstrates this. ...
...generic enough that you can use it to create custom widgets (although you can use any element, even one you make up yourself). by assigning a class to a box tag, you can associate a binding to only those boxes that belong to that class. the following example demonstrates this. ...

Localization - Archive of obsolete content
ample above uses two entities, one for the label on the undo menu item and the second for the access key. changing the find files example let's take a look at how we would put all of this together by modifying the find files dialog so that it uses a dtd file for all of its text strings. the entire xul file is shown below with the changes shown in red. ...
...u item and the second for the access key. changing the find files example let's take a look at how we would put all of this together by modifying the find files dialog so that it uses a dtd file for all of its text strings. the entire xul file is shown below with the changes shown in red. ...

Skinning XUL Files by Hand - Archive of obsolete content
files are situated within a xul package or chrome, the processing instruction for a stylesheet reflects the hierarchy of the package. we will discuss this special url type in a later article. when the xul file is a stand-alone, as in this example, where the stylesheet is external and sitting in the same directory, the processing instruction at the top of the file is as follows: <?xml-stylesheet href="sample.css" type="text/css"?> a xul file may actually have any number of stylesheet processing instructions: one for each stylesheet that the xul wants to load. in general, though, it's better form toimport the global skin into your stylesheet, create your new styles rules, and then load only the new stylesheet to get all styles in both the global skin and in your own stylesheet. creating a n...
...tyles that apply to any element in the state specified by a pseudo-class) with the ":" character. in this third type of style definition, the "a" element picks up the style information defined in the block only when it is, as a link, active. this last type is new to css2. to start creating the xul skin: add the stylesheet processing instruction to the top of your xul file. <?xml-stylesheet href="sample.css" type="text/css"?> create a new text file called sample.css. add the following lines to the file: @import url(chrome://global/skin/); box#bbox { background-color: lightgrey; } button#rd { background-color: red; color: white; } save it in the same directory as your xul file. when you reload the xul file you have been working on, the box element you have used to creat...

Using Remote XUL - Archive of obsolete content
nus at all. in order to give them style we have to reference a stylesheet with rules for styling menus. we could write one ourselves, but we'll make our lives easier and use one of the stylesheets that comes with mozilla-based browsers. in this case, we'll reference the default application stylesheet--the one used by the browser to style its own interface. <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> ... </window> the xml-stylesheet processing instruction references a stylesheet, applying its rules to the widgets in the xul document into which it is placed. it is similar to the link ref="stylesheet" element in html. the url we use, chrome://global/skin/, is a reference...
...t. source | rendered step 6: behavior so far, so good. we have a menu bar with menus and buttons, and we can press the buttons, open the menus, and select their items. the interface is in place, but it doesn't do anything. we want it to load urls in the iframe when we press the buttons or select the menu items. for that we need to add javascript code. <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/javascript"> function loadurl(event) { var contentframe = document.getelementbyid("contentframe"); var url = event.target.getattribute("value"); if (url) contentframe.setattribute("src", url); } </script> ... </window...

tree - Archive of obsolete content
to get the text value for a specific column (for example column 'age') from the currently focused row in the tree: var t = document.getelementbyid('mytree'); document.title = t.view.getcelltext(t.currentindex,t.columns.getnamedcolumn('age')); to select the checkbox and display the cell's text value, you can use code like the following. ...
...'age') from the currently focused row in the tree: var t = document.getelementbyid('mytree'); document.title = t.view.getcelltext(t.currentindex,t.columns.getnamedcolumn('age')); to select the checkbox and display the cell's text value, you can use code like the following. ...

Windows and menus in XULRunner - Archive of obsolete content
o contain other top-level declarations for css and dtd, which i will discuss in a moment. <window> is the basic windowing element in xul. it has attributes to set the title/caption as well as to control its width and height. although i have not seen it mentioned yet, i am assuming that you can only have one <window> element per xul file. here is an example: <?xml version="1.0"?> <?xml-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"/> ... </window> notice the references to css and dtd files. the css is used to apply formatting to elements, just as it would in html. the dtd is...
...ou can learn how to do it in the article window icons. menus and toolbars most desktop applications are complex enough to require some sort of menu and/or toolbar to structure the application’s available commands. xul provides elements to support both menus and toolbars. ...

Syndicating content with RSS - Archive of obsolete content
to html page(s). we've already discussed the first step—creating rss feeds— so we'll focus on the other two steps here. adding the <link> often the data in an rss feed is also made available on an html web page. when this is the case, the html web page can let people and machines know about the feed by using the <link> element, like this: <link rel="alternate" type="application/rss+xml" href="http://example.com/feed" /> adding the <a> while use of the html <link> element is powerful, it is mostly hidden. to advertise the rss feed in a more direct way, the html <a> element can be used. this mimics the <link> element discussed above. linking from the the html web page where the data in an rss feed is also contained makes the rss feed available for use: <a rel="alternate" type="app...
...om/feed" /> adding the <a> while use of the html <link> element is powerful, it is mostly hidden. to advertise the rss feed in a more direct way, the html <a> element can be used. this mimics the <link> element discussed above. linking from the the html web page where the data in an rss feed is also contained makes the rss feed available for use: <a rel="alternate" type="application/rss+xml" href="http://example.com/feed">...</a> feed icons rss (and other) feeds use a special icon. it is recommended that you too use this icon when creating the special <a> link to your feed. the icon looks like the following: you can get more icons like this from feed icons. (other sizes and colors, along with their source files, are available too.) advanced syndication techniques although this ...

Browser Detection and Cross Browser Support - Archive of obsolete content
as support for scripting and frames. use these natural abilities of html to extend the range of browsers your content supports. using noframes to support non-frames capable browsers <html> <head> <title>frames</title> </head> <frameset rows="30,*"> <frame src="foo.html"> <frame src="bar.html"> <noframes> <body> <p> this page requires frames. see <a href="noframes.html">sitemap</a>. </p> </body> </noframes> </frameset> </html> using noscript to support non-scriptable browsers some browsers may not support scripting while some users may have scripting support turned off in their browser. use the noscript tag to provide these users with alternative unscripted versions of your pages or to at least notify them of the need to us...
...ing. try { // code to implement fancy menu } catch (errors) { // handle exceptions } </script> <noscript> <!-- if javascript is not enabled, then the browser will display the contents of the noscript tag which in this case is a simple menu implemented as an unordered list. --> <ul> <li><a href="choice1.html">choice1</a></li> <li><a href="choice2.html">choice2</a></li> </ul> </noscript> </body> </html> using script language to choose the browser where it will be executed the choice of scripting language is determined by the language attribute of the script tag. internet explorer 4 and above can support a variety of script languages. the most common are vbscript an...

Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
hich code stays on the client-side, and which code is shared between the two, it's very possible to produce a single page application which could also include any number of external assets such as a popular third party framework. listing 6 shows the beginning of our application which takes advantage of some of these concepts. ...
...ework. listing 6 shows the beginning of our application which takes advantage of some of these concepts. ...

Prefetch - MDN Web Docs Glossary: Definitions of Web-related terms
dns prefetching domain lookups can be slow, especially with network latency on mobile phones. they are most relevant when there are a plethora of links to external websites that may be clicked on, like search engine results, dns prefetching resolves domain names in advance thereby speeding up load times by reducing the time associated with domain lookup at request time. <link rel="dns-prefetch" href="https://example.com/"> link prefetching link prefetching is a performance optimization technique that works by assuming which links the user is likely to click, then downloading the content of those links. if the user decides to click on one of the links, then the page will be rendered instantly as the content has already been downloaded. the prefetch hints are sent in http headers: link: ; ...
...y as the content has already been downloaded. ...

CSS and JavaScript accessibility best practices - Learn web development
ng <abbr title="hypertext markup language">html</abbr>.</p> again, you might want to style it in some simple way: abbr { color: #a60000; } the recognised styling convention for abbreviations is a dotted underline, and it is unwise to significantly deviate from this. for more on abbreviations, see abbreviations. ...
...ability. for each input that doesn't have a value filled in when the form is submitted, we create a list item with a link and insert it in the errorlist. function createlink(testitem) { const listitem = document.createelement('li'); const anchor = document.createelement('a'); anchor.textcontent = testitem.input.name + ' field is empty: fill in your ' + testitem.input.name + '.'; anchor.href = '#' + testitem.input.name; anchor.onclick = function() { testitem.input.focus(); }; listitem.appendchild(anchor); errorlist.appendchild(listitem); } each link serves a dual purpose — it tells you what the error is, plus you can click on it/activate it to jump straight to the input element in question and correct your entry. note: the focus() part of this example is a bit tricky...

Accessible multimedia - Learn web development
he problem with native html5 controls html5 video and audio instances even come with a set of inbuilt controls that allow you to control the media straight out of the box. for example (see native-controls.html source code and live): <audio controls> <source src="viper.mp3" type="audio/mp3"> <source src="viper.ogg" type="audio/ogg"> <p>your browser doesn't support html5 audio. here is a <a href="viper.mp3">link to the audio</a> instead.</p> </audio> <br> <video controls> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> <p>your browser doesn't support html5 video. here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> </video> the controls attribute provides play/pause buttons, seek bar, etc. — the basic controls you'd...
...save them in a new directory on your hard drive. create a new file called main.js and save it in the same directory. first of all, let's look at the html for the video player, in the html: <section class="player"> <video controls> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> <p>your browser doesn't support html5 video. here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> </video> <div class="controls"> <button class="playpause">play</button> <button class="stop">stop</button> <button class="rwd">rwd</button> <button class="fwd">fwd</button> <div class="time">00:00</div> </div> </section> javascript basic setup we've inserted some simple control buttons below our video. these controls ...

Styling tables - Learn web development
ample together. to start with, make a local copy of the sample markup, download both images (noise and leopardskin), and put the three resulting files in a working directory somewhere on your local computer. next, create a new file called style.css and save it in the same directory as your other files. ...
...t a bit. first of all, we've found a font on google fonts that is suitable for a table about punk bands. you can go there and find a different one if you like; you'll just have to replace our provided <link> element and custom font-family declaration with the ones google fonts gives you. ...

Getting started with CSS - Learn web development
you can copy the code from below if you want to work on your own computer. save the code below as index.html in a folder on your machine. <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>getting started with css</title> </head> <body> <h1>i am a level one heading</h1> <p>this is a paragraph of text. in the text is a <span>span element</span> and also a <a href="http://example.com">link</a>.</p> <p>this is the second paragraph. it contains an <em>emphasized</em> element.</p> <ul> <li>item one</li> <li>item two</li> <li>item <em>three</em></li> </ul> </body> </html> note: if you are reading this on a device or an environment where you can't easily create files, then don't worry — live code editors are provided...
...ome across, however, for now, we will look at the most usual and useful way of doing so — linking css from the head of your document. create a file in the same folder as your html document and save it as styles.css. the .css extension shows that this is a css file. to link styles.css to index.html add the following line somewhere inside the <head> of the html document: <link rel="stylesheet" href="styles.css"> this <link> element tells the browser that we have a stylesheet, using the rel attribute, and the location of that stylesheet as the value of the href attribute. you can test that the css works by adding a rule to styles.css. using your code editor add the following to your css file: h1 { color: red; } save your html and css files and reload the page in a web browser. the level...

CSS basics - Learn web development
.css in a directory named styles. to make the code work, we still need to apply this css (above) to your html document. otherwise, the styling won't change the appearance of the html. (if you haven't been following our project, pause here to read dealing with files and html basics.) open your index.html file. paste the following line in the head (between the <head> and </head> tags): <link href="styles/style.css" rel="stylesheet"> save index.html and load it in your browser. you should see something like this: if your paragraph text is red, congratulations! your css is working. anatomy of a css ruleset let's dissect the css code for red paragraph text to understand how it works : the whole structure is called a ruleset. (the term ruleset is often referred to as just rule.) not...
... explored some css fundamentals, let's improve the appearance of the example by adding more rules and information to the style.css file. first, find the output from google fonts that you previously saved from what will your website look like?. add the <link> element somewhere inside your index.html's head (anywhere between the <head> and </head> tags). it looks something like this: <link href="https://fonts.googleapis.com/css?family=open+sans" rel="stylesheet"> this code links your page to a style sheet that loads the open sans font family with your webpage. next, delete the existing rule you have in your style.css file. it was a good test, but let's not continue with lots of red text. add the following lines (shown below), replacing the font-family assignment with your font-famil...

HTML basics - Learn web development
inks links are very important — they are what makes the web a web! to add a link, we need to use a simple element — <a> — "a" being the short form for "anchor". to make text within your paragraph into a link, follow these steps: choose some text. we chose the text "mozilla manifesto". wrap the text in an <a> element, as shown below: <a>mozilla manifesto</a> give the <a> element an href attribute, as shown below: <a href="">mozilla manifesto</a> fill in the value of this attribute with the web address that you want the link to link to: <a href="https://www.mozilla.org/about/manifesto/">mozilla manifesto</a> you might get unexpected results if you omit the https:// or http:// part, called the protocol, at the beginning of the web address. after making a link, click it ...
...if you are having trouble remembering it, remember that it stands for hypertext reference. add a link to your page now, if you haven't already done so. ...

From object to iframe — other embedding technologies - Learn web development
houldn't use them in your websites — it just requires some knowledge and careful thinking. let's explore the code in a bit more detail. ...
...flash was even used successfully as fallback content for html5 video, for a time, but this is increasingly being seen as not necessary. now let's look at an <object> example that embeds a pdf into a page (see the live example and the source code): <object data="mypdf.pdf" type="application/pdf" width="800" height="1200" typemustmatch> <p>you don't have a pdf plugin, but you can <a href="mypdf.pdf">download the pdf file. </a> </p> </object> pdfs were a necessary stepping stone between paper and digital, but they pose many accessibility challenges and can be hard to read on small screens. they do still tend to be popular in some circles, but it is much better to link to them so they can be downloaded or read on a separate page, rather than embedding them in a webpage. the...

Manipulating documents - Learn web development
nside. the html source code looks like this: <!doctype html> <html> <head> <meta charset="utf-8"> <title>simple dom example</title> </head> <body> <section> <img src="dinosaur.png" alt="a red tyrannosaurus rex: a two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."> <p>here we will add a link to the <a href="https://www.mozilla.org/">mozilla homepage</a></p> </section> </body> </html> the dom on the other hand looks like this: note: this dom tree diagram was created using ian hickson's live dom viewer. you can see here that each element and bit of text in the document has its own entry in the tree — each one is called a node. you will also encounter various terms used to describe th...
...all nodes in a dom). first of all, let's change the text inside the link by updating the value of the node.textcontent property. add the following line below the previous one: link.textcontent = 'mozilla developer network'; we should also change the url the link is pointing to, so that it doesn't go to the wrong place when it is clicked on. add the following line, again at the bottom: link.href = 'https://developer.mozilla.org'; note that, as with many things in javascript, there are many ways to select an element and store a reference to it in a variable. document.queryselector() is the recommended modern approach, which is convenient because it allows you to select elements using css selectors. the above queryselector() call will match the first <a> element that appears in the do...

Third-party APIs - Learn web development
rd party servers. to access them from javascript you first need to connect to the api functionality and make it available on your page. this typically involves first linking to a javascript library available on the server via a <script> element, as seen in our mapquest example: <script src="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.js"></script> <link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.css"/> you can then start using the objects available in that library. for example: let map = l.mapquest.map('map', { center: [53.480759, -2.242631], layers: l.mapquest.tilelayer('map'), zoom: 12 }); here we are creating a variable to store the map information in, then creating a new map using the mapquest.map() method, which takes a...
...reateelement('article'); const heading = document.createelement('h2'); const link = document.createelement('a'); const img = document.createelement('img'); const para1 = document.createelement('p'); const para2 = document.createelement('p'); const clearfix = document.createelement('div'); let current = articles[i]; console.log(current); link.href = current.web_url; link.textcontent = current.headline.main; para1.textcontent = current.snippet; para2.textcontent = 'keywords: '; for(let j = 0; j < current.keywords.length; j++) { const span = document.createelement('span'); span.textcontent += current.keywords[j].value + ' '; para2.appendchild(span); } if(current.multimedia.length >...

Getting started with React - Learn web development
, and a few other lines of code: import react from 'react'; import logo from './logo.svg'; import './app.css'; function app() { return ( <div classname="app"> <header classname="app-header"> <img src={logo} classname="app-logo" alt="logo" /> <p> edit <code>src/app.js</code> and save to reload. </p> <a classname="app-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > learn react </a> </header> </div> ); } export default app; the app.js file consists of three main parts: some import statements at the top, the app component in the middle, and an export statement at the bottom. most react components follow this pattern. import statements ...
... were to rename the app function to app, your browser would show you an error. let's look at app more closely. function app() { return ( <div classname="app"> <header classname="app-header"> <img src={logo} classname="app-logo" alt="logo" /> <p> edit <code>src/app.js</code> and save to reload. </p> <a classname="app-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > learn react </a> </header> </div> ); } the app function returns a jsx expression. this expression defines what your browser ultimately renders to the dom. some elements in the expression have attributes, which are written just like in html, following a pattern of attribute...

Handling common HTML and CSS problems - Learn web development
ively ignore the outer element and run the nested content. for example: <video id="video" controls preload="metadata" poster="img/poster.jpg"> <source src="video/tears-of-steel-battle-clip-medium.mp4" type="video/mp4"> <source src="video/tears-of-steel-battle-clip-medium.webm" type="video/webm"> <!-- offer download --> <p>your browser does not support html5 video; here is a link to <a href="video/tears-of-steel-battle-clip-medium.mp4">view the video</a> directly.</p> </video> this example includes a simple link allowing you to download the video if even the html5 video player doesn't work, so at least the user can still access the video. html5 form elements also exhibit fallback qualities — html5 introduced some special <input> types for inputting specific information into form...
... are not supported, the browser just ignores them. ie conditional comments ie conditional comments are a modified proprietary html comment syntax, which can be used to selectively apply html code to different versions of ie. this has proven to be a very effective mechanism for fixing cross browser bugs. the syntax looks like this: <!--[if lte ie 8]> <script src="ie-fix.js"></script> <link href="ie-fix.css" rel="stylesheet" type="text/css"> <![endif]--> this block will apply the ie-specific css and javascript only if the browser viewing the page is ie 8 or older. lte means "less than or equal to", but you can also use lt, gt, gte, ! for not, and other logical syntax. note: sitepoint's internet explorer conditional comments provides a useful beginner's tutorial/reference that explains...

Displaying Places information using views
vides the following built-in views: tree menu toolbar instantiating the three built-in views are simply standard xul elements with a special type attribute whose value is "places". every xul document containing a built-in view must import the stylesheet browser/components/places/content/places.css and overlay the file browser/components/places/content/placesoverlay.xul: <?xml-stylesheet href="chrome://browser/content/places/places.css" ?> <?xul-overlay href="chrome://browser/content/places/placesoverlay.xul" ?> it's this stylesheet that binds elements with the special type attribute to one of the views. the overlay contains javascript required by the views. it also contains the built-in places context menu and commands, which you may want to take advantage of in your own uses of the...
... trees. if you would like your tree view to be styled in the same manner that firefox styles its uses of the view, you should include the following stylesheet. note that this stylesheet is different from the one given above, which must be included if you use a built-in places view. the following stylesheet is optional and only applies styles and icons to the built-in tree view: <?xml-stylesheet href="chrome://browser/skin/places/places.css" ?> for examples of instantiating a tree view from javascript rather than xul, see programmatic generation of the built-in tree view. column binding the built-in tree view makes it easy to hook up specific columns of your tree to specific properties of the result. it does so by recognizing certain magic values of the id attribute on your treecol elemen...

Tracking Protection
ics services that engage in tracking more subtly, if other parts of your site depend on trackers being loaded, then these parts will also be broken when tracking protection is enabled. for example, if your site includes a callback that runs when content from a tracking site is loaded, then the callback will not execute. ...
...> visit example.com </a> <script> function tracklink(url,event) { event.preventdefault(); ga('send', 'event', 'outbound', 'click', url, { 'transport': 'beacon', 'hitcallback': function() { document.location = url; } }); } </script> instead, you should account for the case when google analytics is missing by checking to see if the ga object has initialized: <a href="http://www.example.com" onclick="tracklink('http://www.example.com', event);"> visit example.com </a> <script> function tracklink(url,event) { event.preventdefault(); if (window.ga && ga.loaded) { ga('send', 'event', 'outbound', 'click', url, { 'transport': 'beacon', 'hitcallback': function() { document.location = url; } }); } else { docum...

mozbrowsericonchange
type read only domstring the type of event. bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. details read only object a custom object. details the details property returns an anonymous javascript object with the following properties: href a domstring representing the path to the new icon. sizes a domstring listing the sizes the new icon is available in, e.g. "16x16" or "16x16 32x32". the any keyword can also be used, to represent "any size." rel a domstring representing the rel attribute value from the <link> element used to link to the icon. example var browser = document.queryselector("iframe"); browser.addeventlistene...
...ailable in, e.g. "16x16" or "16x16 32x32". the any keyword can also be used, to represent "any size." rel a domstring representing the rel attribute value from the <link> element used to link to the icon. ...

Basics
v> <math class="inputmath" display="block"> <mrow> <mi>a</mi> <mo>=</mo> <mo>[</mo> <mtable> <mtr> <mtd><mn>1</mn></mtd> <mtd> <mtext><input id="input12" value="?" size="1"/></mtext> </mtd> </mtr> <mtr> <mtd> <mtext><input id="input21" value="?" size="1"/></mtext> </mtd> <mtd><mn>4</mn></mtd> </mtr> </mtable> <mo>]</mo> </mrow> </math> <div style="text-align:center"> left size: <a class="control" href="javascript:incrementinput('input21', 1);" title="increase input">+</a> <a class="control" href="javascript:incrementinput('input21',-1);" title="decrease input">-</a> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; right size: <a class="control" href="javascript:incrementinput('input12', 1);" title="increase input">+</a> <a class="control" href="javascript:incrementinput('input12',-1);" title="dec...
...nput12',-1);" title="decrease input">-</a> <br/> (click these control buttons to see their effects.) </div> <p> each entry of the following matrix represents <math> <msup><mrow><mo>(</mo><mi>x</mi><mo>+</mo><mi>y</mi><mo>)</mo></mrow><mi>n</mi></msup> </math> for some <i>n</i>. when you left-click any individual entry, it should toggle between its expanded and unexpanded forms. you can also <a href="javascript:unexpand();">unexpand all</a> or <a href="javascript:expand();">expand all</a>. </p> <div> <math display="block"> <mtable> <mtr> <mtd> <mtable align="axis" columnalign="left left left"> <mtr> <mtd> <maction id="a11" actiontype="toggle" selection="2"> <msup> <mrow> <mo>(</mo> <mrow> <mi>x</mi> <mo>+</mo> <mi>y</mi> </mrow> <mo>)</mo> </mrow> <mn>0</mn> </msup> <mn>1</mn> </maction> </...

Index
guide, nss, security getting the source code of network security services (nss), how to build it, and how to run its test suite. 320 nss troubleshooting nss on this page, let's collect information on how to troubleshoot nss at runtime. debugging tips, how to enable tracing of the various modules, etc. ...
... how to build it, and how to run its test suite. 320 nss troubleshooting nss on this page, let's collect information on how to troubleshoot nss at runtime. debugging tips, how to enable tracing of the various modules, etc. ...

SpiderMonkey 1.8
nkey's garbage collector with other memory management systems. these apis are undocumented but fairly stable. the apis include the new jstraceop callback. ...
...there are a few new built-in functions in the javascript shell, mostly useful for testing. countheap, dumpheap, gcparam, gczeal, and stackquota are related to memory management. ...

XUL Overlays
ts to the basic package, explicit loading can be somewhat problematic when the overlay defines optional ui elements. loading overlays explicitly a processing instruction is used to load overlay files explicitly into the master document. inserting the following processing instruction before the doctype declaration in a base file tells the layout engine to load the named overlay file: <?xul-overlay href="chrome://component/content/componentoverlay.xul"?> where component is the name of the package being overlayed (e.g., chrome://navigator/content/navigatoroverlay.xul). the layout engine loads any overlay files and then flows the resulting xul document, so problems associated with incremental insertion in menus, boxes, tables, and forms are avoided. any number of overlays can be loaded into a mast...
... are defined, dialogoverlay.xul. (actually, the implementation is one step more complicated than this: base files overlay dialogoverlay.xul from the global component directory, which in turn overlays a platform-specific xul file such as platformdialogoverlay.xul. the mechanism is the same, however.) any dialog that wants to overlay these buttons just declares the overlay at the top: <?xul-overlay href="chrome://global/content/dialogoverlay.xul"?> and includes an empty box with an id of okcancelbuttons in the ui. the following snippet shows a dialog with custom ui elements at the top and a reference to the overlay's ok and cancel buttons at the bottom: <box align="horizontal" id="bx1" flex="100%" style="margin-bottom: 1em; width: 100%;"> <html:input type="checkbox" id="dialog.newwindow"/> <ht...

AnimationEvent - Web APIs
ationevent interface represents events providing information related to animations. ...
... x="1" y="1" width="75" height="50" fill="#fff" 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">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/animationevent" target="_top"><rect x="116" y="1" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="186" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">animationevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} co...

AudioContext - Web APIs
a single audiocontext for several different audio source and pipeline concurrently. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audiocontext" target="_top"><rect x="151" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audiocontext</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constr...

AudioNode - Web APIs
filter like biquadfilternode or convolvernode), or volume control (like gainnode) <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 70" preserveaspectratio="xminymin meet"><a xlink:href="/docs/web/api/eventtarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1=...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/audionode" target="_top"><rect x="151" y="1" width="90" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="196" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">audionode</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} note: an audi...

BaseAudioContext - Web APIs
ntext can be a target of events, therefore it implements the eventtarget interface. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/baseaudiocontext" target="_top"><rect x="151" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="231" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">baseaudiocontext</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} ...

Using the Beacon API - Web APIs
and returns false otherwise. the following example specifies a handler for the load and beforeunload events. the handler calls sendbeacon() with the current url. window.onload = window.onunload = function analytics(event) { if (!navigator.sendbeacon) return; var url = "https://example.com/analytics"; // create the data to send var data = "state=" + event.type + "&location=" + location.href; // send the beacon var status = navigator.sendbeacon(url, data); // log the data and result console.log("sendbeacon: url = ", url, "; data = ", data, "; status = ", status); }; the following example creates a submit handler and when that event is fired, the handler calls sendbeacon(). window.onsubmit = function send_analytics() { var data = json.stringify({ location: location.
...; // send the beacon var status = navigator.sendbeacon(url, data); // log the data and result console.log("sendbeacon: url = ", url, "; data = ", data, "; status = ", status); }; the following example creates a submit handler and when that event is fired, the handler calls sendbeacon(). window.onsubmit = function send_analytics() { var data = json.stringify({ location: location.href, time: date() }); navigator.sendbeacon('/analytics', data); }; workernavigator.sendbeacon() the beacon api's workernavigator.sendbeacon() method works identically to the usual method, but is accessible from worker global scope. in the following example, a worker sends a beacon using the url and data from the global context. this code snippet is for the global context: function work...

BeforeInstallPromptEvent - Web APIs
site to a home screen on mobile. this interface inherits from the event interface. ...
... x="1" y="1" width="75" height="50" fill="#fff" 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">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/beforeinstallpromptevent" target="_top"><rect x="116" y="1" width="240" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="236" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">beforeinstallpromptevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-ev...

BeforeUnloadEvent - Web APIs
frame receives a user gesture or user interaction. see browser compatibility for more information. ...
... x="1" y="1" width="75" height="50" fill="#fff" 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">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/beforeunloadevent" target="_top"><rect x="116" y="1" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="201" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">beforeunloadevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} ...

BluetoothDevice - Web APIs
api represents a bluetooth device inside a particular script execution environment. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/bluetoothdevice" target="_top"><rect x="151" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="226" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">bluetoothdevice</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} ...

BroadcastChannel - Web APIs
objects listening to the channel. note: this feature is available in web workers. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/broadcastchannel" target="_top"><rect x="151" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="231" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">broadcastchannel</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} ...

CSSCounterStyleRule - Web APIs
t-rule. ...
...="1" y="1" width="75" height="50" fill="#fff" 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">cssrule</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/csscounterstylerule" target="_top"><rect x="116" y="1" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">csscounterstylerule</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;...

CSSPrimitiveValue - Web APIs
or percentage value can be converted to a number (see also the rgbcolor interface). ...
...x="1" y="1" width="80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="41" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">cssvalue</text></a><polyline points="81,25 91,20 91,30 81,25" stroke="#d4dde4" fill="none"/><line x1="91" y1="25" x2="121" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/cssprimitivevalue" target="_top"><rect x="121" y="1" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="206" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">cssprimitivevalue</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} ...

CSSValueList - Web APIs
he items in the cssvaluelist are accessible via an integral index, starting from 0. ...
...x="1" y="1" width="80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="41" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">cssvalue</text></a><polyline points="81,25 91,20 91,30 81,25" stroke="#d4dde4" fill="none"/><line x1="91" y1="25" x2="121" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/cssvaluelist" target="_top"><rect x="121" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="181" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">cssvaluelist</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} proper...

Using the CSS Typed Object Model - Web APIs
mputedstylemap() with the css typed om api, we can access all the css properties and values — including custom properties — that are impacting an element. let's see how this works by creating our first example, which explores computedstylemap(). we start with some html: a paragraph with a link, as well as a definition list to which we will add all the css property / value pairs. <p> <a href="https://example.com">link</a> </p> <dl id="regurgitation"></dl> we add javascript to grab our unstyled link and return back a definition list of all the default css property values impacting the link using computedstylemap(). // get the element const myelement = document.queryselector('a'); // get the <dl> we'll be populating const styleslist = document.queryselector('#regurgitation'); // re...
...to only retrieve a few properties and values. ...

Hit regions and accessibility - Web APIs
as a fallback for browsers which don't support canvas rendering. it's also very useful for assistive technology users (like screen readers) which can read and interpret the sub dom in it. a good example at html5accessibility.com demonstrates how this can be done: <canvas> <h2>shapes</h2> <p>a rectangle with a black border. in the background is a pink circle. ...
...and interpret the sub dom in it. a good example at html5accessibility.com demonstrates how this can be done: <canvas> <h2>shapes</h2> <p>a rectangle with a black border. in the background is a pink circle. partially overlaying the <a href="http://en.wikipedia.org/wiki/circle" onfocus="drawcircle();" onblur="drawpicture();">circle</a>. partially overlaying the circle is a green <a href="http://en.wikipedia.org/wiki/square" onfocus="drawsquare();" onblur="drawpicture();">square</a> and a purple <a href="http://en.wikipedia.org/wiki/triangle" onfocus="drawtriangle();" onblur="drawpicture();">triangle</a>, both of which are semi-opaque, so the full circle can be seen underneath.</p> </canvas> see the video how nvda reads this example by steve faulkner. aria rules accessi...

DOMRect - Web APIs
mounted display should be rendered. it inherits from its parent, domrectreadonly. ...
...idth="150" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="76" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">domrectreadonly</text></a><polyline points="151,25 161,20 161,30 151,25" stroke="#d4dde4" fill="none"/><line x1="161" y1="25" x2="191" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/domrect" target="_top"><rect x="191" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="228.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">domrect</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor ...

Document.location - Web APIs
object, which contains information about the url of the document and provides methods for changing that url and loading another url. though document.location is a read-only location object, you can also assign a domstring to it. ...
... living standard no change from html5. ...

Element.outerHTML - Web APIs
working draft ...
... working draft ...

ErrorEvent - Web APIs
revent interface represents events providing information related to errors in scripts or in files. ...
... x="1" y="1" width="75" height="50" fill="#fff" 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">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/errorevent" target="_top"><rect x="116" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="166" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">errorevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties...

Event.defaultPrevented - Web APIs
eprecated getpreventdefault() method (see bug 691151). syntax var defaultwasprevented = event.defaultprevented; value a boolean, where true indicates that the default user agent action was prevented, and false indicates that it was not. example this example logs attempts to visit links from two <a> elements. javascript is used to prevent the second link from working. ...
...). syntax var defaultwasprevented = event.defaultprevented; value a boolean, where true indicates that the default user agent action was prevented, and false indicates that it was not. example this example logs attempts to visit links from two <a> elements. javascript is used to prevent the second link from working. ...

EventTarget.addEventListener() - Web APIs
gs, arrow functions inherit the this binding of the containing function. that means that the variables and constants available to the containing function are also available to the event handler when using an arrow function. ...
...ining function are also available to the event handler when using an arrow function. ...

ExtendableEvent - Web APIs
in firefox 43 (see bug 1180274.) this interface inherits from the event interface. ...
... x="1" y="1" width="75" height="50" fill="#fff" 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">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/extendableevent" target="_top"><rect x="116" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="191" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">extendableevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} ...

Cross-global fetch usage - Web APIs
o see it: you need a same-origin iframe that same-origin iframe needs to have a location with a different base url you have to use the fetch function cross-global, e.g. frame.contentwindow.fetch() the url passed to fetch needs to be relative the problem in the past we would resolve the relative url against the current global, for example: let absolute = new url(relative, window.location.href) this is not a problem as such. it is just that different apis that exhibit this kind of behavior were doing it inconsistently with the behavior defined in the spec, which could lead to problems further down the line. the solution in firefox 60 onwards, mozilla resolves the relative url against the global that owns the fetch() function being used (see bug 1432272). so in the case described abo...
... inconsistently with the behavior defined in the spec, which could lead to problems further down the line. the solution in firefox 60 onwards, mozilla resolves the relative url against the global that owns the fetch() function being used (see bug 1432272). so in the case described above, it is resolved against the iframe's location: let absolute = new url(relative, frame.contentwindow.location.href) there is a lot of discussion in progress about getting new specs to align with this behavior change, to mitigate potential problems going forward. ...

File - Web APIs
nd files. see using files from web applications for more information and examples. ...
...t x="1" y="1" width="75" height="50" fill="#fff" 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">blob</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/file" target="_top"><rect x="116" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">file</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructor file()...

Using the Geolocation API - Web APIs
l that will show their location. ...
...= "map-link" target="_blank"></a> javascript function geofindme() { const status = document.queryselector('#status'); const maplink = document.queryselector('#map-link'); maplink.href = ''; maplink.textcontent = ''; function success(position) { const latitude = position.coords.latitude; const longitude = position.coords.longitude; status.textcontent = ''; maplink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`; maplink.textcontent = `latitude: ${latitude} °, longitude: ${longitude} °`; } function error() { status.textcontent = 'unable to retrieve your location'; } if(!navigator.geolocation) { status.textcontent = 'geolocation is not supported by your browser'; } else { status.textcontent = 'locating…'; ...

Geolocation API - Web APIs
l that will show their location. ...
...= "map-link" target="_blank"></a> javascript function geofindme() { const status = document.queryselector('#status'); const maplink = document.queryselector('#map-link'); maplink.href = ''; maplink.textcontent = ''; function success(position) { const latitude = position.coords.latitude; const longitude = position.coords.longitude; status.textcontent = ''; maplink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`; maplink.textcontent = `latitude: ${latitude} °, longitude: ${longitude} °`; } function error() { status.textcontent = 'unable to retrieve your location'; } if(!navigator.geolocation) { status.textcontent = 'geolocation is not supported by your browser'; } else { status.textcontent = 'locating…'; ...

GlobalEventHandlers.onmousemove - Web APIs
vents. the mousemove event fires when the user moves the mouse. syntax target.onmousemove = functionref; value functionref is a function name or a function expression. the function receives a mouseevent object as its sole argument. examples tooltips this example creates link tooltips that follow your mouse. it uses the onmousemove, onmouseover, and onmouseout event handlers. ...
...get.onmousemove = functionref; value functionref is a function name or a function expression. the function receives a mouseevent object as its sole argument. examples tooltips this example creates link tooltips that follow your mouse. it uses the onmousemove, onmouseover, and onmouseout event handlers. ...

HTMLFormControlsCollection - Web APIs
rty. this interface replaces one method from htmlcollection, on which it is based. ...
...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/htmlformcontrolscollection" target="_top"><rect x="181" y="1" width="260" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="311" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlformcontrolscollection</text></a></svg></div> a:hover text { fill: #0095dd; pointe...

HTMLHyperlinkElementUtils.toString() - Web APIs
the htmlhyperlinkelementutils.tostring() stringifier method returns a usvstring containing the whole url. it is a read-only version of htmlhyperlinkelementutils.href. ...
... the htmlhyperlinkelementutils.tostring() stringifier method returns a usvstring containing the whole url. it is a read-only version of htmlhyperlinkelementutils.href. ...

HTMLHyperlinkElementUtils - Web APIs
the htmlhyperlinkelementutils mixin defines utility methods and properties to work with htmlanchorelement and htmlareaelement. these utilities allow to deal with common features like urls. there are no objects of this type, but several objects such as htmlanchorelement and htmlareaelement implement it. properties note: this interface doesn't inherit any property. htmlhyperlinkelementutils.href this a stringifier property that returns a usvstring containing the whole url, and allows the href to be updated. htmlhyperlinkelementutils.protocol this is a usvstring containing the protocol scheme of the url, including the final ':'. htmlhyperlinkelementutils.host this is a usvstring containing the host, that is the hostname, and then, if the port of the url is not empty (which can happen...
...g the password specified before the domain name. htmlhyperlinkelementutils.origin read only this returns a usvstring containing the origin of the url (that is its scheme, its domain and its port). methods note: this interface doesn't inherit any method. htmlhyperlinkelementutils.tostring() this returns a usvstring containing the whole url. it is a synonym for htmlhyperlinkelementutils.href, though it can't be used to modify the value. specifications specification status comment html living standardthe definition of 'htmlhyperlinkelementutils' in that specification. living standard initial definition ...

HTMLImageElement.useMap - Web APIs
age maps in our learning article add a hitmap on top of an image. usage notes the string value of usemap must be a valid anchor for a <map> element. in other words, this string should be the value of the appropriate <map>'s name attribute with a pound or hash symbol prepended to it. ...
...lue of usemap must be a valid anchor for a <map> element. in other words, this string should be the value of the appropriate <map>'s name attribute with a pound or hash symbol prepended to it. consider a <map> that looks like this: <map name="mainmenu-map"> <area shape="circle" coords="25, 25, 75, 75" href="/index.html" alt="return to home page"> <area shape="rect" coords="25, 25, 100, 150" href="/index.html" alt="shop"> </map> given the image map named mainmenu-map, the image which uses it should look something like the following: <img src="menubox.png" usemap="#mainmenu-map"> for additional examples (including interactive ones), see the articles about the <map> and <area> elements, as well as the guide to using image maps. example the source for this interactive example is stor...

HTMLOptionsCollection - Web APIs
ltering its items. this object is returned only by the options property of select. ...
...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 mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmloptionscollection</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: ...

IDBCursorWithValue - Web APIs
underlying index or object store. note: this feature is available in web workers. ...
..." y="1" width="90" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="46" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbcursor</text></a><polyline points="91,25 101,20 101,30 91,25" stroke="#d4dde4" fill="none"/><line x1="101" y1="25" x2="131" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbcursorwithvalue" target="_top"><rect x="131" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="221" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbcursorwithvalue</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} ...

IDBDatabase - Web APIs
u cannot execute commands, access data, or open anything outside of a transaction. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbdatabase" target="_top"><rect x="151" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="206" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbdatabase</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properti...

IDBRequest - Web APIs
equest is derived from idbrequest. note: this feature is available in web workers. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbrequest" target="_top"><rect x="151" y="1" width="100" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="201" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbrequest</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties...

IDBTransaction - Web APIs
tion object to abort transactions. note: this feature is available in web workers. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/idbtransaction" target="_top"><rect x="151" y="1" width="140" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="221" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">idbtransaction</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} tr...

Location: toString() - Web APIs
the tostring() stringifier method of the location interface returns a usvstring containing the whole url. it is a read-only version of location.href. ...
... the tostring() stringifier method of the location interface returns a usvstring containing the whole url. it is a read-only version of location.href. ...

MediaKeyMessageEvent - Web APIs
elated data when the content decryption module generates a message for the session. ...
... x="1" y="1" width="75" height="50" fill="#fff" 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">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediakeymessageevent" target="_top"><rect x="116" y="1" width="200" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="216" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mediakeymessageevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: al...

MediaKeySession.onkeystatuseschange - Web APIs
tuses within a session. this interface inherits from the extendableevent interface. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediakeysession" target="_top"><rect x="151" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="226" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mediakeysession</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} ...

MediaKeySession.onmessage - Web APIs
tent decryption module. this interface inherits from the extendableevent interface. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediakeysession" target="_top"><rect x="151" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="226" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mediakeysession</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} ...

MediaSource - Web APIs
source object can be attached to a htmlmediaelement to be played in the user agent. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediasource" target="_top"><rect x="151" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="206" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mediasource</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} construc...

MediaStreamTrackEvent - Web APIs
a stream api methods. these events are sent to the stream when these changes occur. ...
... x="1" y="1" width="75" height="50" fill="#fff" 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">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/mediastreamtrackevent" target="_top"><rect x="116" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="221" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">mediastreamtrackevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: ...

Recording a media element - Web APIs
on each track in the stream. ...
...this is th...

MessageEvent - Web APIs
nmessage handler as listed above). note: this feature is available in web workers. ...
... x="1" y="1" width="75" height="50" fill="#fff" 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">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/messageevent" target="_top"><rect x="116" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="176" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">messageevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constr...

Node - Web APIs
g to add children to a node type that cannot have children will throw an exception. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="188.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">node</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties in additi...

PageTransitionEvent - Web APIs
functions for the pageshow and pagehide events, fired when a document is being loaded or unloaded. ...
... x="1" y="1" width="75" height="50" fill="#fff" 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">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/pagetransitionevent" target="_top"><rect x="116" y="1" width="190" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-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;...

PerformanceLongTaskTiming - Web APIs
longtasktiming interface of the the long tasks api reports instances of long tasks. ...
...dth="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancelongtasktiming" target="_top"><rect x="201" y="1" width="250" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="326" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performancelongtasktiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-...

PerformanceMark - Web APIs
o add a named domhighrestimestamp (the mark) to the browser's performance timeline. ...
...dth="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancemark" target="_top"><rect x="201" y="1" width="150" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="276" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performancemark</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} ...

PerformanceMeasure - Web APIs
restimestamp (the measure) between two marks to the browser's performance timeline. ...
...dth="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancemeasure" target="_top"><rect x="201" y="1" width="180" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="291" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performancemeasure</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} ...

PerformanceNavigationTiming - Web APIs
rface can be used to determine how much time it takes to load or unload a document. ...
...dth="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancenavigationtiming" target="_top"><rect x="201" y="1" width="270" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="336" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performancenavigationtiming</text></a></svg></div> a:hover text { fill: #0095dd; poin...

PerformancePaintTiming - Web APIs
mation to help identify areas that take too long to provide a good user experience. ...
...dth="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performancepainttiming" target="_top"><rect x="201" y="1" width="220" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="311" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performancepainttiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events...

PerformanceResourceTiming - Web APIs
e of the fetched resource as well as the type of resource that initiated the fetch. ...
...dth="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/performanceresourcetiming" target="_top"><rect x="201" y="1" width="250" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="326" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceresourcetiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-...

ProgressEvent - Web APIs
ading of the underlying resource of an <img>, <audio>, <video>, <style> or <link>). ...
... x="1" y="1" width="75" height="50" fill="#fff" 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">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/progressevent" target="_top"><rect x="116" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="181" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">progressevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} cons...

PromiseRejectionEvent - Web APIs
urposes. for details on promise rejection events, see promise rejection events in using promises. ...
... x="1" y="1" width="75" height="50" fill="#fff" 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">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/promiserejectionevent" target="_top"><rect x="116" y="1" width="210" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="221" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">promiserejectionevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: ...

RTCDTMFSender - Web APIs
devices, because there is no mechanism provided by webrtc for receiving dtmf codes. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/rtcdtmfsender" target="_top"><rect x="151" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="216" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">rtcdtmfsender</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} pro...

RTCPeerConnection - Web APIs
in and monitor the connection, and close the connection once it's no longer needed. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/rtcpeerconnection" target="_top"><rect x="151" y="1" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="236" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">rtcpeerconnection</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} ...

RadioNodeList - Web APIs
face represents a collection of radio elements in a <form> or a <fieldset> element. ...
...x="1" y="1" width="80" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="41" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">nodelist</text></a><polyline points="81,25 91,20 91,30 81,25" stroke="#d4dde4" fill="none"/><line x1="91" y1="25" x2="121" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/radionodelist" target="_top"><rect x="121" y="1" width="130" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="186" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">radionodelist</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} prop...

SourceBuffer - Web APIs
ed, via a mediasource object. this can be made up of one or several media segments. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/sourcebuffer" target="_top"><rect x="151" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="211" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">sourcebuffer</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} proper...

SourceBufferList - Web APIs
accessed using array operator (i.e. []) or functions such as foreach() for example. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/sourcebufferlist" target="_top"><rect x="151" y="1" width="160" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="231" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">sourcebufferlist</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} ...

StaticRange - Web APIs
s abstractrange. abstractrange and staticrange are not available from web workers. ...
... width="130" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="66" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">abstractrange</text></a><polyline points="131,25 141,20 141,30 131,25" stroke="#d4dde4" fill="none"/><line x1="141" y1="25" x2="171" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/staticrange" target="_top"><rect x="171" y="1" width="110" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="226" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">staticrange</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} construc...

StorageEvent - Web APIs
a storage area it has access to is changed within the context of another document. ...
... x="1" y="1" width="75" height="50" fill="#fff" 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">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/storageevent" target="_top"><rect x="116" y="1" width="120" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="176" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">storageevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} method...

TaskAttributionTiming - Web APIs
he iframe, embed or object that is being implicated, on the whole, for a long task. ...
...dth="160" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="81" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">performanceentry</text></a><polyline points="161,25 171,20 171,30 161,25" stroke="#d4dde4" fill="none"/><line x1="171" y1="25" x2="201" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/taskattributiontiming" target="_top"><rect x="201" y="1" width="210" height="50" fill="#f4f7f8" 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">taskattributiontiming</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: ...

TimeEvent - Web APIs
il animation, provides specific contextual information associated with time events. ...
... x="1" y="1" width="75" height="50" fill="#fff" 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">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/timeevent" target="_top"><rect x="116" y="1" width="90" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="161" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">timeevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} properties ...

UIEvent - Web APIs
ouchevent, focusevent, keyboardevent, wheelevent, inputevent, and compositionevent. ...
... x="1" y="1" width="75" height="50" fill="#fff" 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">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/uievent" target="_top"><rect x="116" y="1" width="75" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="153.5" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">uievent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} constructors ...

URL API - Web APIs
ou can write new values to them to alter the url represented by the object. for example, to create a url and set its username: let myusername = "someguy"; let addr = new url("https://mysite.com/login"); addr.username = myusername; setting the value of username not only sets that property's value, but it updates the overall url. after executing the code snippet above, the value returned by addr.href is https://someguy@mysite.com/login. this is true for any of the writable properties. queries the search property on a url contains the query string portion of the url. for example, if the url is https://mysite.com/login?user=someguy&page=news, then the value of the search property is ?user=someguy&page=news. you can also look up the values of individual parameters with the urlsearchparams obje...
...akes as input a htmltableelement object representing a <table>. rows are added to the table, one for each key found in the parameters, with the first column containing the key's name, and the second column having the value. note the call to urlsearchparams.sort() to sort the parameter list before generating the table. ...

WebGLContextEvent - Web APIs
this interface inherits properties and methods from its parent interface, event. ...
... x="1" y="1" width="75" height="50" fill="#fff" 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">event</text></a><polyline points="76,25 86,20 86,30 76,25" stroke="#d4dde4" fill="none"/><line x1="86" y1="25" x2="116" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/webglcontextevent" target="_top"><rect x="116" y="1" width="170" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="201" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">webglcontextevent</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} ...

WorkerLocation - Web APIs
object is initialized for each worker and is available via the workerglobalscope.location property obtained by calling self.location. this interface is only visible from inside a javascript script executed in the context of a web worker. properties the workerlocation interface doesn't inherit any property, but implements properties defined in the urlutilsreadonly interface. urlutilsreadonly.href read only is a stringifier that returns a domstring containing the whole url of the script executed in the worker. urlutilsreadonly.protocol read only is a domstring containing the protocol scheme of the url of the script executed in the worker, including the final ':'. urlutilsreadonly.host read only is a domstring containing the host, that is the hostname, a ':', and the port of the url...
...a domstring containing a '#' followed by the fragment identifier of the url of the script executed in the worker. methods the workerlocation interface doesn't inherit any method, but implements methods defined in the urlutilsreadonly interface. urlutilsreadonly.tostring() returns a domstring containing the whole url of the script executed in the worker. it is a synonym for urlutilsreadonly.href. specifications specification status comment html living standardthe definition of 'workerlocation' in that specification. living standard ...

XMLHttpRequestEventTarget - Web APIs
dlers you can implement in an object that will handle events for an xmlhttprequest. ...
...1" width="110" height="50" fill="#fff" stroke="#d4dde4" stroke-width="2px" /><text x="56" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">eventtarget</text></a><polyline points="111,25 121,20 121,30 111,25" stroke="#d4dde4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#d4dde4"/><a xlink:href="/docs/web/api/xmlhttprequesteventtarget" target="_top"><rect x="151" y="1" width="250" height="50" fill="#f4f7f8" stroke="#d4dde4" stroke-width="2px" /><text x="276" y="30" font-size="12px" font-family="consolas,monaco,andale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">xmlhttprequesteventtarget</text></a></svg></div> a:hover text { fill: #0095dd; pointer-...

XSLT Basic Example - Web APIs
ser. the example will take an xml document that contains information (title, list of authors and body text) about an article and present it in an human readable form. figure 1 shows the source of the basic xslt example. the xml document (example.xml) contains the information about the article. using the ?xml-stylesheet? processing instruction, it links to the xslt stylesheet (example.xsl) via its href attribute. an xslt stylesheet starts with the xsl:stylesheet element, which contains all the templates used to create the final output. the example in figure 1 has two templates - one that matches the root node and one that matches author nodes. the template that matches the root node outputs the article's title and then says to process all templates (via apply-templates) that match author nodes ...
...e 1 has two templates - one that matches the root node and one that matches author nodes. the template that matches the root node outputs the article's title and then says to process all templates (via apply-templates) that match author nodes which are children of the authors node. figure 1 : simple xslt example xml document (example.xml) : <?xml version="1.0"?> <?xml-stylesheet type="text/xsl" href="example.xsl"?> <article> <title>my article</title> <authors> <author>mr. foo</author> <author>mr. bar</author> </authors> <body>this is my article text.</body> </article> xsl stylesheet (example.xsl) : <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/transform"> <xsl:output method="text"/> <xsl:template match="/"> article - <x...

ARIA: banner role - Accessibility
anner landmark, each should have a unique label. associated aria roles, states, and properties none keyboard interactions none required javascript features none examples here's a fake simple banner with a skip to navigation link, a logo, a title and a subtitle. as this is the main header for the site, we've added the banner landmark role to the container element. ...
... the site, we've added the banner landmark role to the container element. <div role="banner"> <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> </div> we could also have written the above with the html header element: <header> <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. if ...

Text labels and names - Accessibility
me or label to allow users of assistive technologies to understand what its purpose is and to be able to understand and operate it correctly. there are a number of different types of problems in this category, found in different contexts, and each has its own solution. the different problems and solutions are discussed in the sections below. use alt attribute to label area elements that have the href attribute in image maps, give each <area> element an alt attribute containing a name that describes what resources the areas links to. failure to do so makes an image map hard to use for users of assistive technology — they need alternative text to be able to understand the purpose of an image. examples the following example show a simple image map (taken from h24: providing text alternative...
...ernative text to be able to understand the purpose of an image. examples the following example show 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. select an area for more information on that area." /> <map id="map1" name="map1"> <area shape="rect" coords="0,0,30,30" href="reference.html" alt="reference" /> <area shape="rect" coords="34,34,100,100" href="media.html" alt="audio visual lab" /> </map> see the <area> element reference page for a live interactive example. see also <area> h24: providing text alternatives for the area elements of image maps dialogs should be labeled for any container whose contents act as a dialog box (for example, a modal...

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

:visited - CSS: Cascading Style Sheets
tor. syntax :visited examples properties that would otherwise have no color or be transparent cannot be modified with :visited. of the properties that can be set with this pseudo-class, your browser probably has a default value for color and column-rule-color only. thus, if you want to modify the other properties, you'll need to give them a base value outside the :visited selector. ...
...ve no color or be transparent cannot be modified with :visited. of the properties that can be set with this pseudo-class, your browser probably has a default value for color and column-rule-color only. thus, if you want to modify the other properties, you'll need to give them a base value outside the :visited selector. ...

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

prefers-reduced-data - CSS: Cascading Style Sheets
ely rely on the settings provided by the operating system. examples note: no browser currently implements this feature so the following example will not work. ...
...lowing example will not work. ...

Alternative style sheets - CSS: Cascading Style Sheets
8), also accessed from view > page style. chrome requires an extension to use the feature (as of version 48). the web page can also provide its own user interface to let the user switch styles. an example: specifying the alternative stylesheets the alternate stylesheets are commonly specified using a <link> element with rel="alternate stylesheet" and title="..." attributes. ...
... an extension to use the feature (as of version 48). the web page can also provide its own user interface to let the user switch styles. an example: specifying the alternative stylesheets the alternate stylesheets are commonly specified using a <link> element with rel="alternate stylesheet" and title="..." attributes. for example: <link href="reset.css" rel="stylesheet" type="text/css"> <link href="default.css" rel="stylesheet" type="text/css" title="default style"> <link href="fancy.css" rel="alternate stylesheet" type="text/css" title="fancy"> <link href="basic.css" rel="alternate stylesheet" type="text/css" title="basic"> in this example, the styles "default style", "fancy", and "basic" will be listed in the page style submenu, with "default style" pre-selected. when the user selects ...

animation-timing-function - CSS: Cascading Style Sheets
erty values. ...
...ng-function>#where <timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>where <cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>, <number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>)<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)where <step-position> = jump-start | jump-end | jump-none | jump-both | start | end examples cubic-bezier examples <div class="parent"...

transition-timing-function - CSS: Cascading Style Sheets
experiences. ...
...ng-function>#where <timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function>where <cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>, <number <a href="/docs/css/value_definition_syntax#brackets" title="brackets: enclose several entities, combinators, and multipliers to transform them as a single component">[0,1]>, <number>)<step-timing-function> = step-start | step-end | steps(<integer>[, <step-position>]?)where <step-position> = jump-start | jump-end | jump-none | jump-both | start | end examples cubic-bezier examples <div class="parent">...

Printing - Developer guides
er experience of printing, such as presenting a specially-formatted version of your content before printing begins. there may be other cases in which you want to manage the printing process, but these are some of the most common scenarios. this article provides tips and techniques for helping your web content print better. using a print style sheet add the following to your <head> tag. <link href="/path/to/print.css" media="print" rel="stylesheet" /> using media queries to improve layout detecting print requests some browsers (including firefox 6 and later and internet explorer) send beforeprint and afterprint events to let content determine when printing may have occurred. you can use this to adjust the user interface presented during printing (such as by displaying or hiding user in...
...elf.close()">'); my_window.document.write('<p>when you print this window, it will close afterward.</p>'); my_window.document.write('</body></html>'); } </script> </head> <body> <p>to try out the <code>afterprint</code> event, click the link below to open the window to print. you can also try changing the code to use <code>beforeprint</code> to see the difference.</p> <p><a href="javascript: popuponclick()">open popup window</a></p> </body> </html> view live examples print an external page without opening it if you want to be able to print an external page without opening it, you can utilize a hidden <iframe> (see: htmliframeelement), automatically removing it after the user prints its contents. the following is a possible example which will print a file named extern...

<address>: The Contact Address element - HTML: Hypertext Markup Language
should not contain more information than the contact information, like a publication date (which belongs in a <time> element). typically an <address> element can be placed inside the <footer> element of the current section, if any. examples this example demonstrates the use of <address> to demarcate the contact information for an article's author. ...
... <time> element). typically an <address> element can be placed inside the <footer> element of the current section, if any. examples this example demonstrates the use of <address> to demarcate the contact information for an article's author. ...

<audio>: The Embed Audio element - HTML: Hypertext Markup Language
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. here is a <a href="myaudio.mp4">link to the audio</a> instead.</p> </audio> we offer a substantive and thorough guide to media file types and the audio codecs that can be used within them. also available is a guide to the codecs supported for video. other usage notes: if you don't specify the controls attribute, the audio player won't include the browser's default controls. you can, however, create your own c...
..., which wristwatch is a swiss wristwatch? also it's a good practice to provide some content (such as the direct download link) as a fallback for viewers who use a browser in which the <audio> element is not supported: <audio controls> <source src="myaudio.mp3" type="audio/mpeg"> <source src="myaudio.ogg" type="audio/ogg"> <p> your browser doesn't support html5 audio. here is a <a href="myaudio.mp4">link to download the audio</a> instead. </p> </audio> mdn adding captions and subtitles to html5 video web video text tracks format (webvtt) webaim: captions, transcripts, and audio descriptions mdn understanding wcag, guideline 1.2 explanations understanding success criterion 1.2.1 | w3c understanding wcag 2.0 understanding success criterion 1.2.2 | w3c understanding wc...

<img>: The Image Embed element - HTML: Hypertext Markup Language
mensions and naturalwidth/naturalheight on images would return the values specified in this attribute. explainer, examples ismap this boolean attribute indicates that the image is part of a server-side map. if so, the coordinates where the user clicked on the image are sent to the server. note: this attribute is allowed only if the <img> element is a descendant of an <a> element with a valid href attribute. this gives users without pointing devices a fallback destination. loading indicates how the browser should load the image: eager: loads the image immediately, regardless of whether or not the image is currently within the visible viewport (this is the default value). lazy: defers loading the image until it reaches a calculated distance from the viewport, as defined by the b...
...ternative text for accessibility. <img src="https://udn.realityripple.com/samples/6c/98485e5d8a.png" alt="mdn logo"> image link this example builds upon the previous one, showing how to turn the image into a link. to do so, nest the <img> tag inside the <a>. you should made the alternative text describe the resource the link is pointing to, as if you were using a text link instead. <a href="https://developer.mozilla.org"> <img src="https://udn.realityripple.com/samples/6c/98485e5d8a.png" alt="visit the mdn site"> </a> using the srcset attribute in this example we include a srcset attribute with a reference to a high-resolution version of the logo; this will be loaded instead of the src image on high-resolution devices. the image referenced in the src attribute is count...

<label> - HTML: Hypertext Markup Language
<label for="username">click me</label> <input type="text" id="username"> accessibility concerns interactive content don't place interactive elements such as anchors or buttons inside a label. doing so makes it difficult for people to activate the form input associated with the label. ...
...es it difficult for people to activate the form input associated with the label. don't <label for="tac"> <input id="tac" type="checkbox" name="terms-and-conditions"> i agree to the <a href="terms-and-conditions.html">terms and conditions</a> </label> do <label for="tac"> <input id="tac" type="checkbox" name="terms-and-conditions"> i agree to the terms and conditions </label> <p> <a href="terms-and-conditions.html">read our terms and conditions</a> </p> headings placing heading elements within a <label> interferes with many kinds of assistive technology, because headings are commonly used as a navigation aid. if the label's text needs to be adjusted visually, use css classes applied to the <label> element instead. if a form, or a section of a form needs a title, use the <lege...

<map> - HTML: Hypertext Markup Language
he attribute must be present and must have a non-empty value with no space characters. the value of the name attribute must not be a compatibility-caseless match for the value of the name attribute of another <map> element in the same document. if the id attribute is also specified, both attributes must have the same value. ...
... with no space characters. the value of the name attribute must not be a compatibility-caseless match for the value of the name attribute of another <map> element in the same document. if the id attribute is also specified, both attributes must have the same value. ...

<video>: The Video Embed element - HTML: Hypertext Markup Language
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. <video controls> <source src="myvideo.mp4" type="video/mp4"> <source src="myvideo.webm" type="video/webm"> <p>your browser doesn't support html5 video. here is a <a href="myvideo.mp4">link to the video</a> instead.</p> </video> we offer a substantive and thorough guide to media file types and the guide to the codecs supported for video. also available is a guide to audio codecs that can be used with them. other usage notes: if you don't specify the controls attribute, the video won't include the browser's default controls; you can create your own custom cont...
...r cc 3.0 by the blender foundation. hosted by archive.org --> <!-- poster from peach.blender.org --> <video controls src="https://archive.org/download/bigbuckbunny_124/content/big_buck_bunny_720p_surround.mp4" poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217" width="620"> sorry, your browser doesn't support embedded videos, but don't worry, you can <a href="https://archive.org/details/bigbuckbunny_124">download it</a> and watch it with your favorite video player! </video> until the video starts playing, the image provided in the poster attribute is displayed in its place. if the browser doesn't support video playback, the fallback text is displayed. multiple sources example this example builds on the last one, offering three different sources...

itemtype - HTML: Hypertext Markup Language
order now! </span> </div> result html structured data itemscope itemtype product (http://schema.org/product) itemprop name executive anvil itemprop image https://pixabay.com/static/up...
...order now! ...

CSP: base-uri - HTTP
the violation report. ...
...figuration <ifmodule mod_headers.c> header set content-security-policy "base-uri 'self'"; </ifmodule> nginx configuration add_header content-security-policy "base-uri 'self';" violation case since your domain isn't example.com, a <base> element with its href set to https://example.com will result in a csp violation. <meta http-equiv="content-security-policy" content="base-uri 'self'"> <base href="https://example.com/"> // error: refused to set the document's base uri to 'https://example.com/' // because it violates the following content security policy // directive: "base-uri 'self'" specifications specification status comment content security policy level 3the definition of 'base-uri' in that specification. working draft no changes. content secu...

CSP: upgrade-insecure-requests - HTTP
eaning that no insecure requests will hit the network. note that, if the requested resource is not actually available via https, the request will fail without any fallback to http. ...
...t the network. note that, if the requested resource is not actually available via https, the request will fail without any fallback to http. ...

X-DNS-Prefetch-Control - HTTP
n the <meta> element, like this: <meta http-equiv="x-dns-prefetch-control" content="off"> you can reverse this setting by setting content to "on". ...
...l attribute on the <link> element with a link type of dns-prefetch: <link rel="dns-prefetch" href="https://www.mozilla.org/contribute/"> in this example, the domain name "www.mozilla.org/contribute" will be pre-resolved. similarly, the link element can be used to resolve hostnames without providing a complete url, but only, by preceding the hostname with two slashes: <link rel="dns-prefetch" href="//www.mozilla.org/contribute/"> forced prefetching of hostnames might be useful, for example, on the homepage of a site to force pre-resolution of domain names that are referenced frequently throughout the site even though they are not used on the home page itself. this will improve the overall performance of site even though the performance of the home page may not be affected. ...

String.prototype.link() - JavaScript
return value a string containing an <a> html element. description use the link() method to create an html snippet for a hypertext link. the returned string can then be added to the document via document.write() or element.innerhtml. ...
...ed with the link() method become elements in the links array of the document object. see document.links. examples using link() the following example displays the word "mdn" as a hypertext link that returns the user to the mozilla developer network. var hottext = 'mdn'; var url = 'https://developer.mozilla.org/'; console.log('click to return to ' + hottext.link(url)); // click to return to <a href="https://developer.mozilla.org/">mdn</a> specifications specification ecmascript (ecma-262)the definition of 'string.prototype.link' in that specification. ...

OpenSearch description format
user agents that don't support this element can safely ignore it. autodiscovery of search plugins web sites with search plugins can advertise them so firefox users can easily install the plugins. to support autodiscovery, add a <link> element for each plugin to the <head> of your web page: <link rel="search" type="application/opensearchdescription+xml" title="searchtitle" href="pluginurl"> replace the bolded items as explained below: searchtitle the name of the search to perform, such as "search mdc" or "yahoo! search". this must match your plugin file's <shortname>. pluginurl the url to the xml search plugin, so the browser can download it. if your site offers multiple search plugins, you can support autodiscovery for them all. for example: <link rel="searc...
... name of the search to perform, such as "search mdc" or "yahoo! search". this must match your plugin file's <shortname>. pluginurl the url to the xml search plugin, so the browser can download it. if your site offers multiple search plugins, you can support autodiscovery for them all. for example: <link rel="search" type="application/opensearchdescription+xml" title="mysite: by author" href="http://example.com/mysiteauthor.xml"> <link rel="search" type="application/opensearchdescription+xml" title="mysite: by title" href="http://example.com/mysitetitle.xml"> this way, your site can offer plugins to search by author, or by title. in firefox, an icon change in the search box indicates there's a provided search plugin. (see image, the green plus sign.) thus if a search box i...

clip-rule - SVG: Scalable Vector Graphics
svg 1.1 (2nd edition) nonzero see description of fill-rule property. evenodd see description of fill-rule property. ...
... graphical elements » browser compatibility the compatibility table on this page is generated from structured data. if you'd like to contrib...

in - SVG: Scalable Vector Graphics
<feimage> element. html <div style="width: 420px; height: 220px;"> <svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="backgroundmultiply"> <!-- this will not work. ...
..._logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/> <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#backgroundmultiply);" /> </svg> <svg style="width:200px; height:200px; display: inline;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="imagemultiply"> <!-- this is a workaround. ...

local - SVG: Scalable Vector Graphics
only one element is using this attribute: <color-profile> usage notes value <string> default value none animatable no <string> this value specifies the unique id for a locally stored color profile as specified by international color consortium. ...
... only one element is using this attribute: <color-profile> usage notes value <string> default value none animatable no <string> this value specifies the unique id for a locally stored color profile as specified by international color consortium. ...

requiredFeatures - SVG: Scalable Vector Graphics
vg11/feature#viewportattribute the browser supports the clip and overflow attributes. http://www.w3.org/tr/svg11/feature#shape the browser supports the <rect>, <circle>, <line>, <polyline>, <polygon>, <ellipse> and <path> elements. http://www.w3.org/tr/svg11/feature#text the browser supports the <text>, <tspan>, <tref>, <textpath>, <altglyph>, <altglyphdef>, <altglyphitem> and <glyphref> elements. http://www.w3.org/tr/svg11/feature#basictext the browser supports the <text> element http://www.w3.org/tr/svg11/feature#paintattribute the browser supports the color, fill, fill-rule, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-width, color-interpolation and color-rendering attributes http://www.w3.org/tr/svg11/...
...rg/tr/svg11/feature#animationeventsattribute the browser supports the onbegin, onend, onrepeat and onload attributes http://www.w3.org/tr/svg11/feature#cursor the browser supports the <cursor> element http://www.w3.org/tr/svg11/feature#hyperlinking the browser supports the <a> element http://www.w3.org/tr/svg11/feature#xlinkattribute the browser supports the xlink:type, xlink:href, xlink:role, xlink:arcrole, xlink:title, xlink:show and xlink:actuate attributes http://www.w3.org/tr/svg11/feature#externalresourcesrequired the browser supports the externalresourcesrequired attribute http://www.w3.org/tr/svg11/feature#view the browser supports the <view> element http://www.w3.org/tr/svg11/feature#script the browser supports the <script> element http://www.

side - SVG: Scalable Vector Graphics
the side attribute determines the side of a path the text is placed on (relative to the path direction). ...
...ide of a path the text is placed on (relative to the path direction). ...

startOffset - SVG: Scalable Vector Graphics
</textpath> </text> </svg> usage notes value <length-percentage> | <number> default value 0 animatable yes <length-percentage> a length re...
...none" stroke="red" d="m10,90 q90,90 90,45 q90,10 50,10 q10,10 10,40 q10,70 45,70 q70,70 75,50" /> <path id="path2" fill="none" stroke="red" d="m130,90 q210,90 210,45 q210,10 170,10 q130,10 130,40 q130,70 165,70 q190,70 195,50" /> <text> <textpath href="#path1" startoffset="0"> quick brown fox jumps over the lazy dog. </textpath> </text> <text> <textpath href="#path2" startoffset="40"> quick brown fox jumps over the lazy dog. </textpath> </text> </svg> usage notes value <length-percentage> | <number> default value 0 animatable yes <length-percentage> a length represents a distance along the path measured in the current user coordinate system for the <textpath> element. if a percentage ...

xChannelSelector - SVG: Scalable Vector Graphics
the xchannelselector attribute indicates which color channel from in2 to use to displace the pixels in in along the x-axis. ...
...} <svg viewbox="0 0 440 160" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" scale="30" xchannelselector="r"/> </filter> <filter id="displacementfilter2"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" scale="30" xchannelselector="b"/> </filter> <text x="10" y="60" font-size="50" filter="url(#displacementfilter)">some displaced text</text> <text x="10" y="120" font-size="50" filter="url(#displacementfilter...

yChannelSelector - SVG: Scalable Vector Graphics
the ychannelselector attribute indicates which color channel from in2 to use to displace the pixels in in along the y-axis. ...
...} <svg viewbox="0 0 440 160" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" scale="30" ychannelselector="r"/> </filter> <filter id="displacementfilter2"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="100%" height="100%" result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" scale="30" ychannelselector="b"/> </filter> <text x="10" y="60" font-size="50" filter="url(#displacementfilter)">some displaced text</text> <text x="10" y="120" font-size="50" filter="url(#displacementfilter...

<altGlyph> - SVG: Scalable Vector Graphics
e: yes dy this attribute indicates a shift along the x-axis on the position of the element. value type: <list-of-coordinates> ; default value: relative y-coordinate of ancestor <text> or <tspan>; animatable: yes rotate this attribute defines the supplemental rotation that will be applied to the element. value type: <list-of-numbers> ; default value: none; animatable: yes (non-additive) glyphref the glyph identifier, the format of which is dependent on the format defined by the format attribute of the given font. value type: <string> ; default value: none; animatable: no format the format of the given font. value type: <string> ; default value: none; animatable: no xlink:href an <iri> reference either to a <glyph> element in an svg document or to an <altglyphdef> element. if th...
... specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of '<altglyph>' in that specification. recommendation initial definition ...

<mpath> - SVG: Scalable Vector Graphics
lement for the <animatemotion> element provides the ability to reference an external <path> element as the definition of a motion path. usage context categoriesanimation elementpermitted contentany number of the following elements, in any order:descriptive elements attributes global attributes core attributes » xlink attributes » externalresourcesrequired specific attributes xlink:href dom interface this element implements the svgmpathelement interface. example svg <svg width="100%" height="100%" viewbox="0 0 500 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <rect x="1" y="1" width="498" height="298" fill="none" stroke="blue" stroke-width="2" /> <!-- draw the outline of the motion path in blue, along ...
...ved about the motion path. it is defined with an upright orientation with the base of the triangle centered horizontally just above the origin. --> <path d="m-25,-12.5 l25,-12.5 l 0,-87.5 z" fill="yellow" stroke="red" stroke-width="7.06" > <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="auto" > <mpath xlink:href="#path1"/> </animatemotion> </path> </svg> result specifications specification status comment svg animations level 2the definition of '<mpath>' in that specification. editor's draft no change scalable vector graphics (svg) 1.1 (second edition)the definition of '<mpath>' in that specification. recommendation initial definition ...

<pattern> - SVG: Scalable Vector Graphics
ht="10%"> <polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/> </pattern> </defs> <circle cx="50" cy="50" r="50" fill="url(#star)"/> <circle cx="180" cy="50" r="40" fill="none" stroke-width="20" stroke="url(#star)"/> </svg> attributes height this attribute determines the height of the pattern tile. value type: <length>|<percentage>; default value: 0; animatable: yes href this attribute reference a template pattern that provides default values for the <pattern> attributes. value type: <url>; default value: none; animatable: yes patterncontentunits this attribute defines the coordinate system for the contents of the <pattern>. value type: userspaceonuse|objectboundingbox; default value: userspaceonuse; animatable: yes note: this attribute has no effect if a v...
...he svg viewport for the pattern fragment. value type: <list-of-numbers> ; default value: none; animatable: yes width this attribute determines the width of the pattern tile. value type: <length>|<percentage> ; default value: 0; animatable: yes x this attribute determines the x coordinate shift of the pattern tile. value type: <length>|<percentage> ; default value: 0; animatable: yes xlink:href deprecated since svg 2 this attribute reference a template pattern that provides default values for the <pattern> attributes. value type: <url>; default value: none; animatable: yes note: for browsers implementing href, if both href and xlink:href are set, xlink:href will be ignored and only href will be used. y this attribute determines the y coordinate shift of the pattern tile. value t...

<script> - SVG: Scalable Vector Graphics
the svg script element allows to add scripts to an svg document. ...
...tart(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. value type: <string>; default value: ?; animatable: yes href the url to the script to load. value type: <url> ; default value: none; animatable: no type this attribute defines type of the script language to use. value type: <string>; default value: application/ecmascript; animatable: no xlink:href deprecated since svg 2 the url to the script to load. value type: <url> ; default value: none; animatable: no global attributes core attributes mos...

<tref> - SVG: Scalable Vector Graphics
example <svg width="100%" height="100%" viewbox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <text id="referencedtext"> referenced character data </text> </defs> <text x="100" y="100" font-size="45" > inline character data </text> ...
...ace. example <svg width="100%" height="100%" viewbox="0 0 1000 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <text id="referencedtext"> referenced character data </text> </defs> <text x="100" y="100" font-size="45" > inline character data </text> <text x="100" y="200" font-size="45" fill="red" > <tref xlink:href="#referencedtext"/> </text> <!-- show outline of canvas using 'rect' element --> <rect x="1" y="1" width="998" height="298" fill="none" stroke-width="2" /> </svg> specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of '<font>' in that specification. recommendation initial definition ...

SVG element reference - SVG: Scalable Vector Graphics
you should never use...
...lements which are deprecated and should not be used. ...

Linking - SVG: Scalable Vector Graphics
n the svg <a> element doesn't work in mozilla firefox 1.5. when svg documents are embedded within a parent html document using the tag: page1.html: <html> <body> <p>this is a svg button:</p> <object width="100" height="50" type="image/svg+xml" data="button.svg"/> </body> </html> button.svg: <?xml version="1.1" encoding="utf-8"?> <svg xmlns="http://www.w3.org/2000/svg"> <a xlink:href="page2.html" target="_top"> <g> <!-- button graphical elements here --> </g> </a> </svg> the specification says that the browser should navigate to the html document page2.html when the button graphics are clicked. however, target does not work with mozilla's implementation of the svg <a> element in firefox 1.5. (the problem will be fixed in firefox 2.0.) anyway, the resultant ...
....0.) anyway, the resultant behavior in moz svg is that page2.html will be loaded into the frame where the svg button was (i.e. you would now have page2.html embedded inside a 100x50 pixel frame inside page1.html). to get around this, requires a little ugly javascript hacking: button.svg: <?xml version="1.1" encoding="utf-8"?> <svg xmlns="http://www.w3.org/2000/svg"> <g onclick="top.document.href='page2.html'" cursor="pointer"> <!-- button graphical elements here --> </g> </svg> example for an example of this solution at work see www.codedread.com. ...

SVG 1.1 Support in Firefox - SVG: Scalable Vector Graphics
implemented (bug 273171). textpath implemented. recently implemented bindings: selectsubstring altglyph implemented as tspans, no font features as of gecko 2.0 (bug 456286, bug 571808). altglyphdef not implemented. altglyphitem not implemented. glyphref not implemented. marker module marker implemented. color profile module color-profile not implemented (bug 427713). gradient module lineargradient implemented. radialgradient implemented. stop imple...
... implemented. fefuncr implemented. fefuncg implemented. fefuncb implemented. fefunca implemented. cursor module cursor not implemented (bug 177193). hyperlinking module a only xlink:href, xlink:show, xlink:target and xlink:title attributes implemented. view module view implemented in gecko 15.0 (bug 512525). . scripting module script implemented. animation module animate implemented set implemented animatemoti...

SVG 2 support in Mozilla - SVG: Scalable Vector Graphics
shapes to <textpath> implementation status unknown side attribute for <textpath> implemented (bug 1446650) render characters for one loop of a single closed path, effected by the startoffset attribute and text-anchor property implementation status unknown <tref> removed implementation status unknown <altglyph>, <altglyphdef>, <altglyphitem> and <glyphref> removed <altglyph>, <altglyphdef> and <altglyphitem> removed (bug 1260032), <glyphref> never really implemented (bug 1302693) svgtextcontentelement.selectsubstring() deprecated implementation status unknown getcomputedtextlength() not including dx and dy values implementation status unknown text in non-rendered elements not included in addressable characters ...
...vgzoomevent removed implementation status unknown <cursor> element deprecated implementation status unknown linking change notes link svg resources with fragment identifiers implementation status unknown xlink:type, xlink:role, xlink:arcrole, xlink:show, and xlink:actuate attributes removed implementation status unknown xlink:href attribute deprecated in favor of href implemented (bug 1245751) xlink:title attribute deprecated in favor of child <title> implementation status unknown spaces in svg view fragments implementation status unknown pixel: and percent: spatial media fragments implementation status unknown linking to <view> elements does not cause implicit box transforma...

Gradients in SVG - SVG: Scalable Vector Graphics
trolled by two points, designated by the attributes x1, x2, y1, and y2. these attributes define a line along which the gradient travels. the gradient defaults to a horizontal orientation, but it can be rotated by changing these. gradient2 in the above example is designed to create a vertical gradient. <lineargradient id="gradient2" x1="0" x2="0" y1="0" y2="1"> note: you can also use the xlink:href attribute on gradients too. when it is used, attributes and stops from one gradient can be included on another. in the above example, you wouldn't have to recreate all the stops in gradient2. <lineargradient id="gradient1"> <stop id="stop1" offset="0%"/> <stop id="stop2" offset="50%"/> <stop id="stop3" offset="100%"/> </lineargradient> <lineargradient id="gradient2" x1="0" x2="0" y1=...
...ps from one gradient can be included on another. in the above example, you wouldn't have to recreate all the stops in gradient2. <lineargradient id="gradient1"> <stop id="stop1" offset="0%"/> <stop id="stop2" offset="50%"/> <stop id="stop3" offset="100%"/> </lineargradient> <lineargradient id="gradient2" x1="0" x2="0" y1="0" y2="1" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#gradient1"/> i've included the xlink namespace here directly on the node, although usually you would define it at the top of your document. more on that when we talk about images. radial gradient radial gradients are similar to linear ones but draw a gradient that radiates out from a point. to create one you add a <radialgradient> element to the definitions section of your document. basic e...

Texts - SVG: Scalable Vector Graphics
ach character rotate to its respective value, with remaining characters rotating according to the last value. textlength this is a more obscure attribute giving the calculated length of the string. it is meant to allow the rendering engine to fine-tune the positions of the glyphs when its own measured text length doesn't meet the one provided here. textpath this element fetches via its xlink:href attribute an arbitrary path and aligns the characters, that it encircles, along this path: <path id="my_path" d="m 20,20 c 80,60 100,40 120,20" fill="transparent" /> <text> <textpath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path"> a curve. </textpath> </text> playable code 2 <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg"> <path id="my_path" d="m 20,...
... 20,20 c 80,60 100,40 120,20" fill="transparent" /> <text> <textpath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path"> a curve. </textpath> </text> playable code 2 <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg"> <path id="my_path" d="m 20,20 c 80,60 100,40 120,20" fill="transparent" /> <text> <textpath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path"> a curve. </textpath> </text> <style><![cdata[ text{ dominant-baseline: hanging; font: 28px verdana, helvetica, arial, sans-serif; } ]]></style> </svg> « previousnext » ...

Same-origin policy - Web security
ked by embedding. for example, you can read the dimensions of an embedded image, the actions of an embedded script, or the availability of an embedded resource. here are some examples of resources which may be embedded cross-origin: javascript with <script src="…"></script>. error details for syntax errors are only available for same-origin scripts. css applied with <link rel="stylesheet" href="…">. due to the relaxed syntax rules of css, cross-origin css requires a correct content-type header. restrictions vary by browser: internet explorer, firefox, chrome, safari (scroll down to cve-2010-0051) and opera. images displayed by <img>. media played by <video> and <audio>. external resources embedded with <object> and <embed>. fonts applied with @font-face. some browsers allow cross...
... only. window.parent read only. window.self read only. window.top read only. window.window read only. some browsers allow access to more properties than the above. location the following cross-origin access to location properties is allowed: methods location.replace attributes urlutils.href write-only. some browsers allow access to more properties than the above. cross-origin data storage access access to data stored in the browser such as web storage and indexeddb are separated by origin. each origin gets its own separate storage, and javascript in one origin cannot read from or write to the storage belonging to another origin. cookies use a separate definition of orig...

Using shadow DOM - Web Components
there are some bits o...
...a <style> element, but it is perfectly possible to do it by referencing an external stylesheet from a <link> element instead. for example, take a look at this code from our popup-info-box-external-stylesheet example (see the source code): // apply external styles to the shadow dom const linkelem = document.createelement('link'); linkelem.setattribute('rel', 'stylesheet'); linkelem.setattribute('href', 'style.css'); // attach the created element to the shadow dom shadow.appendchild(linkelem); note that <link> elements do not block paint of the shadow root, so there may be a flash of unstyled content (fouc) while the stylesheet loads. many modern browsers implement an optimization for <style> tags either cloned from a common node or that have identical text, to allow them to share a single ...

XML introduction - XML: Extensible Markup Language
r example, &#xa9; is the "©" symbol. displaying xml xml is usually used for descriptive purposes, but there are ways to display xml data. if you don't define a specific way for the xml to be rendered, the raw xml is displayed in the browser. one way to style xml output is to specify css to apply to the document using the xml-stylesheet processing instruction. ...
...specify css to apply to the document using the xml-stylesheet processing instruction. <?xml-stylesheet type="text/css" href="stylesheet.css"?> there is also another more powerful way to display xml: the extensible stylesheet language transformations (xslt) which can be used to transform xml into other languages such as html. this makes xml incredibly versatile. <?xml-stylesheet type="text/xsl" href="transform.xsl"?> recommendations this article is obviously only a very brief introduction to what xml is, with a few small examples and references to get you started. for more details about xml, you should look around on the web for more in-depth articles. learning the hypertext markup language (html) will help you better understand xml. ...

panel - Archive of obsolete content
sistent with the dialogs displayed by firefox and other applications, but means you need to take care when applying your own styles. if the panel's content is packaged along with your add-on and specified using an html file in your data directory, you can style it by embedding css directly in the html file or by referencing a css file stored under data: <!doctype html> <html> <head> <link href="panel-style.css" type="text/css" rel="stylesheet"> </head> <body> my panel content </body> </html> from firefox 31 onwards, you can style panel content using the contentstyle or contentstylefile options. you can use these options even if the panel content is not packaged along with the add-on: var mypanel = require("sdk/panel").panel({ contenturl: "https://en.wikipedia.org/w/index.

url - Archive of obsolete content
var url = require("sdk/url").url("https://developer.mozilla.org/add-ons?example=true&visible=yes#top"); console.log(url.pathname); // /add-ons hash a '#' followed by the fragment identifier of the url, as a string. mirrors window.location.hash. for example: var url = require("sdk/url").url("https://developer.mozilla.org/add-ons?example=true&visible=yes#top"); console.log(url.hash); // #top href the whole url as a string. mirrors window.location.href. origin the canonical form of the origin for this url, as a string. mirrors window.location.origin. protocol the protocol of the url, including the final ':', as a string. compare with scheme. mirrors window.location.protocol. for example: var url = require("sdk/url").url("https://developer.mozilla.org/add-ons?example=true&visible=yes#...

windows - Archive of obsolete content
the other way: var { modelfor } = require("sdk/model/core"); var { viewfor } = require("sdk/view/core"); var browserwindows = require("sdk/windows").browserwindows; function converttochromeandback(browserwindow) { // get the chrome window for this browserwindow var chromewindow = viewfor(browserwindow); // now we can use the chrome window api console.log(chromewindow.document.location.href); // -> "chrome://browser/content/browser.xul" // convert back to the high-level window var highlevelwindow = modelfor(chromewindow); // now we can use the sdk's high-level window api console.log(highlevelwindow.title); } browserwindows.on("open", converttochromeandback); note that directly accessing low-level chrome objects like this means you're no longer protected by the compatibi...

remote/child - Archive of obsolete content
opened (for example, the user opened a new tab). the event listener gets a frame object as an argument. at this point you can't access frame's content yet, but you can add event listeners: const { frames } = require("sdk/remote/child"); frames.on("attach", function(frame) { console.log("new frame"); frame.addeventlistener("domcontentloaded", function(e) { console.log(e.target.location.href); }); }); detach triggered when a frame is removed (for example, the user closed a tab). frame a frame represents a content frame in this process and provides a way to communicate frame specific events to the main process. methods addeventlistener(event, listener, iscapturing) adds an event listener for dom events dispatched by this content frame. this can include load and unload events ...

ui/frame - Archive of obsolete content
toolbar. constructing frames the frame constructor takes one mandatory option, which is a url pointing to an html document supplied under your add-ons "data" directory. ...

ui/sidebar - Archive of obsolete content
r.html"). so you can rewrite the above code like this: var sidebar = require("sdk/ui/sidebar").sidebar({ id: 'my-sidebar', title: 'my sidebar', url: "./sidebar.html" }); you can include javascript and css from the html as you would with any web page, for example using <script> and <link> tags containing a path relative to the html file itself. <!doctype html> <html> <head> <link href="stuff.css" type="text/css" rel="stylesheet"> </head> <body> <script type="text/javascript" src="stuff.js"></script> </body> </html> you can update the sidebar's content by setting the sidebar's url property. this will change the sidebar's content across all windows. communicating with sidebar scripts you can't directly access your sidebar's content from your main add-on code, but y...

Bookmarks - Archive of obsolete content
2 and earlier creating a new bookmark var win = mybrowser.contentwindow; // get the bookmarks service const bmsvc = components.classes["@mozilla.org/browser/bookmarks-service;1"] .getservice(components.interfaces.nsibookmarksservice); // create the bookmark bmsvc.createbookmarkincontainer(win.document.title, // bookmark name win.location.href.tostring(), // uri of the bookmark null, // shortcut win.document.title, // description win.document.characterset, // charset null, // postdata bookmarksservice.getbookmarkstoolbarfolder(), // bookmark folder ...

Customizing the download progress bar - Archive of obsolete content
ed to overlay the downloads window so that you can add a new stylesheet. in your jar.mn file, add the following (replacing "myextension" with the name of your extension's chrome package): % overlay chrome://mozapps/content/downloads/downloads.xul chrome://myextension/content/downloads-overlay.xul in downloads-overlay.xul, reference the new stylesheet: <?xml version="1.0"?> <?xml-stylesheet href="chrome://myextension/skin/myextension.css" type="text/css"?> <overlay id="mydownloadoverlay" xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul"> </overlay> in jar.mn, make sure that there is an asterisk in front of the entry for myextension.css so that it will be preprocessed. this is required since it contains platform-specific directives, as we will see. the myextension.css f...

Embedding SVG - Archive of obsolete content
/1999/xlink"> <body> <p>hello</p> <svg:svg version="1.1" baseprofile="full" width="150" height="150"> <svg:rect x="10" y="10" width="100" height="100" fill="red"/> <svg:circle cx="50" cy="50" r="30" fill="blue"/> </svg:svg> <p>world</p> </body> </html> embedding into xul make sure you use the right namespace when embedding <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- xul and svg go here --> </window> example: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window xmlns="http://www.mozilla.org/k...

Label and description - Archive of obsolete content
an <html:br/> element regardless of the css style, but this creates a hard-break that does not change as parent elements resize. <description>i am your father's brother's nephew's cousin's former roommate.<html:br/> what's that make us?<html:br/> absolutely nothing!</description> using labels as anchors its possible to make a label look and act like an html <a> tag: <label class="text-link" href="http://whatever.com" value="click here to go to whatever"/> "text-link" is a built-in, predefined class. note: if running in a xulrunner application add the following preferences to your default preferences file: pref("network.protocol-handler.expose.http", false); pref("network.protocol-handler.warn-external.http", false); change or add additional protocols (https or ftp) as needed. ...

Scrollbar - Archive of obsolete content
ars.css xulscrollbars.css are used for windows xp, and nativescrollbars.css on osx. ...

Intercepting Page Loads - Archive of obsolete content
erdocument; } } } } the second if validation is necessary if you need to make a distinction for html documents being loaded in inner page frames. few modern sites use framesets, but it is common for ads to appear inside iframe elements. in most cases you'll need to compare the page url with some string or regular expression: if (some_regular_expression.test(doc.defaultview.location.href)) you can access and modify the dom of the loaded page, just like you normally would for xul and html documents. you can't, however, easily cancel the page load. you can close the tab, redirect the tab to about:blank or another page, or tell the browser to stop loading this page, but in general you don't want to do this because it will be visible to the user and it will look like a bug. there ...

The Essentials of an Extension - Archive of obsolete content
o language-dependent. skin styling xul is very similar to styling html. we'll look into some of the differences when we cover the xul box model, and other more advanced topics. there isn't much styling you can do to a minimal menu and a very simple alert message, so the hello world extension only includes an empty css file and the compulsory global skin file: <?xml-stylesheet type="text/css" href="chrome://global/skin/" ?> <?xml-stylesheet type="text/css" href="chrome://xulschoolhello/skin/browseroverlay.css" ?> the global skin css file holds the default styles for all xul elements and windows. forgetting to include this file in a xul window usually leads to interesting and often unwanted results. in our case we don't really need to include it, since we're overlaying the main brows...

Adding preferences to an extension - Archive of obsolete content
routines automatically when the browser window is loaded and unloaded. window.addeventlistener("load", function(e) { stockwatcher.startup(); }, false); window.addeventlistener("unload", function(e) { stockwatcher.shutdown(); }, false); design the preference dialog now that we've written all the code, we need to build the xul file for the options dialog. ...

Creating reusable content with CSS and XBL - Archive of obsolete content
to maintain and reuse. more details for more information about xbl bindings, see the xbl page in this wiki. action: an xbl demonstration make a new html document, doc6.html. copy and paste the content from here: <!doctype html public "-//w3c//dtd html 4.0//en"> <html> <head> <title>mozilla css getting started - xbl demonstration</title> <link rel="stylesheet" type="text/css" href="style6.css"> </head> <body> <h1>xbl demonstration</h1> <div id="square">click me</div> </body> </html> make a new css file, style6.css. this stylesheet contains the document style. copy and paste the content from here: /*** xbl demonstration ***/ #square { -moz-binding: url("square.xbl#square"); } make a new text file, square.xbl. this file contains the xbl binding. copy and paste th...

XML data - Archive of obsolete content
the display—for example, xbl can add content, and javascript can modify the dom. for more information about xml in mozilla, see the xml page in this wiki. action: an xml demonstration make a new xml file, doc9.xml. ...

XUL user interfaces - Archive of obsolete content
ings. like other xml-based languages, xul uses css stylesheets. more details for more information about xul user interfaces, see the xul page in this wiki. action: a xul demonstration make a new xul document as a plain text file, doc7.xul. ...

Getting the page URL in NPAPI plugin - Archive of obsolete content
r. npidentifier identifier = npn_getstringidentifier( "location" ); // declare a local variant value. npvariant variantvalue; // get the location property from the window object (which is another object). bool b1 = npn_getproperty( m_pnpinstance, swindowobj, identifier, &variantvalue ); // get a pointer to the "location" object. npobject *locationobj = variantvalue.value.objectvalue; // create a "href" identifier. identifier = npn_getstringidentifier( "href" ); // get the location property from the location object. bool b2 = npn_getproperty( m_pnpinstance, locationobj, identifier, &variantvalue ); this code is just a rough example. remember to release any references after using them. tradeoffs: uses npapi only works in most browsers does not work in mozillas older than firefox 1.0 via np...

Index - Archive of obsolete content
y! 888 hideseconds xul attributes, xul reference no summary! 889 hidespinbuttons xul attributes, xul reference no summary! 890 highlightaccesskey no summary! 891 highlightnonmatches xul attributes, xul reference no summary! 892 homepage xul attributes, xul reference no summary! 893 href xul attributes, xul reference no summary! 894 icon xul attributes, xul reference no summary! 895 iconsize toolbar, xul, xul attribute no summary! 896 id xul attributes, xul reference no summary! 897 iframe.transparent no summary! 898 ignoreblurwhilesearching xul attributes, xul reference ...

Making it into a dynamic overlay and packaging it up for distribution - Archive of obsolete content
subdirectory: tinderstatusoverlay.xul tinderstatus.js tinderstatus.css tb-busted.png tb-nostatus.png tb-success.png tb-testfailed.png these are the files we're going to put into the xpi. ...

Getting Started - Archive of obsolete content
est /install.rdf /icon.png /preview.png make sure not to just zip up the my_theme parent directory since that will cause the drag and drop install in the next section to fail without error messages. once you have put the files in the zip folder, rename it to myskin.jar triggering the install from the web to install the theme's jar file directly from the web, you need to run some javascript. <a href='javascript:installtrigger.installchrome(installtrigger.skin, "myskin.jar", "my skin theme")'>install my skin</a> if you have jar files on your hard drive and would like to install them, then download/use this form. you can also just open the themes window in mozilla and drag and drop your .jar file onto it. now to change your folder(s) back into a .jar well it's easy! what you do is put your f...

Getting Started - Archive of obsolete content
st the files inside of \myskin). once the zip is created, rename it to myskin.jar contents of myskin.jar contents.rdf preview.png \navigator\... \messenger\... \global\... \editor\... \communicator\... triggering the install from the web to install your jar file directly from the web, you need to run some javascript. <a href="javascript:installtrigger.installchrome(installtrigger.skin, 'myskin.jar', 'my skin theme')">install my skin</a> if you have jar files on your hard drive and would like to install them, then download/use this form. ...

Creating a Skin for Firefox/Getting Started - Archive of obsolete content
nstall.rdf /icon.png /preview.png make sure not to just zip up the my_theme parent directory since that will cause the drag and drop install in the next section to fail without error messages. once you have put the files in the zip folder, rename it to my_theme.jar triggering the install from the web to install the theme's jar file directly from the web, you need to run some javascript. <a href='javascript:installtrigger.installchrome(installtrigger.skin, "myskin.jar", "my skin theme")'>install my skin</a> if you have jar files on your hard drive and would like to install them, then download/use this form. you can also just open the themes window in mozilla and drag and drop your .jar file onto it. now to change your folder(s) back into a .jar well it's easy! what you do is put you...

First run - Archive of obsolete content
gs for your jetpack. the value of firstrunpage must be either a string or e4x xml. if the value is a both a string and a valid url, the page at that url becomes your first-run page. otherwise, the value is assumed to be html, and it becomes the body of your first-run page. this example sets the first-run page to some html: var manifest = { firstrunpage: '<p>thanks for installing! visit my <a href="http://example.com/myjetpack">homepage</a>.</p>' }; this does the same but uses e4x xml: var manifest = { firstrunpage: <> <p> thanks for installing! visit my <a href="http://example.com/myjetpack">homepage</a>. </p> </> }; in this example, the page at http://example.com/myjetpack becomes the first-run page: var manifest = { firstrunpage: "http://example.com/myjetpack" }; ...

First Run - Archive of obsolete content
ngs for your jetpack. the value of firstrunpage must be either a string or e4x xml. if the value is a both a string and a valid url, the page at that url becomes your first-run page. otherwise, the value is assumed to be html, and it becomes the body of your first-run page. this example sets the first-run page to some html: var manifest = { firstrunpage: '<p>thanks for installing! visit my <a href="http://example.com/myjetpack">homepage</a>.</p>' }; this does the same but uses e4x xml: var manifest = { firstrunpage: <> <p> thanks for installing! visit my <a href=//example.com/myjetpack">homepage</a>. </p> </> }; in this example, the page at [http://example.com/myjetpack] becomes the first-run page: var manifest = { firstrunpage: "http://example.com/myjetpack" };...

Jetpack Snippets - Archive of obsolete content
evelopment. read the experiment report for what we learned from it and the blog post announcing the first sdk release for what we're up to next! bits of code that may come in handy. ...

slideBar - Archive of obsolete content
indow. when a slidebar feature is selected its contents will be revealed from behind the current webpage. it currently under development and lives in the future. jetpack.future.import("slidebar"); methods append(iconurihtmlhtml/xmlurluriwidthintpersistboolautoreloadboolonclickfunctiononselectfunctiononreadyfunction)this is a list of options to specify modifications to your slidebar instance. ...

jspage - Archive of obsolete content
),parser:d[e].parser}); });a.$family={name:"fx:css:value"};return a;},serve:function(c,b){if($type(c)!="fx:css:value"){c=this.parse(c);}var a=[];c.each(function(d){a=a.concat(d.parser.serve(d.value,b)); });return a;},render:function(a,d,c,b){a.setstyle(d,this.serve(c,b));},search:function(a){if(fx.css.cache[a]){return fx.css.cache[a];}var b={};array.each(document.stylesheets,function(e,d){var c=e.href; if(c&&c.contains("://")&&!c.contains(document.domain)){return;}var f=e.rules||e.cssrules;array.each(f,function(j,g){if(!j.style){return;}var h=(j.selectortext)?j.selectortext.replace(/^\w+/,function(i){return i.tolowercase(); }):null;if(!h||!h.test("^"+a+"$")){return;}element.styles.each(function(k,i){if(!j.style[i]||element.shortstyles[i]){return;}k=string(j.style[i]);b[i]=(k.test(/^rgb/))?k.rg...

Bundles - Archive of obsolete content
the "-webapp [webapp-id]" command line, which looks for the previously installed (unpacked) web application in the prism webapps/{webapp-id} folder. the web application is then launched without the unpacking overhead. a bundle can also be installed from firefox via the prism extension for firefox. the extension looks for <link> tags in the webpage that point to a webapp bundle: <link rel="webapp" href="prismdemo.webapp" title="prism demo"> when the extension finds such a <link> tag, it will notify the user. the user can then decide to install the webapp. how-to here is a simple way to build a basic web application bundle: create file called webapp.ini that contains something like: [parameters] id=unique-app-id@unique-author-id.whatever name=webapp name uri=http://[the-url-what-you-want-to-c...

Example Sticky Notes - Archive of obsolete content
//www.w3.org/tr/html401/strict.dtd"> <html> <head> <title>xbl demo : sticky notes</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <style type="text/css"> body { background-color: #ffffff; color: #000000; font: 1em verdana, sans-serif; } h1 { font-size: 1.5em; } /* binding: */ .sticker { -moz-binding: url(notes.xml#default); } </style> </head> <body> <h1><a href="http://developer.mozilla.org/en/docs/xbl:xbl_1.0_reference">xbl</a> demo : sticky notes</h1> <div class="sticker"><p>acme,&nbsp;inc. fax - respond today.</p></div> <div class="sticker"><p>don't forget the eggs!</p></div> <div class="sticker"><p>the new project - who's on charge?</p></div> <div class="sticker"><p>learn more about xbl.</p></div> <p style="clear: left"><a href="http://...

Creating XPI Installer Modules - Archive of obsolete content
r[zip] to open it. all of the resources described in this article are in the xpi archive and can be adapted for use in your own development. developing the resources needless to say, one of the first things you will have to create is the actual software you wish to make redistributable. ...

InstallTrigger.installChrome - Archive of obsolete content
installtrigger.installchrome trigger scripts are typically invoked by javascript event handlers on hyperlinks. ...

Learn XPI Installer Scripting by Example - Archive of obsolete content
original document information author(s): ian oeschger last updated date: 01/26/2006 copyright information: copyright (c) ian oeschger ...

A XUL Bestiary - Archive of obsolete content
ings are just a dtd, and the content is just the xul. the chrome url this concept of a chrome as an integrated, dynamic thing in some way divorced from the "appcore" is realized in the use of the chrome url to point to chunks of xul and their related files. the chrome url, which appears in place of the http url in pointers like the following global skin processing instruction: <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> specifies a chrome to be loaded by the gecko rendering engine. in the example above, the chrome is simply a skin file to be loaded into the xul file, but the chrome can also be used to load whole chromes, as when a <menuitem> in one window brings up a new chrome: <menuitem value="mozilla help" oncommand="window.opendialog('chrome://help/content/hel...

onchange - Archive of obsolete content
ressed radio/check box when the state is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e. ...

Attribute (XUL) - Archive of obsolete content
editortype element empty emptytext deprecated since gecko 2 enablecolumndrag enablehistory equalsize eventnode events expr firstdayofweek firstpage first-tab fixed flags flex focused forcecomplete grippyhidden grippytooltiptext group handlectrltab height helpuri hidden hidechrome hidecolumnpicker hideheader hideseconds hidespinbuttons highlightnonmatches homepage href icon id ignoreblurwhilesearching ignorecase ignoreincolumnpicker ignorekeys image inactivetitlebarcolor increment index inputtooltiptext insertafter insertbefore instantapply inverted iscontainer isempty key keycode keytext label lastpage lastselected last-tab left linkedpanel max maxheight maxlength maxpos maxrows maxwidth member menu menuactive min minheigh...

How to implement a custom XUL query processor component - Archive of obsolete content
d follow some conventions for when registering the component. in this example, we will create a simple javascript xpcom component. the component will hold a small array of javascript objects as its datasource. in practice, you would use your own custom source of data. ...

Index - Archive of obsolete content
y! 141 hideseconds xul attributes, xul reference no summary! 142 hidespinbuttons xul attributes, xul reference no summary! 143 highlightaccesskey no summary! 144 highlightnonmatches xul attributes, xul reference no summary! 145 homepage xul attributes, xul reference no summary! 146 href xul attributes, xul reference no summary! 147 icon xul attributes, xul reference no summary! 148 iconsize toolbar, xul, xul attribute no summary! 149 id xul attributes, xul reference no summary! 150 iframe.transparent no summary! 151 ignoreblurwhilesearching xul attributes, xul reference ...

Panels - Archive of obsolete content
ing temporary popup displays for selecting or entering data. the panel element the panel element is used to create panels. the panel will display whatever elements are placed as children of the panel element. for example, the following panel displays a textbox for entering a name. note that the panel is not placed in a separate file and is instead placed inside another window. <?xml-stylesheet href="chrome://global/skin" type="text/css"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <button label="details" type="panel"> <panel id="search-panel"> <label control="name" value="name:"/> <textbox id="name"/> </panel> </button> </window> many panels will be associated with a button, as in this example. when the button is pressed, the panel is open...

Sorting and filtering a custom tree view - Archive of obsolete content
nd filtering a custom tree view, that is, a tree whose values are loaded via javascript. this will not work for other types of trees, for example rdf-backed or ones created with dom methods. for the sake of simplicity, strings are not localized and the data loaded is hard coded. because of bug 340478, this code will only work from privileged script. ...

text-link - Archive of obsolete content
labels will appear like a link (blue and underlined). ...

textbox (Toolkit autocomplete) - Archive of obsolete content
ressed radio/check box when the state is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e. ...

Textbox (XPFE autocomplete) - Archive of obsolete content
ressed radio/check box when the state is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e. ...

Creating toolbar buttons (Customize Toolbar Window) - Archive of obsolete content
ension/skin/btn_large.png"); } toolbar[iconsize="small"] #myextension-button { list-style-image: url("chrome://myextension/skin/btn_small.png"); } applying the stylesheet remember to attach the stylesheet you created to both the overlay file and the customize toolbar window. to attach it to the overlay, put this processing instruction (pi) at the top of the overlay file: <?xml-stylesheet href="chrome://myextension/skin/toolbar-button.css" type="text/css"?> note: the css file with your toolbar styles needs to be included in the overlay file, as you would expect, but also in the chrome.manifest file. this is very important because the toolbar customization dialog won't work correctly without this. to include the style on your chrome.manifest file: style chrome://global/content/custo...

SeaMonkey - making custom toolbar (SM ver. 1.x) - Archive of obsolete content
bars where you do not want your button. save the file. explanation: this file contains details of your extension, and specifies how it modifies seamonkey. 6. create a plain text file named button.xul. copy the following content, making sure that you scroll to get all of it. ...

Custom toolbar button - Archive of obsolete content
ed chrome. perform the following steps in that directory, creating five files there. explanation: the chrome directory contains files that specify what the extension does. 6. create a plain text file named button.xul. copy the following content, making sure that you scroll to get all of it. ...

Adding Buttons - Archive of obsolete content
r windows. due to this, the buttons will appear to stretch across the window. you can add align="start" to the window tag to prevent the stretching. the findfile.xul example let's add this code to the file findfile.xul that we created in the previous section. the code needs to be inserted in-between the window tags. the code to add is shown in red below: <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findfile-window" title="find files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <button id="find-button" label="find"/> <button id="cancel-button" label="cancel"/> </window> you'll notice that the cancel button was added also. the window has been given a horizonta...

Adding HTML Elements - Archive of obsolete content
ost html element. xmlns:html="http://www.w3.org/1999/xhtml" this is a declaration of html much like the one we used to declare xul. this must be entered exactly as shown or it won't work correctly. note that mozilla does not actually download this url, but it does recognize it as being html. ...

Box Model Details - Archive of obsolete content
te which is used to center the buttons horizontally. the align attribute aligns the buttons vertically. the result is that the buttons will be centered in the box in both directions. this example will work with a vertical box as well, although the second button will be underneath the first one, instead of beside it. ...

Creating a Wizard - Archive of obsolete content
miliar to the user of a particular os. a typical layout will include a title across the top, a set of navigation buttons across the bottom and the page contents in between. the title across the top is created using the title attribute, much like one would use for regular windows. the navigation buttons are created automatically. ...

Custom Tree Views - Archive of obsolete content
we can assign a value to this property at any time to set or change the view. function setview(){ document.getelementbyid('my-tree').view = treeview; } the following presents the example together. an inline script has been used here to simplify the example. normally, you would put the script in an external script file. ...

Element Positioning - Archive of obsolete content
opposite direction. as with the pack attribute, the align attribute applies to the box containing the elements to be aligned, not to the elements themselves. for example, the first box below will have its children stretch, because that is the default. the second box has an align attribute, so its children will be placed centered. ...

More Wizards - Archive of obsolete content
the following example, the user must enter a secret code into a textbox on the first page of the wizard. the function checkcode() is called whenever the first page is shown as indicated by the onpageshow attribute. it is also called whenever a key is pressed in the textbox, to determine whether the next button should be enabled again. ...

Tree View Details - Archive of obsolete content
eed to tell the tree to repaint the twisty in the new state. the easiest way to do this is to invalidate the row. complete example there are several other view functions we can implement but they don't need to do anything in this example, so we can create functions that do nothing for those. ...

XUL Questions and Answers - Archive of obsolete content
osted. a workaround is to open the content in a new window using "window.open" and send titlebar=”no” as one of the flags in the 3rd argument. is it possible to have checkbox support for multi column lists? the current issue is a person exploring if it is possible to have checkbox support for multi column lists. ...

XUL Template Primer - Bindings - Archive of obsolete content
in a rule's <conditions>. this is different from the variables specified in the rule's conditions, where a value must be found for each variable for the rule to match. if a <binding> can't be matched, the rule will still fire. example to illustrate how <bindings> work, we'll examine this xul document, which builds a simple content model an rdf/xml file. ...

XUL Event Propagation - Archive of obsolete content
y the event target itself. the combination of basic these two basic event flow mechanisms, event bubbling and event capturing, mean that events raised in the interface can be caught anywhere above the element that raised the event. this flexibility in the xul event model is the focus of this article. ...

colorpicker - Archive of obsolete content
ressed radio/check box when the state is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e. ...

dialog - Archive of obsolete content
onalign, buttondir, buttondisabledaccept, buttonlabelaccept, buttonlabelcancel, buttonlabeldisclosure, buttonlabelextra1, buttonlabelextra2, buttonlabelhelp, buttonorient, buttonpack, buttons, defaultbutton, title properties buttons, defaultbutton methods acceptdialog, canceldialog, centerwindowonscreen, getbutton, movetoalertposition examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> <dialog id="donothing" title="dialog example" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" buttons="accept,cancel" buttonlabelcancel="cancel" buttonlabelaccept="save"> <dialogheader title="options" description="my preferences"/> <groupbox> <caption label="colour"/> <radiogroup> <radio label="re...

dialogheader - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] a heading row for a dialog box. this element should be placed inside a dialog element. the header may have a title and a description. ...

preference - Archive of obsolete content
ressed radio/check box when the state is changed select list when the selected item is changed what is accessible the script context at this point can only access the following things: global values/functions i.e. ...

prefwindow - Archive of obsolete content
defaultbutton, lastselected, onbeforeaccept, ondialogaccept, ondialogcancel, ondialogdisclosure, ondialoghelp, onload, onunload, title, type properties buttons, currentpane, defaultbutton, lastselected, preferencepanes, type methods acceptdialog, addpane, canceldialog, centerwindowonscreen, getbutton, opensubdialog, openwindow, showpane examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <prefwindow xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <prefpane id="saveoptions" label="backups"> <preferences> <preference id="pref-backup" name="myapp.mybackups" type="bool"/> <preference id="pref-backupduration" name="myapp.mybackups.duration" type="int"/> </preferences> <checkbox label="automatica...

toolbox - Archive of obsolete content
by the toolbox's externaltoolbars property. more information is available in the xul tutorial. if you'd like to detect when toolbars in a toolbox are changed, see toolbar customization events. ...

wizard - Archive of obsolete content
ared among all pages. more information is available in the xul tutorial. ...

CommandLine - Archive of obsolete content
</window> original document information au...

Dialogs in XULRunner - Archive of obsolete content
alogs so users get a consistent experience across applications. custom dialogs building dialogs in xul is very similar to creating windows. each dialog is described in its own xul file. xul provides a dialog element to act as the container for the dialog. dialog xul files can have dtd, css, and javascript, just like windows. ...

Getting started with XULRunner - Archive of obsolete content
bed in further detail in xulrunner:specifying startup chrome window. the debugging preferences are discussed in debugging a xulrunner application step 7: create some xul finally, we need to create a simple xul window, which is described in the file main.xul. nothing fancy here, just the minimum we need to make a window. no menus or anything. ...

Why RSS Content Module is Popular - Including HTML Contents - Archive of obsolete content
0</lastbuilddate> <link>http://www.example.com</link> <item> <title>a link in here</title> <guid>d77d2e80-0487-4e8c-a35d-a93f12a0ff7d:2005/05/15/114</guid> <pubdate>sun, 15 may 2005 13:02:08 -0500</pubdate> <link>http://www.example.com/blog/2005/05/15/114</link> <content:encoded><![cdata[this is a <a href="http://example.com/">link</a>.]]></content:encoded> </item> <item> <title>some italics html</title> <guid>d77d2e80-0487-4e8c-a35d-a93f12a0ff7d:2005/05/15/113</guid> <pubdate>sun, 15 may 2005 10:55:12 -0500</pubdate> <link>d77d2e80-0487-4e8c-a35d-a93f12a0ff7d:2005/05/15/113</link> <content:encoded><!

Theme changes in Firefox 2 - Archive of obsolete content
safebrowser/browser-protection.css this file, new to firefox 2, skins browser protection features. the following styles must be implemented to support the window that appears when the user browses to a suspected phishing site: #safebrowsing-dim-area-canvas #safebrowsing-page-canvas #safebrowsing-palm-close #safebrowsing-palm-close-container #safebrowsing-pal...

Correctly Using Titles With External Stylesheets - Archive of obsolete content
heet supplied for the rel attribute. a document may refer to one or more persistent stylesheets, all of which are used in the presentation of the document. a preferred stylesheet, on the other hand, is one that has a value of stylesheet supplied for the rel attribute, and any value at all for the title attribute. here are two examples: <link type="text/css" rel="stylesheet" title="basic styles" href="basic.css" /> <link type="text/css" rel="stylesheet" title="fish and boats" href="ocean.css" /> according to the html 4.01 specification, only one of the preferred stylesheets can be used at a time. therefore, given the above example, only one of the two preferred stylesheets will be applied to the document. the specification does not supply a procedure to decide which one should be used, so us...

Issues Arising From Arbitrary-Element hover - Archive of obsolete content
dings, and any other element in a document will cause text to become red. a common variant 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. however, rules of this type are usually seen in conjunction with markup like this: <td class="nav"> <a href="one.html" class="nav">one</a> | <a href="two.html" class="nav">two</a> | <a href="thr.html" class="nav">three</a> | <a href="fou.html" class="nav">four</a> </td> because the enclosing table cell has a class of nav, the vertical-bar characters will turn red when the user moves the mouse pointer anywhere within the table cell. the links will also turn red when they are hovered. gecko behavior i...

Parsing microformats in JavaScript - Archive of obsolete content
= microformats.parser.telgetter(propnode, parentnode); parameters propnode the dom node to check. parentnode the property's parent node. if it is a subproperty, this is the parent property node. otherwise this is the microformat node. return value a string containing the telephone number. urigetter() specifically retrieves a uri from a microformat node. this is done by looking at an href, img, object, or area to get the fully-qualified uri. uri = microformats.parser.urigetter(propnode, parentnode); parameters propnode the dom node to check. parentnode the property's parent node. if it is a subproperty, this is the parent property node. otherwise this is the microformat node. return value a string containing the fully-qualified uri. see also usin...

Windows Media in Netscape - Archive of obsolete content
in order to use the windows media player control in both netscape 7.1 and ie, you need to avoid browser-specific detection mechanisms like this. summary: cross browser use of windows media player in ie and netscape 7.1 don't use proprietary dom sniffs such as looking for document.all-- this will r...

Gecko FAQ - Gecko Redirect 1
full support except for: elements: bdo, basefont attributes: shape attribute on the a element, abbr, axis, headers, scope-row, scope-col, scope-rowgroup, scope-colgroup, charoff, datasrc, datafld, dataformat, datapagesize, summary, event, dir, align on table columns, label attribute of option, alternate text of area elements, longdesc various metadata attributes: cite, datetime, lang, hreflang bidirectional text layout, which is only used in hebrew and arabic (ibm has begun work to add bidi support in a future release) style sheets css 1 - full support, except for: the application of styles to html column elements the ability to turn off author styles the names of certain mozilla extension pseudo-classes lack the moz- prefix css 2 - pa...

XLink - MDN Web Docs Glossary: Definitions of Web-related terms
o specify xlink:type="simple" for simple links. xlink is used in svg, mathml, and other important standards. specification xlink 1.0 xlink 1.1 (currently a working draft) see also xml in mozilla code snippets:getattributens - a wrapper for dealing with some browsers not supporting this dom method code snippets:xml:base function - a rough attempt to find a full xlink-based on an xlink:href attribute (or <xi:include href=>) and its or an ancestor's xml:base. ...

Prerender - MDN Web Docs Glossary: Definitions of Web-related terms
with prerendering, the content is prefetched and then rendered in the background by the browser as if the content had been rendered into an invisible separate tab. when the user navigates to the prerendered content, the current content is replaced by the prerendered content instantly. <link rel="prerender" href="https://example.com/content/to/prerender"> see also prefetch ...

WAI-ARIA basics - Learn web development
>, etc.) before these were available, developers would simply use <div>s with ids or classes, e.g. <div class="nav">, but these were problematic, as there was no easy way to easily find a specific page feature such as the main navigation programmatically. the initial solution was to add one or more hidden links at the top of the page to link to the navigation (or whatever else), for example: <a href="#hidden" class="hidden">skip to navigation</a> but this is still not very precise, and can only be used when the screenreader is reading from the top of the page. as another example, apps started to feature complex controls like date pickers for choosing dates, sliders for choosing values, etc. html5 provides special input types to render such controls: <input type="date"> <input type="range"...

Cascade and inheritance - Learn web development
making sure you understand why they have the specificity that we have given them. we've not covered selectors in detail yet, but you can find details of each selector on the mdn selectors reference. selector thousands hundreds tens ones total specificity h1 0 0 0 1 0001 h1 + p::first-letter 0 0 0 3 0003 li > a[href*="en-us"] > .inline-warning 0 0 2 2 0022 #identifier 0 1 0 0 0100 no selector, with a rule inside an element's style attribute 1 0 0 0 1000 before we move on, let's look at an example in action. so what's going on here? first of all, we are only interested in the first seven rules of this example, and as you'll notice, we h...

Attribute selectors - Learn web development
r literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to learn what attribute selectors are and how to use them. presence and value selectors these selectors enable the selection of an element based on the presence of an attribute alone (for example href), or on various different matches against the value of the attribute. selector example description [attr] a[title] matches elements with an attr attribute (whose name is the value in square brackets). [attr=value] a[href="https://example.com"] matches elements with an attr attribute whose value is exactly value — the string inside the quotes. ...

Test your skills: Selectors - Learn web development
e below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor. selectors five in this final task add css using attribute selectors to do the following: target the <a> element with a title attribute and make the border pink (border-color: pink). target the <a> element with an href attribute that contains the word contact somewhere in its value and make the border orange (border-color: orange). target the <a> element with an href value starting with https and give it a green border (border-color: green). try updating the live code below to recreate the finished example: for assessment or further work purposes, download the starting point for this task to work in yo...

CSS selectors - Learn web development
ctors that target an html element such as an <h1>. h1 { } it also includes selectors which target a class: .box { } or, an id: #unique { } attribute selectors this group of selectors gives you different ways to select elements based on the presence of a certain attribute on an element: a[title] { } or even make a selection based on the presence of an attribute with a particular value: a[href="https://example.com"] { } pseudo-classes and pseudo-elements this group of selectors includes pseudo-classes, which style certain states of an element. the :hover pseudo-class for example selects an element only when it is being hovered over by the mouse pointer: a:hover { } it also includes pseudo-elements, which select a certain part of an element rather than the element itself. for exampl...

Legacy layout methods - Learn web development
ramework. to get started visit the skeleton website, and choose "download" to download the zip file. unzip this and copy the skeleton.css and normalize.css files into a new directory. make a copy of our html-skeleton.html file and save it in the same directory as the skeleton and normalize css. include the skeleton and normalize css in the html page, by adding the following to its head: <link href="normalize.css" rel="stylesheet"> <link href="skeleton.css" rel="stylesheet"> skeleton includes more than a grid system — it also contains css for typography and other page elements that you can use as a starting point. we’ll leave these at the defaults for now, however — it’s the grid we are really interested in here. note: normalize is a really useful little css library written by ni...

Beginner's guide to media queries - Learn web development
; } article { margin-bottom: 1em; } we've made no layout changes, however the source of the document is ordered in a way that makes the content readable. this is an important first step and one which ensures that if the content were to be read out by a screen reader, it would be understandable. <body> <div class="wrapper"> <header> <nav> <ul> <li><a href="">about</a></li> <li><a href="">contact</a></li> <li><a href="">meet the team</a></li> <li><a href="">blog</a></li> </ul> </nav> </header> <main> <article> <div class="content"> <h1>veggies!</h1> <p> ... </p> </div> <aside class="related"> ...

Practical positioning examples - Learn web development
g however we want to keep things as simple as possible. there is some javascript later on, but only a tiny bit. to start with, we'd like you to make a local copy of the starting html file — info-box-start.html. save this somewhere sensible on your local computer, and open it up in your text editor. let's look at the html contained within the body: <section class="info-box"> <ul> <li><a href="#" class="active">tab 1</a></li> <li><a href="#">tab 2</a></li> <li><a href="#">tab 3</a></li> </ul> <div class="panels"> <article class="active-panel"> <h2>the first tab</h2> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. vestibulum et orci scelerisque, vulputate tellus quis, lobor...

Using CSS generated content - Learn web development
e chess symbol for a black queen ♛. for details, see referring to characters not represented in a character encoding and characters and case in the css specification. ...

How to structure a web form - Learn web development
ow, read the descriptions carefully as you follow the below instructions, and start to form an appreciation of which wrapper elements we are using to structure the form, and why. to start with, make a local copy of our blank template file and the css for our payment form in a new directory on your computer. ...

HTML Cheatsheet - Learn web development
d are "nested" inside larger ones. by default, "inline elements" appear next to one another in a webpage. they take up only as much width as they need in a page and fit together horizontally like words in a sentence or books shelved side-by-side in a row.all inline elements can be implemented within the <body></body> tags. ...

Tips for authoring fast-loading HTML pages - Learn web development
ed in the html. all eagerly loaded images are rendered before the document's load event is sent. switching to lazy loading of images tells the browser to hold off on loading images until they're about to be needed to draw the visual viewport. to mark an image for lazy loading, specify its loading attribute with a value of lazy. with this set, the image will only be loaded when it's needed. <img href="./images/footerlogo.jpg" loading="lazy"> note that lazily-loaded images may not be available when the load event is fired. you can determine if a given image is loaded by checking to see if the value of its boolean complete property is true. choose your user-agent requirements wisely to achieve the greatest improvements in page design, make sure that reasonable user-agent requirements are spe...

Define terms with HTML - Learn web development
d its container. if you want a more formal relationship, or your definition consists of only one sentence rather than the whole paragraph, you can use the aria-describedby attribute to associate a term more formally with its definition: <p> <span id="ff"> <dfn aria-describedby="ff">firefox</dfn> is the web browser created by the mozilla foundation. </span> you can download it at <a href="http://www.mozilla.org">mozilla.org</a> </p> assistive technology can often use this attribute to find a text alternative to a given term. you can use aria-describedby on any tag enclosing a keyword to be defined (not just the <dfn> element). aria-describedby references the id of the element containing the description. how to build a description list description lists are just what they claim...

Images in HTML - Learn web development
rder to put a simple image on a webpage, we use the <img> element. this is an empty element (meaning that it has no text content or closing tag) that requires a minimum of one attribute to be useful — src (sometimes spoken as its full title, source). the src attribute contains a path pointing to the image you want to embed in the page, which can be a relative or absolute url, in the same way as href attribute values in <a> elements. note: you should read a quick primer on urls and paths to refresh your memory on relative and absolute urls before continuing. so for example, if your image is called dinosaur.jpg, and it sits in the same directory as your html page, you could embed the image like so: <img src="dinosaur.jpg"> if the image was in an images subdirectory, which was inside the ...

Index - Learn web development
d interesting. to find way more html elements, you can take a look at our html element reference (the inline text semantics section would be a great place to start.) in the next article we will look at the html elements you'd use to structure the different parts of an html document. 232 creating hyperlinks beginner, codingscripting, guide, html, http, learn, links, title, absolute, href, hyperlinks, relative, urls that's it for links, for now anyway! you'll return to links later on in the course when you start to look at styling them. next up for html, we'll return to text semantics and look at some more advanced/unusual features that you'll find useful — advanced text formatting is your next stop. 233 debugging html beginner, codingscripting, debugging, e...

Introduction to events - Learn web development
ab (and the source code in another tab.) it is also available live below: this is a pretty simple example that shows and hides a <div> with a <video> element inside it: <button>display video</button> <div class="hidden"> <video> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> <p>your browser doesn't support html5 video. ...

Video and Audio APIs - Learn web development
l video and audio playback. html5 video and audio the <video> and <audio> elements allow us to embed video and audio into web pages. as we showed in video and audio content, a typical implementation looks like this: <video controls> <source src="rabbit320.mp4" type="video/mp4"> <source src="rabbit320.webm" type="video/webm"> <p>your browser doesn't support html5 video. here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> </video> this creates a video player inside the browser like so: you can review what all the html features do in the article linked above; for our purposes here, the most interesting attribute is controls, which enables the default set of playback controls. if you don't specify this, you get no playback controls: this is not as immediately...

CSS performance optimization - Learn web development
, such the print stylesheets. by splitting the css into multiple files based on media queries, you can prevent render blocking during download of unused css. to create a non-blocking css link, move the not-immediately used styles, such as print styles, into separate file, add a <link> to the html mark up, and add a media query, in this case stating it's a print stylesheet. <link rel="stylesheet" href="styles.css"> <!-- blocking --> <link rel="stylesheet" href="print.css" media="print"> <!-- not blocking --> <link rel="stylesheet" href="mobile.css" media="screen and (max-width: 480px)"> <!-- not blocking on large screens --> by default the browser assumes that each specified style sheet is render blocking. tell the browser when the style sheet should be applied by adding a media attribute wit...

Web performance resources - Learn web development
with rel="stylesheet" is synchronous and blocks rendering. optimize the rendering of your page by removing blocking css. to load css asynchronously one can simpy set the media type to print and then change to all once loaded. the following snippet includes an onload attribute, requiring javascript, so it is important to include a noscript tag with a traditional fallback. <link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'"> <noscript><link rel="stylesheet" href="/path/to/my.css"></noscript> the downside with this approach is the flash of unstyled text (fout.) the simplist way to address this is by inlining css that is required for any content that is rendered above the fold, or what you see in the browser viewport before scrolling. these styles will improv...

Deployment and next steps - Learn web development
app will be published at a subdirectory (like https://your-user.gitlab.io/mdn-svelte-todo), we'll have to make the references to the javascript and css files in our public/index.html file relative. to do this, we just remove the leading slashes (/) from the /global.css, /build/bundle.css, and /build/bundle.js urls, like this: <title>svelte to-do list</title> <link rel='icon' type='image/png' href='favicon.png'> <link rel='stylesheet' href='global.css'> <link rel='stylesheet' href='build/bundle.css'> <script defer src='build/bundle.js'></script> do this now. now we just have to commit and push our changes to gitlab. do this by running the following commands: > git add public/index.html > git add .gitlab-ci.yml > git commit -m "added .gitlab-ci.yml file and fixed index.html abs...

Mozilla accessibility architecture
he accessibility cache need to be invalidated. however, we are careful not to do this work for mutation events fired because the document is still loading. currently (as of may 2003), we do not yet use domattrmodied to listen to attribute changes on a node. we need to listen to some attribute changes because they might signal the need to invalidate parts of our cache; for example, if the name or href attribute on an anchor element changes, or the usemap attribute of an img changes. these cases are not very likely, but we should try to think of real-world scenarios where it might happen. if we do this, the code would go into nsdocaccessible::attrmodified(). unique 32-bit identifiers in msaa in msaa, we must hand out a unique 32 bit child number for each target accessible with the event. to get...

The Firefox codebase: CSS Guidelines
related, then it is likely content css. if it is esthetics related, then it is likely theme css. when importing your stylesheets, it's best to import the content css before the theme css, that way the theme values get to override the content values (which is probably what you want), and you're going to want them both after the global values, so your imports will look like this: <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> <?xml-stylesheet href="chrome://browser/content/path/module.css" type="text/css"?> <?xml-stylesheet href="chrome://browser/skin/path/module.css" type="text/css"?> [1] -moz-appearance is tricky. generally, when specifying -moz-appearance: foo; you're giving hints as to how something should act, however -moz-appearance: none; is probably saying ...

SVG Guidelines
a transparent one) or stroke. unused attributes on root <svg> element the root <svg> element can also host many useless attributes. ...

Security best practices for Firefox front-end engineers
ity assurance team maintains an eslint rule that disallows unsafe uses of innerhtml and similar dom apis. the linter makes an exception for code that uses string literals that are hard coded in the source code, assuming benevolent developers. developers are able to avoid tripping the rule by using escaping functions in combination with template strings, for example: bar.innerhtml = escapehtml`<a href='${url}'>about</a>`; in system-privileged chrome code, any kind of remaining scripts will still be removed by our sanitizer. appendix list of disallowed dom apis innerhtml outerhtml insertadjacenthtml() createcontextualfragment() document.write() document.writeln() please take a look at the repository for an updated list ...

mozbrowsercontextmenu
ystem object an object defining a standard context menu that will be displayed. its properties are as follows: documenturi a domstring representing the url of the document the menu is associated with. uri a domstring. in the case of an image or video context menu, this is the src of the image or video clicked on to get the context menu. in the case of an link context menu, it is the link's href. text a domstring representing the text of the link clicked on, in the case of a link context menu. hasvideo a boolean. in the case of a video context menu, this returns true if the video has metadata and is bigger than 0 x 0, or false if not. action a domstring representing the action of a form, in the case of a form context menu. method a domstring representing the method of a form, in ...

mozbrowseropensearch
bubbles read only boolean whether the event normally bubbles or not. cancelable read only boolean whether the event is cancellable or not. details read only object a custom object. details the details property returns an anonymous javascript object with the following properties: title a domstring representing the title of the search engine. href a domstring representing url of the search engine. example var browser = document.queryselector("iframe"); browser.addeventlistener("mozbrowseropensearch", function( event ) { console.log("new search engine encountered: " + event.details.title); }); related events mozbrowserasyncscroll mozbrowserclose mozbrowsercontextmenu mozbrowsererror mozbrowsericonchange mozbrowserloadend mo...

How Mozilla determines MIME Types
introduction all data handling in mozilla is based on the mime type of the content. this means that every time an uri is loaded, mozilla must find out its mime type. the several ways how this happens are described in this document. content-type "hints" mozilla has a concept of "content-type hints". this means that, for example, if mozilla encounters a <link type="text/css" rel="stylesheet" href="..."> element, a type of text/css will be assumed. this is, however, overridden by the actual mime type the server sends (if any). (for this specific example, the server override only happens in standards-compliant mode. see mozilla's quirks mode or web author faq). similar handling happens for <a href="..." type="foo/bar">, starting in mozilla 1.6alpha. http for http uris mozilla usually get...

Localization content best practices
with english, but they rarely do in other languages. take bookmark: it can be both a noun and a verb in english. a developer could be tempted to reuse the same string "bookmark" in the button to add a bookmark, and in the header for the next dialog. this won't work in some languages. avoid unnecessary complexity in strings consider this string: privacy-link = <p>by proceeding you accept the <a href="https://www.mozilla.org/privacy" class="external">privacy terms</a>.</p> in this case, you shouldn't put the url inside the localization string, unless you need it to be localizable. if you change the url, you're going to need a new string id; the same goes for the anchor's attributes, or the paragraph markup. instead, you should use the following strings # localization note(privacy-text): {{l...

MathML3Testsuite
ted or some parts pass, giving the status of trunk builds with the appropriate fonts installed. when the markup is intentionally errorous, the correct behavior is not defined by the recommendation and hence the tests are considered passed if there is no fatal error (crash, etc). this exception also holds for obsolete features (such as macro, mode etc) or for other undefined behaviors (attribute href for example). note that in general, comparing with the "sample rendering" is not enough to conclude on the success/failure of the test. so please do not edit these pages if you are not able to explain gecko's rendering. however, any report is welcome on the tracking bug for the mathml testsuite. characters blocks symbols variants entitynames numericrefs utf8 general clipboard genattribs mat...

Mozilla MathML Status
epted, but do not have any effect on the rendering. mathml is always enabled since bug 660762. cdgroup accepted, but does not have any effect on the rendering. attributes shared by all mathml elements see § 2.1.6 and § 3.1.10. attribute notes id, class, style implemented. xref accepted, but does not have any effect on the rendering. href implemented. the user interface works correctly in seamonkey but not in firefox. see bug 958957. mathcolor implemented. mathbackground implemented. token elements element [- attribute] notes mi implemented. the mathvariant attribute is fully supported starting with (firefox 28.0 / thunderbird 28.0 / seamonkey 2.25). see bug 114365. ...

Midas
signed js. see: more about security preferences note: the shortcut key will automatically trigger this command (typically accel-c) with or without the signed js or any code on the page to handle it. createlink a uri. this command will not do anything if no selection is made. if there is a selection, a link will be inserted around the selection with the url parameter as the href of the link. cut if there is a selection, this command will copy the selection to the clipboard and remove the selection from the edit control. if there isn't a selection, nothing will happen. note: this command won't work without setting a pref or using signed js. see: more about security preferences note: the shortcut key will automatically trigger this command (typical...

NSS_3.11.10_release_notes.html
the bug fixes in nss 3.11.10 are described in the "bugs fixed" section below. distribution information the cvs tag for the nss 3.11.10 release is nss_3_11_10_rtm. nss 3.11.10 requires nspr 4.7.1. see the documentation section for the build instructions. ...

NSS 3.12.9 release notes
new and revised documents available since the release of nss 3.11 include the following:</for> build instructions for nss 3.11.4 and above nss shared db compatibility nss 3.12.9 shared libraries are backward compatible with all old...

Feed content access API
n if (!numitems) { doc.write("<i>no news is good news!</i>"); } else { var i; var theentry; var theurl; var info; for (i=0; i<numitems; i++) { theentry = itemarray.queryelementat(i, components.interfaces.nsifeedentry); if (theentry) { theurl = doc.write('<b><a href="' + theentry.link.resolve("") + '">' + theentry.title.text + '</a></b><br>'); if (theentry.summary) { info = theentry.summary.text + "<p><hr><p>"; } else { info = theentry.content.text + "<p><hr><p>"; } doc.write("<blockquote>" + info); doc.write("</blockquote><p>"); } ...

Packaging WebLock
k, that gets called when the user clicks the hyperlink. <!doctype 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. in mozilla and netscape browsers, xpinstall makes this process especially easy by providing the file format...

nsIClipboardCommands
if there is data to paste on the clipboard and the current selection is not read-only, false otherwise. copyimagecontents() copy the contents of the selected image. void copyimagecontents(); parameters none. copyimagelocation() copy the location of the selected image. void copyimagelocation(); parameters none. copylinklocation() copy the link location of the current selection (for example the |href| attribute of a selected |a| tag). void copylinklocation(); parameters none. copyselection() copy the current selection onto the clipboard. void copyselection(); parameters none. cutselection() cut the current selection onto the clipboard. void cutselection(); parameters none. paste() paste the contents of the clipboard into the current selection. void paste(); parameters none. selectall() se...

nsIFileView
d only return jpg files. void setfilter( in astring filterstring ); parameters filterstring the filter to be applied to the file list. sort() set the method used for sorting. void sort( in short sorttype, in boolean reversesort ); parameters sorttype one of the sort* constants. reversesort true, results will be sorted in ascending order. ...

Building an Account Manager Extension
ecial on load command. furthermore you should include the accountmanager.js script and accountmanage.css styles. it is common practice to use for the javascript of the new panel, the same naming as used for the xul. this means in our example, the javascript file should be located in chrome://example@mozilla.org/content/am-devmo-account.js. ...

Add Toolbar Button
example xul overlay file: <?xml version="1.0"?> <?xml-stylesheet href="chrome://demo/skin/overlay.css" type="text/css" ?> <overlay id="messengerwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/x-javascript" src="overlay.js" /> <toolbarpalette id="mailtoolbarpalette"> <toolbarbutton id="demo-button" class="demo-button toolbarbutton-1" label="demo" type="button" oncommand="demo.load();" /> </toolbarpalette> </overlay> add this to the css file you referenced in your xul file: #demo-button, [place="palette"] > #demo-button { list-style-image: url("chrome://demo/skin/icon.png") !important; } ...

Working with windows in chrome code
watcher.openwindow is a bit less trivial . ...

Add to iPhoto
we'll get a look at h...

Plug-in Basics - Plugins
understanding the plug-in api plug-ins and platform independence understanding the plug-in api a plug-in is a native code l...

Accessibility Inspector - Firefox Developer Tools
s that can be performed on the item, for example, a pushbutton would have "press" listed, while a link would have "jump" listed. value — the value of the item. this can mean different things depending on the type of the item; for example, a form input (role: entry) would have a value of whatever is entered in the input, whereas a link's value would be the url in the corresponding <a> element's href. domnode — the type of dom node that the item in the accessibility tree represents. you can click on the "target" icon that comes after it to select the node in the page inspector. hovering over the "target" icon highlights the dom node in the page content. description — any further description provided on the element, usually by the content of a title attribute. keyboardshortcut — an...

Inspecting web app manifests - Firefox Developer Tools
ing the firefox devtools application panel. when you open the application panel’s manifest view on a page that doesn't have an app manifest successfully deployed, you'll get the following output shown: deploying a manifest to get a manifest deployed successfully, you need to include a <link> element in the <head> of your document that points to your .webmanifest file: <link rel="manifest" href="/manifest.webmanifest"> the .webmanifest extension is recommended in the spec, and should be served with an application/manifest+json mime type, although browsers generally tend to support manifests with other appropriate extensions like .json (mime type: application/json). you also need to make sure the json inside the file is of the correct format. you can test this using the web manifest va...

Browser Console - Firefox Developer Tools
e. try running this code in the browser console's command line (remember that to send multiple lines to the browser console, use shift+enter): var newtabbrowser = gbrowser.getbrowserfortab(gbrowser.selectedtab); newtabbrowser.addeventlistener("load", function() { newtabbrowser.contentdocument.body.innerhtml = "<h1>this page has been eaten</h1>"; }, true); newtabbrowser.contentdocument.location.href = "https://mozilla.org/"; it adds a listener to the currently selected tab's load event that will eat the new page, then loads a new page. note: you can restart the browser with the command ctrl + alt + r (windows, linux) or cmd + alt + r (mac) this command restarts the browser with the same tabs open as before the restart. modifying the browser ui since the global window object is the brow...

Tutorial: Show Allocations Per Call Path - Firefox Developer Tools
e browser // console. window.demotrackallocations = function() { dbg = new debugger; // this makes hacking on the demo *much* more // pleasant. dbg.uncaughtexceptionhook = handleuncaughtexception; // find the current tab's main content window. var w = gbrowser.selectedbrowser.contentwindow; console.log("tracking allocations in page: " + w.location.href); // make that window a debuggee of our debugger. dbg.adddebuggee(w.wrappedjsobject); // enable allocation tracking in dbg's debuggees. dbg.memory.trackingallocationsites = true; } window.demoplotallocations = function() { // grab the allocation log. var log = dbg.memory.drainallocationslog(); // neutralize the debugger, and drop it on the floor // for the ...

Examine and edit HTML - Firefox Developer Tools
lement. delete node delete the element from the dom. attribute/add attribute add an attribute to the element. attribute/edit attribute (only when invoked on an attribute) edit the attribute. attribute/remove attribute (only when invoked on an attribute) remove the attribute. open link in new tab (only when invoked over a link, such as an href attribute) opens the linked item in a new tab. open file in debugger (only when invoked over a link to a js source) opens the linked source in the debugger. open file in style-editor (only when invoked over a link to a css source) opens the linked source in the style editor. copy link address (only when invoked over a url) copy the url. (change pseudo-...

AbstractRange - Web APIs
etween those two interfaces, and how to choose which is appropriate for your needs. ...

Background Tasks API - Web APIs
oriented about what we're trying to accomplish, let's have a look at the html. this establishes a box (id "container") that's used to present the progress of an operation (because you never know how long decoding "quantum filament tachyon emissions" will take, after all) as well as a second main box (with the id "logbox"), which is used to display textual output. <p> demonstration of using <a href="/docs/web/api/background_tasks_api"> cooperatively scheduled background tasks</a> using the <code>requestidlecallback()</code> method. </p> <div class="container"> <div class="label">decoding quantum filament tachyon emissions...</div> <progress id="progress" value="0"></progress> <div class="button" id="startbutton"> start </div> <div class="label counter"> task <span id=...

Blob - Web APIs
e <img> element's src attribute (assuming the data contains an image, of course). function typedarraytourl(typedarray, mimetype) { return url.createobjecturl(new blob([typedarray.buffer], {type: mimetype})) } const bytes = new uint8array(59); for(let i = 0; i < 59; i++) { bytes[i] = 32 + i; } const url = typedarraytourl(bytes, 'text/plain'); const link = document.createelement('a'); link.href = url; link.innertext = 'open the array url'; document.body.appendchild(link); result click the link in the example to see the browser decode the object url. extracting data from a blob one way to read content from a blob is to use a filereader. the following code reads the content of a blob as a typed array: const reader = new filereader(); reader.addeventlistener('loadend', () => { /...

CSS.escape() - Web APIs
working draft initial definition ...

Using dynamic styling information - Web APIs
collection, the style object is accessed from the document or from the elements to which that style is applied. it represents the in-line styles on a particular element. ...

ContentIndex.getAll() - Web APIs
unknown initial definition. ...

ContentIndex - Web APIs
async function unregistercontent(article) { // reference registration const registration = await navigator.serviceworker.ready; // feature detect content index if (!registrat...

Content Index API - Web APIs
async function unregistercontent(article) { // reference registration const registration = await navigator.serviceworker.ready; // feature detect content index if (!registrat...

DOMImplementation.createHTMLDocument() - Web APIs
mldocument() method creates a new html document. syntax const newdoc = document.implementation.createhtmldocument(title) parameters title optional (except in ie) a domstring containing the title to give the new html document. example this example creates a new html document and inserts it into an <iframe> in the current document. ...

Document.anchors - Web APIs
that auto populates a table of contents with every anchor on the page: <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>test</title> <script> function init() { var toc = document.getelementbyid("toc"); var i, li, newanchor; for (i = 0; i < document.anchors.length; i++) { li = document.createelement("li"); newanchor = document.createelement('a'); newanchor.href = "#" + document.anchors[i].name; newanchor.innerhtml = document.anchors[i].text; li.appendchild(newanchor); toc.appendchild(li); } } </script> </head> <body onload="init()"> <h1>title</h1> <h2><a name="contents">contents</a></h2> <ul id="toc"></ul> <h2><a name="plants">plants</a></h2> <ol> <li>apples</li> <li>oranges</li> <li>pears</li> </ol> <h2><a name="veggies">veggies<...

Document.createProcessingInstruction() - Web APIs
arget is invalid — it should be a valid xml name that doesn't contain "xml", "xml", or any case combination of the two, other than standardized ones such as <?xml-stylesheet ?>. the closing processing instruction sequence (?>) is part of the data. example var doc = new domparser().parsefromstring('<foo />', 'application/xml'); var pi = doc.createprocessinginstruction('xml-stylesheet', 'href="mycss.css" type="text/css"'); doc.insertbefore(pi, doc.firstchild); console.log(new xmlserializer().serializetostring(doc)); // displays: <?xml-stylesheet href="mycss.css" type="text/css"?><foo/> specifications specification status comment domthe definition of 'createprocessinginstruction()' in that specification. living standard no change dom4the ...

Document.execCommand() - Web APIs
rnet explorer.) copy copies the current selection to the clipboard. conditions of having this behavior enabled vary from one browser to another, and have evolved over time. check the compatibility table to determine if you can use it in your case. createlink creates an hyperlink from the selection, but only if there is a selection. requires a uri string as a value argument for the hyperlink's href. the uri must contain at least a single character, which may be whitespace. (internet explorer will create a link with a null value.) cut removes the current selection and copies it to the clipboard. when this behavior is enabled varies between browsers, and its conditions have evolved over time. check the compatibility table for usage details. decreasefontsize adds a <small> tag around the s...

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. syntax nodelist = document.links value an htmlcollection. example var links = document.links; for(var i = 0; i < links.length; i++) { var 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. living standard document object model (dom) level 2 html specificationthe definition of 'document.links' in that specification. obsolete ...

Document.referrer - Web APIs
. syntax var referrer = document.referrer; value the value is an empty string if the user navigated to the page directly (not through a link, but, for example, by using a bookmark). because this property returns only a string, it doesn't give you document object model (dom) access to the referring page. inside an <iframe>, the document.referrer will initially be set to the same value as the href of the parent window's window.location. specifications specification status comment html living standardthe definition of 'document.referrer' in that specification. living standard ...

Examples of web and XML development using the DOM - Web APIs
the next example (see example 4), you can use stylesheets and their rules to change styles for whole documents. <!doctype html> <html lang="en"> <head> <title>changing color and font-size example</title> <script> function changetext() { var p = document.getelementbyid("pid"); p.style.color = "blue" p.style.fontsize = "18pt" } </script> </head> <body> <p id="pid" onclick="window.location.href = 'http://www.cnn.com/';">linker</p> <form> <p><input value="rec" type="button" onclick="changetext();" /></p> </form> </body> </html> example 4: using stylesheets the stylesheets property on the document object returns a list of the stylesheets that have been loaded on that document. you can access these stylesheets and their rules individually using the stylesheet, style, and cssrule obj...

Introduction to the DOM - Web APIs
ns[this.selectedindex].value);"> <option value="white">white</option> <option value="lightgrey">gray</option> </select> <p><b><tt>link</tt></b></p> <select onchange="setbodyattr('link', this.options[this.selectedindex].value);"> <option value="blue">blue</option> <option value="green">green</option> </select> <small> <a href="http://some.website.tld/page.html" id="sample"> (sample link) </a> </small><br /> <input type="button" value="version" onclick="ver()" /> </form> </div> </body> </html> to test a lot of interfaces in a single page—for example, a "suite" of properties that affect the colors of a web page—you can create a similar test page with a whole console of buttons, ...

Document Object Model (DOM) - Web APIs
fepointlightelement svgfespecularlightingelement svgfespotlightelement svgfetileelement svgfeturbulenceelement svgfilterelement svgfilterprimitivestandardattributes svgfontelement svgfontfaceelement svgfontfaceformatelement svgfontfacenameelement svgfontfacesrcelement svgfontfaceurielement svgforeignobjectelement svggelement svggeometryelement svgglyphelement svgglyphrefelement svggradientelement svggraphicselement svghatchelement svghatchpathelement svghkernelement svgimageelement svglineargradientelement svglineelement svgmarkerelement svgmaskelement svgmeshelement svgmeshgradientelement svgmeshpatchelement svgmeshrowelement svgmetadataelement svgmissingglyphelement svgmpathelement svgpathelement svgpatternelement svgpoly...

Element: click event - Web APIs
my onclick="void(0)" attribute to the element or any of its ancestors up to but not including <body>. use a typically interactive element (e.g., <a>) instead of one that isn't typically interactive (e.g., <div>). stop using click event delegation. safari mobile considers the following elements to be typically interactive (and thus they aren't affected by this bug): <a> (but it must have an href) <area> (but it must have an href) <button> <img> <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. examples this example displays the number of consecutive clicks on a <button>. html <button>click</button> javascript const button = document.queryselector('button');...

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

Element.setCapture() - Web APIs
specification based on internet explorer's implementation. ...

EventTarget - Web APIs
windows) also support setting event handlers via onevent properties and attributes. ...

Using files from web applications - Web APIs
citly by calling url.revokeobjecturl(): url.revokeobjecturl(objecturl); example: using object urls to display images this example uses object urls to display image thumbnails. in addition, it displays other file information including their names and sizes. the html that presents the interface looks like this: <input type="file" id="fileelem" multiple accept="image/*" style="display:none"> <a href="#" id="fileselect">select some files</a> <div id="filelist"> <p>no files selected!</p> </div> this establishes our file <input> element as well as a link that invokes the file picker (since we keep the file input hidden to prevent that less-than-attractive user interface from being displayed). this is explained in the section using hidden file input elements using the click() method, as is t...

FileSystemEntry.toURL() - Web APIs
syntax filesystementry.tourl([mimetype]); parameters mimetype optional an optional string specifying the mime type to use when interpreting the file. this can be used to help deal with files whose types aren't recognized automatically by the user agent. ...

FileSystemEntrySync - Web APIs
rectory. quota_exceeded_err the operation would cause the application to exceed its storage quota. you can ask for a larger persistent storage, which your user must explicitly grant. for more information, see the article on basic concepts. tourl() returns a url that can be used to identify this entry. it exposes a new url scheme—filesystem:—that you can use to fill src or href attributes. for example, if you wanted to display an image and have its fileentry, calling tourl() gives you the image file's file system url. you get something like: filesystem:http://example.com/temporary/lolcat.png. the file system url does not expire. because the method describes a location on disk, the url is valid for as long as that location exists. you can delete the file and recreate it...

GlobalEventHandlers.onplay - Web APIs
rfunction should be either null or a javascript function specifying the handler for the event. example <p>this example demonstrates how to assign an "onplay" event to a video element.</p> <video controls onplay="alertplay()"> <source src="mov_bbb.mp4" type="video/mp4"> <source src="mov_bbb.ogg" type="video/ogg"> your browser does not support html5 video. </video> <p>video courtesy of <a href="http://www.bigbuckbunny.org/" target="_blank">big buck bunny</a>.</p> <script> function alertplay() { alert("the video has started to play."); } </script> specification specification status comment html living standardthe definition of 'onplay' in that specification. living standard ...

HTMLAnchorElement.referrerPolicy - Web APIs
e scheme, the host and the port. "unsafe-url" meaning that the referrer will include the origin and the path (but not the fragment, password, or username). this case is unsafe as it can leak path information that has been concealed to third-party by using tls. examples var elt = document.createelement("a"); var linktext = document.createtextnode("my link"); elt.appendchild(linktext); elt.href = "https://developer.mozilla.org/"; elt.referrerpolicy = "no-referrer"; var div = document.getelementbyid("divaround"); div.appendchild(elt); // when clicked, the link will not send a referrer header. specifications specification status comment referrer policythe definition of 'referrerpolicy attribute' in that specification. candidate recommendation added th...

HTMLAreaElement.referrerPolicy - Web APIs
afe-url" meaning that the referrer will include the origin and the path (but not the fragment, password, or username). this case is unsafe as it can leak path information that has been concealed to third-party by using tls. examples <img usemap="#maparound" width="100" height="100" src="/img/logo@2x.png" /> <map id="mymap" name="maparound" />> var elt = document.createelement("area"); elt.href = "/img2.png"; elt.shape = "rect"; elt.referrerpolicy = "no-referrer"; elt.coords = "0,0,100,100"; var map = document.getelementbyid("mymap"); map.appendchild(elt); // when clicked, the area's link will not send a referrer header. specifications specification status comment referrer policythe definition of 'referrerpolicy attribute' in that specification. candid...

HTMLCanvasElement.mozGetAsFile() - Web APIs
guide. return value a file object representing the image contained in the canvas. the file's data is entirely located in memory until such time as it is explicitly written to disk. examples this example creates an image file from the <canvas> element on the page, then uses a filereader to read the image data from the file. html <canvas id="canvas" width="100" height="100"></canvas> <p><a href="#" id="link">click here to try out mozgetasfile()</a>.</p> javascript the following code uses mozgetasfile() to create a file object from the canvas and appends it as an image to the page by loading it as a data url using the readasdataurl() method. then a new <img> element is created using the new data url. function draw() { var canvas = document.getelementbyid('canvas'); var ctx = canva...

HTMLCanvasElement.toBlob() - Web APIs
var canvas = document.g...

HTMLDetailsElement - Web APIs
element interface it also has available to it by inheritance) for manipulating <details> elements. ...

HTMLDialogElement - Web APIs
o manipulate <dialog> elements. it inherits properties and methods from the htmlelement interface. ...

HTMLElement.lang - Web APIs
languageused is a string variable that gets the language in which the text of the current element is written. newlanguage is a string variable with its value setting the language in which the text of the current element is written. example // 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. obsolete ...

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. syntax var str = element.title; element.title = 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. living standard no change from document object model (dom) level 2 html specification. document object model (dom) level 2 html specificationthe definition of 'title' in that specification. obsolete no change from document object model (dom) level 1 specificatio...

HTMLHyperlinkElementUtils.hash - Web APIs
the htmlhyperlinkelementutils.hash property returns a usvstring containing a '#' followed by the fragment identifier of the url. the fragment is not percent-decoded. if the url does not have a fragment identifier, this property contains an empty string, "". syntax string = object.hash; object.hash = string; examples <a id="myanchor" href="/docs/htmlhyperlinkelementutils.href#examples">examples</a> <script> var anchor = document.getelementbyid("myanchor"); console.log(anchor.hash); // returns '#examples' </script> specifications specification status comment html living standardthe definition of 'htmlhyperlinkelementutils.hash' in that specification. living standard initial definition ...

HTMLHyperlinkElementUtils.hostname - Web APIs
the htmlhyperlinkelementutils.hostname property is a usvstring containing the domain of the url. syntax string = object.hostname; 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. living standard initial definition. ...

HTMLHyperlinkElementUtils.password - Web APIs
the htmlhyperlinkelementutils.password property is a usvstring containing the password specified before the domain name. if it is set without first setting the username property, it silently fails. syntax string = object.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. living standard initial definition. ...

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). syntax string = 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. living standard initial definition. ...

HTMLHyperlinkElementUtils.port - Web APIs
the htmlhyperlinkelementutils.port property is a usvstring containing the port number of the url. if the url does not contain an explicit port number, it will be set to ''. syntax 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. living standard initial definition. ...

HTMLHyperlinkElementUtils.protocol - Web APIs
the htmlhyperlinkelementutils.protocol property is a usvstring representing the protocol scheme of the url, including the final ':'. syntax string = 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. living standard initial definition. ...

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. modern browsers provide urlsearchparams and url.searchparams to make it easy to parse out the parameters from the querystring. ...

HTMLHyperlinkElementUtils.username - Web APIs
the htmlhyperlinkelementutils.username property is a usvstring containing the username specified before the domain name. syntax string = object.username; 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. living standard initial definition. ...

HTMLImageElement.longDesc - Web APIs
the image within a link using the <a> element. consider the following older html: <img src="taco-tuesday.jpg" longdesc="image-descriptions/taco-tuesday.html"> here, the longdesc is used to indicate that the user should be able to access a detailed description of the image taco-tuesday.jpg in the html file image-descriptions/taco-tuesday.html. this can be easily converted into modern html: <a href="image-descriptions/taco-tuesday.html"> <img src="taco-tuesday.jpg"> </a> with that, the image is a link to the html file describing the image in more detail. specifications specification status comment html 4.01 specificationthe definition of 'htmlimageelement.longdesc' in that specification. recommendation provides an actual description of this property; ...

HTMLLinkElement.rel - Web APIs
the htmllinkelement.rel property reflects the rel attribute. it is a domstring containing a space-separated list of link types indicating the relationship between the resource represented by the <link> element and the current document. the most common use of this attribute is to specify a link to an external style sheet: the property is set to stylesheet, and the href attribute is set to the url of an external style sheet to format the page. syntax var relstr = 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. living st...

HTMLMarqueeElement - Web APIs
rquee> elements. it inherits properties and methods from the htmlelement interface. ...

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

Drag Operations - Web APIs
ll be prevented. you can retrieve other types of data as well. if the data is a link, it should have the type text/uri-list. you could then insert a link into the content. function dodrop(event) { const lines = event.datatransfer.getdata("text/uri-list").split("\n"); lines.filter(line => !line.startswith("#")) .foreach(line => { const link = document.createelement("a"); link.href = line; link.textcontent = line; event.target.appendchild(link); }) event.preventdefault(); } this example inserts a link from the dragged data. as the name implies, the text/uri-list type actually may contain a list of urls, each on a separate line. the above code uses split to break the string into lines, then iterates over the list of lines, and inserts each as a link into ...

HTML Drag and Drop API - Web APIs
as methods to manage drag data. the setdata() method is used to add an item to the drag data, as shown in the following example. function dragstart_handler(ev) { // add different types of drag data ev.datatransfer.setdata("text/plain", ev.target.innertext); ev.datatransfer.setdata("text/html", ev.target.outerhtml); ev.datatransfer.setdata("text/uri-list", ev.target.ownerdocument.location.href); } for a list of common data types used in drag-and-drop (such as text, html, links, and files), see recommended drag types. for more information about drag data, see drag data. define the drag image by default, the browser supplies an image that appears beside the pointer during a drag operation. however, an application may define a custom image with the setdragimage() method, as shown ...

Using IndexedDB - Web APIs
'[' + cursor.key + '] ' + '(biblioid: ' + value.biblioid + ') ' + value.title + '</li>'); if (value.year != null) list_item.append(' - ' + value.year); if (value.hasownproperty('blob') && typeof value.blob != 'undefined') { var link = $('<a href="' + cursor.key + '">file</a>'); link.on('click', function() { return false; }); link.on('mouseenter', function(evt) { setinviewer(evt.target.getattribute('href')); }); list_item.append(' / '); list_item.append(link); } else { list_item.append(" / no attached file"); } pub_list.append(l...

Timing element visibility with the Intersection Observer API - Web APIs
impact on performance substantially. let's get started! site structure: the html the site's structure is not too complicated. we'll be using css grid to style and lay out the site, so we can be pretty straightforward here: <div class="wrapper"> <header> <h1>a fake blog</h1> <h2>showing intersection observer in action!</h2> </header> <aside> <nav> <ul> <li><a href="#link1">a link</a></li> <li><a href="#link2">another link</a></li> <li><a href="#link3">one more link</a></li> </ul> </nav> </aside> <main> </main> </div> this is the framework for the entire site. at the top is the site's header region, contained within a <header> block. below that, we define the site's sidebar as a list of links within an <aside> block. final...

Location: hash - Web APIs
the hash property of the location interface returns a usvstring containing a '#' followed by the fragment identifier of the url. the fragment is not percent-decoded. if the url does not have a fragment identifier, this property contains an empty string, "". syntax string = object.hash; object.hash = string; examples <a id="myanchor" href="/docs/location.href#examples">examples</a> <script> var anchor = document.getelementbyid("myanchor"); console.log(anchor.hash); // returns '#examples' </script> specifications specification status comment html living standardthe definition of 'hash' in that specification. living standard initial definition ...

Location: hostname - Web APIs
the hostname property of the location interface is a usvstring containing the domain of the url. syntax string = object.hostname; object.hostname = string; examples // let's an <a id="myanchor" href="https://developer.mozilla.org/docs/location.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 'hostname' in that specification. living standard initial definition. ...

Location: password - Web APIs
the password property of the location interface is a usvstring containing the password specified before the domain name. if it is set without first setting the username property, it silently fails. ...

Location: pathname - Web APIs
the pathname property of the location interface is a usvstring containing an initial '/' followed by the path of the url (or the empty string if there is no path). syntax string = object.pathname; object.pathname = string; examples // let's an <a id="myanchor" href="https://developer.mozilla.org/docs/location.pathname"> element be in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.pathname; // returns:'/docs/location.pathname' specifications specification status comment html living standardthe definition of 'pathname' in that specification. living standard initial definition. ...

Location: port - Web APIs
the port property of the location interface is a usvstring containing the port number of the url. if the url does not contain an explicit port number, it will be set to ''. syntax string = object.port; object.port = string; examples // let's an <a id="myanchor" href="https://developer.mozilla.org:443/docs/location.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 'location.port' in that specification. living standard initial definition. ...

Location: protocol - Web APIs
the protocol property of the location interface is a usvstring representing the protocol scheme of the url, including the final ':'. syntax string = object.protocol; object.protocol = string; examples // let's an <a id="myanchor" href="https://developer.mozilla.org/location.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 'protocol' in that specification. living standard initial definition. ...

Location: search - Web APIs
the search property of the location interface is a search string, also called a query string; that is, a usvstring containing a '?' followed by the parameters of the url. modern browsers provide urlsearchparams and url.searchparams to make it easy to parse out the parameters from the querystring. ...

Location: username - Web APIs
the username property of the location interface is a usvstring containing the username specified before the domain name. ...

MediaStream Recording API - Web APIs
log("data-available"); if (event.data.size > 0) { recordedchunks.push(event.data); console.log(recordedchunks); download(); } else { // ... ...

Capabilities, constraints, and settings - Web APIs
rse, there may be non-standard properties in this list, in which case you probably will find that the documentation link doesn't help much. let supportedconstraints = navigator.mediadevices.getsupportedconstraints(); for (let constraint in supportedconstraints) { if (supportedconstraints.hasownproperty(constraint)) { let elem = document.createelement("li"); elem.innerhtml = "<code><a href='/docs/web/api/mediatracksupportedconstraints/" .concat(constraint) + "' target='_blank'>" + constraint + "</a></code>"; supportedconstraintlist.appendchild(elem); } } error handling we also have some simple error handling code; handleerror() is called to handle promises which fail, and the log() function appends the error message to a special logging <div> box under the video. ...

Node.baseURI - Web APIs
in most cases the base url is simply the location of the document, but it can be affected by many factors, including the <base> element in html and the xml:base attribute in xml. ...

PerformanceFrameTiming - Web APIs
e used to help identify areas that take too long to provide a good user experience. ...

RTCDtlsTransport - Web APIs
tion about the underlying transport and the security added to it by the dtls layer. ...

SVGAElement - Web APIs
the svgaelement interface provides access to the properties of <a> element, as well as methods to manipulate them. properties this interface also inherits properties from its parent, svggraphicselement, and implements properties from svgurireference and htmlhyperlinkelementutils. svgaelement.download see htmlanchorelement.download. svgaelement.href see htmlanchorelement.href. svgaelement.hreflang is a domstring that reflects the hreflang attribute, indicating the language of the linked resource. svgaelement.ping is a domstring that reflects the ping attribute, containing a space-separated list of urls to which, when the hyperlink is followed, post requests with the body ping will be sent by the browser (in the background). typically used for tracking. svgaelement.referrerpolicy ...

SVGAltGlyphDefElement - Web APIs
the svgaltglyphdefelement interface corresponds to the <altglyphdef> element. ...

format - Web APIs
if the font is in one of the formats listed in css2([css2], section15.3.5), then its value is the corresponding <string> parameter of the font. syntax string = myglyph.format; myglyph.format = string; value the format values listed below are taken from css2([css2], section15.3.5). ...

SVGAltGlyphElement - Web APIs
glyph characters. for some textal representations as: ligatures (e.g. æ, ß, etc ), special-purpose fonts (e.g. musical symbols) or even alternate glyphs such as asian text strings it is required that a different set of glyphs be used than the normal given character data. properties this interface also inherits properties from its parent interface, svggraphicselement. svgaltglyphelement.glyphref it corresponds to the attribute glyphref on the given element. it's data type is 'string'. it defines the glyph identifier, whose format is dependent on the ‘format’ of the given font. svgaltglyphelement.format it corresponds to the attribute format on the given element. it's data type is 'string'. this property specifies the format of the given font. methods this interface has no meth...

SVGAltGlyphItemElement - Web APIs
the svgaltglyphitemelement interface corresponds to the <altglyphitem> element. ...

SVGAnimateColorElement - Web APIs
the svganimatecolorelement interface corresponds to the <animatecolor> element. ...

targetElement - Web APIs
syntax var targetelement = someelement.targetelement; specifications specification status comment svg animations level 2the definition of 'svganimationelement.targetelement' in that specification. editor's draft added null as return value in case that no target element is being animated. ...

SVGExternalResourcesRequired - Web APIs
ts where this element or one of its descendants can reference an external resource. ...

SVGFilterPrimitiveStandardAttributes - Web APIs
s the set of dom attributes that are common across the filter primitive interfaces. ...

SVGFontElement - Web APIs
ed access to the attributes of the <font> element via the svg dom is not possible. ...

SVGFontFaceElement - Web APIs
cess to the attributes of the <font-face> element via the svg dom is not possible. ...

SVGFontFaceFormatElement - Web APIs
the attributes of the <font-face-format> element via the svg dom is not possible. ...

SVGFontFaceNameElement - Web APIs
to the attributes of the <font-face-name> element via the svg dom is not possible. ...

SVGFontFaceSrcElement - Web APIs
to the attributes of the <font-face-src> element via the svg dom is not possible. ...

SVGFontFaceUriElement - Web APIs
to the attributes of the <font-face-uri> element via the svg dom is not possible. ...

SVGGlyphElement - Web APIs
ed access to the attributes of the <glyph> element via the svg dom is not possible. ...

SVGHKernElement - Web APIs
d access to the attributes of the <hkern> element via the svg dom is not possible. ...

SVGMeshElement - Web APIs
the svgmeshelement interface provides access to the properties of <mesh> elements. ...

SVGMissingGlyphElement - Web APIs
to the attributes of the <missing-glyph> element via the svg dom is not possible. ...

SVGRect - Web APIs
means that attempts to modify the object will result in an exception being thrown. ...

SVGRenderingIntent - Web APIs
enumerated list of possible values for rendering-intent attributes or descriptors. ...

SVGSolidcolorElement - Web APIs
the svgsolidcolorelement interface corresponds to the <solidcolor> element. ...

SVGTRefElement - Web APIs
ed access to the attributes of the <tref> element via the svg dom is not possible. ...

SVGUnitTypes - Web APIs
sed for reflecting gradientunits, patterncontentunits and other similar attributes. ...

SVGVKernElement - Web APIs
d access to the attributes of the <vkern> element via the svg dom is not possible. ...

SVGZoomAndPan - Web APIs
bute, and is mixed in to other interfaces for elements that support this attribute. ...

StylePropertyMap - Web APIs
sentation of a css declaration block that is an alternative to cssstyledeclaration. ...

StylePropertyMapReadOnly.get() - Web APIs
fied property. syntax var declarationblock = stylepropertymapreadonly.get(property) parameters property the name of the property to retrieve the value of. return value a cssstylevalue object. examples let's get just a few properties and values. let's start by creating a link inside a paragraph in our html, and adding a definition list which we will populate with javascript: <p> <a href="https://example.com">link</a> </p> <dl id="regurgitation"></dl> we add a bit of css, including a custom property and an inhertable property: p { font-weight: bold; } a { --colour: red; color: var(--colour); } we use the element's computedstylemap() to return a stylepropertymapreadonly object. we create an array of properties of interest and use the stylepropertymapreadonly's get() met...

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

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

StyleSheet - Web APIs
stylesheet.media read only returns a medialist representing the intended destination medium for style information. ...

StyleSheetList - Web APIs
working draft ...

URL() - Web APIs
g an absolute or relative url. if url is a relative url, base is required, and will be used as the base url. if url is an absolute url, a given base will be ignored. base optional a usvstring representing the base url to use in case url is a relative url. if not specified, it defaults to ''. note: you can still use an existing url object for the base, which stringifies itself to the object's href property. exceptions exception explanation typeerror url (in the case of absolute urls) or base + url (in the case of relative urls) is not a valid url. examples // base urls let m = 'https://developer.mozilla.org'; let a = new url("/", m); // => 'https://developer.mozilla.org/' let b = new url(m); ...

URL.hash - Web APIs
url interface is a usvstring containing a '#' followed by the fragment identifier of the url. the fragment is not percent-decoded. if the url does not have a fragment identifier, this property contains an empty string — "". note: this feature is available in web workers. syntax const string = url.hash url.hash = newhash value a usvstring. examples const url = new url('/docs/web/api/url/href#examples'); console.log(url.hash); // logs: '#examples' specifications specification status comment urlthe definition of 'url.hash' in that specification. living standard initial definition ...

URL.toJSON() - Web APIs
the tojson() method of the url interface returns a usvstring containing a serialized version of the url, although in practice it seems to have the same effect as url.tostring(). note: this feature is available in web workers. syntax const href = url.tojson() return value a usvstring. examples const url = new url("/docs/web/api/url/tostring"); url.tojson(); // should return the url as a string specifications specification status comment urlthe definition of 'tojson()' in that specification. living standard initial definition. ...

URL.toString() - Web APIs
the url.tostring() stringifier method returns a usvstring containing the whole url. it is effectively a read-only version of url.href. note: this feature is available in web workers. syntax const href = url.tostring() return value a usvstring. examples const url = new url("/docs/web/api/url/tostring"); url.tostring(); // should return the url as a string specifications specification status comment urlthe definition of 'stringifier' in that specification. living standard initial definition. ...

URLUtilsReadOnly.protocol - Web APIs
living standard initial definition. ...

URLUtilsReadOnly.search - Web APIs
living standard initial definition. ...

Using Web Workers - Web APIs
stom "listeners" mytask.addlistener('printstuff', function (result) { document.getelementbyid('firstlink').parentnode.appendchild(document.createtextnode('the difference is ' + result + '!')); }); mytask.addlistener('doalert', function (time, unit) { alert('worker waited for ' + time + ' ' + unit + ' :-)'); }); </script> </head> <body> <ul> <li><a id="firstlink" href="javascript:mytask.sendquery('getdifference', 5, 3);">what is the difference between 5 and 3?</a></li> <li><a href="javascript:mytask.sendquery('waitsometime');">wait 3 seconds</a></li> <li><a href="javascript:mytask.terminate();">terminate() the worker</a></li> </ul> </body> </html> my_task.js (the worker): var queryablefunctions = { // example #1: get the difference between two nu...

Window.closed - Web APIs
a window from a popup the following example demonstrates how a popup window can change the url of the window that opened it. before attempting to change the url, it checks that the current window has an opener using the window.opener property and that the opener isn't closed: // check that an opener exists and is not closed if (window.opener && !window.opener.closed) { window.opener.location.href = 'http://www.mozilla.org'; } note that popups can only access the window that opened them. refreshing a previously opened popup in this example the function refreshpopupwindow() calls the reload() method of the popup's location object to refresh its data. if the popup hasn't been opened yet or the user has closed it a new window is opened. const popupwindow = null; function refreshpopupwind...

window.location - Web APIs
see location for all available properties. ...

Window.name - Web APIs
gets/sets the name of the window's browsing context. syntax string = window.name; window.name = string; example <script> // open a tab with a specific browsing context name const othertab = window.open("url1", "_blank"); if (othertab) othertab.name = "other-tab"; </script> <a href="url2" target="other-tab">this link will be opened in the other tab.</a> notes the name of the window is used primarily for setting targets for hyperlinks and forms. browsing contexts do not need to have names. it has also been used in some frameworks for providing cross-domain messaging (e.g., sessionvars and dojo's dojox.io.windowname) as a more secure alternative to jsonp. modern web applications hosting sensitive data should, however, not rely on window.name for cross-domain messagin...

Window.window - Web APIs
op of your script. another reason, is that without this property you wouldn't be able to write, for example, "window.open('http://google.com/')". you'd have to use "open('http://google.com/')" instead. yet another reason to use this property, is for libraries which wish to offer oop-versions, and non-oop versions (especially javascript modules). for example, if we refer to "this.window.location.href", a javascript module could define a property called "window" inside of a class it defined (since no global "window" variable exists for it by default) which could be created after passing in a window object to the module class' constructor. thus, "this.window" inside of its functions would refer to that window object. in the non-namespaced version, "this.window" would refer back to "window", an...

Window - Web APIs
ly, anything that can't reasonably pertain to a tab pertains to the window instead. ...

WindowOrWorkerGlobalScope.setInterval() - Web APIs
rsor: pointer; color: #000000; text-decoration: underline; } #info { width: 180px; height: 150px; float: right; background-color: #eeeeff; padding: 4px; overflow: auto; font-size: 12px; margin: 4px; border-radius: 5px; /* visibility: hidden; */ } </style> </head> <body> <p id="copyleft" style="font-style: italic; font-size: 12px; text-align: center;">copyleft 2012 by <a href="https://developer.mozilla.org/" target="_blank">mozilla developer network</a></p> <p id="controls" style="text-align: center;">[&nbsp;<span class="intlink" onclick="otwexample1.play();">play</span> | <span class="intlink" onclick="otwexample1.pause();">pause</span> | <span class="intlink" onclick="otwexample1.terminate();">terminate</span>&nbsp;]</p> <div id="info"> vivamus blandit massa ut metu...

WorkerGlobalScope.location - Web APIs
note: firefox has a bug with using console.log inside shared/service workers (see bug ...

HTML in XMLHttpRequest - Web APIs
n method 1 this method relies on the "force async" nature of the feature. when you try to set responsetype of an xmlhttprequest object after it is opened as "sync". this throws an error in the browsers that implement the feature and works on others. function htmlinxhr() { if (!window.xmlhttprequest) return false; var req = new window.xmlhttprequest(); req.open('get', window.location.href, false); try { req.responsetype = 'document'; } catch(e) { return true; } return false; } view on jsfiddle this method is synchronous, does not rely on external assets though it may not be as reliable as method 2 described below since it does not check the actual feature but an indication of that feature. method 2 there are two challenges to detecting exactly if a browser su...