Search completed in 1.43 seconds.
Commenting IDL for better documentation
the documentation team has tools that convert
comments from the doxygen format into the standard reference article format we use here on mdn, with certain limitations.
... this article will help you understand how you can format your
comments to help ensure that the conversion process can be automated as much as possible in order to ensure that your interface gets properly documented.
... happily, following these recommendations will also help ensure your
comments are extremely human-readable, too.
...And 19 more matches
Why RSS Slash is Popular - Counting Your Comments - Archive of obsolete content
one of the quirks of slashdot is that it includes a
comments count, a humorous department, a hit parade, and a section with every blog post.
...3:02:08 -0500</lastbuilddate> <link>http://www.example.com</link> <item> <title>review of sin city</title> <guid>d77d2e80-0487-4e8c-a35d-a93f12a0ff7d:2005/05/15/114</guid> <pubdate>sun, 15 may 2005 13:02:08 -0500</lastbuilddate></pubdate> <link>http://www.example.com/blog/2005/05/15/114</link> <slash:
comments>43</slash:
comments> </item> <item> <title>what is the 3571st prime number</title> <guid>d77d2e80-0487-4e8c-a35d-a93f12a0ff7d:2005/05/15/113</guid> <pubdate>sun, 15 may 2005 10:55:12 -0500</lastbuilddate></pubdate> <link>d77d2e80-0487-4e8c-a35d-a93f12a0ff7d:2005/05/15/113</link> <slash:
comments>72</s...
...lash:
comments> </item> <item> <title>first article!</title> <guid>d77d2e80-0487-4e8c-a35d-a93f12a0ff7d:2005/05/15/112</guid> <pubdate>sun, 15 may 2005 08:14:11 -0500</lastbuilddate></pubdate> <link>http://www.example.com/blog/2005/05/15/112</link> <slash:
comments>118</slash:
comments> </item> </channel> </rss> the <slash:
comments> element is it reason that the rss slash module is popular.
...And 8 more matches
Comment - Web APIs
the
comment interface represents textual notations within markup; although it is generally not visually shown, such
comments are available to be read in the source view.
...
comments are represented in html and xml as content between '<!--' and '-->'.
... in xml, the character sequence '--' cannot be used within a
comment.
...And 6 more matches
Comments - CSS: Cascading Style Sheets
a css
comment is used to add explanatory notes to the code or to prevent the browser from interpreting specific parts of the style sheet.
... by design,
comments have no effect on the layout of a document.
... syntax
comments can be placed wherever white space is allowed within a style sheet.
...And 5 more matches
ARIA: Comment role - Accessibility
the
comment landmark role semantically denotes a
comment/reaction to some content on the page, or to a previous
comment.
... examples in the following example we have a document section that has been
commented.
... the
commented section is marked up using <span role="mark">.
...And 4 more matches
showcommentcolumn - Archive of obsolete content
« xul reference home show
commentcolumn new in thunderbird 3requires seamonkey 2.0 type: boolean if true, a
comment column appears in the popup.
... for the url history, the
comment column will contain the page titles associated with each url.
... if this attribute is not specified, the
comment column doesn't appear.
textbox.showCommentColumn - Archive of obsolete content
« xul reference home show
commentcolumn obsolete since gecko 1.9.1 type: boolean if true, a
comment column appears in the popup.
... for the url history, the
comment column will contain the page titles associated with each url.
... if this attribute is not specified, the
comment column doesn't appear.
Document.createComment() - Web APIs
create
comment() creates a new
comment node, and returns it.
... syntax
commentnode = document.create
comment(data); parameters data a string containing the data to be added to the
comment.
... example var docu = new domparser().parsefromstring('<xml></xml>', 'application/xml'); var
comment = docu.create
comment('this is a not-so-secret
comment in your document'); docu.getelementsbytagname('xml')[0].appendchild(
comment); alert(new xmlserializer().serializetostring(docu)); // displays: <xml><!--this is a not-so-secret
comment in your document--></xml> specifications specification status
comment domthe definition of 'document.create
comment' in that specification.
logComment - Archive of obsolete content
log
comment adds a
comment line to the installation log.
... method of install object syntax int log
comment( string a
comment ); parameters the sole input parameter is a string whose value will be written to the log during the installation process.
Comment() - Web APIs
the
comment() constructor returns a newly created
comment object with the optional domstring given in parameter as its textual content.
... syntax
comment1 = new
comment(); // create an empty
comment comment2 = new
comment("this is a
comment"); example var
comment = new
comment("test"); specifications specification status
comment domthe definition of '
comment:
comment' in that specification.
<small>: the side comment element - HTML: Hypertext Markup Language
the html <small> element represents side-
comments and small print, like copyright and legal text, independent of its styled presentation.
... <span style="font-size:0.8em">this whole sentence is in small letters.</span> </p> specifications specification status
comments html living standardthe definition of '<small>' in that specification.
Install script template - Archive of obsolete content
iles to current browser block var pluginsfolder = getfolder("plugins"); //verify disk space if(verifydiskspace(pluginsfolder, plugin_size+component_size)) { // start installing plugin shared library reseterror(); // install the plugin shared library to the current browser's plugin directory errblock1 = addfile (plid, version, plugin_file, pluginsfolder, null); if (errblock1!=0) { log
comment("could not add " + plugin_file + " to " + pluginsfolder + ":" + errblock1); cancelinstall(errblock1); } // start installing xpt file if this is a scriptable plugin // install to the plugins directory -- this works well in mozilla 1.0 clients // in mozilla 1.0 clients, the components directory can be avoided for xpt files errblock1 = addfile (plid, version, component_file, pluginsfolder,...
... null); if (errblock1!=0) { log
comment("could not add " + component_file + " to " + pluginsfolder + ":" + errblock1); cancelinstall(errblock1); } } else { log
comment("cancelling current browser install due to lack of space..."); cancellinstall(); } // secondary install block, which sets up plugins and xpt in another location in addition to the current browser errblock2 = createsecondaryinstall(); // performinstall block, in which error conditions from previous blocks are checked.
... if(errblock2 == success) { // now take care of writing plids to the win32 registry err = writeplidsolution(); if(err!=success) { log
comment("could not write win32 keys as specified: " + err); } else { log
comment("plid entries are present in the win32 registry"); } } reseterror(); err = performinstall(); if (err == success) refreshplugins(true); // call refreshplugins(true) if you'd like the web page which invoked the plugin to // reload.
...And 20 more matches
Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
jaxer – example application the example application consists of a simple form used to accept
comments from public users and was built to cover some of the most useful jaxer features.
... listing 6 - creating the user interface <link href="/jaxer_examples/js/ext-2.1/resources/css/ext-all.css" type="text/css" rel="stylesheet"/> <script src="/jaxer_examples/js/ext-2.1/adapter/ext/ext-base.js"/> <script src="/jaxer_examples/js/ext-2.1/ext-all.js"/> <link href="/jaxer_examples/css/main.css" type="text/css" rel="stylesheet"/> <script runat="both" src="/jaxer_examples/js/validate
comments.js"/> <script> var txt_name; var txt_email; var txt_message; var btn_
comments; var form_
comments; ext.onready( function() { // create the name text field txt_name = new ext.form.textfield({ name: "name", fieldlabel: "name", width: 200 }); // create the e-mail text field txt_email = new ext.form.textfield({ name: "email", fieldlabel: "e-mail", width: 200 }); // create the m...
... btn_
comments = new ext.button({ text: "submit", fieldlabel: "", handler: formhandler }); // create the form panel, attach the inputs form_
comments = new ext.form.formpanel({ labelalign: "right", width: 400, title: "
comments", items: [ txt_name, txt_email, txt_message, btn_
comments ], renderto: "form-
comments" }); }); </script> the code in listing 6 starts by hooking in the ext js library which is used to produce the ui elements of the form.
...And 17 more matches
Lexical grammar - JavaScript
the source text of ecmascript scripts gets scanned from left to right and is converted into a sequence of input elements which are tokens, control characters, line terminators,
comments or white space.
... \r u+2028 line separator <ls> wikipedia u+2029 paragraph separator <ps> wikipedia
comments
comments are used to add hints, notes, suggestions, or warnings to javascript code.
... javascript has two long-standing ways to add
comments to code.
...And 15 more matches
Index - Archive of obsolete content
the
comments normally mark where you should be inserting your own code.
...it also includes tools for looking at checkin logs (and
comments); doing diffs between various versions of a file; and finding out which person is responsible for changing a particular line of code ("cvsblame").
... 422 devmo 1.0 launch roadmap mdc project archives
comments, ideas, questions and other discussion should be added on the devmo talk:1.0 launch roadmap page.
...And 12 more matches
How to implement a custom autocomplete search component
hange this const class_name = "basic autocomplete"; const contract_id = '@mozilla.org/autocomplete/search;1?name=basic-autocomplete'; /** * @constructor * * @implements {nsiautocompleteresult} * * @param {string} searchstring * @param {number} searchresult * @param {number} defaultindex * @param {string} errordescription * @param {array.<string>} results * @param {array.<string>|null=}
comments */ function providerautocompleteresult(searchstring, searchresult, defaultindex, errordescription, results,
comments) { this._searchstring = searchstring; this._searchresult = searchresult; this._defaultindex = defaultindex; this._errordescription = errordescription; this._results = results; this._
comments =
comments; } providerautocompleteresult.prototype = { _searchstring: ""...
..., _searchresult: 0, _defaultindex: 0, _errordescription: "", _results: [], _
comments: [], /** * @return {string} the original search string */ get searchstring() { return this._searchstring; }, /** * @return {number} the result code of this result object, either: * result_ignored (invalid searchstring) * result_failure (failure) * result_nomatch (no matches found) * result_success (matches found) */ get searchresult() { return this._searchresult; }, /** * @return {number} the index of the default item that should be entered if * none is selected */ get defaultindex() { return this._defaultindex; }, /** * @return {string} description of the cause of a search failure */ get errordescription() { ...
... return this._errordescription; }, /** * @return {number} the number of matches */ get matchcount() { return this._results.length; }, /** * @return {string} the value of the result at the given index */ getvalueat: function(index) { return this._results[index]; }, /** * @return {string} the
comment of the result at the given index */ get
commentat: function(index) { if (this._
comments) return this._
comments[index]; else return ''; }, /** * @return {string} the style hint for the result at the given index */ getstyleat: function(index) { if (!this._
comments || !this._
comments[index]) return null; // not a category label, so no special styling if (index == 0) return 'suggestfirst'; // category l...
...And 10 more matches
Web Video Text Tracks Format (WebVTT) - Web APIs
zero or more cues or
comments.
... we can also place
comments in our .vtt file, to help us remember important information about the parts of our file.
... webvtt
comments
comments are an optional component that can be used to add information to a webvtt file.
...And 10 more matches
Properly Using CSS and JavaScript in XHTML Documents - Archive of obsolete content
comments (<!—— ...
... content contained within
comments (<!—— ...
... use of
comments inside inline style and script authors who are familiar with html commonly enclose the contents of inline style and script tags in
comments in order to hide the contents of the tags from browsers which do not understand them.
...And 9 more matches
Organizing your CSS - Learn web development
comment your css adding
comments to your css will help any future developer work with your css file, but will also help you when you come back to the project after a break.
... /* this is a css
comment it can be broken onto multiple lines.
... */ a good tip is to add a block of
comments between logical sections in your stylesheet too, to help locate different sections quickly when scanning through, or even give you something to search for to jump right into that part of the css.
...And 9 more matches
JXON - Archive of obsolete content
all other information (like processing instructions, schemas,
comments, etc.) will be lost.
...un
comment the optional properties first!
...try: alert(json.stringify(myobject)); note: if you want to freeze the whole object tree (because of the "static" nature of an xml document), un
comment the string: /* object.freeze(this); */.
...And 8 more matches
ARIA annotations - Accessibility
an addition and/or deletion in an editable document), and
comments (e.g.
... an editorial
comment related to a part of a document under review).
... role="
comment" — semantically denotes a
comment/reaction to some content on the page, or to a previous
comment.
...And 8 more matches
Installer Script - Archive of obsolete content
log
comment("insufficient disk space: " + dirpath); 13.
... log
comment(" required : " + spacerequired + " k"); 14.
... log
comment(" available: " + spaceavailable + " k"); 15.
...And 7 more matches
Textbox (XPFE autocomplete) - Archive of obsolete content
te, disabled, disablehistory, enablehistory, focused, forcecomplete, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, ignoreblurwhilesearching, inputtooltiptext, label, maxlength, maxrows, minresultsforpopup, minresultsforpopup, nomatch, onchange, onerrorcommand, oninput, onsearchcomplete, ontextcommand, ontextentered, ontextrevert, ontextreverted, open, readonly, searchsessions, show
commentcolumn, show
commentcolumn, showpopup, size, tabindex, tabscrolling, tabscrolling, timeout, type, useraction, value properties accessible, alwaysopenpopup, autofill, autofillaftermatch, completedefaultindex, crop, disableautocomplete, disabled, editable, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputfield, issearching, iswaiting, label, maxlength, maxro...
...ws, minresultsforpopup, nomatch, open, popup, popupopen, resultspopup, searchcount, searchparam, searchsessions, selectionend, selectionstart, sessioncount, show
commentcolumn, showpopup, size, tabindex, tabscrolling, textlength, textvalue, timeout, type, useraction, value methods addsession, clearresults, getdefaultsession, getresultat, getresultcount, getresultvalueat, getsession, getsessionbyname, getsessionresultat, getsessionstatusat, getsessionvalueat, removesession, select, setselectionrange, syncsessions examples (example needed) attributes accesskey type: character this should be set to a character that is used as a shortcut key.
...obsolete since gecko 25 show
commentcolumn obsolete since gecko 1.9.1 type: boolean if true, a
comment column appears in the popup.
...And 6 more matches
Localization content best practices
it's important to consider this when adding strings, and especially localization
comments for strings that contain references, or obscure technical details.
... add localization notes localizers usually work on the localizable files without the context of the source files including the localized strings; it is important to add
comments to the localizable files themselves, too.
... these
comments are generally referred to as localization notes.
...And 6 more matches
Examples - Archive of obsolete content
</p> </body> </html> back to the article problem 2 <!-- this file should have a .xhtml extension --> <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-us" xml:lang="en-us"> <head> <title>problem 2 -
comments in xhtml</title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> <style type="text/css"> <!-- body {background-color: blue; color: yellow; } --> </style> <script type="text/javascript"> <!-- var i = 0; var sum = 0; for (i = 0; i < 10; ++i) { sum += i; } alert('sum = ' + sum); // --> </script> </head> <body> <h1...
...>problem 2 -
comments in xhtml</h1> <p> this document is valid xhtml 1.0 strict served as <code>application/xhtml+xml</code>.
... </p> <p> this document contains inline css rules contained in a <code>style</code> element and surrounded by a
comment and javascript contained in a <code>script</code> element and surrounded by a
comment.
...And 5 more matches
Creating localizable web applications
in gettext use
comments and contexts).
...this is useful for strings occurring in the webapp multiple times, like "return to top", "
comments", "click to see larger image" etc.
... use gettext
comments use
comments in the code to help localizers understand what they are translating.
...And 5 more matches
gettext
, $message); } else { return _($message); } } // new gettext keyword for plural strings with optional context argument function n___($message, $message_plural, $num, $context ="") { if($context != "") { return npgettext($context, $message, $message_plural, $num); } else { return ngettext($message, $message_plural, $num); } } // l10n: this is a block
comment one line directly above the gettext function call.
...echo ___('a simple string.'); echo /* l10n: this is an inline
comment.
...*/ ___('a string with context.', 'unique context string'); $num = 1; // l10n: this is another block
comment that will be extracted by xgettext.
...And 5 more matches
Browser detection using the user agent - HTTP
presto opera/xyz note: presto is no longer used in opera browser builds >= version 15 (see 'blink') trident trident/xyz internet explorer put this token in the
comment part of the user agent string edgehtml edge/xyz the non-chromium edge puts its engine version after the edge/ token, not the application version.
...gecko puts the gecko version number in the
comment part of the user agent after the rv: string.
...it is a fixed string between two semi-colons, in the
comment part of the user agent.
...And 5 more matches
Using Breakpoints in Venkman - Archive of obsolete content
meta
comments you can also embed scripted breakpoints directly into the source code you are debugging by using a venkman facility called meta
comments.
... meta
comments are specially formatted
comments that pull in the script named after the
comment and specify how to treat the output of that script.
... the following meta
comment types are available: the //@jsd_log
comment will insert a breakpoint which is set to execute the script that follows without stopping.
...And 4 more matches
How CSS is structured - Learn web development
comments as with any coding work, it is best practice to write
comments along with css.
... css
comments begin with /* and end with */.
... in the example below,
comments mark the start of distinct sections of code.
...And 4 more matches
Index - Web APIs
this is an abstract interface, meaning there aren't any object of type characterdata: it is implemented by other interfaces, like text,
comment, or processinginstruction which aren't abstract.
... 647
comment api, dom, reference the
comment interface represents textual notations within markup; although it is generally not visually shown, such
comments are available to be read in the source view.
... 648
comment() api,
comment, constructor, dom the
comment() constructor returns a newly created
comment object with the optional domstring given in parameter as its textual content.
...And 4 more matches
Learn XPI Installer Scripting by Example - Archive of obsolete content
fies disk space in kilobytes function verifydiskspace(dirpath, spacerequired) { var spaceavailable; // get the available disk space on the given path spaceavailable = filegetdiskspaceavailable(dirpath); // convert the available disk space into kilobytes spaceavailable = parseint(spaceavailable / 1024); // do the verification if(spaceavailable < spacerequired) { log
comment("insufficient disk space: " + dirpath); log
comment(" required : " + spacerequired + " k"); log
comment(" available: " + spaceavailable + " k"); return(false); } return(true); } in the verifydiskspace block, filegetdiskspaceavailable is called with dirpath as its expected input.
...in the browser.xpi install script, the files are added in lines 26-41: err = adddirectory("program", "6.0.0.2000110807", "bin", // jar source folder communicatorfolder, // target folder "", // target subdir true ); // force flag log
comment("adddirectory() returned: " + err); // create the plugins folder next to mozilla var pluginsfolder = getfolder("plugins"); if (!fileexists(pluginsfolder)) { var ignoreerr = dircreate(pluginsfolder); log
comment("dircreate() returned: " + ignoreerr); } else log
comment("plugins folder already exists"); in this case, the files are contained within a single directory, ...
... the actual install code used to execute the installation appears in theinstall.js file as follows: if (err==success) { err = performinstall(); log
comment("performinstall() returned: " + err); } else { cancelinstall(err); log
comment("cancelinstall() due to error: " + err); } } else cancelinstall(insufficient_disk_space); performinstall is the function used to execute the install once it has been initialized and loaded, and it is the last step to installing the software.
...And 3 more matches
textbox (Toolkit autocomplete) - Archive of obsolete content
pup, autocompletesearch, autocompletesearchparam, completedefaultindex, completeselectedindex,crop, disableautocomplete, disabled, disablekeynavigation, enablehistory, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputtooltiptext, label, maxlength, maxrows, minresultsforpopup, nomatch, onchange, oninput, onsearchcomplete, ontextentered, ontextreverted, open, readonly,show
commentcolumn, showimagecolumn, size, tabindex, tabscrolling, timeout, type, value properties accessibletype, completedefaultindex, controller, crop, disableautocomplete, disablekeynavigation, disabled, editable, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputfield, label, maxlength, maxrows, minresultsforpopup, open, popup, popupopen, searchcount, searchparam, sele...
...ctionend, selectionstart, show
commentcolumn, showimagecolumn,size, tabindex, tabscrolling, textlength, textvalue, timeout, type, value methods getsearchat, onsearchcomplete, ontextentered, ontextreverted, select, setselectionrange examples <textbox type="autocomplete" autocompletesearch="history"/> attributes accesskey type: character this should be set to a character that is used as a shortcut key.
... show
commentcolumn new in thunderbird 3requires seamonkey 2.0 type: boolean if true, a
comment column appears in the popup.
...And 3 more matches
Browser Feature Detection - Archive of obsolete content
6 & 7 opera 8.54 - 9.01 document.doctype true true true document.implementation true true true document.documentelement true true true document.createelement() true true true document.createdocumentfragment() true true true document.createtextnode() true true true document.create
comment() true true true document.createcdatasection() true false true document.createprocessinginstruction() true false true document.createattribute() true true true document.createentityreference()obsolete since gecko 7 (method present but only returns null: bug 9850) false false document.getelementsbytagname() ...
...6 & 7 opera 8.54 - 9.01 document.doctype true true true document.implementation true true true document.documentelement true true true document.createelement() true true true document.createdocumentfragment() true true true document.createtextnode() true true true document.create
comment() true true true document.createcdatasection() true false true document.createprocessinginstruction() true false true document.createattribute() true true true document.createentityreference()obsolete since gecko 7 true false false document.getelementsbytagname() true true true document.imp...
... dom level 1 html support for properties/methods in document name firefox 1.5 ie 6 & 7 opera 8.54 - 9.01 document.documentelement true true true document.createelement() true true true document.createdocumentfragment() true true true document.createtextnode() true true true document.create
comment() true true true document.createattribute() true true true document.getelementsbytagname() true true true document.title true true true document.referrer true true true document.domain true true true document.url true true true document.body true true true ...
...And 3 more matches
Writing JavaScript for XHTML - Archive of obsolete content
the code looks something like this: <script type="text/javascript"> //<!-- window.alert("hello world!"); //--> </script> solution: the cdata trick this problem usually arises, when inline scripts are included in
comments.
...in the age of xml
comments are what they were intended:
comments.
... before processing the file, all
comments will be stripped from the document, so enclosing your script in them is like throwing your lunch in a piranha pool.
...And 3 more matches
Getting started with HTML - Learn web development
html
comments html has a mechanism to write
comments in the code.
... browsers ignore
comments, effectively making
comments invisible to the user.
... the purpose of
comments is to allow you to include notes in the code to explain your logic or coding.
...And 3 more matches
Arrays - Learn web development
in the editable example below there are
comments containing numbers — each of these marks a place where you have to add something to the code.
... they are as follows: below the // number 1
comment are a number of strings, each one containing a product name and price separated by a colon.
... on the same line as the // number 2
comment is the beginning of a for loop.
...And 3 more matches
What is JavaScript? - Learn web development
comments as with html and css, it is possible to write
comments into your javascript code that will be ignored by the browser, and exist simply to provide instructions to your fellow developers on how the code works (and you, if you come back to your code after six months and can't remember what you did).
...
comments are very useful, and you should use them often, particularly for larger applications.
... there are two types: a single line
comment is written after a double forward slash (//), e.g.
...And 3 more matches
How whitespace is handled by HTML, CSS, and in the DOM - Web APIs
* * @param nod a node implementing the |characterdata| interface (i.e., * a |text|, |
comment|, or |cdatasection| node * @return true if all of the text content of |nod| is whitespace, * otherwise false.
... * @return true if the node is: * 1) a |text| node that is all whitespace * 2) a |
comment| node * and otherwise false.
... */ function is_ignorable( nod ) { return ( nod.nodetype == 8) || // a
comment node ( (nod.nodetype == 3) && is_all_ws(nod) ); // a text node, all ws } /** * version of |previoussibling| that skips nodes that are entirely * whitespace or
comments.
...And 3 more matches
Accessibility documentation index - Accessibility
5 aria annotations aria, accessibility, wai-aria, annotations,
comments, details, suggestions wai-aria version 1.3 sees the addition of a set of new features, collectively known as aria annotations, which allow the creation of accessible annotations inside web documents.
...an addition and/or deletion in an editable document), and
comments (e.g.
... an editorial
comment related to a part of a document under review).
...And 3 more matches
List of default Accept values - HTTP
user agent value
comment firefox text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 (since firefox 66) text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 (in firefox 65) text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 (before) in firefox 65 and earlier, this value can be modified using the network.http.accept.default parame...
... user agent value
comment firefox image/webp,*/* (since firefox 65) */* (since firefox 47) image/png,image/*;q=0.8,*/*;q=0.5 (before) this value can be modified using the image.http.accept parameter.
... user agent value
comment firefox earlier than 3.6 no support for <video> firefox 3.6 and later video/webm,video/ogg,video/*;q=0.9,application/ogg;q=0.7,audio/*;q=0.6,*/*;q=0.5 see bug 489071 source chrome */* source internet explorer 8 or earlier no support for <video> values for audio resources when an audio file is requested, like via the <audio> htm...
...And 3 more matches
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
value description 1 element node 2 attribute node 3 text node 4 cdata section node 5 entity reference node 6 entity node 7 processing instruction node 8
comment node 9 document node 10 document type node 11 document fragment node 12 notation node nodevalue returns the value of the current node.
... for nodes that contain text, such as text and
comment nodes, it will return their string value.
...for example, an element node has type 1, while a text node has type 3 and a
comment node is type 8.
...And 2 more matches
Index - Learn web development
3rd party, api, article, beginner, browser, codingscripting, core, javascript, learn, script,
comments, external, inline, l10n:priority, what so there you go, your first step into the world of javascript.
... 118 fundamental css comprehension assessment, beginner, css, codingscripting, selectors, style, syntax, box model,
comments, rules you've covered a lot in this module, so it must feel good to have reached the end!
... 121 organizing your css beginner, css, codingscripting, learn,
comments, formatting, methodologies, organizing, post-processor, pre-processor, styleguide as you start to work on larger stylesheets and big projects you will discover that maintaining a huge css file can be challenging.
...And 2 more matches
Contributing to the Mozilla code base
even with no assignee, it is polite to check if someone has recently
commented that they're looking at fixing the issue.
... once you have found something to work on, go ahead and
comment!
...here are some further resources to help: ask for help in a
comment on the bug, or in #introduction:mozilla.org or #developers:mozilla.org check out https://developer.mozilla.org/docs/developer_guide and its parent document, https://developer.mozilla.org/docs/mozilla our reviewer checklist is very useful, if you have a patch near completion, and seek a favorable review utilize our build tool mach, its linting, static analysis, and other code checking features ...
...And 2 more matches
AudioTrack.enabled - Web APIs
example this example switches between the main and
commentary audio tracks of a media element.
... function swap
commentarymain() { var videoelem = document.getelementbyid("main-video"); var audiotrackmain; var audiotrack
commentary; videoelem.audiotracks.foreach(track) { if (track.kind === "main") { audiotrackmain = track; } else if (track.kind === "
commentary") { audiotrack
commentary = track; } } if (audiotrackmain && audiotrack
commentary) { var
commentaryenabled = audiotrack
commentary.enabled; audiotrack
commentary.enabled = audiotrackmain.enabled; audiotrackmain.enabled =
commentaryenabled; } } the swap
commentarymain() function above finds within the audio tracks of the <video> element "main-video" the audio tracks whose kind values are "main" and "
commentary".
... these represent the primary audio track and the
commentary track.
...And 2 more matches
HTML5 Parser - Developer guides
lack of reparsing prior to html5, parsers reparsed the document if they hit the end of the file within certain elements or within
comments.
... for example, if the document lacked a </title> closing tag, the parser would reparse to look for the first '<' in the document, or if a
comment was not closed, it would look for the first '>'.
... if you forget to close a
comment, the page will most likely fail to be parsed.
...And 2 more matches
Using the application cache - HTML: Hypertext Markup Language
cache manifest # v1 - 2011-08-13 # this is a
comment.
... the "v1"
comment in the example above is there for a good reason.
... example 2: a more complete cache manifest file the following is a more complete cache manifest file for the imaginary web site at www.example.com: cache manifest # v1 2011-08-14 # this is another
comment index.html cache.html style.css image1.png # use from network if available network: network.html # fallback content fallback: .
...And 2 more matches
Grammar and types - JavaScript
the source text of javascript script gets scanned from left to right, and is converted into a sequence of input elements which are tokens, control characters, line terminators,
comments, or whitespace.
... (spaces, tabs, and newline characters are considered whitespace.)
comments the syntax of
comments is the same as in c++ and in many other languages: // a one line
comment /* this is a longer, * multi-line
comment */ /* you can't, however, /* nest
comments */ syntaxerror */
comments behave like whitespace, and are discarded during script execution.
... note: you might also see a third type of
comment syntax at the start of some javascript files, which looks something like this: #!/usr/bin/env node.
...And 2 more matches
MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
name"); var env_home = getenv("homepath"); } var env_mozdebug= getenv("mozilla_debug"); // 2) define here (because if set after "3)" below it doesn't work !) processldapvalues which is eventually called by getldapattributes() just below, // check getldapattributes() code from $mozilla_home/defaults/autoconfig/prefcalls.js to see the inside call to "user defined" processldapvalues /*
commented all this section about ldap calls, not supported in ff5 packages :-( function processldapvalues (values) { if(values) { // set the global var with the values returned from the ldap query ldap_values = values; var uid = getldapvalue ( values ,"uid" ); var cn = getldapvalue ( values ,"cn" ); var mail = getldapvalue ( values ,"mail" ); var url = getldapvalu...
... // getldapattributes("ldap2.int-evry.fr","ou=people,dc=int-evry,dc=fr","uid=" + env_user,"uid,cn,mail,labeleduri"); // close the try, and call the catch() } catch(e) {displayerror("lockedpref", e);} if ldap call are un
commented in the preference file above, then i get a popup with: netscape.cfg/autoconfig failed.
...bug 206294: -------
comment #14 from daniel wang 2003-11-06 09:06 pdt [reply] ------- jehan procaccia, you need to change 5.8 to reflect what i said in
comment 21.
... // 1) env variables if(getenv("user") != "") { // *nix settings var env_user = getenv("user"); var env_home = getenv("home"); } else { // windows settings var env_user = getenv("username"); var env_home = getenv("homepath"); } var env_mozdebug= getenv("mozilla_debug"); final production script here's the complete final and
commented production script: //mozilla autoconfiguration, jehan procaccia & roberto aguilar //put everything in a try/catch try { /* 1) define environment variables, 2) list & randomize ldap replicas, 3) define processldapvalues(), 4) call ldap server to get ldap attributes (mail & cn) getldapattributes() 5) set user preferences */ // 1) env variables if(getenv("user") != "") { // *nix settings ...
The global XML object - Archive of obsolete content
the following example defines the foocount() method, which returns the amount of <foo> elements in the xml: xml.prototype.function::foocount = function foocount() { return this..foo.length(); }; <foobar><foo/><foo/><foo/></foobar>.foocount() // returns 3 ignore
comments true by default.
... this property tells e4x to ignore
comment nodes when serializing and filtering.
... this means that if ignore
comments is true, the list returned by .
comments() will be empty.
... observe: var element = <foo> <!-- my
comment --> <bar/> </foo>; element.
comments().length(); // returns 0 element.toxmlstring(); // returns <foo><bar/></foo> xml.ignore
comments = false; element = <foo> <!-- my
comment --> <bar/> </foo>; element.
comments().length(); // returns 1 element.toxmlstring(); // returns <foo><!-- my
comment --><bar/></foo> ignoreprocessinginstructions true by default.
@cc_on - Archive of obsolete content
the @cc_on statement activates conditional compilation support within
comments in a script.
... syntax @cc_on remarks the @cc_on statement activates conditional compilation within
comments in a script.
... when you write a script for a web page, always put conditional compilation code in
comments.
... it is strongly recommended that you use the @cc_on statement in a
comment, so that browsers that do not support conditional compilation will accept your script as valid syntax: an @if or @set statement outside of a
comment also activates conditional compilation.
Test your skills: Other controls - Learn web development
associate it semantically with the provided "
comment" label.
... give the input 35 columns, and 10 rows of space in which to add
comments.
... give the
comments a maximum length of 100 characters.
... associate it semantically with the provided "
comment" label.
JavaScript basics - Learn web development
comments
comments are snippets of text that can be added along with code.
... the browser ignores text marked as
comments.
... you can write
comments in javascript just as you can in css: /* everything in between is a
comment.
... */ if your
comment contains no line breaks, it's an option to put it behind two slashes like this: // this is a
comment operators an operator is a mathematical symbol which produces a result based on two values (or variables).
Handling common HTML and CSS problems - Learn web development
note: see ie conditional
comments for the best way to do this.
... 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.
... note: sitepoint's internet explorer conditional
comments provides a useful beginner's tutorial/reference that explains the conditional
comment syntax in detail.
...the use case we mentioned earlier (making modern semantic elements styleable in old versions of ie) can be achieved easily using conditional
comments, for example you could put something like this in your ie stylesheet: aside, main, article, section, nav, figure, figcaption { display: block; } it isn't that simple, however — you also need to create a copy of each element you want to style in the dom via javascript, for them to be styleable; this is a strange quirk, and we won't bore you with the details here.
What to do and what not to do in Bugzilla
before you have canconfirm, you can still do good triaging by leaving
comments with useful information on the bug that will help to confirm it.
... the same is true for editbugs: leave
comments with the information you'd like to be able to edit into the bug, and that will help you get the editbugs permissions quickly.
...if there are only a few
comments in the bug, it may be reopened only if the original reporter provides more info, or confirms someone else's steps to reproduce.
...when performing bug reassignments, keep the following things in mind: always remember to check the reassign to default owner and qa contact radio button under the
comment textbox.
Examples
nents.utils.import("resource://gre/modules/promise.jsm"); var mypromise = myuserdefinedpromise(); mypromise.then( function(asuccessreason) { alert('mypromise was succesful and reason was = "' + asuccessreason + '"'); }, function(arejectreason) { alert('mypromise failed for reason = "' + uneval(arejectreason) + '"'); } ); function myuserdefinedpromise() { try { //var myvaris
commented = 'hi'; // i
commented this out s oit is undefined, this will cause rejected alert(myvaris
commented); return promise.resolve('yay success'); // this makes the success function trigger with asuccessreason being 'yay success' but because i
commented out the var 2 lines above, it will error out on the alert(myvaris
commented) and never get to this success line.
...un
comment the line `//var myvaris
commented.....` and the promise will complete succesfully.
... now replace the `alert(myvaris
commented)` with `throw new error('i feel like rejecting this promise')` like this: components.utils.import("resource://gre/modules/promise.jsm"); var mypromise = myuserdefinedpromise(); mypromise.then( function(asuccessreason) { alert('mypromise was succesful and reason was = "' + asuccessreason + '"'); }, function(arejectreason) { alert('mypromise failed for reason = "' + uneval(arejectreason) + '"'); } ); function myuserdefinedpromise() { try { var myvaris
commented = 'hi'; alert(myvaris
commented); throw new error('i feel like rejecting this promise'); return promise.resolve('yay success'); // this makes the success function trigger with asuccessreason being 'yay success' but because i
commented out the var 2 lines above, it wi...
...ponents.utils.import("resource://gre/modules/promise.jsm"); var mypromise = myuserdefinedpromise(); mypromise.then( function(asuccessreason) { alert('mypromise was succesful and reason was = "' + asuccessreason + '"'); }, function(arejectreason) { alert('mypromise failed for reason = "' + uneval(arejectreason) + '"'); } ); function myuserdefinedpromise() { try { var myvaris
commented = 'hi'; alert(myvaris
commented); // throw new error('i feel like rejecting this promise'); return promise.resolve('yay success'); // this takes place } catch(ex) { return promise.reject(ex); } } you must return `promise.resolve` in order to make the promise complete successfuly.
Localization notes
localizers usually work on the localizable files without the context of the source files including the localized strings; it is important to add
comments to the localizable files themselves, too.
... these
comments are generally referred to as localization notes.
...there are a number of automated tools that parse these
comments for easier access and use by localizers.
... dtd files <!-- localization note (entity name):
comment --> properties files # localization note (key):
comment file-wide
comments should use the same format, be at the top of the file (after the license header, though) and just drop the (entity name/key) reference.
Hacking Tips
use the vixl debugger in the simulator (arm64) set a breakpoint (see the
comments above about masm.breakpoint()) and run with the environment variable use_debugger=1.
...a zone starts with several "
comment lines" that start with hashes.
... the first
comment declares the zone.
...js/src/gc/heap.h contains a
comment describing an example usage.
Recommended Drag Types - Web APIs
lines that begin with a number sign (#) are
comments, and should not be considered urls.
... you can use
comments to indicate the purpose of a url, the title associated with a url, or other data.
... the text/plain fallback for multiple links should include all urls, but no
comments.
... for example, this sample text/uri-list data contains two links and a
comment: http://www.mozilla.org #a second link http://www.example.com when retrieving a dropped link, ensure you handle when multiple links are dragged, including any
comments.
Node.nodeType - Web APIs
it distinguishes different kind of nodes from each other, such as elements, text and
comments.
... node.
comment_node 8 a
comment node, such as <!-- … -->.
...es different types of nodes document.nodetype === node.document_node; // true document.doctype.nodetype === node.document_type_node; // true document.createdocumentfragment().nodetype === node.document_fragment_node; // true var p = document.createelement("p"); p.textcontent = "once upon a time…"; p.nodetype === node.element_node; // true p.firstchild.nodetype === node.text_node; // true
comments this example checks if the first node inside the document element is a
comment, and displays a message if not.
... var node = document.documentelement.firstchild; if (node.nodetype !== node.
comment_node) { console.warn("you should
comment your code!"); } specifications specification status
comment domthe definition of 'node.nodetype' in that specification.
URLSearchParams.set() - Web APIs
line #41:
comment out this line to stop dumping the search parameters to the console (debug).
... line #44: tries to automatically open a new window/tab with the generated url (when un
commented).
...chparams.set( 'input', '\u2911\u20dc' )// ⤑⃜ theurl.searchparams.set( 'text', atext.join('\n') ) if( bdebug ){ // display the key/value pairs for(var pair of theurl.searchparams.entries()) { console.debug(pair[0] + ' = \'' + pair[1] + '\''); } console.debug(theurl) } return theurl } var url = genurl( /(^\s*\/\/|\s*[^:]\/\/).*\s*$|\s*\/\*(.|\n)+?\*\/\s*$/gm // single/multi-line
comments // /(^\s*\/\/.*|\s*[^:]\/\/.*)/g // single-line
comments ,[ "these should work:", "", "// eslint-disable-next-line no-unused-vars", "lockpref( 'keyword.url',\t\t'https://duckduckgo.com/html/?q=!+' )\t// test", "/*", " * bla bla ", "*/", "", "/* bla bla */", "", "// bla bla ", "", "these shouldn\'t work:", "console.log(\"http://foo.co.uk/\")", "var u...
...rl = \"http://regexr.com/foo.html?q=bar\"", "alert(\"https://mediatemple.net\")", ] , true ) console.info( url, url.tostring() ) // window.open( url, 'regex_site' ) specifications specification status
comment urlthe definition of 'set()' in that specification.
ARIA: Mark role - Accessibility
examples in the following example we have a document section that has been
commented.
... the
commented section is marked up using <span role="mark">.
... <p>the last half of the song is a slow-rising crescendo that peaks at the <span role="mark" aria-details="thread-1">end of the guitar solo</span>, before fading away sharply.</p> <div role="
comment" id="thread-1" data-author="chris"> <h3>chris said</h3> <p class="
comment-text">i really think this moment could use more cowbell.</p> <p><time datetime="2019-03-30t19:29">march 30 2019, 19:29</time></p> </div> the related
comment is marked up using an html structure wrapped with a <div> containing role="
comment".
... to associate the
comment with the text being
commented, we need to wrap the
commented text with an element containing the aria-details attribute, the value of which should be the id of the
comment.
:empty - CSS: Cascading Style Sheets
comments, processing instructions, and css content do not affect whether an element is considered empty.
...--></div> <div class="box">i will be pink.</div> <div class="box"> <!-- i will be pink in older browsers because of the whitespace around this
comment.
... --> </div> <div class="box"> <p><!-- i will be pink in all browsers because of the non-collapsible whitespace and elements around this
comment.
...| the paciello group hidden content for better a11y | go make things mdn understanding wcag, guideline 2.4 explanations understanding success criterion 2.4.4 | w3c understanding wcag 2.0 specifications specification status
comment selectors level 4the definition of 'the :empty pseudo-class' in that specification.
JavaScript Daemons Management - Archive of obsolete content
about the “callback arguments” polyfill in order to make this framework compatible with internet explorer (which doesn't support sending additional parameters to timers' callback function, neither with settimeout() or setinterval()) we included the ie-specific compatibility code (
commented code), which enables the html5 standard parameters' passage functionality in that browser for both timers (polyfill), at the end of the daemon.js module.
... when a method requires the presence of another method (it is relatively rare), there is a
comment which explains why.
... if there are not
comments to that method it depends only on the base system.
Tabbed browser - Archive of obsolete content
the
comments normally mark where you should be inserting your own code.
...if you don't want do anything when frames/iframes // are loaded in this web page, un
comment the following line: // return; // find the root document: win = win.top; } } } // do not try to add a callback until the browser window has // been initialised.
... components.utils.import('resource://gre/modules/services.jsm'); services.obs.addobserver(httpobs, 'http-on-modify-request', false); //services.obs.removeobserver(httpobs, 'http-on-modify-request'); //un
comment this line, or run this line when you want to remove the observer var httpobs = { observe: function (asubject, atopic, adata) { if (atopic == 'http-on-modify-request') { /*start - do not edit here*/ var ohttp = asubject.queryinterface(components.interfaces.nsihttpchannel); //i used nsihttpchannel but i guess you can use nsichannel, im not sure why though ...
Using XPInstall to Install Plugins - Archive of obsolete content
error code "+err); log
comment("adding file "+plugin_file+" failed.
...error code "+err); log
comment("adding file "+component_file+" failed.
...c:\winnt\system32\ directory var windirectory = getfolder("win system"); // create the folder c:\winnt\system32\myplugin var dllwin32folder = getfolder("file:///", windirectory+"\\myplugin\\"); //install dll to c:\windows folder copyerr = addfile("", version, plugin_file, dllwin32folder, null); if (copyerr != 0) { log
comment("first install:"+copyerr); return copyerr; } // install the xpt file to c:\winnt\system32\myplugin folder var xptwin32folder = getfolder("file:///", windirectory+"\\myplugin\\"); copyerr = addfile("", version, component_file, xptwin32folder, null); if (copyerr != 0) { log
comment("first install:"+copyerr); return copyerr; } once the secondary installation has t...
Windows Install - Archive of obsolete content
function verifies disk space in kilobytes function verifydiskspace(dirpath, spacerequired) { var spaceavailable; // get the available disk space on the given path spaceavailable = filegetdiskspaceavailable(dirpath); // convert the available disk space into kilobytes spaceavailable = parseint(spaceavailable / 1024); // do the verification if(spaceavailable < spacerequired) { log
comment("insufficient disk space: " + dirpath); log
comment(" required : " + spacerequired + " k"); log
comment(" available: " + spaceavailable + " k"); return(false); } return(true); } function updatewinreg4ren8dot3() { var fprogram = getfolder("program"); var ftemp = getfolder("temporary"); //notes: // can't use a double backslash before subkey // - windows alrea...
...le.windowsgetshortname(flongfilepath); if(sshortfilepath) { fren8dot3ini.writestring("rename", sshortfilepath, flongfilepath); binicreated = true; } } if(binicreated) updatewinreg4ren8dot3() ; } return(0); } // main var srdest; var err; var fprogram; srdest = 449; err = initinstall(prettyname, regname, "6.0.0.2000110801"); log
comment("initinstall: " + err); fprogram = getfolder("program"); log
comment("fprogram: " + fprogram); if(verifydiskspace(fprogram, srdest)) { setpackagefolder(fprogram); err = adddirectory("", "6.0.0.2000110801", "bin", // dir name in jar to extract fprogram, // where to put this file // (returned from getfolder) "", // subdir name to create relative to fprogram tru...
...e); // force flag log
comment("adddirectory() returned: " + err); // check return value if(err == success) { err = performinstall(); log
comment("performinstall() returned: " + err); } else cancelinstall(err); } else cancelinstall(insufficient_disk_space); // end main ...
Index - Archive of obsolete content
333 show
commentcolumn xul attributes, xul reference no summary!
... 377 textbox.show
commentcolumn no summary!
... 833 show
commentcolumn xul properties, xul reference no summary!
Property Files - Archive of obsolete content
a property file can also include
comments.
... a line that begins with a hash sign ('#') is treated as a
comment: # this is a
comment welcomemessage=hello, world!
... # this is another
comment goodbyemessage=come back soon!
reftest opportunities files - Archive of obsolete content
any assistance or
comments here would be appreciated.
...if you create a reftest for any of these bugs please attach the reftest to the bug and ask for review from the assignee (or anyone else that seems appropriate judging from
comments in the bug).
...l parser/htmlparser/tests/html/del009.html parser/htmlparser/tests/html/del008.html parser/htmlparser/tests/html/del007.html parser/htmlparser/tests/html/del006.html parser/htmlparser/tests/html/del005.html parser/htmlparser/tests/html/del004.html parser/htmlparser/tests/html/del003.html parser/htmlparser/tests/html/del002.html parser/htmlparser/tests/html/del001.html parser/htmlparser/tests/html/
comments.html parser/htmlparser/tests/html/col016.html parser/htmlparser/tests/html/col015.html parser/htmlparser/tests/html/col014.html parser/htmlparser/tests/html/col013.html parser/htmlparser/tests/html/col012.html parser/htmlparser/tests/html/col011.html parser/htmlparser/tests/html/col010.html parser/htmlparser/tests/html/col009.html parser/htmlparser/tests/html/col008.html parser/htmlparser/tests/...
Gecko Compatibility Handbook - Archive of obsolete content
invalid
comments gecko also has three parsing modes: quirks, almost standards, and standards.
... quirks mode allows the use of invalid
comments containing two dashes -- while standards and almost standards modes do not.
... <!---- this is an invalid html
comment accepted in quirks
comment parsing ----> <!-- this is a valid html
comment accepted in stricts
comment parsing --> for the exact rules on which doctypes invoke quirks vs.
Scratchpad - Archive of obsolete content
for example, if you enter the code: window then choose inspect, the object inspector is shown that looks something like this: display the display option executes the selected code, then inserts the result directly into your scratchpad editor window as a
comment, so you can use it as a repl.
... keyboard shortcuts command windows macos linux open the scratchpad shift + f4 shift + f4 shift + f4 run scratchpad code ctrl + r cmd + r ctrl + r run scratchpad code, display the result in the object inspector ctrl + i cmd + i ctrl + i run scratchpad code, insert the result as a
comment ctrl + l cmd + l ctrl + l re-evaluate current function ctrl + e cmd + e ctrl + e reload the current page, then run scratchpad code ctrl + shift + r cmd + shift + r ctrl + shift + r save the pad ctrl + s cmd + s ctrl + s open an existing pad ctrl + o cmd + o ctrl + o create a new pad ctrl + n cmd + n ...
...rl + v undo ctrl + z cmd + z ctrl + z redo ctrl + shift + z / ctrl + y cmd + shift + z / cmd + y ctrl + shift + z / ctrl + y indent tab tab tab unindent shift + tab shift + tab shift + tab move line(s) up alt + up alt + up alt + up move line(s) down alt + down alt + down alt + down
comment/un
comment line(s) ctrl + / cmd + / ctrl + / ...
Using Firebug and jQuery (Screencast) - Archive of obsolete content
we're going to take an introductory look at the firebug firefox extension and the jquery javascript library - combining the two to build a reusable bookmarklet that can manipulate digg posts and
comments.
... more tips: here are some more jquery selectors that you can use on a digg post: $("li.c-bury > div").remove(); - remove all buried
comments, but none of the direct replies.
... $("div.c-body").show(); - show all
comments, even ones that've been buried.
Browser Detection and Cross Browser Support - Archive of obsolete content
mozilla/version followed by a
comment token which gave additional information regarding the operating system being used, etc.
...since other browsers pretended to be netscape browsers and encoded their version information in a non-standard fashion in the user agent
comment area, the task of determining which browser was being used became more complicated than it should have been.
...the branch tag is contained in the
comment area of the user agent string and follows the string 'rv:'.
Reference - Archive of obsolete content
well if you combine the two, you can have inherited private variables: function myclass(){ var property = 5; this.tellme = function(){ return property; } } function myotherclass(){ myclass.apply( this ); } var o = new myotherclass; alert( o.tellme() ); //alerts 5 as you'd expect — the preceding
comment was added by psygnisfive (talk – contribs) on 22:23, 4 december 2006 terminology we need a terminology appendix.
...since it's been 9 months since the last
comment on this, i think i'll go ahead and change all of the examples.
...--george3 11:47, 14 sept 2006 (edt) sgml
comment hiding quirks sgml
comment hiding needs to be mentioned here and its consequences.
Fundamental CSS comprehension - Learn web development
above the two rules, add a css
comment with some text inside it to indicate that this is a set of general styles for the overall page.
...also add three more
comments at the bottom of the css file to indicate styles specific to the setup of the card container, styles specific to the header and footer, and styles specific to the main business card contents.
...write these down somewhere where they can be found later on, such as in a
comment at the top of your css.
CSS basics - Learn web development
html { font-size: 10px; /* px means "pixels": the base font size is now 10 pixels high */ font-family: "open sans", sans-serif; /* this should be the rest of the output you got from google fonts */ } note: anything in css between /* and */ is a css
comment.
... the browser ignores
comments as it renders the code.
... css
comments are a way for you to write helpful notes about your code or logic.
Advanced text formatting - Learn web development
aside in drama, where a character shares a
comment only with the audience for humorous or dramatic effect.
...d>in drama, where a character speaks to themselves, representing their inner thoughts or feelings and in the process relaying them to the audience (but not to other characters.)</dd> <dt>monologue</dt> <dd>in drama, where a character speaks their thoughts out loud to share them with the audience and any other characters present.</dd> <dt>aside</dt> <dd>in drama, where a character shares a
comment only with the audience for humorous or dramatic effect.
... note that it is permitted to have a single term with multiple descriptions, for example: <dl> <dt>aside</dt> <dd>in drama, where a character shares a
comment only with the audience for humorous or dramatic effect.
Client-side storage - Learn web development
the
comments explain in detail what each bit does, but in essence here we are taking the name the user has entered into the text input box and saving it in web storage using setitem(), then running a function called namedisplaycheck() that will handle updating the actual website text.
...the javascript code we'll go through below has detailed
comments to help you understand what's going on.
...we won't look at it all — a lot of it is similar to the previous example, and the code is well-
commented.
Eclipse CDT
(update 2017-03-28: the option index all header variants has been added in version 8.3.0, as explained in a
comment of the mentioned bug.
...ts, replacing the bold paths as appropriate, and make it executable (chmod a+x open-my-workspace.py): #!/usr/bin/env python import os, subprocess eclipse_app_path = "path/to/eclipse.app/contents/macos/eclipse" workspace_path = os.path.join(os.environ['home'], "home/relative/path/to/the/directory/of/the/workspace/you/want/to/open") subprocess.popen([eclipse_app_path, "-data", workspace_path]) # un
comment the following line to automatically close the terminal window # that opens if you run this script by double clicking it in finder.
... gdb timeouts i don't think this old
comment from 2007/2008 is an issue anymore.
Extending a Protocol
unfortunately, it's not really fully documented anywhere - and the ipdl parser gets easily confused (hence us excluding
comments below).
... defining echochild.h create ./dom/ipc/echochild.h, and define it as follows - the inline
comments describe what's going on: #ifndef mozilla_dom_echochild_h #define mozilla_dom_echochild_h // we include the protocol, which is automatically generated for us.
... defining echoparent.h like before, create ./dom/ipc/echoparent.h, and code it as follows - the inline
comments describe what's going on.
Memory reporting
but it's a good idea to add a
comment indicating this decision not to measure, and the names of the unmeasured fields.
... the obvious place for this
comment is within d, but if b has many sub-classes like that, it might be easier to put the
comment above b::sizeofincludingthis.
...this is ok, but it's worth adding a
comment explaining this to the method.
Patches and pushes
review, commit, & land address any review
comments made by the reviewers and update the patch until it receives an r+ rating.
...for example: hg ci -m "bug 654321, copied the
comment from the doc without reading, r=nobody" path-to-changed-files close the bug, copying the url to your change in the closing
comment.
... write up something like this for your
comment: landed this on aurora, http://hg.mozilla.org/releases/l10n/mozilla-aurora/ab-cd/rev/adfe1234feac, marking fixed.
Mork
except when parsing values, whitespace ('\b', '\t', '\r', '\n', '\f', ' ', and '\x7f'), line continuations ('\\' followed by a newline), and
comments (c++ or c style) can be ignored.
... in practice, only c++-style
comments, and the standard whitespace characters ('\t', ' ', '\r', '\n') appear to be used.
...it is structured as a
comment so it can be safely ignored by the parser.
How to build an XPCOM component in JavaScript
comutils.jsm"); then implement your interface the same way you did above, except with a few modifications so that xpcomutils can set it up properly: /*********************************************************** class definition ***********************************************************/ //class constructor function helloworld() { // if you only need to access your component from javascript, un
comment the following line: //this.wrappedjsobject = this; } // class definition helloworld.prototype = { // properties required for xpcom registration: classdescription: "my hello world javascript xpcom component", classid: components.id("{xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx}"), contractid: "@dietrich.ganx4.com/helloworld;1", // [optional] custom factory (an object implement...
...d]; and replace nsgetfactory/nsgetmodule to use this array and xpcomutils: if ("generatensgetfactory" in xpcomutils) var nsgetfactory = xpcomutils.generatensgetfactory(components); // firefox 4.0 and higher else var nsgetmodule = xpcomutils.generatensgetmodule(components); // firefox 3.x so the total simplified version of your component now looks like (of course documentation and
comments aren't a bad thing, but as a template something smaller is nice to have): components.utils.import("resource://gre/modules/xpcomutils.jsm"); function helloworld() { } helloworld.prototype = { classdescription: "my hello world javascript xpcom component", classid: components.id("{xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx}"), contractid: "@dietrich.ganx4.com/helloworld;1", quer...
...you skipped the sections "defining the interface" and "compiling the typelib" above, you un
commented the "wrappedjsobject" line in the class constructor, and you removed the "[components.interfaces.nsihelloworld]" argument for the call to xpcomutils.generateqi() in queryinterface, then you can access your component like this: try { var mycomponent = components.classes['@dietrich.ganx4.com/helloworld;1'] .getservice().wrappedjsobject; alert(...
nsIParserUtils
string converttoplaintext(in astring src, in unsigned long flags, in unsigned long wrapcol); nsidomdocumentfragment parsefragment(in astring fragment, in unsigned long flags, in boolean isxml, in nsiuri baseuri, in nsidomelement element); astring sanitize(in astring src, in unsigned long flags); constants constant value description sanitizerallow
comments (1 << 0) flag for sanitizer: allow
comment nodes.
... by default,
comments and css is removed.
... to preserve
comments, use sanitizerallow
comments.
LDAP Support
this can be accomplished by setting the following preferences: user_pref("mail.autocomplete.
commentcolumn", 2); user_pref("ldap_2.servers.directoryname.autocomplete.
commentformat", "[ou]"); the first preference tells us to use a
comment column in the type down (the default value is 0 for no
comment), and that the value for the
comment is a custom string unique to each directory.
... the
commentformat preference is set on each directory.
... it acts as a template, specifying the extra ldap attribute which should be used in the
comment field along with how the attribute should be formatted.
Use a source map - Firefox Developer Tools
to enable the debugger to work with a source map, you must: generate the source map include a
comment in the transformed file, that points to the source map.
... the
comment's syntax is like this: //# sourcemappingurl=http://example.com/path/to/your/sourcemap.map in the video above we load https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html.
...the compiled source contains a
comment like this, that points to a source map: //# sourcemappingurl=main.js.map in the debugger's source list pane, the original coffeescript source now appears as "main.coffee", and we can debug it just like any other source.
Migrating from Firebug - Firefox Developer Tools
the devtools additionally provide an option to copy the selector of a rule and copy disabled property declarations as
commented out.
...you can paste whole style declarations into an existing rule property declarations which are
commented out are automatically disabled.
...dynamically generated scripts are only listed there when they are named via a //# sourceurl
comment.
AudioTrack.kind - Web APIs
"
commentary" an audio track containing a
commentary.
... this might be used to contain the director's
commentary track on a movie, for example.
... specifications specification status
comment html living standardthe definition of 'audiotrack: kind' in that specification.
AudioTrack.label - Web APIs
for example, a track whose kind is "
commentary" might have a label such as "
commentary with director mark markmarkimark and star donna donnalidon".
... function gettracklist(el) { var tracklist = []; const wantedkinds = [ "main", "alternative", "main-desc", "translation", "
commentary" ]; el.audiotracks.foreach(function(track) { if (wantedkinds.includes(track.kind)) { tracklist.push({ id: track.id, kind: track.kind, label: track.label }); } }); return tracklist; } the resulting tracklist contains an array of audio tracks whose kind is one of those in the array wantedkinds, with each entry providing the track's id, kind, and label.
... specifications specification status
comment html living standardthe definition of 'audiotrack.label' in that specification.
AudioTrack - Web APIs
for example, an audio
commentary track for a movie might have a label of "
commentary with director john q.
... function gettracklist(el) { var tracklist = []; const wantedkinds = [ "main", "alternative", "main-desc", "translation", "
commentary" ]; el.audiotracks.foreach(function(track) { if (wantedkinds.includes(track.kind)) { tracklist.push({ id: track.id, kind: track.kind, label: track.label }); } }); return tracklist; } the resulting tracklist contains an array of audio tracks whose kind is one of those in the array wantedkinds, with each entry providing the track's id, kind, ...
... specifications specification status
comment html living standardthe definition of 'audiotrack' in that specification.
Node.nodeValue - Web APIs
for text,
comment, and cdata nodes, nodevalue returns the content of the node.
... the following table shows the return values for different elements: node value of nodevalue cdatasection content of the cdata section
comment content of the
comment document null documentfragment null documenttype null element null namednodemap null entityreference null notation null processinginstruction entire content excluding the target text content of the text node when nodevalue is defined to be null, setting it has no effect.
... specifications specification status
comment domthe definition of 'node: nodevalue' in that specification.
Node.textContent - Web APIs
if the node is a cdata section,
comment, processing instruction, or text node, textcontent returns the text inside the node, i.e., the node.nodevalue.
... for other node types, textcontent returns the concatenation of the textcontent of every child node, excluding
comments and processing instructions.
...or set the element's text content: document.getelementbyid('diva').textcontent = 'this text is different!'; // the html for diva is now: // <div id="diva">this text is different!</div> specifications specification status
comment domthe definition of 'node.textcontent' in that specification.
Node - Web APIs
these include attr, characterdata (which text,
comment, and cdatasection are all based on), processinginstruction, documenttype, notation, entity, and entityreference.
...possible values are: name value element_node 1 attribute_node 2 text_node 3 cdata_section_node 4 entity_reference_node 5 entity_node 6 processing_instruction_node 7
comment_node 8 document_node 9 document_type_node 10 document_fragment_node 11 notation_node 12 node.nodevalue returns / sets the value of the current node.
...} else { matches.push(node) } } }) return matches } for example, to find text nodes that contain typos: const typos = ["teh", "adn", "btu", "adress", "youre", "msitakes"] const pattern = new regexp("\\b(" + typos.join("|") + ")\\b", "gi") const mistakes = grep(document.body, pattern) console.log(mistakes) specifications specification status
comment domthe definition of 'node' in that specification.
Using server-sent events - Web APIs
a colon as the first character of a line is in essence a
comment, and is ignored.
... note: the
comment line can be used to prevent connections from timing out; a server can send a
comment periodically to keep the connection alive.
...the first is just a
comment, since it starts with a colon character.
VideoTrack.kind - Web APIs
"
commentary" a video track containing a
commentary.
... this might be used to contain the director's
commentary track on a movie, for example.
... specifications specification status
comment html living standardthe definition of 'videotrack: kind' in that specification.
Using the article role - Accessibility
examples of an article include web log posts, newspaper or magazine articles and use-submitted
comments.
... articles can be nested; for example, a web log entry on a site that accepts user-submitted
comments could represent the
comments as articles nested within the article for the web log entry.
... examples <article role="article"> <header> <h2>blog post</h2> </header> <section class="content"> <p>a very interesting post</p> </section> <section class="
comments"> <div class="
comment" role="article"> <p>meaningful
comment</p> </div> <div class="
comment" role="article"> <p>positive
comment</p> </div> </section> </article> notes aria attributes used related aria techniques aria techniques - list of roles compatibility tbd: add support information for common ua and at product combinations additional resources wai-ari...
ARIA: form role - Accessibility
examples <div role="form" id="send-
comment" aria-label="add a
comment"> <label for="username">username</label> <input id="username" name="username" autocomplete="nickname" autocorrect="off" type="text"> <label for="email">email</label> <input id="email" name="email" autocomplete="email" autocapitalize="off" autocorrect="off" spellcheck="false" type="text"> <label for="
comment">
comment</label> <textarea id="
comment" name="com...
...ment"></textarea> <input value="
comment" type="submit"> </div> it is recommended to use <form> instead.
... <form id="send-
comment" aria-label="add a
comment"> ....
Block formatting context - Developer guides
if you use overflow, it is a good idea to
comment the code to explain.
...in collapsing creating a new bfc to avoid the margin collapsing between two neighbor div: html <div class="blue"></div> <div class="red-outer"> <div class="red-inner">red inner</div> </div> css .blue, .red-inner { height: 50px; margin: 10px 0; } .blue { background: blue; } .red-outer { overflow: hidden; background: red; } specifications specification status
comment css display module level 3the definition of 'block formatting context' in that specification.
... see also float, clear css key concepts: css syntax, at-rule,
comments, specificity and inheritance, the box, layout modes and visual formatting models, and margin collapsing, or the initial, computed, resolved, specified, used, and actual values.
<body>: The Document Body element - HTML: Hypertext Markup Language
tag omission the start tag may be omitted if the first thing inside it is not a space character,
comment, <script> element or <style> element.
... the end tag may be omitted if the <body> element has contents or has a start tag, and is not immediately followed by a
comment.
... example <html> <head> <title>document title</title> </head> <body> <p>this is a paragraph</p> </body> </html> specifications specification status
comment html living standardthe definition of '<body>' in that specification.
<html>: The HTML Document / Root element - HTML: Hypertext Markup Language
tag omission the start tag may be omitted if the first thing inside the <html> element is not a
comment.
... the end tag may be omitted if the <html> element is not immediately followed by a
comment.
... mdn understanding wcag, guideline 3.1 explanations understanding success criterion 3.1.1 | w3c understanding wcag 2.0 specifications specification status
comment html living standardthe definition of '<html>' in that specification.
<textarea> - HTML: Hypertext Markup Language
the html <textarea> element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a
comment on a review or feedback form.
... <textarea name="textarea" rows="5" cols="30" placeholder="
comment text."></textarea> note: placeholders should only be used to show an example of the type of data that should be entered into a form; they are not a substitute for a proper <label> element tied to the input.
... implicit aria role textbox permitted aria roles no role permitted dom interface htmltextareaelement specifications specification status
comment html living standardthe definition of '<textarea>' in that specification.
Content negotiation - HTTP
this string may contain a space-separated list of product tokens and
comments.
...a
comment is a free string delimited by parentheses.
...the inner format of a
comment is not defined by the standard, though several browser put several tokens in it, separated by ';'.
Web app manifests
can pwa manifest contain
comments?
... it is a json-formatted file, with one exception: it is allowed to contain "//"-style
comments.
... specifications specification status
comment web app manifest working draft initial definition.
XUL user interfaces - Archive of obsolete content
if there is a rule that you do not understand,
comment it out and refresh your browser to see the effect on the document.
...if you had difficulty understanding this page, or if you have other
comments about it, please contribute to its discussion page.
Tamarin Build System Documentation - Archive of obsolete content
to provide quick and accurate results of building and testing tamarin on supported platforms and configurations to represent the build results in a clear and concise manor please give use feedback if you have any
comments or suggestions to improve the build system how to add tests to the smokes?
... the list of smoke tests are located in the tamarin-repository, test/run-smokes.txt, assume the start directory is test format is cd testdir; command to run test above the test should be a #
comment describing why the test in the smokes, when test failed, possibly a bugzilla bug the tests can be run by following the above instructions for running buildbot scripts locally and executing the all/run-smoke-tests.sh as a rule any test failure should be immediately added to the top of the smoke test list so the list is prioritized how to exclude tests from acceptance or mark them as known failures?
modDateChanged - Archive of obsolete content
example filesource1 = getfolder("program", "file1.txt"); filesource2 = getfolder("program", "file2.txt"); err1 = file.moddate(filesource1); // the baseline returned err2 = file.moddatechanged(filesource1, err1); log
comment("file.moddatechanged should return 'false' = " + err2); // the reason it expects false is we're comparing // the return 'time stamp' value for // file1.txt with the actual file1.txt itself.
... err3 = file.moddatechanged(filesource2, err1); log
comment("file.moddatechanged should return 'true' = " + err2); // the reason it expects true is we're comparing // the return 'time stamp' value for // file1.txt with another file, file2.txt, with a different // 'time stamp' value.
Archived Mozilla and build documentation - Archive of obsolete content
it also includes tools for looking at checkin logs (and
comments); doing diffs between various versions of a file; and finding out which person is responsible for changing a particular line of code ("cvsblame").
... devmo 1.0 launch roadmap
comments, ideas, questions and other discussion should be added on the devmo talk:1.0 launch roadmap page.
Extentsions FAQ - Archive of obsolete content
<https://bugzilla.mozilla.org/show_bug.cgi?id=312818> "thunderbird requires domain in addresses and doesn't always add default" there is an extension that allows what you want attached to one of the
comments in this bug.
... can anyone re
comment the best way to implement unit tests for an extension and are there any unit-tested extensions examples?
Well-Formed Web - Archive of obsolete content
the well-formed web rss module provides facilities for <item> level
commenting: for linking to
comments contained in an external rss feed, and for posting new
comments.
... documentation selected articles why well-formed web rss module is popular - syndicating your
comments charles iliya krempeaux talks about the rss well-formed web module, why it is popular among some, and how it is used to link to your
comments (2005-08-22).
RSS - Archive of obsolete content
documentation why rss slash is popular - counting your
comments charles iliya krempeaux talks about the rss slash module, why it is popular among some, and how it is used to give a count for your
comments.
... why well-formed web rss module is popular - syndicating your
comments charles iliya krempeaux talks about the rss well-formed web module, why it is popular among some, and how it is used to link to your
comments.
Processing XML with E4X - Archive of obsolete content
compatibility issues prior to widespread browser support for the <script> element, it was common for javascript embedded in a page to be surrounded by html
comment tags to prevent <script> unaware browsers from displaying javascript code to the user.
...for backwards compatibility, e4x defaults to ignoring
comments and cdata sections.
Windows Media in Netscape - Archive of obsolete content
for example if (window.activexobject) { // internet explorer only script } server-side detection using user-agent strings netscape 7.1's user agent string on windows has the general pattern: mozilla/5.0 (windows; u; <em>operating system version</em>; <em>language</em>; rv:1.4) gecko/20030624 netscape/7.1 (ax<em>[;optional
comments]</em>) the "vendor
comment" (ax) following the "vendor version" netscape/7.1 is an indicator that the browser supports the windows media player activex control.
... for example on windows xp, netscape 7.1's user agent string may be: mozilla/5.0 (windows; u; windows nt 5.1; en-us; rv:1.4) gecko/20030624 netscape/7.1 (ax) if the client was customized by a third party, additional information may be present in the "vendor
comment" area of the user agent string.
Assessment: Accessibility troubleshooting - Learn web development
the two <input> elements in the
comment form have visible text labels, but they are not unambiguously associated with their labels — how do you achieve this?
... the show/hide
comment control the show/hide
comment control button is not current keyboard-accessible.
Video and audio content - Learn web development
a webm file containing a movie which has a main video track and one alternate angle track, plus audio for both english and spanish, in addition to audio for an english
commentary track can be conceptualized as shown in the diagram below.
... also included are text tracks containing closed captions for the feature film, spanish subtitles for the film, and english captions for the
commentary.
Looping code - Learn web development
in
comments, we've provided you with three code lines that need to be used somewhere inside the loop: const para = document.createelement('p'); — creates a new paragraph.
...you can start writing your code in a
comment to deal with this issue and remove the
comment after you finish.
Making decisions in your code — conditionals - Learn web development
we need you to write a conditional statement inside the onchange handler function, just below the // add conditional here
comment.
...you need to add a switch statement just underneath the // add switch statement
comment: it should accept the choice variable as its input expression.
Third-party APIs - Learn web development
add the following line to your javascript, below the "// event listeners to control the functionality"
comment.
... we are not going to say too much more about this example in the article — the source code has detailed
comments inserted inside it to explain how it works.
Website security - Learn web development
for example, a discussion board that accepts
comments that contain unmodified html could store a malicious script from an attacker.
... when the
comments are displayed, the script is executed and can send to the attacker the information required to access the user's account.
The Firefox codebase: CSS Guidelines
basics here are some basic tips that can optimize reviews if you are changing css: avoid !important but if you have to use it, make sure it's obvious why you're using it (ideally with a
comment).
... finally, once you have checked all the things above, you can permit yourself to use !important along with a
comment why it is needed.
Application Translation with Mercurial
this text is a
comment (which in .dtd files always can be found between <!-- and -->).
... now we copy the two missing lines from the english file and insert them in the localized file: <!-- localization note (privatebrowsingpage.howtostart4): please leave &newprivatewindow.label; intact in the translation --> <!entity privatebrowsingpage.howtostart4 "to start private browsing, you can also select &newprivatewindow.label; from the menu."> the first line is a
comment providing information on the localization of the text in the following line.
Index
10 localization notes guide, internationalization, localization, mozilla localizers usually work on the localizable files without the context of the source files including the localized strings; it is important to add
comments to the localizable files themselves, too.
... these
comments are generally referred to as localization notes.
Mozilla Framework Based on Templates (MFBT)
mfbt code goes to some length to document all its interfaces in
comments, including examples when possible.
...therefore this document primarily attempts to direct readers to the correct file to read those
comments.
NSS_3.12_release_notes.html
he link time dependency from nss to softoken bug 387892: add entrust root ca certificate(s) to nss bug 433386: when system clock is off by more than two days, oscp check fails, can result in crash if user tries to view certificate [[@ secitem_compareitem_util] [[@ memcmp] bug 396256: certutil and pp do not print all the generalnames in a crldp extension bug 398019: correct confusing and erroneous
comments in der_asciitotime bug 422866: vfychain -pp command crashes in nss_shutdown bug 345779: useless assignment statements in ec_gf2m_pt_mul_mont bug 349011: please stop exporting these crmf_ symbols bug 397178: crash when entering chrome://pippki/content/resetpassword.xul in url bar bug 403822: pkix_pl_ocsprequest_create can leave some members uninitialized bug 403910: cert_findusercertbyusage() ret...
... nss_enable_ecc defines from manifest.mn bug 412906: remove sha.c and sha.h from lib/freebl bug 353543: valgrind uninitialized memory read in nsspkiobjectcollection_addinstances bug 377548: nss qa test program certutil's default dsa prime is only 512 bits bug 333405: item cleanup is unused deadcode in secitem_allocitem loser bug 288730: compiler warnings in certutil bug 337251: warning: /* within
comment bug 362967: export secmod_deletemoduleex bug 389248: nss build failure when nss_enable_ecc is not defined bug 390451: remembered passwords lost when changing master password bug 418546: reference leak in cert_pkixverifycert bug 390074: os/2 sign.cmd doesn't find sqlite3.dll bug 417392: certutil -l -n reports bogus trust flags documentation for a list of the primary nss documentation pages on m...
NSS Developer Tutorial
multiple-line
comments should be formatted as follows: /* * line1 * line2 */ or /* ** line 1 ** line 2 */ the following styles are also common, because they conserve vertical space: /* line1 * line2 */ or /* line1 ** line2 */ or /* line1 * line2 */ naming public functions are named foo_dooneaction.
... one line
comments starting with // are permitted.
Creating JavaScript jstest reftests
if your test needs to use browser-specific features, either: make the test silently pass if those features aren't present; or write a mochitest instead (preferred); or at the top of the test, add the
comment // skip-if(xulruntime.shell), so that it only runs in the browser.
... if your test needs to use shell-specific features, like gc(), either: make the test silently pass if those features aren't present; or make it a jit-test (so that it never runs in the browser); or at the top of the test, add the
comment // skip-if(!xulruntime.shell), so that it only runs in the shell.
SpiderMonkey Internals
see the paper mentioned in jsarena.h's major
comment.
...see its major
comment for how to use it.
JS_SetOptions
mxr id search for jsoption_atline jsoption_xml obsolete since jsapi 15 ecmascript for xml (e4x) support: parse <!-- --> as a token, not backward compatible with the
comment-hiding hack used in html script tags.
... mxr id search for jsoption_allow_xml jsoption_moar_xml added in spidermonkey 15 ecmascript for xml (e4x) support: parse <!-- --> as a token, not backward compatible with the
comment-hiding hack used in html script tags.
Parser API
interface xml
comment <: xml { type: "xml
comment"; contents: string; } an xml
comment.
... xml
comment(contents[, loc]) contents: string loc: sourcelocation returns: customxml callback to produce a custom xml
comment node.
TPS Tests
additionally, note that the config file must parse as valid json, and so you can't have
comments in it (sorry, i know this is annoying).
...
comment out the goquitapplication() calls in services/sync/tps/extensions/tps/modules/tps.jsm (remember to undo this later!).
Exploitable crashes
do this before making
comments or taking actions that expose exploitability publicly.
... explain in a
comment why the issue seems exploitable.
Setting up an update server
these changes will need to be made in order to use the locally built mar: put this line in the mozconfig file in root of the build directory (create it if it does not exist): ac_add_options --disable-verify-mar several files contain a line that must be un
commented.
...delete the # at the beginning of the line to un
comment it.
XPCshell Test Manifest Expressions
comments if an expression contains a # (pound/hash) character outside of a string, the character and the rest of the line will be treated as a
comment.
... this is useful as the entire line will generally be reported whenever tests are reported as being skipped, meaning the
comment as well as the expression itself will appear in any logs where this is reported.
nsIZipWriter
); nsizipentry getentry(in autf8string azipentry); boolean hasentry(in autf8string azipentry); void open(in nsifile afile, in print32 aioflags); void processqueue(in nsirequestobserver aobserver, in nsisupports acontext); void removeentry(in autf8string azipentry, in boolean aqueue); attributes attribute type description
comment acstring gets or sets the
comment associated with the currently open zip file.
... example adding a
comment to a zip file var zipwriter = components.constructor("@mozilla.org/zipwriter;1", "nsizipwriter"); var zipw = new zipwriter(); zipw.open(myzipfilepath, pr_rdwr | pr_create_file | pr_truncate); zipw.
comment = "this is a
comment."; zipw.close(); pr_rdwr and friends are constants that are not in any interface (see bug 433295), so for the code above to work you need something like: const pr_rdonl...
wrappedJSObject
more specifically, as xpconnect source
comments say, you can get comp.wrappedjsobject if three conditions are met: comp really is an xpconnect wrapper around a js object.
... nsixpcsecuritymanager allows access (see the source code
comments for details; this is usually not an issue for mozilla extensions and applications) this means that in order to access the js object implementing our component directly, we must modify the component.
Xptcall Porting Status
hopefully the
comments in the code are detailed enough to help people attempting a port.
... <font color="white">done</font> linux ia64 hp ulrich drepper <drepper@redhat.com> bug 40950
comment 15 <font color="white">help!</font> all others!
XPIDL Syntax
end-of-line)
comments are permitted between any two tokens.
...note that includes within
comments or raw code fragments are not processed by xpidl.
Debugger.Source - Firefox Developer Tools
(on the web, the translator may provide the source map url in a specially formatted
comment in the javascript source code, or via a header in the http reply that carried the generated javascript.) this property is writable, so you can change the source map url by setting it.
... displayurl if the script had a special //# sourceurl
comment, as described in the source maps specification, then this property’s value holds the string that was given.
All keyboard shortcuts - Firefox Developer Tools
rl + v undo ctrl + z cmd + z ctrl + z redo ctrl + shift + z / ctrl + y cmd + shift + z / cmd + y ctrl + shift + z / ctrl + y indent tab tab tab unindent shift + tab shift + tab shift + tab move line(s) up alt + up alt + up alt + up move line(s) down alt + down alt + down alt + down
comment/un
comment line(s) ctrl + / cmd + / ctrl + / page inspector command windows macos linux inspect element ctrl + shift + c cmd + shift + c ctrl + shift + c node picker these shortcuts work while the node picker is active.
... space cmd + space ctrl + space scratchpad command windows macos linux open the scratchpad shift + f4 shift + f4 shift + f4 run scratchpad code ctrl + r cmd + r ctrl + r run scratchpad code, display the result in the object inspector ctrl + i cmd + i ctrl + i run scratchpad code, insert the result as a
comment ctrl + l cmd + l ctrl + l re-evaluate current function ctrl + e cmd + e ctrl + e reload the current page, then run scratchpad code ctrl + shift + r cmd + shift + r ctrl + shift + r save the pad ctrl + s cmd + s ctrl + s open an existing pad ctrl + o cmd + o ctrl + o create a new pad ctrl + n cmd + n ...
Animation.persist() - Web APIs
this will be active for each animation by default, or persisted if the persist() call is un
commented.
... specifications specification status
comment web animationsthe definition of 'persist()' in that specification.
Animation.replaceState - Web APIs
this will be active for each animation by default, or persisted if the persist() call is un
commented.
... specifications specification status
comment web animationsthe definition of 'animation.replacestate' in that specification.
AudioBuffer.getChannelData() - Web APIs
the
comments should clearly explain what is going on.
...o use when we want to play an audiobuffer var source = audioctx.createbuffersource(); // set the buffer in the audiobuffersourcenode source.buffer = myarraybuffer; // connect the audiobuffersourcenode to the // destination so we can hear the sound source.connect(audioctx.destination); // start the source playing source.start(); } specification specification status
comment web audio apithe definition of 'getchanneldata' in that specification.
AudioBufferSourceNode - Web APIs
the
comments should clearly explain what is going on.
... specifications specification status
comment web audio apithe definition of 'audiobuffersourcenode' in that specification.
BaseAudioContext.createBuffer() - Web APIs
the
comment should clearly explain what is going on.
...s the audionode to use when we want to play an audiobuffer var source = audioctx.createbuffersource(); // set the buffer in the audiobuffersourcenode source.buffer = myarraybuffer; // connect the audiobuffersourcenode to the // destination so we can hear the sound source.connect(audioctx.destination); // start the source playing source.start(); specifications specification status
comment web audio apithe definition of 'createbuffer()' in that specification.
BaseAudioContext.createBufferSource() - Web APIs
the
comments should clearly explain what is going on.
... use when we want to play an audiobuffer var source = audioctx.createbuffersource(); // set the buffer in the audiobuffersourcenode source.buffer = myarraybuffer; // connect the audiobuffersourcenode to the // destination so we can hear the sound source.connect(audioctx.destination); // start the source playing source.start(); } specifications specification status
comment web audio apithe definition of 'createbuffersource()' in that specification.
CSSRule - Web APIs
the relationships between these constants and the interfaces are: type value rule-specific interface
comments and examples cssrule.style_rule 1 cssstylerule the most common kind of rule: selector { prop1: val1; prop2: val2; } cssrule.import_rule 3 cssimportrule an @import rule.
... specifications specification status
comment css object model (cssom)the definition of 'cssrule' in that specification.
CharacterData - Web APIs
this is an abstract interface, meaning there aren't any object of type characterdata: it is implemented by other interfaces, like text,
comment, or processinginstruction which aren't abstract.
... specifications specification status
comment domthe definition of 'characterdata' in that specification.
Document.createNodeIterator() - Web APIs
nodefilter.show_
comment 128 shows
comment nodes.
...nodefilter.filter_accept : nodefilter.filter_reject; } } ); const pars = []; let currentnode; while (currentnode = nodeiterator.nextnode()) { pars.push(currentnode); } specifications specification status
comment domthe definition of 'document.createnodeiterator' in that specification.
Document.createTreeWalker() - Web APIs
nodefilter.show_
comment 128 shows
comment nodes.
... var treewalker = document.createtreewalker( document.body, nodefilter.show_element, { acceptnode: function(node) { return nodefilter.filter_accept; } }, false ); var nodelist = []; var currentnode = treewalker.currentnode; while(currentnode) { nodelist.push(currentnode); currentnode = treewalker.nextnode(); } specifications specification status
comment domthe definition of 'document.createtreewalker' in that specification.
Document - Web APIs
document.create
comment() creates a new
comment node and returns it.
... specifications specification status
comment domthe definition of 'document' in that specification.
Document Object Model (DOM) - Web APIs
dom interfaces attr cdatasection characterdata childnode
comment customevent document documentfragment documenttype domerror domexception domimplementation domstring domtimestamp domstringlist domtokenlist element event eventtarget htmlcollection mutationobserver mutationrecord namednodemap node nodefilter nodeiterator nodelist nondocumenttypechildnode parentnode processinginstruction selection range text textdecoder textenc...
...svgdocument shadowanimation svgcolorprofilerule svgcssrule svgdocument svgexception svgexternalresourcesrequired svgfittoviewbox svglangspace svglocatable svgrenderingintent svgstylable svgtests svgtransformable svgunittypes svguseelementshadowroot svgurireference svgviewspec svgzoomandpan svgzoomevent specifications specification status
comment dom living standard ...
HTMLScriptElement - Web APIs
htmlscriptelement.text is a domstring that joins and returns the contents of all text nodes inside the <script> element (ignoring other nodes like
comments) in tree order.
...element("script"); newscript.onerror = loaderror; if (onloadfunction) { newscript.onload = onloadfunction; } document.head.appendchild(newscript); newscript.src = url; } sample usage: affixscripttohead("myscript1.js"); affixscripttohead("myscript2.js", function () { alert("the script \"myscript2.js\" has been correctly loaded."); }); specifications specification status
comment html living standardthe definition of 'htmlscriptelement' in that specification.
HTMLTextAreaElement - Web APIs
examples autogrowing textarea example make a textarea autogrow while typing: javascript function autogrow (ofield) { if (ofield.scrollheight > ofield.clientheight) { ofield.style.height = ofield.scrollheight + "px"; } } css textarea.noscrollbars { overflow: hidden; width: 300px; height: 100px; } html <form> <fieldset> <legend>your
comments</legend> <p><textarea class="noscrollbars" onkeyup="autogrow(this);"></textarea></p> <p><input type="submit" value="send" /></p> </fieldset> </form> insert html tags example insert some html tags or smiles or any custom text in a textarea.
... } in the html we just need to hook our function to the `onkeypress` event and specify that our textarea does not accept pasting: <form> <p>textarea with fixed number of characters per line:<br /> <textarea cols="50" rows="10" onkeypress="return checkrows(this, event);" onpaste="return false;"></textarea> </p> </form> specifications specification status
comment html living standardthe definition of 'htmltextareaelement' in that specification.
Drag Operations - Web APIs
(note also that links starting with a number sign (#) are skipped, as these are
comments.) for simple cases, you can use the special type url just to retrieve the first valid url in the list.
... for example: const link = event.datatransfer.getdata("url"); this eliminates the need to check for
comments or iterate through lines yourself.
MediaStream.getTrackById() - Web APIs
example this example activates a
commentary track on a video by ducking the audio level of the main audio track to 50%, then enabling the
commentary track.
... stream.gettrackbyid("primary-audio-track").applyconstraints({ volume: 0.5 }); stream.gettrackbyid("
commentary-track").enabled = true; specifications specification status
comment media capture and streamsthe definition of 'gettrackbyid()' in that specification.
MutationObserverInit.characterData - Web APIs
character data changes are detectable on any text node, including nodes based on the text, processinginstruction, and
comment interfaces.
... example specifications specification status
comment domthe definition of 'mutationobserverinit.characterdata' in that specification.
MutationObserverInit.characterDataOldValue - Web APIs
character data changes are detectable on any text node, including nodes based on the text, processinginstruction, and
comment interfaces.
... example specifications specification status
comment domthe definition of 'mutationobserverinit.characterdataoldvalue' in that specification.
Node.childNodes - Web APIs
(in (x)html documents this is the html element.) childnodes includes all child nodes—including non-element nodes like text and
comment nodes.
... specifications specification status
comment domthe definition of 'node.childnodes' in that specification.
Node.firstChild - Web APIs
to avoid the issue with node.firstchild returning #text or #
comment nodes, parentnode.firstelementchild can be used to return only the first element node.
... specifications specification status
comment domthe definition of 'node.firstchild' in that specification.
Node.lastChild - Web APIs
if its parent is an element, then the child is generally an element node, a text node, or a
comment node.
... syntax var childnode = node.lastchild; example var tr = document.getelementbyid("row1"); var corner_td = tr.lastchild; specifications specification status
comment domthe definition of 'node.lastchild' in that specification.
Node.nextSibling - Web APIs
element.nextelementsibling may be used to obtain the next element skipping any whitespace nodes, other between-element text, or
comments.
... specifications specification status
comment domthe definition of 'node.nextsibling' in that specification.
Node.nodeName - Web APIs
values for the different types of nodes are: interface nodename value attr the value of attr.name cdatasection "#cdata-section"
comment "#
comment" document "#document" documentfragment "#document-fragment" documenttype the value of documenttype.name element the value of element.tagname entity the entity name entityreference the name of entity reference notation the notation name processinginstruction the value of processinginstruction.target text "#text" example given the following markup: <div id...
... specifications specification status
comment domthe definition of 'nodename' in that specification.
NodeIterator.whatToShow - Web APIs
nodefilter.show_
comment 128 shows
comment nodes.
... example var nodeiterator = document.createnodeiterator( document.body, nodefilter.show_element + nodefilter.show_
comment + nodefilter.show_text, { acceptnode: function(node) { return nodefilter.filter_accept; } }, false ); if( (nodeiterator.whattoshow == nodefilter.show_all) || (nodeiterator.whattoshow % (nodefilter.show_
comment*2)) >= nodefilter.show_
comment) { // nodeiterator will show
comments } specifications specification status
comment domthe definition of 'nodeitera...
NodeIterator - Web APIs
nodefilter.show_
comment 128 shows
comment nodes.
... specifications specification status
comment domthe definition of 'nodeiterator' in that specification.
Range.comparePoint() - Web APIs
if the reference node is a node of type text,
comment, or cdatasection, then offset is the number of characters from the start of reference node.
... example range = document.createrange(); range.selectnode(document.getelementsbytagname('div').item(0)); returnvalue = range.comparepoint(document.getelementsbytagname('p').item(0), 1); specification specification status
comment domthe definition of 'range.comparepoint()' in that specification.
Range.endOffset - Web APIs
if the endcontainer is a node of type text,
comment, or cdatasection, then the offset is the number of characters from the start of the endcontainer to the boundary point of the range.
... syntax endrangeoffset = range.endoffset; example var range = document.createrange(); range.setstart(startnode,startoffset); range.setend(endnode,endoffset); endrangeoffset = range.endoffset; specifications specification status
comment domthe definition of 'range.endoffset' in that specification.
Range.setEnd() - Web APIs
usage notes if the endnode is a node of type text,
comment, or cdatasection, then endoffset is the number of characters from the start of endnode.
... specifications specification status
comment domthe definition of 'range.setend()' in that specification.
Range.setStart() - Web APIs
if the startnode is a node of type text,
comment, or cdatasection, then startoffset is the number of characters from the start of startnode.
...456789</p> <p id="log"></p> javascript const element = document.getelementbyid('content'); const textnode = element.childnodes[0]; const range = document.createrange(); range.setstart(textnode, 0); // start at first character range.setend(textnode, 5); // end at fifth character document.getelementbyid('log').textcontent = range; result specifications specification status
comment domthe definition of 'range.setstart()' in that specification.
Range.startOffset - Web APIs
if the startcontainer is a node of type text,
comment, or cdatasection, then the offset is the number of characters from the start of the startcontainer to the boundary point of the range.
... syntax startrangeoffset = range.startoffset; example var range = document.createrange(); range.setstart(startnode,startoffset); range.setend(endnode,endoffset); var startrangeoffset = range.startoffset; specifications specification status
comment domthe definition of 'range.startoffset' in that specification.
TreeWalker.whatToShow - Web APIs
nodefilter.show_
comment 128 shows
comment nodes.
... syntax nodetypes = treewalker.whattoshow; example var treewalker = document.createtreewalker( document.body, nodefilter.show_element + nodefilter.show_
comment + nodefilter.show_text, { acceptnode: function(node) { return nodefilter.filter_accept; } }, false ); if( (treewalker.whattoshow == nodefilter.show_all) || (treewalker.whattoshow % (nodefilter.show_
comment*2)) >= nodefilter.show_
comment) { // treewalker will show
comments } specifications specification status
comment domthe definition of 'treewalker.what...
TreeWalker - Web APIs
nodefilter.show_
comment 128 shows
comment nodes.
... specifications specification status
comment domthe definition of 'treewalker' in that specification.
VideoTrack.label - Web APIs
function gettracklist(el) { var tracklist = []; const wantedkinds = [ "main", "alternative", "
commentary" ]; el.videotracks.foreach(function(track) { if (wantedkinds.includes(track.kind)) { tracklist.push({ id: track.id, kind: track.kind, label: track.label }); } }); return tracklist; } the resulting tracklist contains an array of video tracks whose kind is one of those in the array wantedkinds, with each entry providing the track's id, kind, ...
... specifications specification status
comment html living standardthe definition of 'videotrack: label' in that specification.
WebGL by example - Web APIs
explanations about the examples are found in both the main text and in
comments within the code.
... you should read all
comments, because more advanced examples could not repeat
comments about parts of the code that were previously explained.
WindowOrWorkerGlobalScope.setInterval() - Web APIs
false, bstart = true, nidx = 0, spart = "", asheets = [], amap = []; this.rate = nrate || 100; this.play = function () { if (btyping) { return; } if (bstart) { var aitems = document.queryselectorall(sselector); if (aitems.length === 0) { return; } for (var nitem = 0; nitem < aitems.length; nitem++) { asheets.push(new sheet(aitems[nitem])); /* un
comment the following line if you have previously hidden your elements via css: */ // aitems[nitem].style.visibility = "visible"; } bstart = false; } nintervid = setinterval(typewrite, this.rate); btyping = true; }; this.pause = function () { clearinterval(nintervid); btyping = false; }; this.terminate = function () { ocurrent.nodevalue += spart; ...
... specifications specification status
comment html living standardthe definition of 'windoworworkerglobalscope.setinterval()' in that specification.
WindowOrWorkerGlobalScope.setTimeout() - Web APIs
function() { vcallback.apply(null, aargs); } : vcallback, ndelay); }; }, 0, 'test'); }()) ie-only fix if you want a completely unobtrusive fix for every other mobile or desktop browser, including ie 9 and below, you can either use javascript conditional
comments: /*@cc_on // conditional ie < 9 only fix @if (@_jscript_version <= 9) (function(f){ window.settimeout = f(window.settimeout); window.setinterval = f(window.setinterval); })(function(f){return function(c,t){var a=[].slice.call(arguments,2);return f(function(){c instanceof function?c.apply(this,a):eval(c)},t)}}); @end @*/ ...
... specifications specification status
comment html living standardthe definition of 'windoworworkerglobalscope.settimeout()' in that specification.
XMLSerializer.serializeToString() - Web APIs
the following types are also permitted as descendants of the root node, in addition to node and attr: documenttype document documentfragment element
comment text processinginstruction attr if any other type is encountered, a typeerror exception is thrown.
... specifications specification status
comment dom parsing and serializationthe definition of 'serializetostring()' in that specification.
ARIA: article role - Accessibility
it is usually set on related content items such as
comments, forum posts, newspaper articles or other items grouped together on one page.
...examples of appropriate uses of the role="article", or preferably <article>, include blog posts, forum posts, a
comment to a forum or blog post, a
comment to a
comment to a forum or blog post, any an item in a social media feed.
ARIA: Suggestion role - Accessibility
</p> we could even provide an information box saying who made the suggestion and when, and associate it with the suggestion via aria-details: <p>freida’s pet is a <span role="suggestion" aria-details="
comment-source"> <span role="deletion">black cat called luna</span> <span role="insertion">purple tyrannosaurus rex called tiny</span> </span>.
... </p> <div id="
comment-source">suggested by chris, <time datetime="2019-03-30t19:29">march 30 2019, 19:29</time></div> browsers tend to provide a default black strikethrough for deletions, and a black underline for insertions, but you’ll probably want to use accessibility concerns landmark roles are intended to be used sparingly, to identify larger overall sections of the document.
WAI-ARIA Roles - Accessibility
it is usually set on related content items such as
comments, forum posts, newspaper articles or other items grouped together on one page.aria: banner rolea banner role represents general and informative content frequently placed at the beginning of the page.
...elements containing role="checkbox" must also include the aria-checked attribute to expose the checkbox's state to assistive technology.aria:
comment rolethe
comment landmark role semantically denotes a
comment/reaction to some content on the page, or to a previous
comment.aria: complementary rolethe complementary landmark role is used to designate a supporting section that relates to the main content, yet can stand alone when separated.
Descendant combinator - CSS: Cascading Style Sheets
additionally, the white space characters of which the combinator is comprised may contain any number of css
comments.
... declarations */ } examples css li { list-style-type: disc; } li li { list-style-type: circle; } html <ul> <li> <div>item 1</div> <ul> <li>subitem a</li> <li>subitem b</li> </ul> </li> <li> <div>item 2</div> <ul> <li>subitem a</li> <li>subitem b</li> </ul> </li> </ul> result specifications specification status
comment selectors level 4the definition of 'descendant combinator' in that specification.
attr() - CSS: Cascading Style Sheets
the list of valid values are: keyword associated type
comment default value string <string> the attribute value is treated as a css <string>.
...ult <color> value html <div class="background" data-background="lime">background expected to be red if your browser does not support advanced usage of attr()</div> css .background { height: 100vh; } .background { background-color: red; } .background[data-background] { background-color: attr(data-background color, red); } specifications specification status
comment css values and units module level 4the definition of 'attr()' in that specification.
margin-left - CSS: Cascading Style Sheets
this table summarizes the different cases: value of display value of float value of position computed value of auto
comment inline, inline-block, inline-table any static or relative 0 inline layout mode block, inline, inline-block, block, table, inline-table, list-item, table-caption any static or relative 0, except if both margin-left and margin-right are set to auto.
...ednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> | auto examples setting left margin using pixels and percentages .content { margin-left: 5%; } .sidebox { margin-left: 10px; } .logo { margin-left: -5px; } specifications specification status
comment css basic box modelthe definition of 'margin-left' in that specification.
margin-right - CSS: Cascading Style Sheets
this table summarizes the different cases: value of display value of float value of position computed value of auto
comment inline, inline-block, inline-table any static or relative 0 inline layout mode block, inline, inline-block, block, table, inline-table, list-item, table-caption any static or relative 0, except if both margin-left and margin-right are set to auto.
...percentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> | auto examples setting right margin using pixels and percentages .content { margin-right: 5%; } .sidebox { margin-right: 10px; } .logo { margin-right: -5px; } specifications specification status
comment css basic box modelthe definition of 'margin-right' in that specification.
Challenge solutions - Developer guides
readable css
commenting out a rule challenge
comment out part of your stylesheet, without changing anything else, to make the very first letter of your document red.
... solution one way to do this is to put
comment delimiters around the rule for .carrot: /* .carrot { color: orange; } */ text styles big initial letters challenge without changing anything else, make all six initial letters twice the size in the browser's default serif font.
HTML attribute: multiple - HTML: Hypertext Markup Language
/* un
comment this css to make the multiple the same height as the single */ /* select[multiple] { height: 1.5em; vertical-align: top; } select[multiple]:focus, select[multiple]:active { height: auto; } */ there are a few ways to select multiple options in a <select> element with a multiple attribute.
... specifications specification status
comment html living standardthe definition of 'multiple attribute' in that specification.
<cite>: The Citation element - HTML: Hypertext Markup Language
ite> element, a creative work that might be cited could be, for example, one of the following: a book a research paper an essay a poem a musical score a song a play or film script a film a television show a game a sculpture a painting a theatrical production a play an opera a musical an exhibition a legal case report a computer program a web site a web page a blog post or
comment a forum post or
comment a tweet a facebook post a written or oral statement and so forth.
... example <p>more information can be found in <cite>[iso-0000]</cite>.</p> the html above outputs: specifications specification status
comment html living standardthe definition of '<cite>' in that specification.
<colgroup> - HTML: Hypertext Markup Language
the end tag may be omitted, if it is not followed by a space or a
comment.
... specifications specification status
comment html living standardthe definition of '<colgroup>' in that specification.
<input type="date"> - HTML: Hypertext Markup Language
option>december</option> </select> </span> <span> <label for="year">year:</label> <select id="year" name="year"> </select> </span> </div> </form> the months are hardcoded (as they are always the same), while the day and year values are dynamically generated depending on the currently selected month and year, and the current year (see the code
comments below for detailed explanations of how these functions work.) span { padding-left: 5px; } input:invalid + span::after { content: '✖'; } input:valid + span::after { content: '✓'; } javascript the other part of the code that may be of interest is the feature detection code — to detect whether the browser supports <input type="date">.
... specifications specification status
comments html living standardthe definition of '<input type="date">' in that specification.
<input type="datetime-local"> - HTML: Hypertext Markup Language
</select> </span> <span> <label for="minute">minute:</label> <select id="minute" name="minute"> </select> </span> </div> </div> </form> the months are hard-coded (as they are always the same), while the day and year values are dynamically generated depending on the currently selected month and year, and the current year respectively (see the code
comments below for detailed explanations of how these functions work.) we also decided to dynamically generate the hours and minutes, as there are so many of them!
... specifications specification status
comments html living standardthe definition of '<input type="datetime-local">' in that specification.
<input type="file"> - HTML: Hypertext Markup Language
label, form button { background-color: #7f9ccb; padding: 5px 10px; border-radius: 5px; border: 1px ridge black; font-size: 0.8rem; height: auto; } form label:hover, form button:hover { background-color: #2d5ba3; color: white; } form label:active, form button:active { background-color: #0d3f8f; color: white; } this is similar to what we've seen before — nothing special to
comment on.
... function returnfilesize(number) { if(number < 1024) { return number + 'bytes'; } else if(number >= 1024 && number < 1048576) { return (number/1024).tofixed(1) + 'kb'; } else if(number >= 1048576) { return (number/1048576).tofixed(1) + 'mb'; } } the example looks like this; have a play: specifications specification status
comment html living standardthe definition of '<input type="file">' in that specification.
<input type="month"> - HTML: Hypertext Markup Language
the list of available year values is dynamically generated depending on the current year (see the code
comments below for detailed explanations of how these functions work).
... specifications specification status
comments html living standardthe definition of '<input type="month">' in that specification.
<input type="url"> - HTML: Hypertext Markup Language
; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } <form> <div> <label for="myurl">enter the problem website address:</label> <input id="myurl" name="myurl" type="url" required pattern=".*\.myco\..*" title="the url must be in a myco domain"> <span class="validity"></span> </div> <div> <label for="my
comment">what is the problem?</label> <input id="my
comment" name="my
comment" type="text" required> <span class="validity"></span> </div> <div> <button>submit</button> </div> </form> first of all, the required attribute is specified, making it mandatory that a valid email address be provided.
... specifications specification status
comment html living standardthe definition of '<input type="url">' in that specification.
HTML elements reference - HTML: Hypertext Markup Language
<small> the html <small> element represents side-
comments and small print, like copyright and legal text, independent of its styled presentation.
... <select> the html <select> element represents a control that provides a menu of options <textarea> the html <textarea> element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a
comment on a review or feedback form.
HTML documentation index - HTML: Hypertext Markup Language
192 <small>: the side
comment element element, html, html text-level semantics, reference, web, font-size the html <small> element represents side-
comments and small print, like copyright and legal text, independent of its styled presentation.
... 206 <textarea> element, forms, html, html forms, reference, web, textarea the html <textarea> element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a
comment on a review or feedback form.
Link types - HTML: Hypertext Markup Language
<a>, <area>, <form> <link> pingback defines an external resource uri to call if one wishes to make a
comment or a citation about the webpage.
... <a>, <area>, <link> <form> specifications specification status
comment preloadthe definition of 'preload' in that specification.
User-Agent - HTTP
header type request header forbidden header name no syntax user-agent: <product> / <product-version> <
comment> common format for web browsers: user-agent: mozilla/5.0 (<system-information>) <platform> (<platform-details>) <extensions> directives <product> a product identifier — its name or development codename.
... <
comment> zero or more
comments containing more details; sub-product information, for example.
Warning: -file- is being assigned a //# sourceMappingURL, but already has one - JavaScript
there are two ways to assign a source map, either by using a
comment or by setting a header to the javascript file.
... examples setting source maps setting a source map by using a
comment in the file: //# sourcemappingurl=http://example.com/path/to/your/sourcemap.map or, alternatively, you can set a header to your javascript file: x-sourcemap: /path/to/file.js.map ...
Promise - JavaScript
settimeout( function() { const randomint = date.now(); const value = randomint % 10; try { if(value >= threshold_a) { throw new error(`too large: ${value}`); } } catch(msg) { reject(`error in callback ${msg}`); } resolve(value); return; }, 500); // to experiment with error at set-up, un
comment the following 'throw'.
...each step is
commented and allows you to follow the promise and xhr architecture closely.
<mtext> - MathML
the mathml <mtext> element is used to render arbitrary text with no notational meaning, such as
comments or annotations.
...ipt ; example bold-script ; example fraktur ; example sans-serif ; example bold-sans-serif ; example sans-serif-italic ; example sans-serif-bold-italic ; example monospace ; example normal (default) ; مثال initial ; مثال tailed ; مثال looped ; مثال stretched ; مثال examples <math> <mtext> theorem of pythagoras </mtext> <mtext> /*
comment here */ </mtext> </math> specifications specification status
comment mathml 3.0the definition of 'mtext' in that specification.
XSLT elements reference - XSLT: Extensible Stylesheet Language Transformations
<xsl:apply-imports><xsl:apply-templates><xsl:attribute-set><xsl:attribute><xsl:call-template><xsl:choose><xsl:
comment><xsl:copy-of><xsl:copy><xsl:decimal-format><xsl:element><xsl:fallback><xsl:for-each><xsl:if><xsl:import><xsl:include><xsl:key><xsl:message><xsl:namespace-alias><xsl:number><xsl:otherwise><xsl:output><xsl:param><xsl:preserve-space><xsl:processing-instruction><xsl:sort><xsl:strip-space><xsl:stylesheet><xsl:template><xsl:text><xsl:transform><xsl:value-of><xsl:variable><xsl:when><xsl:with-param> <...
...xsl:apply-imports> <xsl:apply-templates> <xsl:attribute> <xsl:attribute-set> <xsl:call-template> <xsl:choose> <xsl:
comment> <xsl:copy> <xsl:copy-of> <xsl:decimal-format> <xsl:element> <xsl:fallback> (not supported) <xsl:for-each> <xsl:if> <xsl:import> (mostly supported) <xsl:include> <xsl:key> <xsl:message> <xsl:namespace-alias> (not supported) <xsl:number> (partially supported) <xsl:otherwise> <xsl:output> (partially supported) <xsl:param> <xsl:preserve-space> <xsl:processing-instruction> <xsl:sort> <xsl:strip-space> <xsl:stylesheet> (partially supported) <xsl:template> <xsl:text> (partially supported) <xsl:transform> <xsl:value-of> (partially supported) <xsl:variable> <xsl:when> <xsl:with-param> ...
An Overview - XSLT: Extensible Stylesheet Language Transformations
it can be made up of seven different types of nodes: the single root node, element nodes, text nodes, attribute nodes,
comment nodes, processing instruction nodes, and namespace nodes.
...below the root node are its children, which can be elements,
comments, processing instructions and so on.
Localization - Archive of obsolete content
the files: use the .properties format are named "xx-yy.properties", where "xx-yy" is the name of the locale in question contain one entry for each string you want to localize, consisting of an identifier for the string and its translation in that locale, in the format identifier=translation need to use utf-8 without bom encoding lines starting with "#" (after optional whitespace) are
comments suppose your add-on contains a single localizable string, represented in english as "hello!", and you want to supply us english and french french localizations.
LookupNamespaceURI - Archive of obsolete content
return null; // unknown case 2: // attribute_node if (node.ownerelement) { return lookupnamespaceurihelper(node.ownerelement, prefix); } return null; // unknown default: // text_node (3), cdata_section_node (4), entity_reference_node (5), // processing_instruction_node (7),
comment_node (8) if (node.parentnode) { // entityreferences may have to be skipped to get to it return lookupnamespaceurihelper(node.parentnode, prefix); } return null; // unknown } }; } }()); ...
Rosetta - Archive of obsolete content
|*| http://www.gnu.org/licenses/gpl-3.0.html |*| |*| syntax: |*| |*| rosetta.appendcompiler([ "text/x-csrc", "text/x-c" ], yourcompiler); |*| \*/ var rosetta = new (function () { function createscript (oscript, oxhr200) { var smimetype = oscript.getattribute("type").tolowercase(), obaton = document.create
comment(" the previous code has been automatically translated from \"" + smimetype + "\" to \"text/ecmascript\".
StringView - Archive of obsolete content
47 : 65; }; /* base64 string to array encoding */ stringview.bytestobase64 = function (abytes) { var eqlen = (3 - (abytes.length % 3)) % 3, sb64enc = ""; for (var nmod3, nlen = abytes.length, nuint24 = 0, nidx = 0; nidx < nlen; nidx++) { nmod3 = nidx % 3; /* un
comment the following line in order to split the output in lines 76-character long: */ /* if (nidx > 0 && (nidx * 4 / 3) % 76 === 0) { sb64enc += "\r\n"; } */ nuint24 |= abytes[nidx] << (16 >>> nmod3 & 24); if (nmod3 === 2 || abytes.length - nidx === 1) { sb64enc += string.fromcharcode(stringview.uint6tob64(nuint24 >>> 18 & 63), stringview.uint6tob64(nuint24 >>> 12 & 63), string...
Appendix: What you should know about open-source software licenses - Archive of obsolete content
.freebsd.org/copyright/freebsd-license.html mozilla public license http://www.mozilla.org/mpl/mpl-1.1.html mpl faq http://www.mozilla.org/mpl/mpl-faq.html common public license http://opensource.org/licenses/cpl1.0.php gnu general public license (gpl) http://www.gnu.org/licenses/gpl.html gnu lesser general public license (lgpl) http://www.gnu.org/licenses/lgpl.html various licenses and
comments about them http://www.gnu.org/licenses/license-list.html the bsd license problem http://www.gnu.org/philosophy/bsd.html the free software license diagnostic (in japanese) http://www.rubyist.net/~matz/20030608.html#p02 openoffice.org joint copyright assignment (jca) http://www.openoffice.org/licenses/jca.pdf gnu free documentation license (gfdl) http://www.gnu.org/licenses/fdl.html crea...
No Proxy For configuration - Archive of obsolete content
p://web/) bug 201685 - no proxy for: support ipv6 address literals bug 136789 - proxy: no proxy ip entries do not block dns resolved ips bug 314712 - no proxy for: "hostname.domain.com" should block only "hostname.domain.com" bug 72444 - proxy: "bypass proxy server for local addresses" (ie pref) bug 260883 - "no proxy for" does not use fqdn wildcards "*" like ie bugzilla sources bug 17158
comment 21: the correct separator are spaces or commas.
Bonsai - Archive of obsolete content
it also includes tools for looking at checkin logs (and
comments); doing diffs between various versions of a file; and finding out which person is responsible for changing a particular line of code ("cvsblame").
Creating a hybrid CD - Archive of obsolete content
# example filename mapping file used by mkhybrid for hfs # # extn xlate creator type
comment .hqx ascii 'sitx' 'text' "binhex file" .zip raw 'sitx' 'zip ' "zip file" .gz raw 'sitx' 'zip ' "gzip file" .tgz raw 'sitx' 'zip ' "tar.gz gzip file" .tar raw 'sitx' 'tarf' "tar file" .tif raw '8bim' 'tiff' "photoshop tiff image" .doc raw 'mswd' 'wdbn' "word file" .mov raw 'tvod' 'moov' "quicktim...
Documentation for BiDi Mozilla - Archive of obsolete content
improvements to lists with hebrew and arabic list-style-type summary of new classes class name xpcom interface (if applicable) implementation
comments nsibidi intl\unicharutil\public\nsibidi.h intl\unicharutil\src\nsbidiimp.cpp implementation of the unicode bidi algorithm nsiubidiutils intl\unicharutil\public\nsiubidiutils.h intl\unicharutil\src\nsbidiutilsimp.cpp utilities for bidi processing, including: character classification symmetric swapping reordering shaping numeric translation conversion to/from presentation forms nsbidipres...
Modularization techniques - Archive of obsolete content
links the component object model specification revision history feb 25, 1998, created oct 19, 1998, dusted off momentarily oct 10, 1999, added
comments about xpidl, language-independentness original document information author(s): will scullin last updated date: september 13, 2004 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details ...
LIR - Archive of obsolete content
int 7 retq void 64 bit return a quad 8 retd void return a double 9 livei void extend live range of an int 10 liveq void 64 bit extend live range of a quad 11 lived void extend live range of a double 12 file void source filename for debug symbols 13 line void source line number for debug symbols 14
comment void a
comment shown, on its own line, in lir dumps 15 not in use load 16 not in use 17 ldc2i integer load char and sign-extend to an int 18 lds2i integer load short and sign-extend to an int 19 lduc2ui integer load unsigned char and zero-extend to an unsigned int 20 ldus2ui integer load unsigned...
New Skin Notes - Archive of obsolete content
the major problem it caused in cavendish skin - that they were out of the screen - is solved by making the sidebar smaller, which is not the right thing to do, imo (see my
comment 1).--nickolay 02:11, 25 aug 2005 (pdt) yeah this is actually a problem with mw, rather than the skin -- they use a <br style="clear:both" /> in some pretty annoying places.
Creating XPI Installer Modules - Archive of obsolete content
for barley, that installation script should read as follows: // initinstall(name + version, name, version); var err = initinstall("barley v", "barley", ""); log
comment("initinstall: " + err); addfile("barley grain", // displayname from contents.rdf "barley.jar", // jar source getfolder("chrome"), // target folder ""); // target subdir // registerchrome(type, location, source) registerchrome(package | delayed_chrome, getfolder("chrome","barley.jar"), "content/"); if (err==success) performinstall(); els...
File.macAlias - Archive of obsolete content
xpisrc = "miscellaneous program"; var vi = "1.1.1.1"; initinstall( "macintosh alias", "misc", vi, 0); f = getfolder("program"); g = getfolder("mac desktop"); addfile( "filemacalias", "2.2.2.2", xpisrc, f, xpisrc, true); err = file.macalias(f, xpisrc, g, xpisrc + " alias"); log
comment("file.macalias returns: " + err); if (0 == getlasterror()) performinstall(); else cancelinstall(); ...
File.windowsShortcut - Archive of obsolete content
ar xpisrc = "misc.exe"; var vi = "1.1.1.1"; initinstall( "windows shortcut", "test", vi, 0); f = getfolder("windows"); g = getfolder("temporary"); addfile( "miscshortcut", "2.2.2.2", xpisrc, f, xpisrc, true); target = getfolder(f, xpisrc); shortcutpath = getfolder("program"); err = file.windowsshortcut( target, shortcutpath, "misc shortcut", g, "", target, 0); log
comment("file.windowsshortcut returns: " + err); if (0 == getlasterror()) performinstall(); else cancelinstall(); ...
Install.addDirectory - Archive of obsolete content
var vi = "10.10.10.10"; var xpisrc = "adddir1"; initinstall("addfilenovers1", "adddir_1", vi, 1); f = getfolder("program"); setpackagefolder(f); err = adddirectory(xpisrc); log
comment("the error = " + err); if (0 == getlasterror()) performinstall(); else cancelinstall(); ...
enumKeys - Archive of obsolete content
var winreg = getwinregistry(); winreg.setrootkey(winreg.hkey_local_machine); var index = 0; var basekey = "software\\mozilla"; while ( (mozillaversion = winreg.enumkeys(basekey,index)) != null ) { log
comment("mozillaversion = " + mozillaversion); subkey = basekey + "\\" + mozillaversion + "\\extensions"; pluginsdir = winreg.getvaluestring ( subkey, "plugins" ); if ( pluginsdir ) log
comment("pluginsdir = " + pluginsdir); else log
comment("no plugins dir for " + basekey + "\\" + mozillaversion); index++; } ...
enumValueNames - Archive of obsolete content
var winreg = getwinregistry(); winreg.setrootkey(winreg.hkey_local_machine); v1 = winreg.enumvaluenames("software\\mozilla\\", 0); log
comment("the first subkey value of the mozilla key: " + v1) ...
XPInstall API reference - Archive of obsolete content
objects install properties methods adddirectory addfile alert cancelinstall confirm deleteregisteredfile execute gestalt getcomponentfolder getfolder getlasterror getwinprofile getwinregistry initinstall loadresources log
comment patch performinstall refreshplugins registerchrome reseterror setpackagefolder installtrigger no properties methods compareversion enabled getversion install installchrome startsoftwareupdate installversion properties methods compareto i...
Attribute (XUL) - Archive of obsolete content
d pageincrement pagestep parent parsetype persist persistence phase pickertooltiptext placeholder popup position predicate preference preference-editable primary priority properties querytype readonly ref rel removeelement resizeafter resizebefore rows screenx screeny searchbutton searchsessions searchlabel selected selectedindex seltype setfocus showcaret show
commentcolumn showpopup size sizemode sizetopopup smoothscroll sort sortactive sortdirection sortresource sortresource2 spellcheck src state statedatasource statusbar statustext style subject substate suppressonselect tabindex tabscrolling targets template timeout title toolbarname tooltip tooltiptext tooltiptextnew top type uri useraction validate value var visually...
Node - Archive of obsolete content
for more information on this interface please see dom-level-2-core short element_node 1 short attribute_node 2 short text_node 3 short cdata_section_node 4 short entity_reference_node 5 short entity_node 6 short processing_instruction_node 7 short
comment_node 8 short document_node 9 short document_type_node 10 short document_fragment_node 11 short notation_node 12 methods node appendchild ( node newchild ) node clonenode ( boolean deep ) boolean hasattributes ( ) boolean haschildnodes ( ) node insertbefore ( node newchild , node refchild ) boolean issupported ( string feature , string version ) void normalize ( ) node removechild ( node...
Property - Archive of obsolete content
pup scrollboxobject scrollincrement scrollheight scrollwidth searchbutton searchcount searchlabel searchparam searchsessions second secondleadingzero securityui selected selectedbrowser selectedcount selectedindex selecteditem selecteditems selectedpanel selectedtab selectionend selectionstart selstyle seltype sessioncount sessionhistory show
commentcolumn showpopup size smoothscroll spinbuttons src state statusbar statustext stringbundle strings style subject suppressonselect tabcontainer tabindex tabs tabscrolling tabpanels tag textlength textvalue timeout title toolbarname toolbarset tooltip tooltiptext top treeboxobject type uri useraction value valuenumber view webbr...
Building XULRunner - Archive of obsolete content
a basic minimal mozconfig which will build a release configuration of xulrunner is: mk_add_options moz_co_project=xulrunner mk_add_options moz_objdir=@topsrcdir@/obj-xulrunner ac_add_options --enable-application=xulrunner #un
comment the following line if you don't want to build javaxpcom: #ac_add_options --disable-javaxpcom cvs tags and xulrunner versions older xulrunner releases where tagged in cvs with (for instance xulrunner_1_8_0_5_release ) up to version 1.8.0.5 the cvs repository does not have specific tags for xulrunner anymore.
2006-11-17 - Archive of obsolete content
boaz invites your
comments xulrunner 1.8.0.4 is running a kiosk-type application on linux with 512mb, and there is the appearance of a significant memory leak.
2006-09-29 - Archive of obsolete content
discussions file: vs resource: vs chrome: from a security point of view boris zbarsky gives a summary the current setup for checkloaduri (which type of security principal can load what) and asks for
comments about whether that is the desired behaviour.
Element - Archive of obsolete content
a b c <slash:
comments> (rss slash module
comments element) d <slash:department> (rss slash module department element) e f g h <slash:hit_parade> (rss slash hit parade department element) i j k l m n o p q r s <slash:section> (rss slash module section element) t u v w x y z ...
Slash - Archive of obsolete content
documentation selected articles up to 10 why rss slash is popular: counting your
comments charles iliya krempeaux talks about the rss slash module, why it is popular among some, and how it is used to give a count for your
comments (2005-08-22).
Element - Archive of obsolete content
a b c <wfw:
comment> (rss well-formed web module
comment element) <wfw:
commentrss> (rss well-formed web module
comment rss element) d e f g h i j k l m n o p q r s t u v w x y z ...
Element - Archive of obsolete content
rss elements a <author> (rss author element) b c <category> (rss category element) <channel> (rss channel element) <cloud> (rss cloud element) <
comments> (rss
comments element) <copyright> (rss copyright element) d <day> (rss day element) <description> (rss description element) <docs> (rss docs element) e <enclosure> (rss enclosure element) f g <generator> (rss generator element) <guid> (rss guid element) h <height> (rss height element) <hour> (rss hour element) i <image> (rss image element) <item> (rss item element) j k l <language> (rss language element) <lastbuilddate> (rss last build date element) <link> (rss link element) m <managingeditor> (rss managing editor element) n <name> (rss name element) o p <pubdate> (rss publi...
Theme changes in Firefox 2 - Archive of obsolete content
ue"] .searchbar-textbox #stop-button:hover #stop-button:hover:active #urlbar-icons-spacer #urlbar-spacer #urlbar[level="high"] #lock-icon:active #urlbar[level="high"] #lock-icon:hover #urlbar[level="low"] #lock-icon:active #urlbar[level="low"] #lock-icon:hover .autocomplete-treebody::-moz-tree-cell(suggesthint) .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolautocomplete
comment) .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolautocomplete
comment) .bookmark-item[livemark] .openintabs-menuitem .toolbarbutton-icon .toolbarbutton-menubutton-dropmarker toolbar[iconsize="small"] #back-button .toolbarbutton-menubutton-dropmarker toolbar[iconsize="small"] #back-button:hover toolbar[iconsize="small"] #back-button:hover .toolbarbutton-menubutton-dropmarker...
azimuth - Archive of obsolete content
examples h1 { azimuth: 30deg; } td.a { azimuth: far-right; } /* 60deg */ #12 { azimuth: behind far-right; } /* 120deg */ p.
comment { azimuth: behind; } /* 180deg */ specifications specification status
comment css level 2 (revision 1)the definition of 'azimuth' in that specification.
E4X - Archive of obsolete content
the difference between the two modes is that without the "e4x=1" mime type, any statement-level xml/html
comment literals (<!--...-->) are ignored for backwards compatibility with the
comment hiding trick, and cdata sections (<![cdata[...]]>) are not parsed as cdata literals (which leads to a js syntax error in html since html's <script> element produces an implicit cdata section, and therefore cannot contain explicit cdata sections).
Accessing XML children - Archive of obsolete content
var a = <foo> some text <bar>not text</bar> more text </foo>; var list = a.text(); list.length(); // returns 2 list[0]; // returns " some text " list[1]; // returns " more text " you can similarly access
comment nodes: xml.ignore
comments = false; var a = <foo> some <!-- abc --> text </foo>; var
comments = a.
comments(); alert(
comments[0]); // returns <!-- abc --> the * selector will return all child nodes in an xml list.
ArrayBuffer.transfer() - Archive of obsolete content
throw new typeerror('source must be an instance of arraybuffer'); if (length <= source.bytelength) return source.slice(0, length); var sourceview = new uint8array(source), destview = new uint8array(new arraybuffer(length)); destview.set(sourceview); return destview.buffer; }; } specifications specification status
comment arraybuffer.prototype.transfer proposal draft stage 2 draft ...
forEach - Archive of obsolete content
if you wish to make changes, and especially if you wish to revert another user's changes, please either add a
comment here, or post to dev-mdc@lists.mozila.org, explaining the change you desire.
Window: devicelight event - Archive of obsolete content
examples window.addeventlistener('devicelight', function(event) { console.log(event.value); }); specifications specification status
comment ambient light sensorthe definition of 'ambient light events' in that specification.
GLSL Shaders - Game development
applying the shaders to actually apply the newly created shaders to the cube,
comment out the basicmaterial definition first: // var basicmaterial = new three.meshbasicmaterial({color: 0x0095dd}); then, create the shadermaterial: var shadermaterial = new three.shadermaterial( { vertexshader: document.getelementbyid( 'vertexshader' ).textcontent, fragmentshader: document.getelementbyid( 'fragmentshader' ).textcontent }); this shader material takes the code from the scripts ...
Site - MDN Web Docs Glossary: Definitions of Web-related terms
use the registrable domain of mozilla.org is the same http://example.com:8080 https://example.com same site because scheme and port are not relevant examples of different site https://developer.mozilla.org/docs/ https://example.com not same site because the registrable domain of the two urls differs specifications specification status
comment url living standard initial definition ...
Origin - MDN Web Docs Glossary: Definitions of Web-related terms
rs http content through port 80 by default examples of different origin http://example.com/app1 https://example.com/app2 different schemes http://example.com http://www.example.com http://myapp.example.com different hosts http://example.com http://example.com:8080 different ports specifications specification status
comment html living standardthe definition of 'origin' in that specification.
Use CSS to solve common problems - Learn web development
common use cases basics how to apply css to the dom how to use whitespace in css how to write
comments in css how to select elements via element name, class or id how to select elements via attribute name and content how to use pseudo-classes how to use pseudo-elements how to apply multiple selectors to the same rule how to specify colors in css how to debug css in the browser css and text how to style text how to customize a list of elements how to style links how to add shadows to text boxes and layouts how to size css boxes how to control overflowing content how to control the part of a css box that the background is drawn under how do i define inline, block, and inli...
Basic native form controls - Learn web development
here is a basic single line text field example: <input type="text" id="
comment" name="
comment" value="i'm a text field"> single line text fields have only one true constraint: if you type text with line breaks, the browser removes those line breaks before sending the data to the server.
Client-side form validation - Learn web development
emailerror.textcontent = `email should be at least ${ email.minlength } characters; you entered ${ email.value.length }.`; } // set the styling appropriately emailerror.classname = 'error active'; } the
comments explain things pretty well, but briefly: every time we change the value of the input, we check to see if it contains valid data.
Test your skills: Form structure - Learn web development
form structure 1 in this task we want you to structure the provided form features: separate out the first two and second two form fields into two distinct containers, each with a descriptive legend (use "personal details" for the first two, and "
comment information" for the second two).
Tips for authoring fast-loading HTML pages - Learn web development
reducing page weight through the elimination of unnecessary whitespace and
comments, commonly known as minimization, and by moving inline script and css into external files, can improve download performance with minimal need for other changes in the page structure.
What’s in the head? Metadata in HTML - Learn web development
ref="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png"> <!-- non-retina iphone, ipod touch, and android 2.1+ devices: --> <link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png"> <!-- basic favicon --> <link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png"> the
comments explain what each icon is used for — these elements cover things like providing a nice high resolution icon to use when the website is saved to an ipad's home screen.
From object to iframe — other embedding technologies - Learn web development
this is great for incorporating third-party content into your website that you might not have direct control over and don't want to have to implement your own version of — such as video from online video providers,
commenting systems like disqus, maps from online map providers, advertising banners, etc.
Image gallery - Learn web development
you need to: put the section of code below the "looping through images"
comment inside a loop that loops through all 5 images — you just need to loop through five numbers, one representing each image.
Starting our Svelte Todo list app - Learn web development
moreover, our editor can display this warning even before calling the compiler: you can tell svelte to ignore this warning for the next block of markup with a
comment beginning with svelte-ignore, like this: <!-- svelte-ignore a11y-missing-attribute --> <img height="32" width="88" src="https://udn.realityripple.com/samples/b0/98dase3c7d.png"> note: with vscode you can automatically add this ignore
comment by clicking on the quick fix...
Chrome registration
manifest instructions
comments # this line is a
comment - you can put here whatever you want a line is a
comment if it begins with the character '#'.
Updating NSPR or NSS in mozilla-central
(because some developers might not be aware that nspr/nss are separately maintained and released, the mozilla hg server rejects accidental changes/forking, if the required keywords are missing in the commit
comment.) if nspr or nss must be upgraded to a new static tag, follow this procedure: before starting, make sure your local repository is updated to mozilla-central tip and that there are no local changes: $ hg status -mard pull the new sources $ python client.py update_nspr nspr_tag_name or $ python client.py update_nss nss_tag_name if you update a branch older than mozilla 17 (witho...
Interface development guide
commenting idl for better documentation a guide explaining how to properly
comment your interface's idl in order to ensure that not only can others understand your interface, but to ensure that the documentation here on mdc is as accurate as possible.
SVG Guidelines
metadata can mean many things, including: the typical "created with editor"
comments non-standard editor specific tags and attributes (sketch:foo, illustrator:foo, sopodi:foo, …) the xml namespace definition that comes with the latter (xmlns:sketch, xmlns:sopodi, …) other metadata in addition to non-standard editor metadata, standard compliant metadata also exists.
Security best practices for Firefox front-end engineers
we use our built-in sanitizer with the following flags: sanitizerallowstyle sanitizerallow
comments sanitizerdropforms sanitizerlogremovals the sanitizer removes all scripts (script tags, event handlers) and form elements (form, input, keygen, option, optgroup, select, button, datalist).
HTTP Cache
this document only contains what cannot be found or may not be clear directly from the idl files
comments.
How to get a stacktrace for a bug report
if you have any additional information about the crash, such as additional detail on what you were doing at the time that may have triggered the crash, please enter it into the
comments box.
Addon
fulldescription read only string developer
comments read only string eula read only string icon64url read only string supporturl read only string contributionurl read only string contributionamount read only string averagerating read only number reviewcount read only integer reviewurl read only string...
Localizing XLIFF files for iOS
<trans-unit id="add to bookmarks"> <source>add to bookmarks</source> <target>agregar a marcadores</target> <note>no
comment provided by engineer.</note> </trans-unit> save your translations along the way.
Localizing extension metadata on addons.mozilla.org
the localizable data fields of an extension are: name homepage summary description eula privacy policy version notes developer
comments when you submit a new extension to amo, the process is divided into several steps.
Localization formats
other projects understand mozilla has a basic tool called main.lang checker, which can show any untranslated files to the localizer no need to compile to .mo file so a localizer can see his/her changes more quickly creating simple diffs .lang files will be cached which will reduce any slowness effect disadvantage to .lang no plural forms no context for localizers unless you provide good
comments no styling by localizers if it is needed may be slower because file is not compiled into binaries not used as a standard by any other localization project no tools to validate syntax, so a localizer may cause accidental errors that can cause breakage (level of breakage depends on level of error) cannot use po editor, which most localizers know and love gettext (.po) gettext is a widely-...
Mozilla Web Developer FAQ
things that look like xml
comments are treated as xml
comments—even inside script or style elements.
Mozilla Development Strategies
take extra time to do it right the first time it's also better to come up with one really solid, well tested, well
commented, clean, easy to maintain piece of code than a bunch of quick fixes.
Mozilla Quirks Mode Behavior
html parser in quirks mode, we parsed html
comments in a non-sgml way compatible with other browsers instead of treating "--" as the
comment start and end delimiter.
Investigating leaks using DMD heap scan mode
secondly, you may need to
comment out the call to moz_crash("nss_shutdown failed"); in xpcom/build/xpcominit.cpp, as this also seems to trigger when shutdown is extremely slow.
DMD
$ killall -34 firefox each one of these steps triggers all the memory reporters and then dmd analyzes the reports, printing
commentary like this: dmd[5222] opened /tmp/dmd-1414556492-5222.json.gz for writing dmd[5222] dump 1 { dmd[5222] constructing the heap block list...
Leak-hunting strategies and tips
some places you can do this are: layout engine define debug_tracemalloc_framearena where it is
commented out in layout/base/nspresshell.cpp glib set the environment variable g_slice=always-malloc other references performance tools leak debugging screencasts (dbaron) leakingpages - a list of pages known to leak mdc:performance - contains documentation for all of our memory profiling and leak detection tools ...
TimerFirings logging
indicates that the function timer lacks an explicit name, and the
comment within the square brackets explains why the fallback mechanism wasn't used.
TraceMalloc
see nstracemalloc.h for detailed
comments on the log file format.
about:memory
if you are using a communication channel where only text can be sent, such as a
comment thread on a website, click on the "measure..." button.
Firefox Sync
ios there is some in-tree documentation and there are some extensive
comments here and here.
Index
crl generation script syntax crl generation script file has the following syntax: * line with
comments should have # as a first symbol of a line * set "this update" or "next update" crl fields: update=yyyymmddhhmmssz nextupdate=yyyymmddhhmmssz field "next update" is optional.
NSS 3.12.5 release_notes
ipher suites implemented in windows 7 to ssltap bug 516101: if pk11_importcert fails, it leaves the certificate undiscoverable by cert_pkixverifycert bug 518443: pk11_importandreturnprivatekey leaks an arena bug 518446: pk11_derencodepublickey leaks a certsubjectpublickeyinfo bug 518457: seckey_encodedersubjectpublickeyinfo and pk11_derencodepublickey are duplicate bug 522510: add deprecated
comments to key.h and pk11func.h bug 522580: nss uses port_memcmp for comparing secret data.
NSS 3.20 release notes
please refer to the
comments in the header file that declares the ssl_enableweakdheprimegroup api for additional details.
NSS 3.44 release notes
@example.com (not @bogus.com) 1538479 - post-handshake messages after async server authentication break when using record layer separation 1521578 - x25519 support in pk11pars.c 1540205 - freebl build fails with -dnss_disable_chachapoly 1532312 - post-handshake auth doesn't interoperate with openssl 1542741 - certutil -f crashes with segmentation fault 1546925 - allow preceding text in try
comment 1534468 - expose chacha20 primitive 1418944 - quote cc/cxx variables passed to nspr 1543545 - allow to build nss as a static library 1487597 - early data that arrives before the handshake completes can be read afterwards 1548398 - freebl_gtest not building on linux/mac 1548722 - fix some coverity warnings 1540652 - softoken/sdb.c: logically dead code 1549413 - android log lib is not inclu...
NSS API Guidelines
the preferred format is: "@(#) $rcsfile: nss-guidelines.html, v $ $revision: 48936 $ $date: 2009-08-11 07:45:57 -0700 (tue, 11 aug 2009) $ $name$" you can put the string in a
comment or in a static char array.
NSS tools : crlutil
crl generation script syntax crl generation script file has the following syntax: * line with
comments should have # as a first symbol of a line * set "this update" or "next update" crl fields: update=yyyymmddhhmmssz nextupdate=yyyymmddhhmmssz field "next update" is optional.
NSS Tools crlutil
crl generation script syntax: crl generation script file has the following syntax: line with
comments should have <bold>#</bold> as a first symbol of a line set "this update" or "next update" crl fields: update=yyyymmddhhmmssz nextupdate=yyyymmddhhmmssz field "next update" is optional.
NSS tools : crlutil
crl generation script syntax crl generation script file has the following syntax: * line with
comments should have # as a first symbol of a line * set "this update" or "next update" crl fields: update=yyyymmddhhmmssz nextupdate=yyyymmddhhmmssz field "next update" is optional.
Necko walkthrough
note: nsconnectionentry has a single nshttpconnectioninfo object attached, a pending queue of nshttptransactions, and 3 arrays for connections: active nshttpconnections idle nshttpconnections nshalfopensockets nshttpconnectionmgr::trydispatchtransaction there is a series of decisions about whether dispatchtransaction is called, along with good code
comments: best to read the code for more detail.
Installing Pork
build and install mcpp mcpp generates macro expansion
comments that allow pork's elsa to undo macros, which is necessary in order to get exact position information.
Rhino Examples
the checkparam.js script is a useful tool to check that @param tags in java documentation
comments match the parameters in the corresponding java method.
Exact Stack Rooting
every use of these should be
commented to explain why they are guaranteed to be rooted.
JS_DoubleIsInt32
(
comment from mozilla::numberequalsint32) casting a floating-point value that doesn't truncate to int32_t, to int32_t, induces undefined behavior.
jsdouble
help in the form of test cases,
commentary, and patches is always appreciated.
Shell global objects
if omitted, attach no source map url to the code (although the code may provide one itself, via a //#sourcemappingurl
comment).
Split object
...and yet, there is special code in jsobj.h with a
comment about fixing some kind of interaction between with an split objects.
Thread Sanitizer
# if it's not already in your $path, then un
comment this next line: #export llvm_symbolizer="/path/to/llvm-symbolizer" # add tsan to our compiler flags export cflags="-fsanitize=thread -fpic -pie" export cxxflags="-fsanitize=thread -fpic -pie" # additionally, we need the tsan flag during linking.
Secure Development Guidelines
using the mozilla api use c++ strings so c strings are possible mozilla c safe string handling apis similar to libc str*cpy and str*cat some are potentially dangerous function name
comments pl_strcpy, pl_strcat these functions don't verify whether the destination buffer is large enough.
Handling Mozilla Security Bugs
when a bug is put into the security bug group, the group members, bug reporter, and others associated with the bug will decide by consensus, either through
comments on the bug or the group mailing list, whether an immediate warning to users is appropriate and how it should be worded.
XML Extras
file new bugs for additional documentation contributions, either specifically aimed at javascript developers or to complete & clarify the javadoc-style
comments in the idl files.
Binary compatibility
comments and questions should be directed to the newsgroup, mozilla.dev.tech.xpcom, or the mailing list, mozilla-xpcom@mozilla.org.
Creating a Python XPCOM component
# _reg_clsid_ = "{a new clsid generated for this object}" # _reg_contractid_ = "the.object.name" def get_value( self ): # result: string pass def set_value( self, param0 ): # result: void - none # in: param0: string pass as you can see, the output is valid python code, with basic signatures and useful
comments for each of the methods.
An Overview of XPCOM
in addition to writing well-
commented code that tells the client developer the rules about init(), the developer can take a couple steps to make this contract even clearer.
Component Internals
unless an interface is explicitly marked "frozen" in the idl
comments, your component may possibly break or crash along with a version change.
Starting WebLock
xpidl code generation the xpidl compiler also generates a stub implementation of the interface in a
commented section of the generated header file, in which each method returns ns_error_not_implemented.
How to build a binary XPCOM component using Visual Studio
the command executes xpidl.exe twice, like this: {path_to_geckosdk}\bin\xpidl.exe -m header -i..\gecko-sdk\idl {your_idl_file} {path_to_geckosdk}\bin\xpidl.exe -m typelib -i..\gecko-sdk\idl {your_idl_file} the generated h file actually has a skeleton implementation (
commented out).
Introduction to XPCOM for the DOM
indeed, many interfaces in the mozilla code are frozen (this is indicated by the
comment @frozen at the beginning of the interface definition).
RefPtr
there are no technical problems with doing so, and in some cases it may be necessary (see bug 756640
comment 1).
nsIAutoCompleteInput
show
commentcolumn boolean if true, a column is added to the popup, showing the
comment for each autocomplete result.
nsIAutoCompleteItem
comment wstring an extra
comment that will be displayed next to the value but that will not be part of the value itself.
nsICacheService
at the time of writing there is no documentation for nsicachestorageservice but
comments are available in the source.
nsIDOMNode
constants constant value description element_node 1 attribute_node 2 text_node 3 cdata_section_node 4 entity_reference_node 5 entity_node 6 processing_instruction_node 7
comment_node 8 document_node 9 document_type_node 10 document_fragment_node 11 notation_node 12 methods appendchild() nsidomnode appendchild( in nsidomnode newchild ); parameters newchild return value clonenode() nsidomnode clonenode( in boolean deep ); parameters deep return value hasattributes() boolean hasattributes(); parameters none.
nsIDirIndexParser
attributes attribute type description
comment string the
comment given, if any.
nsIJSON
to create an instance, use: var nativejson = components.classes["@mozilla.org/dom/json;1"] .createinstance(components.interfaces.nsijson); method overview note: the idl file has portions of the idl
commented out because they represent things that can't actually be properly described by idl; however, for the purposes of this article, we'll pretend they can be and ignore that issue.
nsIMsgHeaderParser
that argument is for passing in addresses that were already mentioned in other header fields.) addresses are considered to be the same if they contain the same mailbox part (case-insensitive.) real names and other
comments are not compared.
nsITextInputProcessor
when you attempt to dispatch a non-printable key's events, it's re
commented this be specified.
nsIWindowMediator
domwindow.alert('tab was selected') }, false); } }, false); }, onclosewindow: function (awindow) {}, onwindowtitlechange: function (awindow, atitle) {} }; //to register services.wm.addlistener(windowlistener); //services.wm.removelistener(windowlistener); //once you want to remove this listener execute removelistener, currently its
commented out so you can copy paste this code in scratchpad and see it work native code only!calculatezposition a window wants to be moved in z-order.
nsIXMLHttpRequest
here is a
comment from johnny stenback <jst@netscape.com>: the mozilla implementation of nsixmlhttprequest implements the interface nsidomeventtarget and that's how you're supported to add event listeners.
Warnings
if, for some reason you cannot use an index in your order by clause, you can suppress this warning by including a sql
comment in your query that contains this text: /* do not warn (bug [everything in these brackets does not matter] */ the bug mentioned should explain why the query cannot use an index.
Frequently Asked Questions
no matter which code pattern you use to solve this problem, you should
comment it, e.g., // warning: this getter doesn't addref() its result.
Status, Recent Changes, and Plans
added an entire section to the getting started guide on nscomptrs in function signatures added references to recent bugs influencing the use of nscomptr machinery: bug 59212, and bug 59414 fixed comparisons 1 and 3, as per
comments by morten welinder updated examples to prefer direct initialization over copy initialization.
xpidl
it generates: c++ header files (.h), with a
commented template for full c++ implementation of the interface xpconnect typelib files (.xpt), with runtime type information to dynamically call xpcom objects through xpconnect note: starting in gecko 9.0, xpidl has been replaced with pyxpidl in the gecko sdk.
Index
in addition mozilla update allows users to
comment and provide feedback on your extension.
Activity Manager examples
(this example seems to be outdated and not working, see bug 557467
comment 1.) //optional: define some convenience constants const nsactprocess = components.constructor("@mozilla.org/activity-process;1", "nsiactivityprocess", "init"); const nsactevent = components.constructor("@mozilla.org/activity-event;1", "nsiactivityevent", "init"); // step 1: implement nsiactivitycontextdisplayhe...
Using COM from js-ctypes
basis and reference for this article bugzilla :: bug 738501 - implement ability to create windows shortcuts from javascript -
comment 4 relavent topic bugzilla :: bug 505907 - support c++ calling from jsctypes converting com code to c code to convert com code to js-ctypes, we need to write c++ vtable pointers in c.
Introduction to DOM Inspector - Firefox Developer Tools
the following descriptions provide an overview of what these viewers are about: the dom nodes viewer shows attributes of nodes that can take them, or the text content of text nodes,
comments, and processing instructions.
Style Editor - Firefox Developer Tools
rl + v undo ctrl + z cmd + z ctrl + z redo ctrl + shift + z / ctrl + y cmd + shift + z / cmd + y ctrl + shift + z / ctrl + y indent tab tab tab unindent shift + tab shift + tab shift + tab move line(s) up alt + up alt + up alt + up move line(s) down alt + down alt + down alt + down
comment/un
comment line(s) ctrl + / cmd + / ctrl + / ...
ANGLE_instanced_arrays.drawArraysInstancedANGLE() - Web APIs
examples var ext = gl.getextension('angle_instanced_arrays'); ext.drawarraysinstancedangle(gl.points, 0, 8, 4); specifications specification status
comment angle_instanced_arraysthe definition of 'angle_instanced_arrays' in that specification.
ANGLE_instanced_arrays.drawElementsInstancedANGLE() - Web APIs
examples var ext = gl.getextension('angle_instanced_arrays'); ext.drawelementsinstancedangle(gl.points, 2, gl.unsigned_short, 0, 4); specifications specification status
comment angle_instanced_arraysthe definition of 'angle_instanced_arrays' in that specification.
ANGLE_instanced_arrays - Web APIs
examples enabling the extension: var ext = gl.getextension('angle_instanced_arrays'); specifications specification status
comment angle_instanced_arraysthe definition of 'angle_instanced_arrays' in that specification.
AbortController - Web APIs
specifications specification status
comment domthe definition of 'abortcontroller' in that specification.
AbortSignal.aborted - Web APIs
console.log('request has been aborted') : console.log('request not aborted'); specifications specification status
comment domthe definition of 'onabort' in that specification.
AbortSignal.onabort - Web APIs
var controller = new abortcontroller(); var signal = controller.signal; signal.onabort = function() { console.log('request aborted'); }; specifications specification status
comment domthe definition of 'onabort' in that specification.
AbortSignal - Web APIs
specifications specification status
comment domthe definition of 'abortsignal' in that specification.
AbsoluteOrientationSensor - Web APIs
} else { console.log("no permissions to use absoluteorientationsensor."); } }); specifications specification status
comment generic sensor api candidate recommendation defines sensors in general.
AbstractRange - Web APIs
the result looks like this: specifications specification status
comment domthe definition of 'abstractrange' in that specification.
AbstractWorker.onerror - Web APIs
}; example the following code snippet shows creation of a worker object using the worker() constructor and setting up of an onerror handler on the resulting object: var myworker = new worker('worker.js'); myworker.onerror = function() { console.log('there is an error with your worker!'); } specifications specification status
comment html living standardthe definition of 'abstractworker.onerror' in that specification.
AbstractWorker - Web APIs
specifications specification status
comment html living standardthe definition of 'abstractworker' in that specification.
Accelerometer.x - Web APIs
let accelerometer = new accelerometer({frequency: 60}); accelerometer.addeventlistener('reading', e => { console.log("acceleration along the x-axis " + accelerometer.x); console.log("acceleration along the y-axis " + accelerometer.y); console.log("acceleration along the z-axis " + accelerometer.z); }); accelerometer.start(); specifications specification status
comment generic sensor api candidate recommendation defines sensors in general.
Accelerometer.y - Web APIs
let accelerometer = new accelerometer({frequency: 60}); accelerometer.addeventlistener('reading', e => { console.log("acceleration along the x-axis " + accelerometer.x); console.log("acceleration along the y-axis " + accelerometer.y); console.log("acceleration along the z-axis " + accelerometer.z); }); accelerometer.start(); specifications specification status
comment generic sensor api candidate recommendation defines sensors in general.
Accelerometer.z - Web APIs
let accelerometer = new accelerometer({frequency: 60}); accelerometer.addeventlistener('reading', e => { console.log("acceleration along the x-axis " + accelerometer.x); console.log("acceleration along the y-axis " + accelerometer.y); console.log("acceleration along the z-axis " + accelerometer.z); }); accelerometer.start(); specifications specification status
comment generic sensor api candidate recommendation defines sensors in general.
Accelerometer - Web APIs
let acl = new accelerometer({frequency: 60}); acl.addeventlistener('reading', () => { console.log("acceleration along the x-axis " + acl.x); console.log("acceleration along the y-axis " + acl.y); console.log("acceleration along the z-axis " + acl.z); }); acl.start(); specifications specification status
comment generic sensor api candidate recommendation defines sensors in general.
AddressErrors.city - Web APIs
specifications specification status
comment payment request apithe definition of 'addresserrors.city' in that specification.
AddressErrors.country - Web APIs
specifications specification status
comment payment request apithe definition of 'addresserrors.country' in that specification.
AddressErrors.phone - Web APIs
specifications specification status
comment payment request apithe definition of 'addresserrors.phone' in that specification.
AddressErrors.region - Web APIs
specifications specification status
comment payment request apithe definition of 'addresserrors.region' in that specification.
AddressErrors - Web APIs
specifications specification status
comment payment request apithe definition of 'addresserrors' in that specification.
AesCbcParams - Web APIs
specifications specification status
comment web cryptography apithe definition of 'subtlecrypto.aescbcparams' in that specification.
AesCtrParams - Web APIs
specifications specification status
comment web cryptography apithe definition of 'subtlecrypto.aesctrparams' in that specification.
AesGcmParams - Web APIs
specifications specification status
comment web cryptography apithe definition of 'subtlecrypto.aesgcmparams' in that specification.
AesKeyGenParams - Web APIs
specifications specification status
comment web cryptography apithe definition of 'subtlecrypto.aeskeygenparams' in that specification.
AmbientLightSensor.illuminance - Web APIs
example if ( 'ambientlightsensor' in window ) { const sensor = new ambientlightsensor(); sensor.onreading = () => { console.log('current light level:', sensor.illuminance); }; sensor.onerror = (event) => { console.log(event.error.name, event.error.message); }; sensor.start(); } specifications specification status
comment generic sensor api candidate recommendation defines sensors in general.
AmbientLightSensor - Web APIs
example if ( 'ambientlightsensor' in window ) { const sensor = new ambientlightsensor(); sensor.onreading = () => { console.log('current light level:', sensor.illuminance); }; sensor.onerror = (event) => { console.log(event.error.name, event.error.message); }; sensor.start(); } specifications specification status
comment generic sensor api candidate recommendation defines sensors in general.
Ambient Light Events - Web APIs
function(event) { var body = document.queryselector('body'); if (event.value < 50) { body.classlist.add('darklight'); body.classlist.remove('brightlight'); } else { body.classlist.add('brightlight'); body.classlist.remove('darklight'); } }); } else { console.log('devicelight event not supported'); } specifications specification status
comment ambient light sensorthe definition of 'ambient light events' in that specification.
AnalyserNode.fftSize - Web APIs
< bufferlength; i++) { var v = dataarray[i] / 128.0; var y = v * height/2; if(i === 0) { canvasctx.moveto(x, y); } else { canvasctx.lineto(x, y); } x += slicewidth; } canvasctx.lineto(canvas.width, canvas.height/2); canvasctx.stroke(); }; draw(); specifications specification status
comment web audio apithe definition of 'fftsize' in that specification.
AnalyserNode.frequencyBinCount - Web APIs
t(0, 0, width, height); var barwidth = (width / bufferlength) * 2.5 - 1; var barheight; var x = 0; for(var i = 0; i < bufferlength; i++) { barheight = dataarray[i]; canvasctx.fillstyle = 'rgb(' + (barheight+100) + ',50,50)'; canvasctx.fillrect(x,height-barheight/2,barwidth,barheight/2); x += barwidth; } }; draw(); specifications specification status
comment web audio apithe definition of 'frequencybincount' in that specification.
AnalyserNode.getByteTimeDomainData() - Web APIs
.0 / bufferlength; let x = 0; canvasctx.beginpath(); for(var i = 0; i < bufferlength; i++) { const v = dataarray[i]/128.0; const y = v * height/2; if(i === 0) canvasctx.moveto(x, y); else canvasctx.lineto(x, y); x += slicewidth; } canvasctx.lineto(width, height/2); canvasctx.stroke(); }; draw(); specifications specification status
comment web audio apithe definition of 'getbytetimedomaindata()' in that specification.
AnalyserNode.getFloatFrequencyData() - Web APIs
ngth) * 2.5; let posx = 0; for (let i = 0; i < bufferlength; i++) { const barheight = (dataarray[i] + 140) * 2; canvasctx.fillstyle = 'rgb(' + math.floor(barheight + 100) + ', 50, 50)'; canvasctx.fillrect(posx, canvas.height - barheight / 2, barwidth, barheight / 2); posx += barwidth + 1; } }; draw(); </script> </body> specifications specification status
comment web audio apithe definition of 'getfloatfrequencydata()' in that specification.
AnalyserNode.maxDecibels - Web APIs
t(0, 0, width, height); var barwidth = (width / bufferlength) * 2.5; var barheight; var x = 0; for(var i = 0; i < bufferlength; i++) { barheight = dataarray[i]; canvasctx.fillstyle = 'rgb(' + (barheight+100) + ',50,50)'; canvasctx.fillrect(x,height-barheight/2,barwidth,barheight/2); x += barwidth + 1; } }; draw(); specifications specification status
comment web audio apithe definition of 'maxdecibels' in that specification.
AnalyserNode.minDecibels - Web APIs
t(0, 0, width, height); var barwidth = (width / bufferlength) * 2.5; var barheight; var x = 0; for(var i = 0; i < bufferlength; i++) { barheight = dataarray[i]; canvasctx.fillstyle = 'rgb(' + (barheight+100) + ',50,50)'; canvasctx.fillrect(x,height-barheight/2,barwidth,barheight/2); x += barwidth + 1; } }; draw(); specifications specification status
comment web audio apithe definition of 'mindecibels' in that specification.
AnalyserNode.smoothingTimeConstant - Web APIs
t(0, 0, width, height); var barwidth = (width / bufferlength) * 2.5; var barheight; var x = 0; for(var i = 0; i < bufferlength; i++) { barheight = dataarray[i]; canvasctx.fillstyle = 'rgb(' + (barheight+100) + ',50,50)'; canvasctx.fillrect(x,height-barheight/2,barwidth,barheight/2); x += barwidth + 1; } }; draw(); specifications specification status
comment web audio apithe definition of 'smoothingtimeconstant' in that specification.
AnalyserNode - Web APIs
ength; var x = 0; for (var i = 0; i < bufferlength; i++) { var v = dataarray[i] / 128.0; var y = v * canvas.height / 2; if (i === 0) { canvasctx.moveto(x, y); } else { canvasctx.lineto(x, y); } x += slicewidth; } canvasctx.lineto(canvas.width, canvas.height / 2); canvasctx.stroke(); } draw(); specifications specification status
comment web audio apithe definition of 'analysernode' in that specification.
Animation() - Web APIs
examples in the follow the white rabbit example, the animation() constructor is used to create an animation for the rabbitdownkeyframes using the document's timeline: var rabbitdownanimation = new animation(rabbitdownkeyframes, document.timeline); specifications specification status
comment web animationsthe definition of 'animation()' in that specification.
Animation.cancel() - Web APIs
specifications specification status
comment web animationsthe definition of 'animation.cancel()' in that specification.
Animation.commitStyles() - Web APIs
examples const divelem = document.queryselector('div'); document.body.addeventlistener('mousemove', evt => { let anim = divelem.animate( { transform: `translate(${ evt.clientx}px, ${evt.clienty}px)` }, { duration: 500, fill: 'forwards' } ); anim.commitstyles(); }); specifications specification status
comment web animationsthe definition of 'commitstyles()' in that specification.
Animation.effect - Web APIs
specifications specification status
comment web animationsthe definition of 'animation.effect' in that specification.
Animation.finish() - Web APIs
elem.getanimations().foreach( function(animation){ return animation.finish(); } ); specifications specification status
comment web animationsthe definition of 'finish()' in that specification.
Animation.finished - Web APIs
examples the following code waits until all animations running on the element elem have finished, then deletes the element from the dom tree: promise.all( elem.getanimations().map( function(animation) { return animation.finished } ) ).then( function() { return elem.remove(); } ); specifications specification status
comment web animationsthe definition of 'animation.finished' in that specification.
Animation.id - Web APIs
examples in the follow the white rabbit example, you can assign the rabbitdownanimation an id like so: rabbitdownanimation.effect.id = "rabbitgo"; specifications specification status
comment web animationsthe definition of 'animation.id' in that specification.
Animation.oncancel - Web APIs
animation.oncancel = function() { animation.effect.target.remove(); }; specifications specification status
comment web animationsthe definition of 'animation.oncancel' in that specification.
Animation.onfinish - Web APIs
hide(endingui); // when the credits are later faded in, // we re-add the pointer events when they're done bringui.onfinish = function() { endingui.style.pointerevents = 'auto'; }; specifications specification status
comment web animationsthe definition of 'animation.onfinish' in that specification.
Animation.onremove - Web APIs
specifications specification status
comment web animationsthe definition of 'animation.onremove' in that specification.
Animation.pause() - Web APIs
cake.addeventlistener("mouseup", stopplayingalice, false); bottle.addeventlistener("mouseup", stopplayingalice, false); specifications specification status
comment web animationsthe definition of 'play()' in that specification.
Animation.play() - Web APIs
cake.addeventlistener("mousedown", growalice, false); cake.addeventlistener("touchstart", growalice, false); specifications specification status
comment web animationsthe definition of 'play()' in that specification.
Animation.playState - Web APIs
tears.foreach(function(el) { el.pause(); el.currenttime = 0; }); specifications specification status
comment web animationsthe definition of 'playstate' in that specification.
Animation.playbackRate - Web APIs
_alice.playbackrate > .4) { redqueen_alice.playbackrate *= .9; } }, 3000); but clicking or tapping on them causes them to speed up by multiplying their playbackrate: var gofaster = function() { redqueen_alice.playbackrate *= 1.1; } document.addeventlistener("click", gofaster); document.addeventlistener("touchstart", gofaster); specifications specification status
comment web animationsthe definition of 'animation.playbackrate' in that specification.
Animation.ready - Web APIs
animation.pause(); animation.ready.then(function() { // displays 'running' alert(animation.playstate); }); animation.play(); specifications specification status
comment web animationsthe definition of 'animation.ready' in that specification.
Animation.reverse() - Web APIs
reverse alicechange.playbackrate = -1; alicechange.play(); // play the bottle's animation drinking.play() } but it could also have been done by calling reverse() on alicechange like so: var shrinkalice = function() { // play alice's animation in reverse alicechange.reverse(); // play the bottle's animation drinking.play() } specifications specification status
comment web animationsthe definition of 'reverse()' in that specification.
Animation.startTime - Web APIs
specifications specification status
comment web animationsthe definition of 'animation.starttime' in that specification.
Animation.timeline - Web APIs
examples here we set the animation's timeline to be the same as the document's timeline (this is the default timeline for all animations, by the way): animation.timeline = document.timeline; specifications specification status
comment web animationsthe definition of 'animation.timeline' in that specification.
Animation.updatePlaybackRate() - Web APIs
examples a speed selector component would benefit from smooth updating of updateplaybackrate(), as demonstrated below: speedselector.addeventlistener('input', evt => { cartoon.updateplaybackrate(parsefloat(evt.target.value)); cartoon.ready.then(() => { console.log(`playback rate set to ${cartoon.playbackrate}`); }); }); specifications specification status
comment web animationsthe definition of 'updateplaybackrate()' in that specification.
Animation - Web APIs
designing safer web animation for motion sensitivity · an a list apart article an introduction to the reduced motion media query | css-tricks responsive design for motion | webkit mdn understanding wcag, guideline 2.2 explanations understanding success criterion 2.2.2 | w3c understanding wcag 2.0 specifications specification status
comment web animationsthe definition of 'animation' in that specification.
AnimationEffect - Web APIs
specifications specification status
comment web animationsthe definition of 'animationeffect' in that specification.
AnimationEvent() - Web APIs
specifications specification status
comment css animationsthe definition of 'animationevent()' in that specification.
AnimationEvent.animationName - Web APIs
syntax name = animationevent.animationname specifications specification status
comment css animationsthe definition of 'animationevent.animationname' in that specification.
AnimationEvent.elapsedTime - Web APIs
syntax time = animationevent.elapsedtime specifications specification status
comment css animationsthe definition of 'animationevent.elapsedtime' in that specification.
AnimationEvent.pseudoElement - Web APIs
syntax name = animationevent.pseudoelement specifications specification status
comment css animationsthe definition of 'animationevent.pseudoelement' in that specification.
AnimationEvent - Web APIs
specifications specification status
comment css animationsthe definition of 'animationevent' in that specification.
AnimationTimeline - Web APIs
specifications specification status
comment web animationsthe definition of 'animationtimeline' in that specification.
ArrayBufferView - Web APIs
specifications specification status
comment web idlthe definition of 'arraybufferview' in that specification.
Attr.localName - Web APIs
specifications specification status
comment domthe definition of 'attr.localname' in that specification.
Attr.prefix - Web APIs
specifications specification status
comment domthe definition of 'attr: prefix' in that specification.
Attr - Web APIs
specifications specification status
comment domthe definition of 'attr' in that specification.
AudioBuffer() - Web APIs
specifications specification status
comment web audio apithe definition of 'audiobuffer' in that specification.
AudioBuffer.copyFromChannel() - Web APIs
var myarraybuffer = audioctx.createbuffer(2, framecount, audioctx.samplerate); var anotherarray = new float32array(length); myarraybuffer.copyfromchannel(anotherarray, 1, 0); specification specification status
comment web audio apithe definition of 'copyfromchannel' in that specification.
AudioBuffer.copyToChannel() - Web APIs
myarraybuffer.copytochannel (anotherarray,0,0); specification specification status
comment web audio apithe definition of 'copytochannel' in that specification.
AudioBuffer.duration - Web APIs
// this gives us the actual arraybuffer that contains the data var nowbuffering = myarraybuffer.getchanneldata(channel); for (var i = 0; i < framecount; i++) { // math.random() is in [0; 1.0] // audio needs to be in [-1.0; 1.0] nowbuffering[i] = math.random() * 2 - 1; } } console.log(myarraybuffer.duration); } specification specification status
comment web audio apithe definition of 'duration' in that specification.
AudioBuffer.length - Web APIs
// this gives us the actual arraybuffer that contains the data var nowbuffering = myarraybuffer.getchanneldata(channel); for (var i = 0; i < framecount; i++) { // math.random() is in [0; 1.0] // audio needs to be in [-1.0; 1.0] nowbuffering[i] = math.random() * 2 - 1; } } console.log(myarraybuffer.length); } specification specification status
comment web audio apithe definition of 'length' in that specification.
AudioBuffer.numberOfChannels - Web APIs
gives us the actual arraybuffer that contains the data var nowbuffering = myarraybuffer.getchanneldata(channel); for (var i = 0; i < framecount; i++) { // math.random() is in [0; 1.0] // audio needs to be in [-1.0; 1.0] nowbuffering[i] = math.random() * 2 - 1; } } console.log(myarraybuffer.numberofchannels); } specification specification status
comment web audio apithe definition of 'numberofchannels' in that specification.
AudioBuffer.sampleRate - Web APIs
/ this gives us the actual arraybuffer that contains the data var nowbuffering = myarraybuffer.getchanneldata(channel); for (var i = 0; i < framecount; i++) { // math.random() is in [0; 1.0] // audio needs to be in [-1.0; 1.0] nowbuffering[i] = math.random() * 2 - 1; } } console.log(myarraybuffer.samplerate); } specification specification status
comment web audio apithe definition of 'samplerate' in that specification.
AudioBuffer - Web APIs
e audionode to use when we want to play an audiobuffer var source = audioctx.createbuffersource(); // set the buffer in the audiobuffersourcenode source.buffer = myarraybuffer; // connect the audiobuffersourcenode to the // destination so we can hear the sound source.connect(audioctx.destination); // start the source playing source.start(); specifications specification status
comment web audio apithe definition of 'audiobuffer' in that specification.
AudioBufferSourceNode.buffer - Web APIs
// this is the audionode to use when we want to play an audiobuffer var source = audioctx.createbuffersource(); // set the buffer in the audiobuffersourcenode source.buffer = myarraybuffer; specifications specification status
comment web audio apithe definition of 'buffer' in that specification.
AudioBufferSourceNode.detune - Web APIs
; channel++) { const nowbuffering = myarraybuffer.getchanneldata(channel); for (let i = 0; i < framecount; i++) { nowbuffering[i] = math.random() * 2 - 1; } } const source = audioctx.createbuffersource(); source.buffer = myarraybuffer; source.connect(audioctx.destination); source.detune.value = 100; // value in cents source.start(); specifications specification status
comment web audio apithe definition of 'detune' in that specification.
AudioBufferSourceNode.loop - Web APIs
source.loop = true; }, function(e){"error with decoding audio data" + e.err}); } request.send(); } // wire up buttons to stop and play audio, and range slider control play.onclick = function() { getdata(); source.start(0); play.setattribute('disabled', 'disabled'); playbackcontrol.removeattribute('disabled'); } specification specification status
comment web audio apithe definition of 'loop' in that specification.
AudioBufferSourceNode.loopEnd - Web APIs
loopstartcontrol.oninput = function() { source.loopstart = loopstartcontrol.value; loopstartvalue.innerhtml = loopstartcontrol.value; } loopendcontrol.oninput = function() { source.loopend = loopendcontrol.value; loopendvalue.innerhtml = loopendcontrol.value; } specifications specification status
comment web audio apithe definition of 'loopend' in that specification.
AudioBufferSourceNode.loopStart - Web APIs
loopstartcontrol.oninput = function() { source.loopstart = loopstartcontrol.value; loopstartvalue.innerhtml = loopstartcontrol.value; } loopendcontrol.oninput = function() { source.loopend = loopendcontrol.value; loopendvalue.innerhtml = loopendcontrol.value; } specifications specification status
comment web audio apithe definition of 'loopstart' in that specification.
AudioBufferSourceNode.playbackRate - Web APIs
disabled'); playbackcontrol.removeattribute('disabled'); } stop.onclick = function() { source.stop(0); play.removeattribute('disabled'); playbackcontrol.setattribute('disabled', 'disabled'); } playbackcontrol.oninput = function() { source.playbackrate.value = playbackcontrol.value; playbackvalue.innerhtml = playbackcontrol.value; } specification specification status
comment web audio apithe definition of 'playbackrate' in that specification.
AudioConfiguration - Web APIs
'' : 'not ') + 'power efficient.' }); specifications specification status
comment media capabilitiesthe definition of 'audioconfiguration' in that specification.
AudioContext() - Web APIs
var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext({ latencyhint: 'interactive', samplerate: 44100, }); specifications specification status
comment web audio apithe definition of 'audiocontext()' in that specification.
AudioContext.baseLatency - Web APIs
example // default latency ("interactive") const audioctx1 = new audiocontext(); console.log(audioctx1.baselatency); // 0.00 // higher latency ("playback") const audioctx2 = new audiocontext({ latencyhint: 'playback' }); console.log(audioctx2.baselatency); // 0.15 specifications specification status
comment web audio apithe definition of 'baselatency' in that specification.
AudioContext.close() - Web APIs
stopbtn.onclick = function() { audioctx.close().then(function() { startbtn.removeattribute('disabled'); susresbtn.setattribute('disabled', 'disabled'); stopbtn.setattribute('disabled', 'disabled'); }); } specifications specification status
comment web audio apithe definition of 'close()' in that specification.
AudioContext.createMediaStreamTrackSource() - Web APIs
ce = audioctx.createmediastreamsource(stream); let biquadfilter = audioctx.createbiquadfilter(); biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 3000; biquadfilter.gain.value = 20; source.connect(biquadfilter); biquadfilter.connect(audioctx.destination); }) .catch(function(err) { // handle getusermedia() error }); specifications specification status
comment web audio apithe definition of 'createmediastreamtracksource()' in that specification.
AudioContext.getOutputTimestamp() - Web APIs
=> { source.stop(0); play.removeattribute('disabled'); cancelanimationframe(raf); }); // function to output timestamps function outputtimestamps() { let ts = audioctx.getoutputtimestamp() console.log('context time: ' + ts.contexttime + ' | performance time: ' + ts.performancetime); raf = requestanimationframe(outputtimestamps); } specifications specification status
comment web audio apithe definition of 'getoutputtimestamp()' in that specification.
AudioContext.outputLatency - Web APIs
example const audioctx = new audiocontext(); console.log(audioctx.outputlatency); specifications specification status
comment web audio apithe definition of 'outputlatency' in that specification.
AudioContext.resume() - Web APIs
susresbtn.onclick = function() { if(audioctx.state === 'running') { audioctx.suspend().then(function() { susresbtn.textcontent = 'resume context'; }); } else if(audioctx.state === 'suspended') { audioctx.resume().then(function() { susresbtn.textcontent = 'suspend context'; }); } } specifications specification status
comment web audio apithe definition of 'resume()' in that specification.
AudioContext.suspend() - Web APIs
susresbtn.onclick = function() { if(audioctx.state === 'running') { audioctx.suspend().then(function() { susresbtn.textcontent = 'resume context'; }); } else if(audioctx.state === 'suspended') { audioctx.resume().then(function() { susresbtn.textcontent = 'suspend context'; }); } } specifications specification status
comment web audio apithe definition of 'close()' in that specification.
AudioContext - Web APIs
specifications specification status
comment web audio apithe definition of 'audiocontext' in that specification.
AudioContextOptions - Web APIs
let musiccontext = new audiocontext({ latencyhint: "playback", samplerate: 48000 }); specifications specification status
comment web audio apithe definition of 'audiocontextoptions' in that specification.
AudioListener - Web APIs
specifications specification status
comment web audio apithe definition of 'audiolistener' in that specification.
AudioNode.channelCount - Web APIs
example var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var oscillator = audioctx.createoscillator(); var gainnode = audioctx.creategain(); oscillator.connect(gainnode); gainnode.connect(audioctx.destination); oscillator.channelcount; specifications specification status
comment web audio apithe definition of 'channelcount' in that specification.
AudioNode.channelCountMode - Web APIs
example var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var oscillator = audioctx.createoscillator(); var gainnode = audioctx.creategain(); oscillator.connect(gainnode); gainnode.connect(audioctx.destination); oscillator.channelcountmode = 'explicit'; specifications specification status
comment web audio apithe definition of 'channelcountmode' in that specification.
AudioNode.channelInterpretation - Web APIs
example var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var oscillator = audioctx.createoscillator(); var gainnode = audioctx.creategain(); oscillator.connect(gainnode); gainnode.connect(audioctx.destination); oscillator.channelinterpretation = 'discrete'; specifications specification status
comment web audio apithe definition of 'channelinterpretation' in that specification.
AudioNode.connect() - Web APIs
specifications specification status
comment web audio apithe definition of 'connect() to an audionode' in that specification.
AudioNode.context - Web APIs
ext = window.audiocontext || window.webkitaudiocontext; const audioctx = new audiocontext(); const oscillator = audioctx.createoscillator(); const gainnode = audioctx.creategain(); oscillator.connect(gainnode).connect(audioctx.destination); console.log(oscillator.context); // audiocontext console.log(oscillator.context === audioctx); // true specifications specification status
comment web audio apithe definition of 'context' in that specification.
AudioNode.disconnect() - Web APIs
example var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); var oscillator = audioctx.createoscillator(); var gainnode = audioctx.creategain(); oscillator.connect(gainnode); gainnode.connect(audioctx.destination); gainnode.disconnect(); specifications specification status
comment web audio apithe definition of 'disconnect' in that specification.
AudioNode.numberOfInputs - Web APIs
example const audioctx = new audiocontext(); const oscillator = audioctx.createoscillator(); const gainnode = audioctx.creategain(); oscillator.connect(gainnode).connect(audioctx.destination); console.log(oscillator.numberofinputs); // 0 console.log(gainnode.numberofinputs); // 1 console.log(audioctx.destination.numberofinputs); // 1 specifications specification status
comment web audio apithe definition of 'numberofinputs' in that specification.
AudioNode.numberOfOutputs - Web APIs
example const audioctx = new audiocontext(); const oscillator = audioctx.createoscillator(); const gainnode = audioctx.creategain(); oscillator.connect(gainnode).connect(audioctx.destination); console.log(oscillator.numberofoutputs); // 1 console.log(gainnode.numberofoutputs); // 1 console.log(audioctx.destination.numberofoutputs); // 0 specifications specification status
comment web audio apithe definition of 'numberofoutputs' in that specification.
AudioNode - Web APIs
audio api landing page (for example violent theremin.) const audioctx = new audiocontext(); const oscillator = new oscillatornode(audioctx); const gainnode = new gainnode(audioctx); oscillator.connect(gainnode).connect(audioctx.destination); oscillator.context; oscillator.numberofinputs; oscillator.numberofoutputs; oscillator.channelcount; specifications specification status
comment web audio apithe definition of 'audionode' in that specification.
AudioNodeOptions - Web APIs
(see audionode.channelcountmode for more information including default values.) specifications specification status
comment web audio apithe definition of 'audionodeoptions' in that specification.
AudioParam.cancelScheduledValues() - Web APIs
examples var gainnode = audioctx.creategain(); gainnode.gain.setvaluecurveattime(wavearray, audioctx.currenttime, 2); //'gain' is the audioparam gainnode.gain.cancelscheduledvalues(audioctx.currenttime); specifications specification status
comment web audio apithe definition of 'cancelscheduledvalues' in that specification.
AudioParam.defaultValue - Web APIs
example const audioctx = new audiocontext(); const gainnode = audioctx.creategain(); const defaultval = gainnode.gain.defaultvalue; console.log(defaultval); // 1 console.log(defaultval === gainnode.gain.value); // true specifications specification status
comment web audio apithe definition of 'defaultvalue' in that specification.
AudioParam.linearRampToValueAtTime() - Web APIs
urrenttime); source.connect(gainnode); gainnode.connect(audioctx.destination); // set buttons to do something onclick linearrampplus.onclick = function() { gainnode.gain.linearramptovalueattime(1.0, audioctx.currenttime + 2); } linearrampminus.onclick = function() { gainnode.gain.linearramptovalueattime(0, audioctx.currenttime + 2); } specifications specification status
comment web audio apithe definition of 'linearramptovalueattime' in that specification.
AudioParam.maxValue - Web APIs
example const audioctx = new audiocontext(); const gainnode = audioctx.creategain(); console.log(gainnode.gain.maxvalue); // 3.4028234663852886e38 specifications specification status
comment web audio apithe definition of 'maxvalue' in that specification.
AudioParam.minValue - Web APIs
example const audioctx = new audiocontext(); const gainnode = audioctx.creategain(); console.log(gainnode.gain.minvalue); // -3.4028234663852886e38 specifications specification status
comment web audio apithe definition of 'minvalue' in that specification.
AudioParam.setTargetAtTime() - Web APIs
.connect(gainnode); gainnode.connect(audioctx.destination); // set buttons to do something onclick attimeplus.onclick = function() { currgain = 1.0; gainnode.gain.settargetattime(1.0, audioctx.currenttime + 1, 0.5); } attimeminus.onclick = function() { currgain = 0; gainnode.gain.settargetattime(0, audioctx.currenttime + 1, 0.5); } specifications specification status
comment web audio apithe definition of 'settargetattime' in that specification.
AudioParam.setValueAtTime() - Web APIs
de); gainnode.connect(audioctx.destination); // set buttons to do something onclick targetattimeplus.onclick = function() { currgain += 0.25; gainnode.gain.setvalueattime(currgain, audioctx.currenttime + 1); } targetattimeminus.onclick = function() { currgain -= 0.25; gainnode.gain.setvalueattime(currgain, audioctx.currenttime + 1); } specifications specification status
comment web audio apithe definition of 'setvalueattime' in that specification.
AudioParam.setValueCurveAtTime() - Web APIs
to do something onclick var wavearray = new float32array(9); wavearray[0] = 0.5; wavearray[1] = 1; wavearray[2] = 0.5; wavearray[3] = 0; wavearray[4] = 0.5; wavearray[5] = 1; wavearray[6] = 0.5; wavearray[7] = 0; wavearray[8] = 0.5; valuecurve.onclick = function() { gainnode.gain.setvaluecurveattime(wavearray, audioctx.currenttime, 2); } specifications specification status
comment web audio apithe definition of 'setvaluecurveattime' in that specification.
AudioParam.value - Web APIs
const audioctx = new audiocontext(); const gainnode = audioctx.creategain(); gainnode.gain.value = 0.4; //which is identical to: gainnode.gain.setvalueattime(0.4, audioctx.currenttime); specifications specification status
comment web audio apithe definition of 'value' in that specification.
AudioParam - Web APIs
ssor = audioctx.createdynamicscompressor(); compressor.threshold.setvalueattime(-50, audioctx.currenttime); compressor.knee.setvalueattime(40, audioctx.currenttime); compressor.ratio.setvalueattime(12, audioctx.currenttime); compressor.attack.setvalueattime(0, audioctx.currenttime); compressor.release.setvalueattime(0.25, audioctx.currenttime); specifications specification status
comment web audio apithe definition of 'audioparam' in that specification.
AudioParamDescriptor - Web APIs
audioworkletnode(audiocontext, 'white-noise-processor') whitenoisenode.connect(audiocontext.destination) now we can change the gain on the node like this: const gainparam = whitenoisenode.parameters.get('customgain') gainparam.setvalueattime(0, audiocontext.currenttime) gainparam.linearramptovalueattime(0.5, audiocontext.currenttime + 0.5) specifications specification status
comment web audio apithe definition of 'audioparamdescriptor' in that specification.
AudioScheduledSourceNode.onended - Web APIs
node.onended = function(event) { document.getelementbyid("startbutton").disabled = false; } specifications specification status
comment web audio apithe definition of 'onended' in that specification.
AudioScheduledSourceNode.start() - Web APIs
context = new audiocontext(); osc = context.createoscillator(); osc.connect(context.destination); /* schedule the start and stop times for the oscillator */ osc.start(context.currenttime + 2); osc.stop(context.currenttime + 3); specifications specification status
comment web audio apithe definition of 'start()' in that specification.
AudioTrack.id - Web APIs
specifications specification status
comment html living standardthe definition of 'audiotrack.id' in that specification.
AudioTrack.language - Web APIs
ction getavailablelanguages(el) { var tracklist = []; const wantedkinds = [ "main", "translation" ]; el.audiotracks.foreach(function(track) { if (wantedkinds.includes(track.kind)) { tracklist.push({ id: track.id, kind: track.kind, language: track.language }); } }); return tracklist; } specifications specification status
comment html living standardthe definition of 'audiotrack.language' in that specification.
AudioTrackList.length - Web APIs
specifications specification status
comment html living standardthe definition of 'audiotracklist.length' in that specification.
AudioTrackList.onaddtrack - Web APIs
document.queryselector("video").audiotracks.onaddtrack = function(event) { addtotracklist(event.track); }; specifications specification status
comment html living standardthe definition of 'audiotracklist.onaddtrack' in that specification.
AudioTrackList - Web APIs
audiotracks.onaddtrack = updatetrackcount; audiotracks.onremovetrack = updatetrackcount; function updatetrackcount(event) { trackcount = audiotracks.length; drawtrackcountindicator(trackcount); } specifications specification status
comment html living standardthe definition of 'audiotracklist' in that specification.
AudioWorklet - Web APIs
specifications specification status
comment web audio apithe definition of 'audioworklet' in that specification.
AudioWorkletGlobalScope.registerProcessor - Web APIs
const audiocontext = new audiocontext() await audiocontext.audioworklet.addmodule('test-processor.js') const node = new audioworkletnode(audiocontext, 'test-processor') node.connect(audiocontext.destination) specifications specification status
comment web audio apithe definition of 'registerprocessor()' in that specification.
AudioWorkletGlobalScope - Web APIs
we should see the output of console.log calls in the console: const audiocontext = new audiocontext() await audiocontext.audioworklet.addmodule('test-processor.js') const testnode = new audioworkletnode(audiocontext, 'test-processor') testnode.connect(audiocontext.destination) specifications specification status
comment web audio apithe definition of 'audioworkletglobalscope' in that specification.
AudioWorkletNode() - Web APIs
specifications specification status
comment web audio apithe definition of 'audioworkletnode()' in that specification.
AudioWorkletNode.parameters - Web APIs
audioworkletnode(audiocontext, 'white-noise-processor') whitenoisenode.connect(audiocontext.destination) now we can change the gain on the node like this: const gainparam = whitenoisenode.parameters.get('customgain') gainparam.setvalueattime(0, audiocontext.currenttime) gainparam.linearramptovalueattime(0.5, audiocontext.currenttime + 0.5) specifications specification status
comment web audio apithe definition of 'parameters' in that specification.
AudioWorkletNode - Web APIs
const audiocontext = new audiocontext() await audiocontext.audioworklet.addmodule('white-noise-processor.js') const whitenoisenode = new audioworkletnode(audiocontext, 'white-noise-processor') whitenoisenode.connect(audiocontext.destination) specifications specification status
comment web audio apithe definition of 'audioworkletnode' in that specification.
AudioWorkletNodeOptions - Web APIs
examples // fill in example snippet specifications specification status
comment web audio apithe definition of 'audioworkletnodeoptions' in that specification.
AudioWorkletProcessor() - Web APIs
or.js') const testnode = new audioworkletnode(audiocontext, 'test-processor', { processoroptions: { someusefulvariable: new map([[1, 'one'], [2, 'two']]) } }) the console output will be as follows: > 1 // audioworkletnode options.numberofinputs set to default > map(2) {1 => "one", 2 => "two"} // a cloned map under someusefulvariable specifications specification status
comment web audio apithe definition of 'audioworkletprocessor()' in that specification.
AudioWorkletProcessor.parameterDescriptors (static getter) - Web APIs
audioworkletnode(audiocontext, 'white-noise-processor') whitenoisenode.connect(audiocontext.destination) now we can change the gain on the node like this: const gainparam = whitenoisenode.parameters.get('customgain') gainparam.setvalueattime(0, audiocontext.currenttime) gainparam.linearramptovalueattime(0.5, audiocontext.currenttime + 0.5) specifications specification status
comment web audio apithe definition of 'parameterdescriptors' in that specification.
AudioWorkletProcessor.process - Web APIs
garbage-collected // if we don't have any references to it in the main thread return true } // define the customgain parameter used in process method static get parameterdescriptors () { return [{ name: 'customgain', defaultvalue: 1, minvalue: 0, maxvalue: 1, automationrate: 'a-rate' }] } } specifications specification status
comment web audio apithe definition of 'process()' in that specification.
AudioWorkletProcessor - Web APIs
const audiocontext = new audiocontext() await audiocontext.audioworklet.addmodule('white-noise-processor.js') const whitenoisenode = new audioworkletnode(audiocontext, 'white-noise-processor') whitenoisenode.connect(audiocontext.destination) specifications specification status
comment web audio apithe definition of 'audioworkletprocessor' in that specification.
AuthenticatorAssertionResponse.authenticatorData - Web APIs
) .then(function (assertionpkcred) { var authenticatordata = assertionpkcred.response.authenticatordata; // maybe try to convert the authenticatordata to see what's inside // send response and client extensions to the server so that it can // go on with the authentication }).catch(function (err) { console.error(err); }); specifications specification status
comment web authentication: an api for accessing public key credentials level 1the definition of 'authenticatordata' in that specification.
AuthenticatorAssertionResponse.signature - Web APIs
ing party server timeout: 60000 }; navigator.credentials.get({ publickey: options }) .then(function (assertionpkcred) { var signature = assertionpkcred.response.signature; // send response and client extensions to the server so that it can // go on with the authentication }).catch(function (err) { console.error(err); }); specifications specification status
comment web authentication: an api for accessing public key credentials level 1the definition of 'signature' in that specification.
AuthenticatorAssertionResponse.userHandle - Web APIs
g party server timeout: 60000 }; navigator.credentials.get({ publickey: options }) .then(function (assertionpkcred) { var userhandle = assertionpkcred.response.userhandle; // send response and client extensions to the server so that it can // go on with the authentication }).catch(function (err) { console.error(err); }); specifications specification status
comment web authentication: an api for accessing public key credentials level 1the definition of 'userhandle' in that specification.
AuthenticatorAssertionResponse - Web APIs
get({ "publickey": options }) .then(function (credentialinfoassertion) { var assertionresponse = credentialinfoassertion.response; // do something specific with the response // send assertion response back to the server // to proceed with the control of the credential }).catch(function (err) { console.error(err); }); specifications specification status
comment web authentication: an api for accessing public key credentials level 1the definition of 'authenticatorassertionresponse interface' in that specification.
AuthenticatorAttestationResponse.attestationObject - Web APIs
edentials.create({ publickey }) .then(function (newcredentialinfo) { var attestationobj = newcredentialinfo.response.attestationobject; // this will be a cbor encoded arraybuffer // do something with the response // (sending it back to the relying party server maybe?) }).catch(function (err) { console.error(err); }); specifications specification status
comment web authentication: an api for accessing public key credentials level 1the definition of 'attestationobject' in that specification.
AuthenticatorAttestationResponse.getTransports() - Web APIs
{ type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { var transports = newcredentialinfo.response.gettransports(); console.table(transports); // may be something like ["internal", "nfc", "usb"] }).catch(function (err) { console.error(err); }); specifications specification status
comment web authentication: an api for accessing public key credentials level 1the definition of 'gettransports()' in that specification.
AuthenticatorAttestationResponse - Web APIs
{ type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { var response = newcredentialinfo.response; // do something with the response // (sending it back to the relying party server maybe?) }).catch(function (err) { console.error(err); }); specifications specification status
comment web authentication: an api for accessing public key credentials level 1the definition of 'authenticatorattestationresponse interface' in that specification.
AuthenticatorResponse.clientDataJSON - Web APIs
promise var clientdatastr = arraybuffertostr(pk.clientdatajson); var clientdataobj = json.parse(clientdatastr); console.log(clientdataobj.type); // "webauthn.create" or "webauthn.get" console.log(clientdataobj.challenge); // base64 encoded string containing the original challenge console.log(clientdataobj.origin); // the window.origin specifications specification status
comment web authentication: an api for accessing public key credentials level 1the definition of 'clientdatajson' in that specification.
AuthenticatorResponse - Web APIs
, name: "jdoe@example.com", displayname: "john doe" }, pubkeycredparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { var attestationresponse = newcredentialinfo.response; }).catch(function (err) { console.error(err); }); specifications specification status
comment web authentication: an api for accessing public key credentials level 1the definition of 'authenticatorresponse interface' in that specification.
BaseAudioContext.createAnalyser() - Web APIs
< bufferlength; i++) { var v = dataarray[i] / 128.0; var y = v * height/2; if(i === 0) { canvasctx.moveto(x, y); } else { canvasctx.lineto(x, y); } x += slicewidth; } canvasctx.lineto(canvas.width, canvas.height/2); canvasctx.stroke(); }; draw(); specifications specification status
comment web audio apithe definition of 'createanalyser()' in that specification.
BaseAudioContext.createBiquadFilter() - Web APIs
nect(distortion); distortion.connect(biquadfilter); biquadfilter.connect(convolver); convolver.connect(gainnode); gainnode.connect(audioctx.destination); // manipulate the biquad filter biquadfilter.type = "lowshelf"; biquadfilter.frequency.setvalueattime(1000, audioctx.currenttime); biquadfilter.gain.setvalueattime(25, audioctx.currenttime); specifications specification status
comment web audio apithe definition of 'createbiquadfilter()' in that specification.
BaseAudioContext.createDelay() - Web APIs
var delay1; rangesynth.oninput = function() { delay1 = rangesynth.value; synthdelay.delaytime.setvalueattime(delay1, audioctx.currenttime); } specifications specification status
comment web audio apithe definition of 'createdelay()' in that specification.
BaseAudioContext.createDynamicsCompressor() - Web APIs
estination); source.connect(compressor); compressor.connect(audioctx.destination); } else if(active == 'true') { button.setattribute('data-active', 'false'); button.innerhtml = 'add compression'; source.disconnect(compressor); compressor.disconnect(audioctx.destination); source.connect(audioctx.destination); } } specifications specification status
comment web audio apithe definition of 'createdynamicscompressor()' in that specification.
BaseAudioContext.createGain() - Web APIs
gainnode.gain.setvalueattime(0, audioctx.currenttime); mute.id = "activated"; mute.innerhtml = "unmute"; } else { gainnode.gain.setvalueattime(1, audioctx.currenttime); mute.id = ""; mute.innerhtml = "mute"; } } specifications specification status
comment web audio apithe definition of 'creategain()' in that specification.
BaseAudioContext.createOscillator() - Web APIs
eate web audio api context var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); // create oscillator node var oscillator = audioctx.createoscillator(); oscillator.type = 'square'; oscillator.frequency.setvalueattime(3000, audioctx.currenttime); // value in hertz oscillator.connect(audioctx.destination); oscillator.start(); specifications specification status
comment web audio apithe definition of 'createoscillator' in that specification.
BaseAudioContext.createScriptProcessor() - Web APIs
getdata(); // wire up play button playbutton.onclick = function() { source.connect(scriptnode); scriptnode.connect(audioctx.destination); source.start(); } // when the buffer source stops playing, disconnect everything source.onended = function() { source.disconnect(scriptnode); scriptnode.disconnect(audioctx.destination); } specifications specification status
comment web audio apithe definition of 'createscriptprocessor' in that specification.
BaseAudioContext.createStereoPanner() - Web APIs
{ pannode.pan.setvalueattime(pancontrol.value, audioctx.currenttime); panvalue.innerhtml = pancontrol.value; } // connect the mediaelementaudiosourcenode to the pannode // and the pannode to the destination, so we can play the // music and adjust the panning using the controls source.connect(pannode); pannode.connect(audioctx.destination); specifications specification status
comment web audio apithe definition of 'createstereopanner()' in that specification.
BaseAudioContext.createWaveShaper() - Web APIs
distortion.curve = makedistortioncurve(400); distortion.oversample = '4x'; specifications specification status
comment web audio apithe definition of 'createwaveshaper()' in that specification.
BaseAudioContext.decodeAudioData() - Web APIs
ta(); source.start(0); play.setattribute('disabled', 'disabled'); } stop.onclick = function() { source.stop(0); play.removeattribute('disabled'); } // dump script to pre element pre.innerhtml = myscript.innerhtml; new promise-based syntax ctx.decodeaudiodata(audiodata).then(function(decodeddata) { // use the decoded data here }); specifications specification status
comment web audio apithe definition of 'decodeaudiodata()' in that specification.
BaseAudioContext.destination - Web APIs
var audiocontext = window.audiocontext || window.webkitaudiocontext; var audioctx = new audiocontext(); // older webkit/blink browsers require a prefix var oscillatornode = audioctx.createoscillator(); var gainnode = audioctx.creategain(); oscillatornode.connect(gainnode); gainnode.connect(audioctx.destination); specifications specification status
comment web audio apithe definition of 'destination' in that specification.
BaseAudioContext.listener - Web APIs
var mylistener = audioctx.listener; specifications specification status
comment web audio apithe definition of 'listener' in that specification.
BaseAudioContext.onstatechange - Web APIs
audioctx.onstatechange = function() { console.log(audioctx.state); } specifications specification status
comment web audio apithe definition of 'onstatechange' in that specification.
BaseAudioContext.state - Web APIs
audioctx.onstatechange = function() { console.log(audioctx.state); } specifications specification status
comment web audio apithe definition of 'state' in that specification.
BaseAudioContext - Web APIs
dio context declaration: const audiocontext = new audiocontext(); cross browser variant: const audiocontext = window.audiocontext || window.webkitaudiocontext; const audiocontext = new audiocontext(); const oscillatornode = audiocontext.createoscillator(); const gainnode = audiocontext.creategain(); const finish = audiocontext.destination; specifications specification status
comment web audio apithe definition of 'baseaudiocontext' in that specification.
BasicCardRequest.supportedNetworks - Web APIs
}; var request = new paymentrequest(supportedinstruments, details, options); specifications specification status
comment basic card paymentthe definition of 'supportednetworks' in that specification.
BasicCardRequest - Web APIs
billing address is a paymentaddress object } } specifications specification status
comment basic card paymentthe definition of 'basiccardrequest' in that specification.
BasicCardResponse.cardNumber - Web APIs
billing address is a paymentaddress object } } specifications specification status
comment basic card paymentthe definition of 'cardnumber' in that specification.
BasicCardResponse.expiryMonth - Web APIs
billing address is a paymentaddress object } } specifications specification status
comment basic card paymentthe definition of 'expirymonth' in that specification.
BasicCardResponse.expiryYear - Web APIs
billing address is a paymentaddress object } } specifications specification status
comment basic card paymentthe definition of 'expiryyear' in that specification.
BasicCardResponse - Web APIs
billing address is a paymentaddress object } } specifications specification status
comment basic card paymentthe definition of 'basiccardresponse' in that specification.
BatteryManager.charging - Web APIs
example html content <div id="charging">(charging state unknown)</div> javascript content navigator.getbattery().then(function(battery) { var charging = battery.charging; document.queryselector('#charging').textcontent = charging ; }); specifications specification status
comment battery status api candidate recommendation initial definition ...
BatteryManager.chargingTime - Web APIs
example html content <div id="chargingtime">(charging time unknown)</div> javascript content navigator.getbattery().then(function(battery) { var time = battery.chargingtime; document.queryselector('#chargingtime').textcontent = battery.chargingtime; }); specifications specification status
comment battery status api candidate recommendation initial definition ...
BatteryManager.dischargingTime - Web APIs
example html content <div id="dischargingtime">(discharging time unknown)</div> javascript content navigator.getbattery().then(function(battery) { var time = battery.dischargingtime; document.queryselector('#dischargingtime').textcontent = battery.dischargingtime; }); specifications specification status
comment battery status api candidate recommendation initial definition ...
BatteryManager.level - Web APIs
example html content <div id="level">(battery level unknown)</div> javascript content navigator.getbattery().then(function(battery) { var level = battery.level; document.queryselector('#level').textcontent = level; }); specifications specification status
comment battery status api candidate recommendation initial definition ...
BatteryManager.onchargingchange - Web APIs
me">(charging time unknown)</div> javascript content navigator.getbattery().then(function(battery) { battery.onchargingchange = chargingchange(); function chargingchange() { document.queryselector('#level').textcontent = battery.level; document.queryselector('#chargingtime').textcontent = battery.chargingtime; } }); specifications specification status
comment battery status api candidate recommendation initial definition ...
BatteryManager.onchargingtimechange - Web APIs
unknown)</div> javascript content navigator.getbattery().then(function(battery) { battery.onchargingtimechange = chargingtimechange(); function chargingtimechange(){ document.queryselector('#level').textcontent = battery.level; document.queryselector('#chargingtime').textcontent = battery.chargingtime; } }); specifications specification status
comment battery status api candidate recommendation initial definition ...
BatteryManager.ondischargingtimechange - Web APIs
)</div> javascript content navigator.getbattery().then(function(battery) { battery.ondischargingtimechange = dischargingtimechange; function dischargingtimechange(){ document.queryselector('#level').textcontent = battery.level; document.queryselector('#chargingtime').textcontent = battery.chargingtime; } }); specifications specification status
comment battery status api candidate recommendation initial definition ...
BatteryManager.onlevelchange - Web APIs
('#level').textcontent = battery.level; if(battery.charging) { document.queryselector('#statebaterry').textcontent = "charging time: " + (battery.chargingtime / 60); } else { document.queryselector('#statebaterry').textcontent = "discharging time: " + (battery.dischargingtime / 60); } }; }); specifications specification status
comment battery status api candidate recommendation initial definition ...
BatteryManager - Web APIs
void seteventhandler(domstring type, eventhandler handler) eventhandler geteventhandler(domstring type) specifications specification status
comment battery status api candidate recommendation initial definition ...
BeforeUnloadEvent - Web APIs
ow.addeventlistener("beforeunload", function (e) { var confirmationmessage = "\o/"; (e || window.event).returnvalue = confirmationmessage; // gecko + ie return confirmationmessage; /* safari, chrome, and other * webkit-derived browsers */ }); specifications specification status
comment html living standardthe definition of 'beforeunloadevent' in that specification.
BiquadFilterNode() - Web APIs
specifications specification status
comment web audio apithe definition of 'biquadfilternode()' in that specification.
BiquadFilterNode.Q - Web APIs
nect(convolver); convolver.connect(gainnode); gainnode.connect(audioctx.destination); // manipulate the biquad filter biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = 25; biquadfilter.type = "peaking"; biquadfilter.frequency.value = 1000; biquadfilter.q.value = 100; biquadfilter.gain.value = 25; specifications specification status
comment web audio apithe definition of 'q' in that specification.
BiquadFilterNode.detune - Web APIs
ct(analyser); analyser.connect(distortion); distortion.connect(biquadfilter); biquadfilter.connect(convolver); convolver.connect(gainnode); gainnode.connect(audioctx.destination); // manipulate the biquad filter biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = 25; biquadfilter.detune.value = 100; specifications specification status
comment web audio apithe definition of 'detune' in that specification.
BiquadFilterNode.frequency - Web APIs
treamsource(stream); source.connect(analyser); analyser.connect(distortion); distortion.connect(biquadfilter); biquadfilter.connect(convolver); convolver.connect(gainnode); gainnode.connect(audioctx.destination); // manipulate the biquad filter biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = 25; specifications specification status
comment web audio apithe definition of 'frequency' in that specification.
BiquadFilterNode.gain - Web APIs
treamsource(stream); source.connect(analyser); analyser.connect(distortion); distortion.connect(biquadfilter); biquadfilter.connect(convolver); convolver.connect(gainnode); gainnode.connect(audioctx.destination); // manipulate the biquad filter biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = 25; specifications specification status
comment web audio apithe definition of 'gain' in that specification.
BiquadFilterNode.getFrequencyResponse() - Web APIs
tput); for(i = 0; i <= myfrequencyarray.length-1;i++){ var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + myfrequencyarray[i] + 'hz</strong>: magnitude ' + magresponseoutput[i] + ', phase ' + phaseresponseoutput[i] + ' radians.'; freqresponseoutput.appendchild(listitem); } } calcfrequencyresponse(); specifications specification status
comment web audio apithe definition of 'getfrequencyresponse()' in that specification.
BiquadFilterNode.type - Web APIs
treamsource(stream); source.connect(analyser); analyser.connect(distortion); distortion.connect(biquadfilter); biquadfilter.connect(convolver); convolver.connect(gainnode); gainnode.connect(audioctx.destination); // manipulate the biquad filter biquadfilter.type = "lowshelf"; biquadfilter.frequency.value = 1000; biquadfilter.gain.value = 25; specifications specification status
comment web audio apithe definition of 'type' in that specification.
BiquadFilterNode - Web APIs
nect(distortion); distortion.connect(biquadfilter); biquadfilter.connect(convolver); convolver.connect(gainnode); gainnode.connect(audioctx.destination); // manipulate the biquad filter biquadfilter.type = "lowshelf"; biquadfilter.frequency.setvalueattime(1000, audioctx.currenttime); biquadfilter.gain.setvalueattime(25, audioctx.currenttime); specifications specification status
comment web audio apithe definition of 'biquadfilternode' in that specification.
Blob() - Web APIs
example var afileparts = ['<a id="a"><b id="b">hey!</b></a>']; // an array consisting of a single domstring var omyblob = new blob(afileparts, {type : 'text/html'}); // the blob specification specification status
comment file apithe definition of 'blob()' in that specification.
Blob.size - Web APIs
// fileinput is a htmlinputelement: <input type="file" multiple id="myfileinput"> var fileinput = document.getelementbyid("myfileinput"); // files is a filelist object (simliar to nodelist) var files = fileinput.files; for (var i = 0; i < files.length; i++) { console.log(files[i].name + " has a size of " + files[i].size + " bytes"); } specifications specification status
comment file apithe definition of 'blob.size' in that specification.
Blob.slice() - Web APIs
specifications specification status
comment file apithe definition of 'blob.slice()' in that specification.
Blob.stream() - Web APIs
specifications specification status
comment file apithe definition of 'blob.stream()' in that specification.
Blob.text() - Web APIs
specifications specification status
comment file apithe definition of 'blob.text()' in that specification.
Blob.type - Web APIs
} }); specifications specification status
comment file apithe definition of 'blob.type' in that specification.
Blob - Web APIs
specifications specification status
comment file apithe definition of 'the blob interface' in that specification.
BlobEvent.BlobEvent() - Web APIs
specifications specification status
comment mediastream recordingthe definition of 'blobevent: blobevent' in that specification.
BlobEvent.data - Web APIs
syntax associatedblob = blobevent.data specifications specification status
comment mediastream recordingthe definition of 'blobevent.data' in that specification.
BlobEvent.timecode - Web APIs
specifications specification status
comment mediastream recordingthe definition of 'timecode' in that specification.
BlobEvent - Web APIs
specifications specification status
comment mediastream recordingthe definition of 'blobevent' in that specification.
Bluetooth.getAvailability() - Web APIs
bluetooth is not supported"); }); specifications specification status
comment web bluetooththe definition of 'getavailability()' in that specification.
Bluetooth - Web APIs
specifications specification status
comment web bluetooththe definition of 'bluetooth' in that specification.
BluetoothCharacteristicProperties - Web APIs
rt_rate'); let characteristic = await service.getcharacteristic('heart_rate_measurement'); if (characteristic.properties.notify) { characteristics.addeventlistener('characteristicvaluechanged', function(event) { console.log(`received heart rate measurement: ${event.target.value}`); } await characteristic.startnotifications(); } specifications specification status
comment web bluetooththe definition of 'bluetoothcharacteristicproperties' in that specification.
id - Web APIs
specifications specification status
comment web bluetooththe definition of 'id' in that specification.
BluetoothDevice - Web APIs
specifications specification status
comment web bluetooththe definition of 'bluetoothdevice' in that specification.
uuid - Web APIs
specifications specification status
comment web bluetooththe definition of 'uuid' in that specification.
Body.arrayBuffer() - Web APIs
function readfile(file) { return new response(file).arraybuffer(); } <input type="file" onchange="readfile(this.files[0])"> specifications specification status
comment fetchthe definition of 'arraybuffer()' in that specification.
Body.blob() - Web APIs
var myimage = document.queryselector('img'); var myrequest = new request('flowers.jpg'); fetch(myrequest) .then(response => response.blob()) .then(function(myblob) { var objecturl = url.createobjecturl(myblob); myimage.src = objecturl; }); specifications specification status
comment fetchthe definition of 'blob()' in that specification.
Body.body - Web APIs
// enqueue the next data chunk into our target stream controller.enqueue(value); return pump(); }); } } }) }) .then(stream => new response(stream)) .then(response => response.blob()) .then(blob => url.createobjecturl(blob)) .then(url => console.log(image.src = url)) .catch(err => console.error(err)); specifications specification status
comment fetchthe definition of 'body' in that specification.
Body.bodyUsed - Web APIs
-image'); fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/delete_key1.jpg').then(function(response) { console.log(response.bodyused); var res = response.blob(); console.log(response.bodyused); return res; }).then(function(response) { var objecturl = url.createobjecturl(response); myimage.src = objecturl; }); specifications specification status
comment fetchthe definition of 'bodyused' in that specification.
Body.json() - Web APIs
cost: ` ); listitem.appendchild( document.createelement('strong') ).textcontent = `£${product.price}`; mylist.appendchild(listitem); } }) .catch(console.error); specifications specification status
comment fetchthe definition of 'body.json()' in that specification.
Body.text() - Web APIs
.preventdefault(); let linkdata = e.target.getattribute('data-page'); getdata(linkdata); } }; function getdata(pageid) { console.log(pageid); var myrequest = new request(pageid + '.txt'); fetch(myrequest).then(function(response) { return response.text().then(function(text) { myarticle.innerhtml = text; }); }); } specifications specification status
comment fetchthe definition of 'text()' in that specification.
Body - Web APIs
g class="my-image" src="https://udn.realityripple.com/samples/46/29059a2b39.png"> js content const myimage = document.queryselector('.my-image'); fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/delete_key1.jpg') .then(res => res.blob()) .then(res => { const objecturl = url.createobjecturl(res); myimage.src = objecturl; }); specifications specification status
comment fetchthe definition of 'body' in that specification.
BroadcastChannel() - Web APIs
var bc = new broadcastchannel('internal_notification'); bc.postmessage('new listening connected!'); specifications specification status
comment html living standardthe definition of 'broadcastchannel()' in that specification.
BroadcastChannel.close() - Web APIs
syntax var str = channel.close(); example // connect to a channel var bc = new broadcastchannel('test_channel'); // more operations (like postmessage, …) // when done, disconnect from the channel bc.close(); specifications specification status
comment html living standardthe definition of 'broadcastchannel.close()' in that specification.
BroadcastChannel.name - Web APIs
syntax var str = channel.name; examples // connect to a channel var bc = new broadcastchannel('test_channel'); // more operations (like postmessage, …) // log the channel name to the console console.log(bc.name); // "test_channel" // when done, disconnect from the channel bc.close(); specifications specification status
comment html living standardthe definition of 'broadcastchannel.name' in that specification.
BroadcastChannel.onmessage - Web APIs
'${ev.data}'`); }; specifications specification status
comment html living standardthe definition of 'broadcastchannel.onmessage' in that specification.
BroadcastChannel.postMessage() - Web APIs
syntax var str = channel.postmessage(object); specifications specification status
comment html living standardthe definition of 'broadcastchannel.postmessage()' in that specification.
BroadcastChannel - Web APIs
specifications specification status
comment html living standardthe definition of 'broadcastchannel' in that specification.
Broadcast Channel API - Web APIs
specifications specification status
comment html living standardthe definition of 'the broadcast channel api' in that specification.
BufferSource - Web APIs
specifications specification status
comment web idlthe definition of 'buffersource' in that specification.
ByteLengthQueuingStrategy.size() - Web APIs
}, cancel(err) { console.log("stream error:", err); } }, queuingstrategy); var size = queueingstrategy.size(chunk); specifications specification status
comment streamsthe definition of 'size' in that specification.
ByteLengthQueuingStrategy - Web APIs
}, cancel(err) { console.log("stream error:", err); } }, queueingstrategy); var size = queueingstrategy.size(chunk); specifications specification status
comment streamsthe definition of 'bytelengthqueuingstrategy' in that specification.
ByteString - Web APIs
specifications specification status
comment web idlthe definition of 'bytestring' in that specification.
CDATASection - Web APIs
specifications specification status
comment domthe definition of 'cdatasection' in that specification.
CSS.escape() - Web APIs
or use as part of a selector, the escape() method can be used: var element = document.queryselector('#' + css.escape(id) + ' > img'); the escape() method can also be used for escaping strings, although it escapes characters that don't strictly need to be escaped: var element = document.queryselector('a[href="#' + css.escape(fragment) + '"]'); specification specification status
comment css object model (cssom)the definition of 'css.escape()' in that specification.
CSS numeric factory functions - Web APIs
"} console.log( height.value ) // 50 console.log( height.unit ) // vmax in this example, we set the margin on our element using the css.px() factory function: myelement.attributestylemap.set('margin', css.px(40)); let currentmargin = myelement.attributestylemap.get('margin'); console.log(currentmargin.value, currentmargin.unit); // 40, 'px' specification specification status
comment css object model (cssom)the definition of 'numeric factory functions' in that specification.
CSS.paintWorklet (Static property) - Web APIs
<script> if ('paintworklet' in css) { css.paintworklet.addmodule('checkerboard.js'); } </script> specifications specification status
comment css painting api level 1the definition of 'paintworklet' in that specification.
CSS.registerProperty() - Web APIs
, #fff, var(--unregistered)); transition: --unregistered 1s ease-in-out; } .unregistered:hover, .unregistered:focus { --unregistered: #b4d455; } button { font-size: 3vw; } we can add these styles to some buttons: <button class="registered">background registered</button> <button class="unregistered">background not registered</button> specifications specification status
comment css properties and values api level 1the definition of 'the registerproperty() function' in that specification.
CSS.supports() - Web APIs
ult = css.supports("text-decoration-style", "blink"); result = css.supports("display: flex"); result = css.supports("(--foo: red)"); result = css.supports(`(transform-style: preserve) or (-moz-transform-style: preserve) or (-o-transform-style: preserve) or (-webkit-transform-style: preserve)`); // result is true or false specification specification status
comment css conditional rules module level 3the definition of 'css: supports()' in that specification.
CSS - Web APIs
css.em(3) // cssunitvalue {value: 3, unit: "em"} specifications specification status
comment css painting api level 1the definition of 'paintworklet' in that specification.
CSSConditionRule - Web APIs
specifications specification status
comment css conditional rules module level 3the definition of 'cssconditionrule' in that specification.
CSSCounterStyleRule - Web APIs
specifications specification status
comment css counter styles level 3the definition of 'csscounterstylerule' in that specification.
CSSGroupingRule - Web APIs
specification specification status
comment css object model (cssom)the definition of 'cssgroupingrule' in that specification.
CSSImageValue - Web APIs
// get the element const button = document.queryselector( 'button' ); // retrieve all computed styles with computedstylemap() const allcomputedstyles = button.computedstylemap(); // return the cssimagevalue example console.log( allcomputedstyles.get('background-image') ); console.log( allcomputedstyles.get('background-image').tostring() ); specifications specification status
comment css typed om level 1the definition of 'cssimagevalue' in that specification.
CSSKeyframeRule - Web APIs
specification specification status
comment css animationsthe definition of 'csskeyframerule' in that specification.
CSSKeyframesRule - Web APIs
specification specification status
comment css animationsthe definition of 'csskeyframesrule' in that specification.
CSSKeywordValue.CSSKeywordValue() - Web APIs
developer tools to see the log in the console and to inspect the style attribute on this div.</div> let keyword = new csskeywordvalue('initial'); let myelement = document.getelementbyid('myelement').attributestylemap; myelement.set('display', keyword); console.log( myelement.get('display').value); // 'initial' console.dir( keyword ); specifications specification status
comment css typed om level 1the definition of 'csskeywordvalue' in that specification.
CSSKeywordValue.value - Web APIs
let indicator = document.getelementbyid('indicator'); indicator.attributestylemap.set('display', new csskeywordvalue('initial')); indicator.attributestylemap.get('display').value // 'initial' specifications specification status
comment css typed om level 1the definition of 'undefined' in that specification.
CSSKeywordValue - Web APIs
display: flex; } <div id="myelement">check the developer tools to see the log in the console and to inspect the style attribute on this div.</div> let myelement = document.getelementbyid('myelement').attributestylemap; myelement.set('display', new csskeywordvalue('initial')); console.log( myelement.get('display').value); // 'initial' specifications specification status
comment css typed om level 1the definition of 'csskeywordvalue' in that specification.
CSSMathProduct - Web APIs
specifications specification status
comment css typed om level 1the definition of 'cssmathproduct' in that specification.
CSSMathSum.values - Web APIs
specifications specification status
comment css typed om level 1the definition of 'values' in that specification.
CSSMathSum - Web APIs
in the future we may write the last three lines as: console.log( stylemap.get('width').values[1] ); // cssmathnegate {value: cssunitvalue, operator: "negate"} console.log( stylemap.get('width').values[1].value ); // cssunitvalue {value: 20, unit: "px"} console.log( stylemap.get('width').values[1].value.unit ); // 'px' specifications specification status
comment css typed om level 1the definition of 'cssmathsum' in that specification.
CSSMathValue.operator - Web APIs
specifications specification status
comment css typed om level 1the definition of 'cssmathvalue.operator' in that specification.
CSSMathValue - Web APIs
specifications specification status
comment css typed om level 1the definition of 'cssmathvalue' in that specification.
CSSMediaRule - Web APIs
specifications specification status
comment css conditional rules module level 3the definition of 'cssmediarule' in that specification.
CSSNamespaceRule - Web APIs
it has no specific methods: specification specification status
comment css object model (cssom)the definition of 'cssnamespacerule' in that specification.
CSSNumericValue.add() - Web APIs
examples let mathsum = css.px("23").add(css.percent("4")).add(css.cm("3")).add(css.in("9")); // prints "calc(23px + 4% + 3cm + 9in)" console.log(mathsum.tostring()); specifications specification status
comment css typed om level 1the definition of 'add' in that specification.
CSSNumericValue.div() - Web APIs
examples let mathproduct = css.px("24").div(css.percent("4")); // prints "calc(24px / 4%)" mathproduct.tostring(); specifications specification status
comment css typed om level 1the definition of 'div' in that specification.
CSSNumericValue.equals() - Web APIs
s.px(1), css.px(2)); let matchingcssmathsum = new cssmathsum(css.px(1), css.px(2)); // prints true console.log(cssmathsum.equals(matchingcssmathsum)); let othercssmathsum = cssmathsum(css.px(2), css.px(1)); // prints false console.log(cssmathsum.equals(othercssmathsum)); // also prints false console.log(css.cm("1").equal(css.in("0.393701"))); specifications specification status
comment css typed om level 1the definition of 'equals' in that specification.
CSSNumericValue.max() - Web APIs
// prints "2cm" console.log(css.cm("1").max(css.cm("2")).tostring()); // prints "max(1cm, 0.393701in)" console.log(css.cm("1").max(css.in("0.393701")).tostring()); specifications specification status
comment css typed om level 1the definition of 'max' in that specification.
CSSNumericValue.min() - Web APIs
// prints "1cm" console.log(css.cm("1").min(css.cm("2")).tostring()); // prints "max(1cm, 0.393701in)" console.log(css.cm("1").max(css.in("0.393701")).tostring()); specifications specification status
comment css typed om level 1the definition of 'min' in that specification.
CSSNumericValue.mul() - Web APIs
examples let mathsum = css.px("23").mul(css.percent("4")).mul(css.cm("3")).mul(css.in("9")); // prints "calc(23px * 4% * 3cm * 9in)" console.log(mathsum.tostring()); specifications specification status
comment css typed om level 1the definition of 'mul' in that specification.
CSSNumericValue.parse() - Web APIs
let numvalue = cssnumericvalue.parse("42.0px"); specifications specification status
comment css typed om level 1the definition of 'parse' in that specification.
CSSNumericValue.sub() - Web APIs
examples let mathsum = css.px("23").sum(css.percent("4")).sum(css.cm("3")).sum(css.in("9")); // prints "calc(23px - 4% - 3cm - 9in)" console.log(mathsum.tostring()); and/or include a list of links to useful code samples that live elsewhere: specifications specification status
comment css typed om level 1the definition of 'sub' in that specification.
CSSNumericValue.sum() - Web APIs
examples let mathsum = css.px("23").sum(css.percent("4")).sum(css.cm("3")).sum(css.in("9")); // prints "calc(23px - 4% - 3cm - 9in)" console.log(mathsum.tostring()); and/or include a list of links to useful code samples that live elsewhere: specifications specification status
comment css typed om level 1the definition of 'sub' in that specification.
CSSNumericValue.to() - Web APIs
examples // prints "0.608542cm" console.log(css.px("23").to("com").tostring()); specifications specification status
comment css typed om level 1the definition of 'to' in that specification.
CSSNumericValue.toSum() - Web APIs
examples let v = css.px("23").add(css.percent("4")).add(css.cm("3")).add(css.in("9")); v.tostring() // => "calc(23px + 4% + 3cm + 9in)" v.tosum("px", "percent").tostring() // => "calc(1000.39px + 4%)" specifications specification status
comment css typed om level 1the definition of 'tosum' in that specification.
CSSNumericValue.type - Web APIs
examples let mathsum = css.px("23").sub(css.percent("4")).sub(css.cm("3")).sub(css.in("9")); // returns an object with the structure: {length: 1, percenthint: "length"} let cssnumerictype = mathsum.type(); specifications specification status
comment css typed om level 1the definition of 'type' in that specification.
CSSNumericValue - Web APIs
specifications specification status
comment css typed om level 1the definition of 'cssnumericvalue' in that specification.
CSSOMString - Web APIs
implementation differences browser domstring or usvstring for cssomstring firefox (gecko) usvstring chrome (blink) usvstring safari (webkit) usvstring edge (edgehtml) - opera (blink) usvstring specifications specification status
comment css object model (cssom)the definition of 'cssomstring' in that specification.
CSSPageRule - Web APIs
specifications specification status
comment css object model (cssom)the definition of 'csspagerule' in that specification.
CSSPrimitiveValue.getFloatValue() - Web APIs
example var cs = window.getcomputedstyle(document.body); var cssvalue = cs.getpropertycssvalue("margin-top"); console.log(cssvalue.getfloatvalue(cssprimitivevalue.css_cm)); specifications specification status
comment document object model (dom) level 2 style specificationthe definition of 'cssprimitivevalue.getfloatvalue' in that specification.
CSSPrimitiveValue.getRGBColorValue() - Web APIs
example var cs = window.getcomputedstyle(document.body); var cssvalue = cs.getpropertycssvalue("color"); console.log(cssvalue.getrgbcolorvalue()); specifications specification status
comment document object model (dom) level 2 style specificationthe definition of 'cssprimitivevalue.getrgbcolorvalue' in that specification.
CSSPrimitiveValue.getRectValue() - Web APIs
example var cs = window.getcomputedstyle(document.getelementbyid("clippeddiv")); var cssvalue = cs.getpropertycssvalue("clip"); console.log(cssvalue.getrectvalue()); specifications specification status
comment document object model (dom) level 2 style specificationthe definition of 'cssprimitivevalue.getrectvalue' in that specification.
CSSPrimitiveValue.getStringValue() - Web APIs
example var cs = window.getcomputedstyle(document.body); var cssvalue = cs.getpropertycssvalue("display"); console.log(cssvalue.getstringvalue()); specifications specification status
comment document object model (dom) level 2 style specificationthe definition of 'cssprimitivevalue.getstringvalue' in that specification.
CSSPrimitiveValue.primitiveType - Web APIs
example var cs = window.getcomputedstyle(document.body); var cssvalue = cs.getpropertycssvalue("color"); console.log(cssvalue.primitivetype); specifications specification status
comment document object model (dom) level 2 style specificationthe definition of 'cssprimitivevalue.primitivetype' in that specification.
CSSPrimitiveValue - Web APIs
specifications specification status
comment document object model (dom) level 2 style specificationthe definition of 'cssprimitivevalue' in that specification.
CSSPseudoElement.element - Web APIs
; // outputs false console.log(myelement.lastelementchild === csspseudoelement); // outputs false console.log(myelement.lastchild === csspseudoelement); // outputs false console.log(myelement.nextelementsibling === csspseudoelement); // outputs false console.log(myelement.nextsibling === csspseudoelement); // outputs false specifications specification status
comment css pseudo-elements level 4the definition of 'element' in that specification.
CSSPseudoElement.type - Web APIs
example below demonstrates the relationship between csspseudoelement.type and element.pseudo(): const myelement = document.queryselector('q'); const myselector = '::after'; const csspseudoelement = myelement.pseudo(myselector); const typeofpseudoelement = csspseudoelement.type; console.log(myselector === typeofpseudoelement); // outputs true specifications specification status
comment css pseudo-elements level 4the definition of 'type' in that specification.
CSSPseudoElement - Web APIs
const element = document.queryselector('q'); const csspseudoelement = element.pseudo('::before'); console.log(csspseudoelement.element); // outputs [object htmlquoteelement] console.log(csspseudoelement.type); // outputs '::before' specifications specification status
comment css pseudo-elements level 4the definition of 'csspseudoelement' in that specification.
CSSRule.cssText - Web APIs
syntax string = cssrule.csstext example <style> body { background-color: darkblue; } </style> <script> var stylesheet = document.stylesheets[0]; alert(stylesheet.cssrules[0].csstext); // body { background-color: darkblue; } </script> specifications specification status
comment css object model (cssom)the definition of 'cssrule: csstext' in that specification.
CSSRuleList - Web APIs
they are: cssstylesheet property cssrules cssmediarule property cssrules csskeyframesrule property cssrules cssmozdocumentrule property cssrules specifications specification status
comment css object model (cssom)the definition of 'cssrulelist' in that specification.
CSSStyleDeclaration.cssText - Web APIs
example <span id="s1" style="color: red;"> some text </span> <script> var elem = document.getelementbyid("s1"); alert(elem.style.csstext); // "color: red;" </script> specifications specification status
comment css object model (cssom)the definition of 'cssstyledeclaration: csstext' in that specification.
CSSStyleDeclaration.getPropertyCSSValue() - Web APIs
example the following javascript code gets an object containing the computed rgb values of the color css property: var style = window.getcomputedstyle(elem, null); var rgbobj = style.getpropertycssvalue('color').getrgbcolorvalue(); specifications specification status
comment document object model (dom) level 2 style specificationthe definition of 'cssstyledeclaration' in that specification.
CSSStyleDeclaration.getPropertyPriority() - Web APIs
example the following javascript code checks whether margin is marked as important in a css selector rule: var declaration = document.stylesheets[0].cssrules[0].style; var isimportant = declaration.getpropertypriority('margin') === 'important'; specifications specification status
comment css object model (cssom)the definition of 'cssstyledeclaration.getpropertypriority()' in that specification.
CSSStyleDeclaration.getPropertyValue() - Web APIs
example the following javascript code queries the value of the margin property in a css selector rule: var declaration = document.stylesheets[0].cssrules[0].style; var value = declaration.getpropertyvalue('margin'); // "1px 2px" specifications specification status
comment css object model (cssom)the definition of 'cssstyledeclaration.getpropertyvalue()' in that specification.
CSSStyleDeclaration.item() - Web APIs
javascript has a special simpler syntax for obtaining an item from a nodelist by index: var propertyname = style[index]; example var style = document.getelementbyid('div1').style; var propertyname = style.item(1); // or simply style[1] - returns the second style listed specifications specification status
comment css object model (cssom)the definition of 'cssstyledeclaration.item()' in that specification.
CSSStyleDeclaration.length - Web APIs
example the following gets the number of explicitly set styles on the following html element: <div id="div1" style="margin: 0 10px; background-color: #ca1; font-family: monospace"></div> javascript code: var mydiv = document.getelementbyid('div1'); var divstyle = mydiv.style; var len = divstyle.length; // 6 specifications specification status
comment css object model (cssom)the definition of 'cssstyledeclaration.length' in that specification.
CSSStyleDeclaration.parentRule - Web APIs
example the following javascript code gets the parent css style rule from a cssstyledeclaration: var declaration = document.stylesheets[0].rules[0].style; var rule = declaration.parentrule; specifications specification status
comment css object model (cssom)the definition of 'cssstyledeclaration.parentrule' in that specification.
CSSStyleDeclaration.removeProperty() - Web APIs
example the following javascript code removes the background-color css property from a selector rule: var declaration = document.stylesheets[0].rules[0].style; var oldvalue = declaration.removeproperty('background-color'); specifications specification status
comment css object model (cssom)the definition of 'cssstyledeclaration.removeproperty()' in that specification.
CSSStyleDeclaration.setProperty() - Web APIs
ule.style.setproperty('background-color', newbgcolor); } function setrandomcolor() { const newcolor = randomcolor(); boxpararule.style.setproperty('color', newcolor); } borderbtn.addeventlistener('click', setrandomborder); bgcolorbtn.addeventlistener('click', setrandombgcolor); colorbtn.addeventlistener('click', setrandomcolor); result specifications specification status
comment css object model (cssom)the definition of 'cssstyledeclaration.setproperty()' in that specification.
CSSStyleDeclaration - Web APIs
example var styleobj = document.stylesheets[0].cssrules[0].style; console.log(styleobj.csstext); for (var i = styleobj.length; i--;) { var namestring = styleobj[i]; styleobj.removeproperty(namestring); } console.log(styleobj.csstext); specifications specification status
comment css object model (cssom)the definition of 'cssstyledeclaration' in that specification.
CSSStyleRule - Web APIs
specifications specification status
comment css object model (cssom)the definition of 'cssstylerule' in that specification.
CSSStyleSheet.addRule() - Web APIs
therefore, given existing code such as the following: cssstylesheet.addrule(selector, styles, 0); you can rewrite this to use the more standard insertrule() like this: cssstylesheet.insertrule(`${selector} {${styles}}`, 0); specifications specification status
comment css object model (cssom)the definition of 'cssstylesheet.addrule()' in that specification.
CSSStyleSheet.cssRules - Web APIs
specifications specification status
comment css object model (cssom)the definition of 'cssstylesheet.cssrules' in that specification.
CSSStyleSheet.deleteRule() - Web APIs
mystyles.deleterule(0); specifications specification status
comment css object model (cssom)the definition of 'cssstylesheet.deleterule()' in that specification.
CSSStyleSheet.insertRule() - Web APIs
by 1), and if it is not a backslash // then isescaped gets xored by itself, zeroing it isescaped ^= newcharcode===92?1:isescaped; // 92 = "\\".charcodeat(0) } // else, there is no unescaped bracket return originalinsertrule.call(this, selectorandrule, "", arguments[2]); }; } })(cssstylesheet.prototype); specifications specification status
comment css object model (cssom)the definition of 'cssstylesheet.insertrule' in that specification.
CSSStyleSheet.ownerRule - Web APIs
rulelist) { if (!rule.ownerrule) { /* rule is not imported */ } } this snipped obtains a reference to the stylesheet associated with the @import and processes it in some manner: let rulelist = document.stylesheets[0].cssrules; for (let rule of rulelist) { if (rule.ownerrule) { checkstylesheet(rule.ownerrule.stylesheet); } } specifications specification status
comment css object model (cssom)the definition of 'cssstylesheet.ownerrule' in that specification.
CSSStyleSheet.removeRule() - Web APIs
mystyles.removerule(0); you can rewrite this to use the standard deleterule() method very easily: mystyles.deleterule(0); specifications specification status
comment css object model (cssom)the definition of 'cssstylesheet.removerule()' in that specification.
CSSStyleSheet.rules - Web APIs
specifications specification status
comment css object model (cssom)the definition of 'cssstylesheet.rules' in that specification.
CSSStyleSheet - Web APIs
eets applied to the document yes .ownerrule cssimportrule .stylesheet <?xml-stylesheet ?> processing instruction in the (non-html) document yes .ownernode processinginstruction .sheet http link header yes n/a n/a n/a user agent (default) style sheets no n/a n/a n/a specifications specification status
comment css object model (cssom)the definition of 'cssstylesheet' in that specification.
CSSStyleValue.parse() - Web APIs
const css = cssstylevalue.parse( 'transform', 'translate3d(10px,10px,0) scale(0.5)'); csstransformvalue {0: csstranslate, 1: cssscale, length: 2, is2d: false} specifications specification status
comment css typed om level 1the definition of 'parse()' in that specification.
CSSStyleValue - Web APIs
specifications specification status
comment css typed om level 1the definition of 'cssstylevalue' in that specification.
CSSSupportsRule - Web APIs
specification specification status
comment css conditional rules module level 3the definition of 'csssupportsrule' in that specification.
CSSUnitValue.CSSUnitValue() - Web APIs
let pos = new csspositionvalue( new cssunitvalue(5, "px"), new cssunitvalue(10, "px")); specifications specification status
comment css typed om level 1the definition of 'cssunitvalue' in that specification.
CSSUnitValue.unit - Web APIs
let pos = new csspositionvalue( new cssunitvalue( 5, "px" ), new cssunitvalue( 10, "em" )); console.log( pos.x.unit ); // "px" console.log( pos.y.unit ); // "em" specifications specification status
comment css typed om level 1the definition of 'cssunitvalue.unit' in that specification.
CSSUnitValue.value - Web APIs
let pos = new csspositionvalue( new cssunitvalue( 5, "px" ), new cssunitvalue( 10, "px" )); console.log( pos.x.value ); // 5 console.log( pos.y.value ); // 10 specifications specification status
comment css typed om level 1the definition of 'cssunitvalue.value' in that specification.
CSSUnitValue - Web APIs
let pos = new csspositionvalue( new cssunitvalue(5, "px"), new cssunitvalue(10, "px")); specifications specification status
comment css typed om level 1the definition of 'cssunitvalue' in that specification.
CSSUnparsedValue.CSSUnparsedValue() - Web APIs
examples let value = new cssunparsedvalue( ['4deg'] ), values = new cssunparsedvalue( ['1em', '#445566', '-45px'] ); console.log( value ); // cssunparsedvalue {0: "4deg", length: 1} console.log( values ); // cssunparsedvalue {0: "1em", 1: "#445566", 2: "-45px", length: 3} specifications specification status
comment css typed om level 1the definition of 'cssunparsedvalue' in that specification.
CSSUnparsedValue.length - Web APIs
examples in this example we employ the cssunparsedvalue.cssunparsedvalue() constructor, then query the length: let values = new cssunparsedvalue( ['1em', '#445566', '-45px'] ); console.log( values.length ) // 3 specifications specification status
comment css typed om level 1the definition of 'length' in that specification.
CSSUnparsedValue - Web APIs
specifications specification status
comment css typed om level 1the definition of 'cssunparsedvalue' in that specification.
CSSValue.cssText - Web APIs
example var styledeclaration = document.stylesheets[0].cssrules[0].style; var cssvalue = styledeclaration.getpropertycssvalue("color"); console.log(cssvalue.csstext); specifications specification status
comment document object model (dom) level 2 style specificationthe definition of 'cssvalue.csstext' in that specification.
CSSValue.cssValueType - Web APIs
example var styledeclaration = document.stylesheets[0].cssrules[0].style; var cssvalue = styledeclaration.getpropertycssvalue("color"); console.log(cssvalue.cssvaluetype); specifications specification status
comment document object model (dom) level 2 style specificationthe definition of 'cssvalue.cssvaluetype' in that specification.
CSSValue - Web APIs
specifications specification status
comment document object model (dom) level 2 style specificationthe definition of 'cssvalue' in that specification.
CSSValueList.item() - Web APIs
specifications specification status
comment document object model (dom) level 2 style specificationthe definition of 'cssvaluelist.item' in that specification.
CSSValueList.length - Web APIs
specifications specification status
comment document object model (dom) level 2 style specificationthe definition of 'cssvaluelist.length' in that specification.
CSSValueList - Web APIs
specifications specification status
comment document object model (dom) level 2 style specificationthe definition of 'cssvalueslist' in that specification.
CSS Counter Styles - Web APIs
specifications specification status
comment css counter styles level 3 candidate recommendation initial definition ...
CSS Object Model (CSSOM) - Web APIs
managing screen orientation specifications specification status
comment css typed om level 1 working draft css painting api level 1 working draft extended the css interface with the paintworklet static property.
CSS Properties and Values API - Web APIs
efault value, and not allow it to inherit its value: window.css.registerproperty({ name: '--my-color', syntax: '<color>', inherits: false, initialvalue: '#c0ffee', }); the same registration can take place in css using the following @property: @property --my-color { syntax: '<color>'; inherits: false; initial-value: #c0ffee; } specifications specification status
comment css properties and values api level 1 working draft initial definition.
Cache.add() - Web APIs
this.addeventlistener('install', function(event) { event.waituntil( caches.open('v1').then(function(cache) { return cache.add('/sw-test/index.html'); }) ); }); specifications specification status
comment service workersthe definition of 'cache: add' in that specification.
Cache.addAll() - Web APIs
'/sw-test/index.html', '/sw-test/style.css', '/sw-test/app.js', '/sw-test/image-list.js', '/sw-test/star-wars-logo.jpg', '/sw-test/gallery/', '/sw-test/gallery/bountyhunters.jpg', '/sw-test/gallery/mylittlevader.jpg', '/sw-test/gallery/snowtroopers.jpg' ]); }) ); }); specifications specification status
comment service workersthe definition of 'cache: addall' in that specification.
Cache.delete() - Web APIs
examples caches.open('v1').then(function(cache) { cache.delete('/images/image.png').then(function(response) { someuiupdatefunction(); }); }) specifications specification status
comment service workersthe definition of 'cache: delete' in that specification.
Cache.keys() - Web APIs
examples caches.open('v1').then(function(cache) { cache.keys().then(function(keys) { keys.foreach(function(request, index, array) { cache.delete(request); }); }); }) specifications specification status
comment service workersthe definition of 'cache: keys' in that specification.
Cache.match() - Web APIs
nsole.log('handling fetch event for', event.request.url); event.respondwith( fetch(event.request).catch(function(e) { console.error('fetch failed; returning offline page instead.', e); return caches.open(offline_cache).then(function(cache) { return cache.match(offline_url); }); }) ); } }); specifications specification status
comment service workersthe definition of 'cache match' in that specification.
Cache.matchAll() - Web APIs
examples caches.open('v1').then(function(cache) { cache.matchall('/images/').then(function(response) { response.foreach(function(element, index, array) { cache.delete(element); }); }); }) specifications specification status
comment service workersthe definition of 'cache: matchall' in that specification.
Cache.put() - Web APIs
nse; var cachedresponse = caches.match(event.request).catch(function() { return fetch(event.request); }).then(function(r) { response = r; caches.open('v1').then(function(cache) { cache.put(event.request, response); }); return response.clone(); }).catch(function() { return caches.match('/sw-test/gallery/mylittlevader.jpg'); }); specifications specification status
comment service workersthe definition of 'cache: put' in that specification.
Cache - Web APIs
specifications specification status
comment service workersthe definition of 'cache' in that specification.
CacheStorage.delete() - Web APIs
this.addeventlistener('activate', function(event) { var cachestokeep = ['v2']; event.waituntil( caches.keys().then(function(keylist) { return promise.all(keylist.map(function(key) { if (cachestokeep.indexof(key) === -1) { return caches.delete(key); } })); }) ); }); specifications specification status
comment service workersthe definition of 'cachestorage: delete' in that specification.
CacheStorage.has() - Web APIs
}); specifications specification status
comment service workersthe definition of 'cachestorage: has' in that specification.
CacheStorage.keys() - Web APIs
then.addeventlistener('activate', function(event) { var cachewhitelist = ['v2']; event.waituntil( caches.keys().then(function(keylist) { return promise.all(keylist.map(function(key) { if (cachewhitelist.indexof(key) === -1) { return caches.delete(key); } }); }) ); }); specifications specification status
comment service workersthe definition of 'cachestorage: keys' in that specification.
CacheStorage.match() - Web APIs
cache // and serve second one let responseclone = response.clone(); caches.open('v1').then(function (cache) { cache.put(event.request, responseclone); }); return response; }).catch(function () { return caches.match('/sw-test/gallery/mylittlevader.jpg'); }); } })); }); specifications specification status
comment service workersthe definition of 'cachestorage: match' in that specification.
CacheStorage.open() - Web APIs
all([ '/sw-test/', '/sw-test/index.html', '/sw-test/style.css', '/sw-test/app.js', '/sw-test/image-list.js', '/sw-test/star-wars-logo.jpg', '/sw-test/gallery/bountyhunters.jpg', '/sw-test/gallery/mylittlevader.jpg', '/sw-test/gallery/snowtroopers.jpg' ]); }) ); specifications specification status
comment service workersthe definition of 'cachestorage: open' in that specification.
CacheStorage - Web APIs
isourcache ) { continue; } caches.delete( key ); } } try { const data = await getdata(); console.log( { data } ); } catch ( error ) { console.error( { error } ); } specifications specification status
comment service workersthe definition of 'cachestorage' in that specification.
CanvasCaptureMediaStreamTrack.canvas - Web APIs
// obtain the canvas associated with the stream var canvas = stream.canvas; specifications specification status
comment media capture from dom elementsthe definition of 'canvascapturemediastreamtrack.canvas' in that specification.
CanvasCaptureMediaStreamTrack.requestFrame() - Web APIs
example // find the canvas element to capture var canvaselt = document.getelementsbytagname("canvas")[0]; // get the stream var stream = canvaselt.capturestream(25); // 25 fps // send the current state of the canvas as a frame to the stream stream.getvideotracks()[0].requestframe(); specifications specification status
comment media capture from dom elementsthe definition of 'canvascapturemediastream.requestframe()' in that specification.
CanvasGradient.addColorStop() - Web APIs
nvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); let gradient = ctx.createlineargradient(0, 0, 200, 0); gradient.addcolorstop(0, 'green'); gradient.addcolorstop(.7, 'white'); gradient.addcolorstop(1, 'pink'); ctx.fillstyle = gradient; ctx.fillrect(10, 10, 200, 100); result specifications specification status
comment html living standardthe definition of 'canvasgradient.addcolorstop' in that specification.
CanvasGradient - Web APIs
specifications specification status
comment html living standardthe definition of 'canvasgradient' in that specification.
CanvasImageSource - Web APIs
the interfaces that it allows to be used as image sources are the following: htmlimageelement svgimageelement htmlvideoelement htmlcanvaselement imagebitmap offscreencanvas specifications specification status
comment html living standardthe definition of 'canvasimagesource' in that specification.
CanvasPattern.setTransform() - Web APIs
wcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener('click', function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener('click', function() { textarea.focus(); }) textarea.addeventlistener('input', drawcanvas); window.addeventlistener('load', drawcanvas); specifications specification status
comment html living standardthe definition of 'canvaspattern.settransform' in that specification.
CanvasPattern - Web APIs
specifications specification status
comment html living standardthe definition of 'canvaspattern' in that specification.
CanvasRenderingContext2D.arc() - Web APIs
ng point on circle let endangle = math.pi + (math.pi * j) / 2; // end point on circle let anticlockwise = i % 2 == 1; // draw anticlockwise ctx.arc(x, y, radius, startangle, endangle, anticlockwise); if (i > 1) { ctx.fill(); } else { ctx.stroke(); } } } result screenshotlive sample specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.arc' in that specification.
CanvasRenderingContext2D.arcTo() - Web APIs
= 0; // the radius that changes over time let a = 0; // angle let pi2 = math.pi * 2; const loop = function (t) { t0 = t / 1000; a = t0 % pi2; rr = math.abs(math.cos(a) * r); ctx.clearrect(0, 0, canvas.width, canvas.height); drawarc([p1, p2, p3], rr); drawpoints([p1, p2, p3]); requestanimationframe(loop); } loop(0); result specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.arcto' in that specification.
CanvasRenderingContext2D.beginPath() - Web APIs
const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // first path ctx.beginpath(); ctx.strokestyle = 'blue'; ctx.moveto(20, 20); ctx.lineto(200, 20); ctx.stroke(); // second path ctx.beginpath(); ctx.strokestyle = 'green'; ctx.moveto(20, 20); ctx.lineto(120, 120); ctx.stroke(); result specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.beginpath' in that specification.
CanvasRenderingContext2D.bezierCurveTo() - Web APIs
const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(30, 30); ctx.beziercurveto(120,160, 180,10, 220,140); ctx.stroke(); result specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.beziercurveto' in that specification.
CanvasRenderingContext2D.canvas - Web APIs
you can get a reference to the canvas element within the canvasrenderingcontext2d by using the canvas property: var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.canvas // htmlcanvaselement specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.canvas' in that specification.
CanvasRenderingContext2D.clearRect() - Web APIs
// draw yellow background ctx.beginpath(); ctx.fillstyle = '#ff6'; ctx.fillrect(0, 0, canvas.width, canvas.height); // draw blue triangle ctx.beginpath(); ctx.fillstyle = 'blue'; ctx.moveto(20, 20); ctx.lineto(180, 20); ctx.lineto(130, 130); ctx.closepath(); ctx.fill(); // clear part of the canvas ctx.clearrect(10, 10, 120, 100); result specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.clearrect' in that specification.
CanvasRenderingContext2D.clip() - Web APIs
const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // create clipping path let region = new path2d(); region.rect(80, 10, 20, 130); region.rect(40, 50, 100, 50); ctx.clip(region, "evenodd"); // draw stuff that gets clipped ctx.fillstyle = 'blue'; ctx.fillrect(0, 0, canvas.width, canvas.height); result specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.clip' in that specification.
CanvasRenderingContext2D.closePath() - Web APIs
const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.arc(240, 20, 40, 0, math.pi); ctx.moveto(100, 20); ctx.arc(60, 20, 40, 0, math.pi); ctx.moveto(215, 80); ctx.arc(150, 80, 65, 0, math.pi); ctx.closepath(); ctx.linewidth = 6; ctx.stroke(); result specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.closepath' in that specification.
CanvasRenderingContext2D.createLinearGradient() - Web APIs
, y=0 // the end gradient point is at x=220, y=0 var gradient = ctx.createlineargradient(20,0, 220,0); // add three color stops gradient.addcolorstop(0, 'green'); gradient.addcolorstop(.5, 'cyan'); gradient.addcolorstop(1, 'green'); // set the fill style and draw a rectangle ctx.fillstyle = gradient; ctx.fillrect(20, 20, 200, 100); result specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.createlineargradient' in that specification.
CanvasRenderingContext2D.createPattern() - Web APIs
ary canvas and fill it with the pattern const canvas = document.createelement('canvas'); const ctx = canvas.getcontext('2d'); const pattern = ctx.createpattern(patterncanvas, 'repeat'); ctx.fillstyle = pattern; ctx.fillrect(0, 0, canvas.width, canvas.height); // add our primary canvas to the webpage document.body.appendchild(canvas); result specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.createpattern' in that specification.
CanvasRenderingContext2D.createRadialGradient() - Web APIs
cle is at x=100, y=100, with radius=70 var gradient = ctx.createradialgradient(110,90,30, 100,100,70); // add three color stops gradient.addcolorstop(0, 'pink'); gradient.addcolorstop(.9, 'white'); gradient.addcolorstop(1, 'green'); // set the fill style and draw a rectangle ctx.fillstyle = gradient; ctx.fillrect(20, 20, 160, 160); result specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.createradialgradient' in that specification.
CanvasRenderingContext2D.direction - Web APIs
html <canvas id="canvas"></canvas> javascript var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.font = '48px serif'; ctx.filltext('hi!', 150, 50); ctx.direction = 'rtl'; ctx.filltext('hi!', 150, 130); result specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.direction' in that specification.
CanvasRenderingContext2D.drawFocusIfNeeded() - Web APIs
'blue' : 'black'; ctx.filltext(el.textcontent, x + width / 2, y + height / 2); // define clickable area ctx.beginpath(); ctx.rect(x, y, width, height); // draw focus ring, if appropriate ctx.drawfocusifneeded(el); } result specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.drawfocusifneeded' in that specification.
CanvasRenderingContext2D.drawImage() - Web APIs
e image as 300x227, ignoring the custom size of 60x45 // given in the constructor ctx.drawimage(this, 0, 0); // to use the custom size we'll have to specify the scale parameters // using the element's width and height properties - lets draw one // on top in the corner: ctx.drawimage(this, 0, 0, this.width, this.height); } result specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d: drawimage' in that specification.
CanvasRenderingContext2D.ellipse() - Web APIs
lstyle = 'red'; ctx.beginpath(); ctx.ellipse(60, 75, 50, 30, math.pi * .25, 0, math.pi * 1.5); ctx.fill(); ctx.fillstyle = 'blue'; ctx.beginpath(); ctx.ellipse(150, 75, 50, 30, math.pi * .25, 0, math.pi); ctx.fill(); ctx.fillstyle = 'green'; ctx.beginpath(); ctx.ellipse(240, 75, 50, 30, math.pi * .25, 0, math.pi, true); ctx.fill(); result specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.ellipse' in that specification.
CanvasRenderingContext2D.fill() - Web APIs
telementbyid('canvas'); const ctx = canvas.getcontext('2d'); // create path let region = new path2d(); region.moveto(30, 90); region.lineto(110, 20); region.lineto(240, 130); region.lineto(60, 130); region.lineto(190, 20); region.lineto(270, 90); region.closepath(); // fill path ctx.fillstyle = 'green'; ctx.fill(region, 'evenodd'); result specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.fill' in that specification.
CanvasRenderingContext2D.fillRect() - Web APIs
const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.fillrect(0, 0, canvas.width, canvas.height); specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.fillrect' in that specification.
CanvasRenderingContext2D.fillStyle - Web APIs
nt.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); for (let i = 0; i < 6; i++) { for (let j = 0; j < 6; j++) { ctx.fillstyle = `rgb( ${math.floor(255 - 42.5 * i)}, ${math.floor(255 - 42.5 * j)}, 0)`; ctx.fillrect(j * 25, i * 25, 25, 25); } } the result looks like this: screenshotlive sample specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.fillstyle' in that specification.
CanvasRenderingContext2D.fillText() - Web APIs
html <canvas id="canvas" width="400" height="150"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = '50px serif'; ctx.filltext('hello world', 50, 90, 140); result specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.filltext' in that specification.
CanvasRenderingContext2D.filter - Web APIs
ples/90/a34a525ace.jpg"> </div> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const image = document.getelementbyid('source'); image.addeventlistener('load', e => { ctx.filter = 'contrast(1.4) sepia(1) drop-shadow(9px 9px 2px #e81)'; ctx.drawimage(image, 10, 10, 180, 120); }); result specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.filter' in that specification.
CanvasRenderingContext2D.font - Web APIs
let f = new fontface('test', 'url(x)'); f.load().then(function() { // ready to use the font in a canvas context }); specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.font' in that specification.
CanvasRenderingContext2D.getImageData() - Web APIs
const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.rect(10, 10, 100, 100); ctx.fill(); let imagedata = ctx.getimagedata(60, 60, 200, 100); ctx.putimagedata(imagedata, 150, 10); result specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.getimagedata' in that specification.
CanvasRenderingContext2D.getLineDash() - Web APIs
const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.setlinedash([10, 20]); console.log(ctx.getlinedash()); // [10, 20] // draw a dashed line ctx.beginpath(); ctx.moveto(0, 50); ctx.lineto(300, 50); ctx.stroke(); result specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.getlinedash' in that specification.
CanvasRenderingContext2D.getTransform() - Web APIs
const ctx1 = canvases[0].getcontext('2d'); const ctx2 = canvases[1].getcontext('2d'); ctx1.settransform(1, .2, .8, 1, 0, 0); ctx1.fillrect(25, 25, 50, 50); let storedtransform = ctx1.gettransform(); console.log(storedtransform); ctx2.settransform(storedtransform); ctx2.beginpath(); ctx2.arc(50, 50, 50, 0, 2 * math.pi); ctx2.fill(); result specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.gettransform' in that specification.
CanvasRenderingContext2D.globalAlpha - Web APIs
llstyle = '#09f'; ctx.fillrect(0, 75, 75, 75); ctx.fillstyle = '#f30'; ctx.fillrect(75, 75, 75, 75); ctx.fillstyle = '#fff'; // set transparency value ctx.globalalpha = 0.2; // draw transparent circles for (let i = 0; i < 7; i++) { ctx.beginpath(); ctx.arc(75, 75, 10 + 10 * i, 0, math.pi * 2, true); ctx.fill(); } screenshotlive sample specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.globalalpha' in that specification.
CanvasRenderingContext2D.globalCompositeOperation - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.globalcompositeoperation = 'xor'; ctx.fillstyle = 'blue'; ctx.fillrect(10, 10, 100, 100); ctx.fillstyle = 'red'; ctx.fillrect(50, 50, 100, 100); result specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.globalcompositeoperation' in that specification.
CanvasRenderingContext2D.imageSmoothingEnabled - Web APIs
x.filltext('source', w * .5, 20); ctx.drawimage(img, 0, 24, w, h); ctx.filltext('smoothing = true', w * 2.5, 20); ctx.imagesmoothingenabled = true; ctx.drawimage(img, w, 24, w * 3, h * 3); ctx.filltext('smoothing = false', w * 5.5, 20); ctx.imagesmoothingenabled = false; ctx.drawimage(img, w * 4, 24, w * 3, h * 3); }; result specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.imagesmoothingenabled' in that specification.
CanvasRenderingContext2D.imageSmoothingQuality - Web APIs
<canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); let img = new image(); img.src = 'https://mdn.mozillademos.org/files/222/canvas_createpattern.png'; img.onload = function() { ctx.imagesmoothingquality = 'low'; ctx.drawimage(img, 0, 0, 300, 150); }; result specifications specification status
comment html living standardthe definition of 'imagesmoothingquality' in that specification.
CanvasRenderingContext2D.isPointInPath() - Web APIs
moves canvas.addeventlistener('mousemove', function(event) { // check whether point is inside circle if (ctx.ispointinpath(circle, event.offsetx, event.offsety)) { ctx.fillstyle = 'green'; } else { ctx.fillstyle = 'red'; } // draw circle ctx.clearrect(0, 0, canvas.width, canvas.height); ctx.fill(circle); }); result specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.ispointinpath' in that specification.
CanvasRenderingContext2D.isPointInStroke() - Web APIs
, function(event) { // check whether point is inside ellipse's stroke if (ctx.ispointinstroke(ellipse, event.offsetx, event.offsety)) { ctx.strokestyle = 'green'; } else { ctx.strokestyle = 'red'; } // draw ellipse ctx.clearrect(0, 0, canvas.width, canvas.height); ctx.fill(ellipse); ctx.stroke(ellipse); }); result specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.ispointinstroke' in that specification.
CanvasRenderingContext2D.lineCap - Web APIs
(10, 10); ctx.lineto(140, 10); ctx.moveto(10, 140); ctx.lineto(140, 140); ctx.stroke(); // draw lines ctx.strokestyle = 'black'; for (let i = 0; i < linecap.length; i++) { ctx.linewidth = 15; ctx.linecap = linecap[i]; ctx.beginpath(); ctx.moveto(25 + i * 50, 10); ctx.lineto(25 + i * 50, 140); ctx.stroke(); } screenshotlive sample specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.linecap' in that specification.
CanvasRenderingContext2D.lineDashOffset - Web APIs
'); const ctx = canvas.getcontext('2d'); let offset = 0; function draw() { ctx.clearrect(0, 0, canvas.width, canvas.height); ctx.setlinedash([4, 2]); ctx.linedashoffset = -offset; ctx.strokerect(10, 10, 100, 100); } function march() { offset++; if (offset > 16) { offset = 0; } draw(); settimeout(march, 20); } march(); specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.linedashoffset' in that specification.
CanvasRenderingContext2D.lineJoin - Web APIs
ejoin = ['round', 'bevel', 'miter']; ctx.linewidth = 10; for (let i = 0; i < linejoin.length; i++) { ctx.linejoin = linejoin[i]; ctx.beginpath(); ctx.moveto(-5, 5 + i * 40); ctx.lineto(35, 45 + i * 40); ctx.lineto(75, 5 + i * 40); ctx.lineto(115, 45 + i * 40); ctx.lineto(155, 5 + i * 40); ctx.stroke(); } screenshotlive sample specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.linejoin' in that specification.
CanvasRenderingContext2D.lineTo() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.moveto(90, 130); ctx.lineto(95, 25); ctx.lineto(150, 80); ctx.lineto(205, 25); ctx.lineto(210, 130); ctx.linewidth = 15; ctx.stroke(); result specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.lineto' in that specification.
CanvasRenderingContext2D.measureText() - Web APIs
you can get a textmetrics object using the following code: const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); let text = ctx.measuretext('hello world'); console.log(text.width); // 56; specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.measuretext' in that specification.
CanvasRenderingContext2D.miterLimit - Web APIs
arrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener("click", function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener("click", function() { textarea.focus(); }) textarea.addeventlistener("input", drawcanvas); window.addeventlistener("load", drawcanvas); screenshotlive sample specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.miterlimit' in that specification.
CanvasRenderingContext2D.moveTo() - Web APIs
var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(50, 50); // begin first sub-path ctx.lineto(200, 50); ctx.moveto(50, 90); // begin second sub-path ctx.lineto(280, 120); ctx.stroke(); result specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.moveto' in that specification.
CanvasRenderingContext2D.putImageData() - Web APIs
s[0 + 3] = 1; console.log("before:", pixels); context.putimagedata(imgdata, 0, 0); const imgdata2 = context.getimagedata(0, 0, canvas.width, canvas.height); const pixels2 = imgdata2.data; console.log("after:", pixels2); the output might look like: before: uint8clampedarray(4) [ 1, 127, 255, 1 ] after: uint8clampedarray(4) [ 255, 255, 255, 1 ] specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.putimagedata' in that specification.
CanvasRenderingContext2D.quadraticCurveTo() - Web APIs
const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(20, 110); ctx.quadraticcurveto(230, 150, 250, 20); ctx.stroke(); result specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.quadraticcurveto' in that specification.
CanvasRenderingContext2D.rect() - Web APIs
const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.rect(10, 20, 150, 100); ctx.fill(); result specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.rect' in that specification.
CanvasRenderingContext2D.resetTransform() - Web APIs
polyfill you can also use the settransform() method to reset the current transform to the identity matrix, like so: ctx.settransform(1, 0, 0, 1, 0, 0); specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.resettransform' in that specification.
CanvasRenderingContext2D.restore() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // save the default state ctx.save(); ctx.fillstyle = 'green'; ctx.fillrect(10, 10, 100, 100); // restore the default state ctx.restore(); ctx.fillrect(150, 40, 100, 100); result specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.restore' in that specification.
CanvasRenderingContext2D.save() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // save the default state ctx.save(); ctx.fillstyle = 'green'; ctx.fillrect(10, 10, 100, 100); // restore the default state ctx.restore(); ctx.fillrect(150, 40, 100, 100); result specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.save' in that specification.
CanvasRenderingContext2D.scale() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.scale(-1, 1); ctx.font = '48px serif'; ctx.filltext('hello world!', -280, 90); ctx.settransform(1, 0, 0, 1, 0, 0); result specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.scale' in that specification.
CanvasRenderingContext2D.scrollPathIntoView() - Web APIs
wcanvas() { ctx.clearrect(0, 0, canvas.width, canvas.height); eval(textarea.value); } reset.addeventlistener("click", function() { textarea.value = code; drawcanvas(); }); edit.addeventlistener("click", function() { textarea.focus(); }) textarea.addeventlistener("input", drawcanvas); window.addeventlistener("load", drawcanvas); specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.scrollpathintoview' in that specification.
CanvasRenderingContext2D.setLineDash() - Web APIs
0; } const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); let y = 15; drawdashedline([]); drawdashedline([1, 1]); drawdashedline([10, 10]); drawdashedline([20, 5]); drawdashedline([15, 3, 3, 3]); drawdashedline([20, 3, 3, 3, 3, 3, 3, 3]); drawdashedline([12, 3, 3]); // equals [12, 3, 3, 12, 3, 3] result specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.setlinedash' in that specification.
CanvasRenderingContext2D.setTransform() - Web APIs
const ctx1 = canvases[0].getcontext('2d'); const ctx2 = canvases[1].getcontext('2d'); ctx1.settransform(1, .2, .8, 1, 0, 0); ctx1.fillrect(25, 25, 50, 50); let storedtransform = ctx1.gettransform(); console.log(storedtransform); ctx2.settransform(storedtransform); ctx2.beginpath(); ctx2.arc(50, 50, 50, 0, 2 * math.pi); ctx2.fill(); result specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.settransform' in that specification.
CanvasRenderingContext2D.shadowBlur - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // shadow ctx.shadowcolor = 'red'; ctx.shadowblur = 15; // rectangle ctx.fillstyle = 'blue'; ctx.fillrect(20, 20, 150, 100); result specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.shadowblur' in that specification.
CanvasRenderingContext2D.shadowColor - Web APIs
('2d'); // shadow ctx.shadowcolor = 'rgba(255, 0, 0, .8)'; ctx.shadowblur = 8; ctx.shadowoffsetx = 30; ctx.shadowoffsety = 20; // filled rectangle ctx.fillstyle = 'rgba(0, 255, 0, .2)'; ctx.fillrect(10, 10, 150, 100); // stroked rectangle ctx.linewidth = 10; ctx.strokestyle = 'rgba(0, 0, 255, .6)'; ctx.strokerect(10, 10, 150, 100); result specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.shadowcolor' in that specification.
CanvasRenderingContext2D.shadowOffsetX - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // shadow ctx.shadowcolor = 'red'; ctx.shadowoffsetx = 25; ctx.shadowblur = 10; // rectangle ctx.fillstyle = 'blue'; ctx.fillrect(20, 20, 150, 100); result specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.shadowoffsetx' in that specification.
CanvasRenderingContext2D.shadowOffsetY - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // shadow ctx.shadowcolor = 'red'; ctx.shadowoffsety = 25; ctx.shadowblur = 10; // rectangle ctx.fillstyle = 'blue'; ctx.fillrect(20, 20, 150, 80); result specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.shadowoffsety' in that specification.
CanvasRenderingContext2D.stroke() - Web APIs
ascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.linewidth = 16; ctx.strokestyle = 'red'; // stroke on top of fill ctx.beginpath(); ctx.rect(25, 25, 100, 100); ctx.fill(); ctx.stroke(); // fill on top of stroke ctx.beginpath(); ctx.rect(175, 25, 100, 100); ctx.stroke(); ctx.fill(); result specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.stroke' in that specification.
CanvasRenderingContext2D.strokeRect() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.shadowcolor = '#d53'; ctx.shadowblur = 20; ctx.linejoin = 'bevel'; ctx.linewidth = 15; ctx.strokestyle = '#38f'; ctx.strokerect(30, 30, 160, 90); result specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.strokerect' in that specification.
CanvasRenderingContext2D.strokeStyle - Web APIs
or (let i = 0; i < 6; i++) { for (let j = 0; j < 6; j++) { ctx.strokestyle = `rgb( 0, ${math.floor(255 - 42.5 * i)}, ${math.floor(255 - 42.5 * j)})`; ctx.beginpath(); ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, math.pi * 2, true); ctx.stroke(); } } the result looks like this: screenshotlive sample specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.strokestyle' in that specification.
CanvasRenderingContext2D.strokeText() - Web APIs
html <canvas id="canvas" width="400" height="150"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = '50px serif'; ctx.stroketext('hello world', 50, 90, 140); result specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.stroketext' in that specification.
CanvasRenderingContext2D.textAlign - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = '30px serif'; ctx.direction = 'ltr'; ctx.textalign = 'start'; ctx.filltext('start-aligned', 0, 50); ctx.textalign = 'end'; ctx.filltext('end-aligned', canvas.width, 120); result specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.textalign' in that specification.
CanvasRenderingContext2D.textBaseline - Web APIs
deographic', 'bottom']; ctx.font = '36px serif'; ctx.strokestyle = 'red'; baselines.foreach(function (baseline, index) { ctx.textbaseline = baseline; const y = 75 + index * 75; ctx.beginpath(); ctx.moveto(0, y + 0.5); ctx.lineto(550, y + 0.5); ctx.stroke(); ctx.filltext('abcdefghijklmnop (' + baseline + ')', 0, y); }); result specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.textbaseline' in that specification.
CanvasRenderingContext2D.transform() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.transform(1, .2, .8, 1, 0, 0); ctx.fillrect(0, 0, 100, 100); result specifications specification status
comment html living standardthe definition of 'canvasrenderingcontext2d.transform' in that specification.
Finale - Web APIs
comments about this tutorial – the mdn documentation community if you have any
comments about this tutorial or want to thank us, feel free to reach out to us!
Canvas API - Web APIs
specifications specification status
comment html living standardthe definition of 'the 2d rendering context' in that specification.
CaretPosition - Web APIs
methods caretposition.getclientrect specification specification status
comment css object model (cssom) view modulethe definition of 'caretposition' in that specification.
ChannelMergerNode() - Web APIs
example var ac = new audiocontext(); var options = { numberofinputs : 2 } var mymerger = new channelmergernode(ac, options); specifications specification status
comment web audio apithe definition of 'channelmergernode' in that specification.
ChannelMergerNode - Web APIs
merger.connect(dest); }); specifications specification status
comment web audio apithe definition of 'channelmergernode' in that specification.
ChannelSplitterNode.ChannelSplitterNode() - Web APIs
example var ac = new audiocontext(); var options = { numberofoutputs : 2 } var mysplitter = new channelsplitternode(ac, options); specifications specification status
comment web audio apithe definition of 'channelsplitternode' in that specification.
ChannelSplitterNode - Web APIs
merger.connect(dest); }); specifications specification status
comment web audio apithe definition of 'channelsplitternode' in that specification.
ChildNode.after() - Web APIs
nt); /* minified: (function(x){ var o=x.prototype; o.after||(o.after=function(){var e,m=arguments,l=m.length,i=0,t=this,p=t.parentnode,n=node,s=string,d=document;if(p!==null){while(i<l){((e=m[i]) instanceof n)?(((t=t.nextsibling )!==null)?p.insertbefore(e,t):p.appendchild(e)):p.appendchild(d.createtextnode(s(e)));++i;}}}); }(element)); */ specification specification status
comment domthe definition of 'childnode.after()' in that specification.
ChildNode.before() - Web APIs
argitem : document.createtextnode(string(argitem))); }); this.parentnode.insertbefore(docfrag, this); } }); }); })([element.prototype, characterdata.prototype, documenttype.prototype]); specification specification status
comment domthe definition of 'childnode.before()' in that specification.
ChildNode.remove() - Web APIs
if (item.hasownproperty('remove')) { return; } object.defineproperty(item, 'remove', { configurable: true, enumerable: true, writable: true, value: function remove() { this.parentnode.removechild(this); } }); }); })([element.prototype, characterdata.prototype, documenttype.prototype]); specifications specification status
comment domthe definition of 'childnode.remove' in that specification.
ChildNode.replaceWith() - Web APIs
rtbefore(currentnode, this.nextsibling); } } if (!element.prototype.replacewith) element.prototype.replacewith = replacewithpolyfill; if (!characterdata.prototype.replacewith) characterdata.prototype.replacewith = replacewithpolyfill; if (!documenttype.prototype.replacewith) documenttype.prototype.replacewith = replacewithpolyfill; specification specification status
comment domthe definition of 'childnode.replacewith()' in that specification.
ChildNode - Web APIs
specifications specification status
comment domthe definition of 'childnode' in that specification.
Client.frameType - Web APIs
syntax var myframetype = client.frametype; example tbd specifications specification status
comment service workersthe definition of 'frametype' in that specification.
Client.id - Web APIs
syntax var clientid = client.id; example tbd specifications specification status
comment service workersthe definition of 'id' in that specification.
Client.postMessage() - Web APIs
client.postmessage({ msg: "hey i just got a fetch from you!", url: event.request.url }); }()); }); receiving that message: navigator.serviceworker.addeventlistener('message', event => { console.log(event.data.msg, event.data.url); }); specifications specification status
comment service workersthe definition of 'postmessage()' in that specification.
Client.type - Web APIs
your message was: " + e.data); // let's also post the type value back to the client e.source.postmessage(e.source.type); }); specifications specification status
comment service workersthe definition of 'type' in that specification.
Client.url - Web APIs
if it is event.waituntil(clients.matchall({ type: 'window' }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }); specifications specification status
comment service workersthe definition of 'url' in that specification.
Client - Web APIs
specifications specification status
comment service workersthe definition of 'client' in that specification.
Clients.claim() - Web APIs
self.addeventlistener('activate', event => { event.waituntil(clients.claim()); }); specifications specification status
comment service workersthe definition of 'claim()' in that specification.
Clients.get() - Web APIs
examples self.clients.get(id).then(function(client) { self.clients.openwindow(client.url); }); specifications specification status
comment service workersthe definition of 'get()' in that specification.
Clients.matchAll() - Web APIs
examples clients.matchall(options).then(function(clientlist) { for (var i = 0 ; i < clientlist.length ; i++) { if (clientlist[i].url === 'index.html') { clients.openwindow(clientlist[i]); // or do something else involving the matching client } } }); specifications specification status
comment service workersthe definition of 'clients: matchall' in that specification.
Clients.openWindow() - Web APIs
windowclient.focus() : null); })); }); specifications specification status
comment service workersthe definition of 'clients: openwindow' in that specification.
Clients - Web APIs
client.focus(); chatclient = client; break; } } // if we didn't find an existing chat window, // open a new one: if (!chatclient) { chatclient = await clients.openwindow('/chat/'); } // message the client: chatclient.postmessage("new chat messages!"); }()); }); specifications specification status
comment service workersthe definition of 'clients' in that specification.
Clipboard.read() - Web APIs
specifications specification status
comment clipboard api and eventsthe definition of 'read()' in that specification.
Clipboard.readText() - Web APIs
navigator.clipboard.readtext().then( cliptext => document.getelementbyid("outbox").innertext = cliptext); specifications specification status
comment clipboard api and eventsthe definition of 'readtext()' in that specification.
Clipboard.write() - Web APIs
specifications specification status
comment clipboard api and eventsthe definition of 'write()' in that specification.
Clipboard.writeText() - Web APIs
navigator.clipboard.writetext("<empty clipboard>").then(function() { /* clipboard successfully set */ }, function() { /* clipboard write failed */ }); specifications specification status
comment clipboard api and eventsthe definition of 'writetext()' in that specification.
Clipboard - Web APIs
specifications specification status
comment clipboard api and eventsthe definition of 'clipboard' in that specification.
ClipboardEvent() - Web APIs
specifications specification status
comment clipboard api and eventsthe definition of 'clipboardevent()' in that specification.
ClipboardEvent.clipboardData - Web APIs
syntax data = clipboardevent.clipboarddata specifications specification status
comment clipboard api and eventsthe definition of 'clipboardevent.clipboarddata' in that specification.
ClipboardEvent - Web APIs
specifications specification status
comment clipboard api and eventsthe definition of 'clipboardevent' in that specification.
ClipboardItem() - Web APIs
teclipimg() { try { const imgurl = '/myimage.png'; const data = await fetch(imgurl); const blob = await data.blob(); await navigator.clipboard.write([ new clipboarditem({ [blob.type]: blob }) ]); console.log('fetched image copied.'); } catch(err) { console.error(err.name, err.message); } } specifications specification status
comment clipboard api and eventsthe definition of 'clipboarditem' in that specification.
ClipboardItem.getType() - Web APIs
{ try { const clipboarditems = await navigator.clipboard.read(); for (const clipboarditem of clipboarditems) { for (const type of clipboarditem.types) { const blob = await clipboarditem.gettype(type); // we can now use blob here } } } catch (err) { console.error(err.name, err.message); } } specifications specification status
comment clipboard api and eventsthe definition of 'clipboarditem' in that specification.
ClipboardItem.types - Web APIs
{ try { const clipboarditems = await navigator.clipboard.read(); for (const clipboarditem of clipboarditems) { for (const type of clipboarditem.types) { const blob = await clipboarditem.gettype(type); // we can now use blob here } } } catch (err) { console.error(err.name, err.message); } } specifications specification status
comment clipboard api and eventsthe definition of 'clipboarditem' in that specification.
ClipboardItem - Web APIs
{ try { const clipboarditems = await navigator.clipboard.read(); for (const clipboarditem of clipboarditems) { for (const type of clipboarditem.types) { const blob = await clipboarditem.gettype(type); // we can now use blob here } } } catch (err) { console.error(err.name, err.message); } } specifications specification status
comment clipboard api and eventsthe definition of 'clipboarditem' in that specification.
Clipboard API - Web APIs
specifications specification status
comment clipboard api and events working draft initial definition.
CloseEvent() - Web APIs
specifications specification status
comment html living standardthe definition of 'closeevent()' in that specification.
CloseEvent - Web APIs
specifications specification status
comment html living standardthe definition of 'closeevent' in that specification.
CompositionEvent.data - Web APIs
specifications specification status
comment document object model (dom) level 3 events specificationthe definition of 'data' in that specification.
CompositionEvent.locale - Web APIs
specifications specification status
comment document object model (dom) level 3 events specification obsolete no longer in the spec, but still supported.
CompositionEvent - Web APIs
specifications specification status
comment ui eventsthe definition of 'compositionevent' in that specification.
console.assert() - Web APIs
specifications specification status
comment console apithe definition of 'console.assert()' in that specification.
console.clear() - Web APIs
syntax console.clear(); specifications specification status
comment console apithe definition of 'console.clear()' in that specification.
console.count() - Web APIs
specifications specification status
comment console apithe definition of 'console.count()' in that specification.
console.debug() - Web APIs
specifications specification status
comment console apithe definition of 'console.debug()' in that specification.
Console.dir() - Web APIs
specifications specification status
comment console apithe definition of 'console.dir()' in that specification.
Console.dirxml() - Web APIs
specifications specification status
comment console apithe definition of 'console.dirxml()' in that specification.
Console.error() - Web APIs
specifications specification status
comment console apithe definition of 'console.error()' in that specification.
Console.group() - Web APIs
specifications specification status
comment console apithe definition of 'console.group()' in that specification.
Console.groupEnd() - Web APIs
specifications specification status
comment console apithe definition of 'console.groupend()' in that specification.
Console.info() - Web APIs
specifications specification status
comment console apithe definition of 'console.info()' in that specification.
console.log() - Web APIs
specifications specification status
comment console apithe definition of 'console.log()' in that specification.
Console.table() - Web APIs
specifications specification status
comment console apithe definition of 'console.table()' in that specification.
Console.time() - Web APIs
specifications specification status
comment console apithe definition of 'console.time()' in that specification.
Console.timeEnd() - Web APIs
specifications specification status
comment console apithe definition of 'console.timeend()' in that specification.
Console.timeLog() - Web APIs
specifications specification status
comment console apithe definition of 'console.timelog()' in that specification.
console.trace() - Web APIs
example function foo() { function bar() { console.trace(); } bar(); } foo(); in the console, the following trace will be displayed: bar foo <anonymous> specifications specification status
comment console apithe definition of 'console.trace()' in that specification.
Console.warn() - Web APIs
specifications specification status
comment console apithe definition of 'console.warn()' in that specification.
console - Web APIs
given code like this: function foo() { function bar() { console.trace(); } bar(); } foo(); the output in the console looks something like this: specifications specification status
comment console api living standard initial definition.
Console API - Web APIs
specifications specification status
comment console api living standard initial definition.
ConstantSourceNode() - Web APIs
specifications specification status
comment web audio apithe definition of 'constantsourcenode: constantsourcenode' in that specification.
ConstantSourceNode - Web APIs
specification specification status
comment web audio apithe definition of 'constantsourcenode' in that specification.
ConstrainBoolean - Web APIs
specifications specification status
comment media capture and streamsthe definition of 'constrainboolean' in that specification.
ConstrainDOMString - Web APIs
specifications specification status
comment media capture and streamsthe definition of 'constraindomstring' in that specification.
ConstrainDouble - Web APIs
specifications specification status
comment media capture and streamsthe definition of 'constraindouble' in that specification.
ConstrainULong - Web APIs
specifications specification status
comment media capture and streamsthe definition of 'constrainulong' in that specification.
ContentIndex.add() - Web APIs
content const item = { id: 'post-1', url: '/posts/amet.html', title: 'amet consectetur adipisicing', description: 'repellat et quia iste possimus ducimus aliquid a aut eaque nostrum.', icons: [{ src: '/media/dark.png', sizes: '128x128', type: 'image/png', }], category: 'article' }; self.registration.index.add(item); specifications specification status
comment unknownthe definition of 'add' in that specification.
ContentIndex.delete() - Web APIs
self.registration.index.delete('my-id'); specifications specification status
comment unknownthe definition of 'delete' in that specification.
ContentIndex.getAll() - Web APIs
t.createelement('ul'); for (const entry of entries) { const listitem = document.createelement('li'); const anchorelem = document.createelement('a'); anchorelem.innertext = entry.title; anchorelem.setattribute('href', entry.url); listelem.append(listitem); } readinglistelem.append(listelem); } } specifications specification status
comment unknownthe definition of 'getall' in that specification.
ContentIndex - Web APIs
they are accessible from the workerglobalscope.self property: // service worker script self.registration.index.add(item); self.registration.index.delete(item.id); const contentindexitems = self.registration.index.getall(); specifications specification status
comment unknownthe definition of 'contentindex' in that specification.
ContentIndexEvent() - Web APIs
var removedata = { id : 'unique-content-id' } var cievent = new contentindexevent('contentdelete', removedata); cievent.id; // should return 'unique-content-id' specifications specification status
comment unknownthe definition of 'contentindexevent' in that specification.
ContentIndexEvent.id - Web APIs
self.addeventlistener('contentdelete', (event) => { console.log(event.id); // logs content index id, which can then be used to determine what content to delete from your cache }); specifications specification status
comment unknownthe definition of 'id' in that specification.
ContentIndexEvent - Web APIs
self.addeventlistener('contentdelete', (event) => { console.log(event.id); // logs content index id, which can then be used to determine what content to delete from your cache }); specifications specification status
comment unknownthe definition of 'contentindexevent' in that specification.
ConvolverNode() - Web APIs
specifications specification status
comment web audio apithe definition of 'convolvernode()' in that specification.
ConvolverNode.buffer - Web APIs
convolver.buffer = concerthallbuffer; specifications specification status
comment web audio apithe definition of 'buffer' in that specification.
ConvolverNode.normalize - Web APIs
convolver.normalize = false; // must be set before the buffer, to take effect convolver.buffer = concerthallbuffer; specifications specification status
comment web audio apithe definition of 'normalize' in that specification.
ConvolverNode - Web APIs
let reverb = await createreverb(); // someotheraudionode -> reverb -> destination someotheraudionode.connect(reverb); reverb.connect(audioctx.destination); specifications specification status
comment web audio apithe definition of 'convolvernode' in that specification.
CountQueuingStrategy.CountQueuingStrategy() - Web APIs
}, abort(err) { console.log("sink error:", err); } }, queuingstrategy); var size = queuingstrategy.size(); specifications specification status
comment streamsthe definition of 'countqueuingstrategy()' in that specification.
CountQueuingStrategy.size() - Web APIs
}, abort(err) { console.log("sink error:", err); } }, queuingstrategy); var size = queuingstrategy.size(); specifications specification status
comment streamsthe definition of 'size' in that specification.
CountQueuingStrategy - Web APIs
}, abort(err) { console.log("sink error:", err); } }, queueingstrategy); var size = queueingstrategy.size(); specifications specification status
comment streamsthe definition of 'countqueuingstrategy' in that specification.
CrashReportBody - Web APIs
specifications specification status
comment reporting apithe definition of 'crashreportbody' in that specification.
Credential.id - Web APIs
specifications specification status
comment credential management level 1 working draft initial definition.
Credential.name - Web APIs
example // tbd specifications specification status
comment credential management level 1 working draft initial definition.
Credential.type - Web APIs
example // tbd specifications specification status
comment credential management level 1 working draft initial definition.
Credential - Web APIs
examples // tbd specifications specification status
comment credential management level 1 working draft initial definition.
CredentialsContainer - Web APIs
examples // tbd specifications specification status
comment credential management level 1 working draft initial definition.
Crypto.getRandomValues() - Web APIs
examples /* assuming that window.crypto.getrandomvalues is available */ var array = new uint32array(10); window.crypto.getrandomvalues(array); console.log("your lucky numbers:"); for (var i = 0; i < array.length; i++) { console.log(array[i]); } specification specification status
comment web cryptography api recommendation initial definition ...
Crypto.subtle - Web APIs
specifications specification status
comment web cryptography apithe definition of 'crypto.subtle' in that specification.
Crypto - Web APIs
specifications specification status
comment web cryptography apithe definition of 'crypto' in that specification.
CryptoKey - Web APIs
for example: subtlecrypto.generatekey() subtlecrypto.derivekey() subtlecrypto.importkey() subtlecrypto.exportkey() subtlecrypto.wrapkey() subtlecrypto.unwrapkey() subtlecrypto.encrypt() subtlecrypto.decrypt() subtlecrypto.sign() subtlecrypto.verify() specifications specification status
comment web cryptography apithe definition of 'cryptokey' in that specification.
CryptoKeyPair - Web APIs
for example: subtlecrypto.generatekey() subtlecrypto.derivekey() subtlecrypto.importkey() subtlecrypto.exportkey() subtlecrypto.wrapkey() subtlecrypto.unwrapkey() subtlecrypto.encrypt() subtlecrypto.decrypt() subtlecrypto.sign() subtlecrypto.verify() specifications specification status
comment web cryptography apithe definition of 'cryptokeypair' in that specification.
CustomElementRegistry.define() - Web APIs
the shadow root shadow.appendchild(text); // update count when element content changes setinterval(function() { var count = 'words: ' + countwords(wcparent); text.textcontent = count; }, 200) } } // define the new element customelements.define('word-count', wordcount, { extends: 'p' }); <p is="word-count"></p> specifications specification status
comment html living standardthe definition of 'customelements.define()' in that specification.
CustomElementRegistry.get() - Web APIs
super(); let template = document.getelementbyid('my-paragraph'); let templatecontent = template.content; const shadowroot = this.attachshadow({mode: 'open'}) .appendchild(templatecontent.clonenode(true)); } }) // return a reference to the my-paragraph constructor let ctor = customelements.get('my-paragraph'); specifications specification status
comment html living standardthe definition of 'customelements.get()' in that specification.
CustomElementRegistry.whenDefined() - Web APIs
await promise.all(promises); container.removechild(placeholder); specifications specification status
comment html living standardthe definition of 'customelements.whendefined()' in that specification.
CustomElementRegistry - Web APIs
specifications specification status
comment html living standardthe definition of 'customelementregistry' in that specification.
CustomEvent() - Web APIs
specifications specification status
comment domthe definition of 'customevent()' in that specification.
CustomEvent.detail - Web APIs
xample // add an appropriate event listener obj.addeventlistener("cat", function(e) { process(e.detail) }); // create and dispatch the event let event = new customevent("cat", { detail: { hazcheeseburger: true } }); obj.dispatchevent(event); // will return an object contaning the hazcheeseburger property let mydetail = event.detail; specifications specification status
comment domthe definition of 'detail' in that specification.
CustomEvent - Web APIs
specifications specification status
comment domthe definition of 'customevent' in that specification.
DOMConfiguration - Web APIs
pre-defined parameters: "canonical-form", "cdata-sections", "check-character-normalization", "
comments", "datatype-normalization", "element-content-whitespace", "entities", "error-handler", "infoset", "namespaces", "namespace-declarations", "normalize-characters","schema-location", "schema-type", "split-cdata-sections", "validate", "validate-if-schema", "well-formed" properties domconfiguration.parameternames read only is a domstringlist methods domconfiguration.cansetparameter() returns a boolean domconfiguration.getparameter() returns a domuserdata domconfiguration.setparameter() sets a parameter specification http://www.w3.org/tr/dom-level-3-cor...mconfiguration ...
DOMException() - Web APIs
example tbd specifications specification status
comment web idlthe definition of 'domexception()' in that specification.
DOMException - Web APIs
specifications specification status
comment web idlthe definition of 'constructor' in that specification.
DOMHighResTimeStamp - Web APIs
specifications specification status
comment high resolution time level 2the definition of 'domhighrestimestamp' in that specification.
DOMImplementation.createDocument() - Web APIs
example var doc = document.implementation.createdocument ('http://www.w3.org/1999/xhtml', 'html', null); var body = document.createelementns('http://www.w3.org/1999/xhtml', 'body'); body.setattribute('id', 'abc'); doc.documentelement.appendchild(body); alert(doc.getelementbyid('abc')); // [object htmlbodyelement] specifications specification status
comment domthe definition of 'domimplementation.createdocument' in that specification.
DOMImplementation.createDocumentType() - Web APIs
example var dt = document.implementation.createdocumenttype('svg:svg', '-//w3c//dtd svg 1.1//en', 'http://www.w3.org/graphics/svg/1.1/dtd/svg11.dtd'); var d = document.implementation.createdocument('http://www.w3.org/2000/svg', 'svg:svg', dt); alert(d.doctype.publicid); // -//w3c//dtd svg 1.1//en specifications specification status
comment domthe definition of 'domimplementation.createdocumenttype' in that specification.
DOMImplementation.createHTMLDocument() - Web APIs
view live examples the returned document is pre-constructed with the following html: <!doctype html> <html> <head> <title>title</title> </head> <body> </body> </html> specifications specification status
comment domthe definition of 'domimplementation.createhtmldocument' in that specification.
DOMImplementationList - Web APIs
specifications specification status
comment document object model (dom) level 3 core specificationthe definition of 'domimplementationlist' in that specification.
DOMLocator - Web APIs
specifications specification status
comment document object model (dom) level 3 core specificationthe definition of 'domlocator' in that specification.
DOMMatrix() - Web APIs
new dompoint(5, 4); var scalex = 2; var scaley = 3; var translatex = 12; var translatey = 8; var angle = math.pi / 2; var matrix = new dommatrix([ math.sin(angle) * scalex, math.cos(angle) * scalex, -math.sin(angle) * scaley, math.cos(angle) * scaley, translatex, translatey ]); var transformedpoint = point.matrixtransform(matrix); specifications specification status
comment geometry interfaces module level 1the definition of 'dommatrix' in that specification.
DOMMatrix - Web APIs
specifications specification status
comment geometry interfaces module level 1the definition of 'dommatrix' in that specification.
DOMMatrixReadOnly() - Web APIs
specifications specification status
comment geometry interfaces module level 1the definition of 'dommatrixreadonly' in that specification.
DOMMatrixReadOnly.flipX() - Web APIs
const flipped = document.getelementbyid('flipped'); const matrix = new dommatrixreadonly(); const flippedmatrix = matrix.flipx(); flipped.setattribute('transform', flippedmatrix.tostring()); screenshotlive sample specifications specification status
comment geometry interfaces module level 1the definition of 'dommatrixreadonly.flipx()' in that specification.
DOMMatrixReadOnly.scale() - Web APIs
matrixwithorigin.is2d; if (browserexpectssixparamscale) { scaledmatrixwithorigin = matrix.scale(0.5, 0.5, 1, 25, 25, 0); } document.queryselector('#transformed').setattribute('transform', scaledmatrix.tostring()); document.queryselector('#transformedorigin').setattribute('transform', scaledmatrixwithorigin.tostring()); screenshotlive sample specifications specification status
comment geometry interfaces module level 1the definition of 'dommatrixreadonly.scale()' in that specification.
DOMMatrixReadOnly.translate() - Web APIs
const matrix = new dommatrixreadonly().translate(25, 25); document.queryselector('#transformed').setattribute('transform', matrix.tostring()); screenshotlive sample specifications specification status
comment geometry interfaces module level 1the definition of 'dommatrixreadonly.translate()' in that specification.
DOMMatrixReadOnly - Web APIs
specifications specification status
comment geometry interfaces module level 1the definition of 'dommatrixreadonly' in that specification.
DOMObject - Web APIs
specifications specification status
comment document object model (dom) level 3 core specificationthe definition of 'domobject' in that specification.
DOMParser - Web APIs
t\/html\s*(?:;|$)/i.test(type)) { var doc = document.implementation.createhtmldocument(""); if (markup.tolowercase().indexof('<!doctype') > -1) { doc.documentelement.innerhtml = markup; } else { doc.body.innerhtml = markup; } return doc; } else { return nativeparse.apply(this, arguments); } }; }(domparser)); specifications specification status
comment html living standardthe definition of 'dom parsing' in that specification.
DOMPoint.fromPoint() - Web APIs
var center = dompoint.frompoint({x: 75, y: -50, z: -55, w: 0.25}); specifications specification status
comment geometry interfaces module level 1the definition of 'frompoint()' in that specification.
DOMPoint.DOMPoint() - Web APIs
var windtopleft = new dompoint(window.screenx, window.screeny); var newtopleft = dompoint.frompoint(windtopleft); newtopleft.x += 100; newtopleft.y += 100; specifications specification status
comment geometry interfaces module level 1the definition of 'dompoint()' in that specification.
DOMPoint.w - Web APIs
specifications specification status
comment geometry interfaces module level 1the definition of 'w' in that specification.
DOMPoint.x - Web APIs
specifications specification status
comment geometry interfaces module level 1the definition of 'x' in that specification.
DOMPoint.y - Web APIs
specifications specification status
comment geometry interfaces module level 1the definition of 'y' in that specification.
DOMPoint.z - Web APIs
specifications specification status
comment geometry interfaces module level 1the definition of 'z' in that specification.
DOMPoint - Web APIs
+ ', z: ' + roundtotwo(position.z)); console.log('xr viewer orientation: {x: ' + roundtotwo(orientation.x) + ', y: ' + roundtotwo(orientation.y) + ', z: ' + roundtotwo(orientation.z) + ', w: ' + roundtotwo(orientation.w)); } } specifications specification status
comment geometry interfaces module level 1the definition of 'dompoint' in that specification.
DOMPointInit.w - Web APIs
specifications specification status
comment geometry interfaces module level 1the definition of 'w' in that specification.
DOMPointInit.x - Web APIs
specifications specification status
comment geometry interfaces module level 1the definition of 'x' in that specification.
DOMPointInit.y - Web APIs
specifications specification status
comment geometry interfaces module level 1the definition of 'y' in that specification.
DOMPointInit.z - Web APIs
specifications specification status
comment geometry interfaces module level 1the definition of 'z' in that specification.
DOMPointInit - Web APIs
const pointdesc = { x: window.screenx, y: window.screeny, z: 5.0 }; const windtopleft = dompoint.frompoint(pointdesc) specifications specification status
comment geometry interfaces module level 1the definition of 'dompointreadonly.frompoint()' in that specification.
DOMPointReadOnly() - Web APIs
var point2d = new dompointreadonly(50, 25); var point3d = new dompointreadonly(50, 0, 10); var perspectivepoint3d = new dompointreadonly(50, 50, 25, 0.5); specifications specification status
comment geometry interfaces module level 1the definition of 'dompointreadonly' in that specification.
DOMPointReadOnly.fromPoint() - Web APIs
const origpoint = new dompoint(25, 25, 100, 0.5) const newpoint = dompointreadonly.frompoint(origpoint) specifications specification status
comment geometry interfaces module level 1the definition of 'frompoint()' in that specification.
DOMPointReadOnly.toJSON() - Web APIs
var topleft = new dompoint(window.screenx, window.screeny); var pointjson = topleft.tojson(); specifications specification status
comment geometry interfaces module level 1the definition of 'dompointreadonly.tojson()' in that specification.
DOMPointReadOnly.w - Web APIs
specifications specification status
comment geometry interfaces module level 1the definition of 'w' in that specification.
DOMPointReadOnly.x - Web APIs
specifications specification status
comment geometry interfaces module level 1the definition of 'x' in that specification.
DOMPointReadOnly.y - Web APIs
specifications specification status
comment geometry interfaces module level 1the definition of 'y' in that specification.
DOMPointReadOnly.z - Web APIs
specifications specification status
comment geometry interfaces module level 1the definition of 'z' in that specification.
DOMPointReadOnly - Web APIs
specifications specification status
comment geometry interfaces module level 1the definition of 'dompoint' in that specification.
DOMQuad - Web APIs
specifications specification status
comment geometry interfaces module level 1the definition of 'domquad' in that specification.
DOMRect.DOMRect() - Web APIs
examples to create a new domrect, you could run a line of code like so: mydomrect = new domrect(0,0,100,100); // running 'mydomrect' in the console would then return // domrect { x: 0, y: 0, width: 100, height: 100, top: 0, right: 100, bottom: 100, left: 0 } specifications specification status
comment geometry interfaces module level 1the definition of 'domrect()' in that specification.
DOMRect - Web APIs
specifications specification status
comment geometry interfaces module level 1the definition of 'domrect' in that specification.
DOMRectReadOnly() - Web APIs
examples to create a new dompoint, you could run a line of code like so: const mydomrect = new domrectreadonly(0, 0, 100, 100) // running 'mydomrect' in the console would then return // domrect { x: 0, y: 0, width: 100, height: 100, top: 0, right: 100, bottom: 100, left: 0 } specifications specification status
comment geometry interfaces module level 1the definition of 'domrectreadonly()' in that specification.
DOMRectReadOnly.left - Web APIs
specifications specification status
comment geometry interfaces module level 1the definition of 'left' in that specification.
DOMRectReadOnly.top - Web APIs
specifications specification status
comment geometry interfaces module level 1the definition of 'top' in that specification.
DOMRectReadOnly.x - Web APIs
specifications specification status
comment geometry interfaces module level 1the definition of 'x' in that specification.
DOMRectReadOnly.y - Web APIs
specifications specification status
comment geometry interfaces module level 1the definition of 'y' in that specification.
DOMRectReadOnly - Web APIs
specifications specification status
comment geometry interfaces module level 1the definition of 'domrectreadonly' in that specification.
DOMString - Web APIs
specifications specification status
comment web idlthe definition of 'domstring' in that specification.
DOMStringList - Web APIs
domstringlist.contains() returns boolean indicating if the given string is in the list specifications specification status
comment html living standardthe definition of 'domstringlist' in that specification.
DOMStringMap - Web APIs
specifications specification status
comment html living standardthe definition of 'domstringmap' in that specification.
DOMTimeStamp - Web APIs
specifications specification status
comment web idlthe definition of 'domtimestamp' in that specification.
DOMTokenList.add() - Web APIs
first, the html: <span class="a b c"></span> now the javascript: let span = document.queryselector("span"); let classes = span.classlist; classes.add("d"); span.textcontent = classes; the output looks like this: you can add multiple tokens as well: span.classlist.add("d", "e", "f"); specifications specification status
comment domthe definition of 'add()' in that specification.
DOMTokenList.contains() - Web APIs
first, the html: <span class="a b c"></span> now the javascript: let span = document.queryselector("span"); let classes = span.classlist; let result = classes.contains("c"); if (result) { span.textcontent = "the classlist contains 'c'"; } else { span.textcontent = "the classlist does not contain 'c'"; } the output looks like this: specifications specification status
comment domthe definition of 'contains()' in that specification.
DOMTokenList.entries() - Web APIs
first, the html: <span class="a b c"></span> now the javascript: let span = document.queryselector("span"); let classes = span.classlist; let iterator = classes.entries(); for (let value of iterator) { span.textcontent += value + ' ++ '; } the output looks like this: specifications specification status
comment domthe definition of 'entries() (as iterable<node>)' in that specification.
DOMTokenList.forEach() - Web APIs
polyfill this polyfill adds compatibility to all browsers supporting es5: if (window.domtokenlist && !domtokenlist.prototype.foreach) { domtokenlist.prototype.foreach = function (callback, thisarg) { thisarg = thisarg || window; for (var i = 0; i < this.length; i++) { callback.call(thisarg, this[i], i, this); } }; } specifications specification status
comment domthe definition of 'foreach() (as iterable<node>)' in that specification.
DOMTokenList.item() - Web APIs
first, the html: <span class="a b c"></span> now the javascript: let span = document.queryselector("span"); let classes = span.classlist; let item = classes.item(classes.length-1); span.textcontent = item; the output looks like this: specifications specification status
comment domthe definition of 'item()' in that specification.
DOMTokenList.keys() - Web APIs
first, the html: <span class="a b c"></span> now the javascript: var span = document.queryselector("span"); var classes = span.classlist; var iterator = classes.keys(); for(var value of iterator) { span.textcontent += value + ' ++ '; } the output looks like this: specifications specification status
comment domthe definition of 'keys() (as iterable<node>)' in that specification.
DOMTokenList.length - Web APIs
first, the html: <span class="a b c"></span> now the javascript: let span = document.queryselector("span"); let classes = span.classlist; let length = classes.length; span.textcontent = `classlist length = ${length}`; the output looks like this: specifications specification status
comment domthe definition of 'length' in that specification.
DOMTokenList.remove() - Web APIs
the order you supply the tokens doesn't have to match the order they appear in the list: let span2 = document.getelementsbytagname("span")[0] let classes2 = span.classlist; classes2.remove("c", "b"); span2.textcontent = classes; specifications specification status
comment domthe definition of 'remove()' in that specification.
DOMTokenList.replace() - Web APIs
to use with earlier versions of ie, refer to the polyfill at element.classlist#polyfill domtokenlist.prototype.replace = function (a, b) { if (this.contains(a)) { this.add(b); this.remove(a); return true; } return false; } specifications specification status
comment domthe definition of 'replace()' in that specification.
DOMTokenList.supports() - Web APIs
et iframe = document.getelementbyid('display'); if (iframe.sandbox.supports('an-upcoming-feature')) { // support code for mystery future feature } else { // fallback code } if (iframe.sandbox.supports('allow-scripts')) { // instruct frame to run javascript // // (note: this feature is well-supported; this is just an example!) // } specifications specification status
comment credential management level 1 working draft initial definition.
DOMTokenList.toggle() - Web APIs
ocument.queryselector("span"); let classes = span.classlist; span.addeventlistener('click', function() { let result = classes.toggle("c"); if (result) { span.textcontent = `'c' added; classlist is now "${classes}".`; } else { span.textcontent = `'c' removed; classlist is now "${classes}".`; } }) the output looks like this: specifications specification status
comment domthe definition of 'toggle()' in that specification.
DOMTokenList.value - Web APIs
first, the html: <span class="a b c"></span> now the javascript: let span = document.queryselector("span"); let classes = span.classlist; span.textcontent = classes.value; the output looks like this: specifications specification status
comment domthe definition of 'value' in that specification.
DOMTokenList.values() - Web APIs
first, the html: <span class="a b c"></span> now the javascript: var span = document.queryselector("span"); var classes = span.classlist; var iterator = classes.values(); for(var value of iterator) { span.textcontent += value + ' ++ '; } the output looks like this: specifications specification status
comment domthe definition of 'values() (as iterable<node>)' in that specification.
DOMTokenList - Web APIs
for example: <span class=" d d e f"></span> let span = document.queryselector("span"); let classes = span.classlist; span.classlist.add("x"); span.textcontent = `span classlist is "${classes}"`; the output looks like this: specifications specification status
comment domthe definition of 'domtokenlist' in that specification.
DOMUserData - Web APIs
specifications specification status
comment document object model (dom) level 3 core specificationthe definition of 'domuserdata' in that specification.
DataTransfer() - Web APIs
specifications specification status
comment html living standardthe definition of 'the datatransfer() constructor' in that specification.
DataTransfer.clearData() - Web APIs
t/plain'); var element = document.getelementbyid(_data); // append drag source element to event's target element event.target.appendchild(element); // change css styles and displayed text element.style.csstext = 'border: 1px solid black;display: block; color: red'; element.innerhtml = "i'm in the drop zone!"; } }) specifications specification status
comment html living standardthe definition of 'datatransfer.cleardata()' in that specification.
DataTransfer.dropEffect - Web APIs
.datatransfer.getdata("text"); ev.target.appendchild(document.getelementbyid(data)); } function dragover_handler(ev) { console.log("dragover: dropeffect = " + ev.datatransfer.dropeffect + " ; effectallowed = " + ev.datatransfer.effectallowed); ev.preventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } specifications specification status
comment html living standardthe definition of 'dropeffect' in that specification.
DataTransfer.effectAllowed - Web APIs
lowed</code>} properties</h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specifications specification status
comment html living standardthe definition of 'effectallowed' in that specification.
DataTransfer.files - Web APIs
example there are two live examples of this interface: firefox only: http://jsfiddle.net/9c2ef/ all browsers: https://jsbin.com/hiqasek/ specifications specification status
comment html living standardthe definition of 'files' in that specification.
DataTransfer.getData() - Web APIs
tatransfer.setdata("text", dragevent.target.id); dragevent.target.style.color = 'green'; } function drop(dropevent) { dropevent.preventdefault(); var data = dropevent.datatransfer.getdata("text"); dropevent.target.appendchild(document.getelementbyid(data)); document.getelementbyid("drag").style.color = 'black'; } result specifications specification status
comment html living standardthe definition of 'getdata()' in that specification.
DataTransfer.items - Web APIs
1> <ul> <li id="i1" ondragstart="dragstart_handler(event);" draggable="true">drag item 1 to the drop zone</li> <li id="i2" ondragstart="dragstart_handler(event);" draggable="true">drag item 2 to the drop zone</li> </ul> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specifications specification status
comment html living standardthe definition of 'items' in that specification.
DataTransfer.setData() - Web APIs
<code>cleardata()</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specifications specification status
comment html living standardthe definition of 'setdata()' in that specification.
DataTransfer.setDragImage() - Web APIs
er.setdragimage()</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specifications specification status
comment html living standardthe definition of 'setdragimage()' in that specification.
DataTransfer.types - Web APIs
1> <ul> <li id="i1" ondragstart="dragstart_handler(event);" draggable="true">drag item 1 to the drop zone</li> <li id="i2" ondragstart="dragstart_handler(event);" draggable="true">drag item 2 to the drop zone</li> </ul> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specifications specification status
comment html living standardthe definition of 'types' in that specification.
DataTransfer - Web APIs
specifications specification status
comment html living standardthe definition of 'datatransfer' in that specification.
DataTransferItem.kind - Web APIs
drop: file "); } } } specifications specification status
comment html living standardthe definition of 'kind' in that specification.
DataTransferItem.type - Web APIs
drop: file "); } } } specifications specification status
comment html living standardthe definition of 'type' in that specification.
DataTransferItem - Web APIs
specifications specification status
comment html living standardthe definition of 'datatransferitem' in that specification.
DataTransferItemList.DataTransferItem() - Web APIs
zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> css div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } result drag and drop demo link specifications specification status
comment html living standardthe definition of 'datatransferitem getter' in that specification.
DataTransferItemList.add() - Web APIs
reventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } function dragend_handler(ev) { console.log("dragend"); var datalist = ev.datatransfer.items; for (var i = 0; i < datalist.length; i++) { datalist.remove(i); } // clear any remaining drag data datalist.clear(); } result result link specifications specification status
comment html living standardthe definition of 'add()' in that specification.
DataTransferItemList.clear() - Web APIs
ev.preventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } function dragend_handler(ev) { console.log("dragend"); var datalist = ev.datatransfer.items; for (var i = 0; i < datalist.length; i++) { datalist.remove(i); } // clear any remaining drag data datalist.clear(); } result result link specifications specification status
comment html living standardthe definition of 'clear()' in that specification.
DataTransferItemList.length - Web APIs
zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> css div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } result drag and drop demo link specifications specification status
comment html living standardthe definition of 'length' in that specification.
DataTransferItemList.remove() - Web APIs
o the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> css div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; } specifications specification status
comment html living standardthe definition of 'remove()' in that specification.
DataTransferItemList - Web APIs
specifications specification status
comment html living standardthe definition of 'datatransferitemlist' in that specification.
DelayNode() - Web APIs
example const audioctx = new audiocontext(); const delaynode = new delaynode(audioctx, { delaytime: 0.5, maxdelaytime: 2, }); specifications specification status
comment web audio apithe definition of 'delaynode()' in that specification.
DelayNode.delayTime - Web APIs
var delay1; rangesynth.oninput = function() { delay1 = rangesynth.value; synthdelay.delaytime.setvalueattime(delay1, audioctx.currenttime); } specifications specification status
comment web audio apithe definition of 'delaytime' in that specification.
DelayNode - Web APIs
var delay1; rangesynth.oninput = function() { delay1 = rangesynth.value; synthdelay.delaytime.setvalueattime(delay1, audioctx.currenttime); } specifications specification status
comment web audio apithe definition of 'delaynode' in that specification.
Using light sensors - Web APIs
specifications specification status
comment ambient light sensorthe definition of 'ambient light events' in that specification.
DeviceMotionEvent.acceleration - Web APIs
each axis is represented with its own property: x represents the acceleration upon the x axis which is the west to east axis y represents the acceleration upon the y axis which is the south to north axis z represents the acceleration upon the z axis which is the down to up axis specifications specification status
comment deviceorientation event specification editor's draft initial definition.
DeviceMotionEvent.accelerationIncludingGravity - Web APIs
each axis is represented with its own property: x represents the acceleration upon the x axis which is the west to east axis y represents the acceleration upon the y axis which is the south to north axis z represents the acceleration upon the z axis which is the down to up axis specifications specification status
comment deviceorientation event specification editor's draft initial definition.
DeviceMotionEvent.interval - Web APIs
syntax var interval = devicemotionevent.interval; specifications specification status
comment deviceorientation event specification editor's draft initial definition.
DeviceMotionEvent - Web APIs
example window.addeventlistener('devicemotion', function(event) { console.log(event.acceleration.x + ' m/s2'); }); specifications specification status
comment deviceorientation event specificationthe definition of 'devicemotionevent' in that specification.
DeviceOrientationEvent.alpha - Web APIs
syntax var alpha = instanceofdeviceorientationevent.alpha; specifications specification status
comment deviceorientation event specification editor's draft initial specification.
DeviceOrientationEvent.beta - Web APIs
syntax var beta = instanceofdeviceorientationevent.beta; specifications specification status
comment deviceorientation event specification editor's draft initial specification.
DeviceOrientationEvent.gamma - Web APIs
syntax var gamma = orientationevent.gamma; specifications specification status
comment deviceorientation event specification editor's draft initial specification.
DeviceOrientationEvent - Web APIs
example window.addeventlistener('deviceorientation', function(event) { console.log(event.alpha + ' : ' + event.beta + ' : ' + event.gamma); }); specifications specification status
comment deviceorientation event specification editor's draft initial specification.
Document: DOMContentLoaded event - Web APIs
vent) => { log.textcontent = log.textcontent + 'load\n'; }); document.addeventlistener('readystatechange', (event) => { log.textcontent = log.textcontent + `readystate: ${document.readystate}\n`; }); document.addeventlistener('domcontentloaded', (event) => { log.textcontent = log.textcontent + `domcontentloaded\n`; }); result specifications specification status
comment html living standardthe definition of 'domcontentloaded' in that specification.
Document() - Web APIs
syntax new document(); specifications specification status
comment domthe definition of 'document' in that specification.
Document.URL - Web APIs
syntax const url = document.url example javascript document.getelementbyid("url").textcontent = document.url; html <p id="urltext"> url:<br/> <span id="url">url goes here</span> </p> result specifications specification status
comment domthe definition of 'document.url' in that specification.
Document.all - Web APIs
specifications specification status
comment html living standardthe definition of 'all' in that specification.
Document.anchors - Web APIs
specifications specification status
comment html living standardthe definition of 'document.anchors' in that specification.
Document.applets - Web APIs
example // when you know the second applet is the one you want my_java_app = document.applets[1]; specifications specification status
comment html living standardthe definition of 'document.applets' in that specification.
Document.body - Web APIs
specification specification status
comment html living standardthe definition of 'document.body' in that specification.
Document.characterSet - Web APIs
syntax var string = document.characterset; examples <button onclick="console.log(document.characterset);"> log character encoding </button> <!-- displays document's character encoding in the dev console, such as "iso-8859-1" or "utf-8" --> specifications specification status
comment domthe definition of 'characterset' in that specification.
Document.close() - Web APIs
syntax document.close(); example // open a document to write to it document.open(); // write the content of the document document.write("<p>the one and only content.</p>"); // close the document document.close(); specifications specification status
comment html living standardthe definition of 'document.close()' in that specification.
Document.compatMode - Web APIs
example if (document.compatmode == "backcompat") { // in quirks mode } specifications specification status
comment domthe definition of 'compatmode' in that specification.
Document.cookie - Web APIs
html set-cookie: cookie_name1=cookie_value1 set-cookie: cookie_name2=cookie_value2; expires=sun, 16 jul 3567 06:23:41 gmt [content of the page here] the client sends back to the server its cookies previously stored get /sample_page.html http/1.1 host: www.example.org cookie: cookie_name1=cookie_value1; cookie_name2=cookie_value2 accept: */* specifications specification status
comment document object model (dom) level 2 html specificationthe definition of 'document.cookie' in that specification.
Document.createAttribute() - Web APIs
example var node = document.getelementbyid("div1"); var a = document.createattribute("my_attrib"); a.value = "newval"; node.setattributenode(a); console.log(node.getattribute("my_attrib")); // "newval" specifications specification status
comment domthe definition of 'document.createattribute()' in that specification.
Document.createDocumentFragment() - Web APIs
l'); // assuming ul exists var fragment = document.createdocumentfragment(); var browsers = ['firefox', 'chrome', 'opera', 'safari', 'internet explorer']; browsers.foreach(function(browser) { var li = document.createelement('li'); li.textcontent = browser; fragment.appendchild(li); }); element.appendchild(fragment); result specifications specification status
comment domthe definition of 'document.createdocumentfragment()' in that specification.
Document.createEvent() - Web APIs
event module standard event object gecko also supports text event module textevent textevents keyboard event module keyboardevent keyevents basic events module event events specifications specification status
comment domthe definition of 'document.createevent' in that specification.
Document.createNSResolver() - Web APIs
see also document.evaluate introduction to using xpath in javascript specifications specification status
comment document object model (dom) level 3 xpath specificationthe definition of 'document.creatensresolver' in that specification.
Document.createProcessingInstruction() - Web APIs
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.
Document.createTextNode() - Web APIs
');">we can!</button> <hr /> <p id="p1">first line of paragraph.</p> </body> </html> specifications specification status
comment domthe definition of 'document: createtextnode' in that specification.
Document.createTouch() - Web APIs
var target = document.getelementbyid("target"); var touch1 = document.createtouch(window, target, 1, 15, 20, 35, 40); var touch2 = document.createtouch(window, target, 2, 25, 30, 45, 50); specifications specification status
comment touch eventsthe definition of 'document.createtouch()' in that specification.
Document.createTouchList() - Web APIs
, 40); var touch2 = document.createtouch(window, target, 2, 25, 30, 45, 50); // create an empty touchlist objects var list0 = document.createtouchlist(); // create a touchlist with only one touch object var list1 = document.createtouchlist(touch1); // create a list with two touch objects var list2 = document.createtouchlist(touch1, touch2); specifications specification status
comment touch eventsthe definition of 'document.createtouchlist()' in that specification.
Document.currentScript - Web APIs
syntax var curscriptelement = document.currentscript; example this example checks to see if the script is being executed asynchronously: if (document.currentscript.async) { console.log("executing asynchronously"); } else { console.log("executing synchronously"); } view live examples specifications specification status
comment html living standardthe definition of 'document.currentscript' in that specification.
Document.defaultView - Web APIs
specifications specification status
comment html living standardthe definition of 'document.defaultview' in that specification.
Document.designMode - Web APIs
example make an <iframe>'s document editable: iframenode.contentdocument.designmode = "on"; specifications specification status
comment html living standardthe definition of 'designmode' in that specification.
Document.dir - Web APIs
syntax dirstr = document.dir document.dir = dirstr specifications specification status
comment html living standardthe definition of 'document.dir' in that specification.
Document.doctype - Web APIs
specifications specification status
comment domthe definition of 'document: doctype' in that specification.
Document.documentURI - Web APIs
syntax const uri = document.documenturi example javascript document.getelementbyid("url").textcontent = document.documenturi; html <p id="urltext"> url:<br/> <span id="url">url goes here</span> </p> result specifications specification status
comment domthe definition of 'documenturi' in that specification.
Document.domain - Web APIs
const baddomain = "www.example.xxx"; if (document.domain === baddomain) { // just an example: window.close() sometimes has no effect window.close(); } specifications specification status
comment html living standardthe definition of 'document.domain' in that specification.
Document: drag event - Web APIs
function(event) { // prevent default action (open as link for some elements) event.preventdefault(); // move dragged elem to the selected drop target if (event.target.classname == "dropzone") { event.target.style.background = ""; dragged.parentnode.removechild( dragged ); event.target.appendchild( dragged ); } }, false); specifications specification status
comment html living standardthe definition of 'drag event' in that specification.
Document.embeds - Web APIs
specifications specification status
comment html living standardthe definition of 'document.embeds' in that specification.
Document.evaluate() - Web APIs
specifications specification status
comment document object model (dom) level 3 xpath specificationthe definition of 'document.evaluate' in that specification.
Document.fonts - Web APIs
}); specifications specification status
comment css font loading module level 3the definition of 'fontfaceset' in that specification.
Document.forms - Web APIs
input name="email" type="email"> <input name="password" type="password"> <button type="submit">log in</button> </form> <script> var loginform = document.forms.login; // or document.forms['login'] loginform.elements.email.placeholder = 'test@example.com'; loginform.elements.password.placeholder = 'password'; </script> </body> </html> specifications specification status
comment html living standardthe definition of 'document.forms' in that specification.
Document.fullscreen - Web APIs
specifications specification status
comment fullscreen apithe definition of 'document.fullscreen' in that specification.
Document.fullscreenEnabled - Web APIs
function requestfullscreen() { if (document.fullscreenenabled) { videoelement.requestfullscreen(); } else { console.log('your browser cannot use fullscreen right now'); } } specifications specification status
comment fullscreen apithe definition of 'document.fullscreenenabled' in that specification.
Document.getAnimations() - Web APIs
document.getanimations().foreach( function (animation) { animation.playbackrate *= .5; } ); specifications specification status
comment web animationsthe definition of 'document.getanimations()' in that specification.
Document.getElementById() - Web APIs
specification specification status
comment document object model (dom) level 1 specificationthe definition of 'getelementbyid' in that specification.
Document.getElementsByClassName() - Web APIs
ts full complete matches var allorangejuicequery = document.queryselectorall('.orange.juice'); result += "\n\ndocument.queryselectorall('.orange.juice')"; for (var i=0, len=allorangejuicequery.length|0; i<len; i=i+1|0) { result += "\n " + allorangejuicequery[i].textcontent; } document.getelementbyid("resultarea").value = result; result specifications specification status
comment domthe definition of 'document.getelementsbyclassname' in that specification.
Document.getElementsByName() - Web APIs
both ie and edge return an htmlcollection, not a nodelist specifications specification status
comment html living standardthe definition of 'document.getelementsbyname()' in that specification.
Document.getElementsByTagNameNS() - Web APIs
} if (!context) { context = doc; } var result = doc.evaluate('//*[local-name()="'+elname+'" and namespace-uri() = "'+ns+'"]', context, null, xpathresult.ordered_node_snapshot_type, null); var a = []; for(var i = 0; i < result.snapshotlength; i++) { a[i] = result.snapshotitem(i); } return a; } specifications specification status
comment domthe definition of 'document.getelementsbytagnamens' in that specification.
Document.hasFocus() - Web APIs
ground = '#fff'; } else { log.textcontent = 'this document does not have the focus.'; body.style.background = '#ccc'; } } function openwindow() { window.open('https://developer.mozilla.org/', 'mdn', 'width=640,height=320,left=150,top=150'); } // check page focus every 300 milliseconds setinterval(checkpagefocus, 300); result specification specification status
comment html living standardthe definition of 'document.hasfocus()' in that specification.
Document.head - Web APIs
specifications specification status
comment html 5.1the definition of 'document.head' in that specification.
Document.hidden - Web APIs
}); specifications specification status
comment page visibility (second edition)the definition of 'document.hidden' in that specification.
Document.images - Web APIs
var ilist = document.images; for(var i = 0; i < ilist.length; i++) { if(ilist[i].src == 'banner.gif') { // found the banner } } specifications specification status
comment html living standardthe definition of 'document.images' in that specification.
Document.lastModified - Web APIs
specifications specification status
comment html living standardthe definition of 'document.lastmodified' in that specification.
Document.links - Web APIs
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.
Document.location - Web APIs
syntax locationobj = document.location document.location = 'http://www.mozilla.org' // equivalent to document.location.href = 'http://www.mozilla.org' examples console.log(document.location); // prints a location object to the console specifications specification status
comment html living standardthe definition of 'document.location' in that specification.
Document.onfullscreenchange - Web APIs
example document.onfullscreenchange = function ( event ) { console.log("full screen change") }; document.documentelement.onclick = function () { // requestfullscreen() must be in an event handler or it will fail document.documentelement.requestfullscreen(); } specifications specification status
comment fullscreen apithe definition of 'onfullscreenchange' in that specification.
Document.onfullscreenerror - Web APIs
document.documentelement.requestfullscreen(); specifications specification status
comment fullscreen apithe definition of 'onfullscreenerror' in that specification.
Document.onvisibilitychange - Web APIs
example document.onvisibilitychange = function() { console.log("visibility of page has changed!"); }; specifications specification status
comment page visibility (second edition)the definition of 'onvisibilitychange' in that specification.
Document.open() - Web APIs
specifications specification status
comment html living standardthe definition of 'document.open()' in that specification.
Document.plugins - Web APIs
specifications specification status
comment html living standardthe definition of 'document.plugins' in that specification.
Document.queryCommandEnabled() - Web APIs
example var flg = document.querycommandenabled("selectall"); if(flg) { document.execcommand("selectall", false, null); // command is enabled, run it } specifications specification status
comment execcommand ...
Document.queryCommandState() - Web APIs
(state) { case true: alert("the bold formatting will be removed from the selected text."); break; case false: alert("the selected text will be displayed in bold."); break; case null: alert("the state of the 'bold' command is indeterminable."); break; } document.execcommand('bold'); } result specifications specification status
comment execcommand ...
Document.queryCommandSupported() - Web APIs
notes the 'paste' command return false not only if the feature is unavailable, but also if the script calling it has insufficient privileges to perform the action [1] example var flg = document.querycommandsupported("selectall"); if(flg) { // ...do something } specifications specification status
comment execcommand ...
Document.querySelectorAll() - Web APIs
the :scope pseudo-class restores the expected behavior, only matching selectors on descendants of the base element: var select = document.queryselector('.select'); var inner = select.queryselectorall(':scope .outer .inner'); inner.length; // 0 specifications specification status
comment domthe definition of 'parentnode.queryselectorall()' in that specification.
Document.readyState - Web APIs
te === 'complete') { initapplication(); } } readystatechange as event listener to insert or modify the dom before domcontentloaded document.addeventlistener('readystatechange', event => { if (event.target.readystate === 'interactive') { initloader(); } else if (event.target.readystate === 'complete') { initapp(); } }); specifications specification status
comment html living standardthe definition of 'document readiness' in that specification.
Document: readystatechange event - Web APIs
vent) => { log.textcontent = log.textcontent + 'load\n'; }); document.addeventlistener('readystatechange', (event) => { log.textcontent = log.textcontent + `readystate: ${document.readystate}\n`; }); document.addeventlistener('domcontentloaded', (event) => { log.textcontent = log.textcontent + `domcontentloaded\n`; }); result specifications specification status
comment html living standardthe definition of 'readystatechange' in that specification.
Document.referrer - Web APIs
specifications specification status
comment html living standardthe definition of 'document.referrer' in that specification.
Document.rootElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 2the definition of 'svgdocument.rootelement' in that specification.
Document.scripts - Web APIs
let scripts = document.scripts; if (scripts.length) { alert('this page has scripts!'); } specifications specification status
comment html living standardthe definition of 'document.scripts' in that specification.
Document.scrollingElement - Web APIs
syntax var element = document.scrollingelement; example var scrollelm = document.scrollingelement; scrollelm.scrolltop = 0; specifications specification status
comment css object model (cssom) view modulethe definition of 'scrollingelement' in that specification.
Document: selectionchange event - Web APIs
elable no interface event event handler property onselectionchange examples // addeventlistener version document.addeventlistener('selectionchange', () => { console.log(document.getselection()); }); // onselectionchange version document.onselectionchange = () => { console.log(document.getselection()); }; specifications specification status
comment selection apithe definition of 'selectionchange' in that specification.
Document: selectstart event - Web APIs
s yes cancelable yes interface event event handler property onselectstart examples // addeventlistener version document.addeventlistener('selectstart', () => { console.log('selection started'); }); // onselectstart version document.onselectstart = () => { console.log('selection changed.'); }; specifications specification status
comment selection apithe definition of 'selectstart' in that specification.
Document.timeline - Web APIs
specifications specification status
comment web animationsthe definition of 'document.timeline' in that specification.
Document.title - Web APIs
specifications specification status
comment html living standardthe definition of 'document.title' in that specification.
Document.visibilityState - Web APIs
}); specifications specification status
comment page visibility (second edition)the definition of 'document.visibilitystate' in that specification.
Document: visibilitychange event - Web APIs
document.addeventlistener("visibilitychange", function() { if (document.visibilitystate === 'visible') { backgroundmusic.play(); } else { backgroundmusic.pause(); } }); specifications specification status
comment page visibility (second edition)the definition of 'visibilitychange' in that specification.
Document: wheel event - Web APIs
cale = math.min(math.max(.125, scale), 4); // apply scale transform el.style.transform = `scale(${scale})`; } let scale = 1; const el = document.queryselector('div'); document.onwheel = zoom; addeventlistener equivalent the event handler can also be set up using the addeventlistener() method: document.addeventlistener('wheel', zoom); specifications specification status
comment ui eventsthe definition of 'wheel' in that specification.
Document.write() - Web APIs
specifications specification status
comment html living standardthe definition of 'document.write(...)' in that specification.
Document.writeln() - Web APIs
specifications specification status
comment html living standardthe definition of 'document.writeln()' in that specification.
DocumentFragment() - Web APIs
syntax fragment = new documentfragment() example let fragment = new documentfragment(); specification specification status
comment domthe definition of 'documentfragment()' in that specification.
DocumentFragment.querySelector() - Web APIs
double back slash: <div id="foo\bar"></div> <div id="foo:bar"></div> <script> document.queryselector('#foo\bar') // does not match anything document.queryselector('#foo\\\\bar') // match the first div document.queryselector('#foo:bar') // does not match anything document.queryselector('#foo\\:bar') // match the second div </script> specifications specification status
comment selectors api level 2the definition of 'documentfragment.queryselector' in that specification.
DocumentFragment.querySelectorAll() - Web APIs
examples this example returns a list of all div elements within the documentfragment with a class of either "note" or "alert": var matches = documentfrag.queryselectorall("div.note, div.alert"); specifications specification status
comment selectors api level 1the definition of 'documentfragment.queryselectorall' in that specification.
DocumentFragment - Web APIs
mple html <ul id="list"></ul> javascript var list = document.queryselector('#list') var fruits = ['apple', 'orange', 'banana', 'melon'] var fragment = new documentfragment() fruits.foreach(function (fruit) { var li = document.createelement('li') li.innerhtml = fruit fragment.appendchild(li) }) list.appendchild(fragment) result specifications specification status
comment domthe definition of 'documentfragment' in that specification.
DocumentOrShadowRoot.activeElement - Web APIs
output-text'); outputelement.innerhtml = activetextarea.id; outputtext.innerhtml = selection; } const textarea1 = document.getelementbyid('ta-example-one'); const textarea2 = document.getelementbyid('ta-example-two'); textarea1.addeventlistener('mouseup', onmouseup, false); textarea2.addeventlistener('mouseup', onmouseup, false); result specifications specification status
comment html living standardthe definition of 'activeelement' in that specification.
DocumentOrShadowRoot.caretPositionFromPoint() - Web APIs
ement = textnode.splittext(offset); var br = document.createelement('br'); textnode.parentnode.insertbefore(br, replacement); } } window.onload = function (){ var paragraphs = document.getelementsbytagname("p"); for (i=0 ; i < paragraphs.length; i++) { paragraphs[i].addeventlistener("click", insertbreakatpoint, false); } }; specifications specification status
comment css object model (cssom) view modulethe definition of 'caretpositionfrompoint()' in that specification.
DocumentOrShadowRoot.fullscreenElement - Web APIs
function isvideoinfullscreen() { if (document.fullscreenelement && document.fullscreenelement.nodename == 'video') { return true; } return false; } specifications specification status
comment fullscreen apithe definition of 'document.fullscreenelement' in that specification.
DocumentTimeline.DocumentTimeline() - Web APIs
= document.queryselectorall('.sharedtimelinecat'); cats = array.prototype.slice.call(cats); var sharedtimeline = new documenttimeline({ origintime: 500 }); cats.foreach(function(cat) { var catkeyframes = new keyframeeffect(cat, keyframes, timing); var catanimation = new animation(catkeyframes, sharedtimeline); catanimation.play(); }); specifications specification status
comment web animationsthe definition of 'documenttimeline()' in that specification.
DocumentTimeline - Web APIs
conds into their animations: const cats = document.queryselectorall('.sharedtimelinecat'); const sharedtimeline = new documenttimeline({ origintime: 500 }); for (const cat of cats) { const catkeyframes = new keyframeeffect(cat, keyframes, timing); const catanimation = new animation(catkeyframes, sharedtimeline); catanimation.play(); } specifications specification status
comment web animationsthe definition of 'documenttimeline' in that specification.
DocumentType - Web APIs
specifications specification status
comment domthe definition of 'documenttype' in that specification.
DoubleRange - Web APIs
specifications specification status
comment media capture and streamsthe definition of 'doublerange' in that specification.
DragEvent() - Web APIs
specifications specification status
comment html living standardthe definition of 'dragevent' in that specification.
DragEvent.dataTransfer - Web APIs
} dragtarget.addeventlistener("dragend", function(ev) { // call the drag and drop data processor if (ev.datatransfer !== null) processdata(ev.datatransfer); }, false); specifications specification status
comment html living standardthe definition of 'dragevent.datatransfer' in that specification.
DragEvent - Web APIs
specifications specification status
comment html living standardthe definition of 'dragevent' in that specification.
DynamicsCompressorNode.attack - Web APIs
estination); source.connect(compressor); compressor.connect(audioctx.destination); } else if(active == 'true') { button.setattribute('data-active', 'false'); button.innerhtml = 'add compression'; source.disconnect(compressor); compressor.disconnect(audioctx.destination); source.connect(audioctx.destination); } } specifications specification status
comment web audio apithe definition of 'attack' in that specification.
DynamicsCompressorNode.knee - Web APIs
estination); source.connect(compressor); compressor.connect(audioctx.destination); } else if(active == 'true') { button.setattribute('data-active', 'false'); button.innerhtml = 'add compression'; source.disconnect(compressor); compressor.disconnect(audioctx.destination); source.connect(audioctx.destination); } } specifications specification status
comment web audio apithe definition of 'knee' in that specification.
DynamicsCompressorNode.ratio - Web APIs
estination); source.connect(compressor); compressor.connect(audioctx.destination); } else if(active == 'true') { button.setattribute('data-active', 'false'); button.innerhtml = 'add compression'; source.disconnect(compressor); compressor.disconnect(audioctx.destination); source.connect(audioctx.destination); } } specifications specification status
comment web audio apithe definition of 'ratio' in that specification.
DynamicsCompressorNode.reduction - Web APIs
example var audioctx = new audiocontext(); var compressor = audioctx.createdynamicscompressor(); var myreduction = compressor.reduction; specifications specification status
comment web audio apithe definition of 'reduction' in that specification.
DynamicsCompressorNode.release - Web APIs
estination); source.connect(compressor); compressor.connect(audioctx.destination); } else if(active == 'true') { button.setattribute('data-active', 'false'); button.innerhtml = 'add compression'; source.disconnect(compressor); compressor.disconnect(audioctx.destination); source.connect(audioctx.destination); } } specifications specification status
comment web audio apithe definition of 'release' in that specification.
DynamicsCompressorNode.threshold - Web APIs
estination); source.connect(compressor); compressor.connect(audioctx.destination); } else if(active == 'true') { button.setattribute('data-active', 'false'); button.innerhtml = 'add compression'; source.disconnect(compressor); compressor.disconnect(audioctx.destination); source.connect(audioctx.destination); } } specifications specification status
comment web audio apithe definition of 'threshold' in that specification.
DynamicsCompressorNode - Web APIs
estination); source.connect(compressor); compressor.connect(audioctx.destination); } else if(active == 'true') { button.setattribute('data-active', 'false'); button.innerhtml = 'add compression'; source.disconnect(compressor); compressor.disconnect(audioctx.destination); source.connect(audioctx.destination); } } specifications specification status
comment web audio apithe definition of 'dynamicscompressornode' in that specification.
EXT_blend_minmax - Web APIs
examples var ext = gl.getextension('ext_blend_minmax'); gl.blendequation(ext.min_ext); gl.blendequation(ext.max_ext); gl.blendequationseparate(ext.min_ext, ext.max_ext); specifications specification status
comment ext_blend_minmaxthe definition of 'ext_blend_minmax' in that specification.
EXT_color_buffer_float - Web APIs
var ext = gl.getextension('ext_color_buffer_float'); gl.renderbufferstorage(gl.renderbuffer, gl.rgba16f, 256, 256); specifications specification status
comment ext_color_buffer_floatthe definition of 'ext_color_buffer_float' in that specification.
EXT_color_buffer_half_float - Web APIs
examples var ext = gl.getextension('ext_color_buffer_half_float'); gl.renderbufferstorage(gl.renderbuffer, ext.rbga16f_ext, 256, 256); specifications specification status
comment ext_color_buffer_half_floatthe definition of 'ext_color_buffer_half_float' in that specification.
EXT_disjoint_timer_query.createQueryEXT() - Web APIs
examples var ext = gl.getextension('ext_disjoint_timer_query'); var query = ext.createqueryext(); specifications specification status
comment ext_disjoint_timer_querythe definition of 'ext_disjoint_timer_query' in that specification.
EXT_disjoint_timer_query.getQueryEXT() - Web APIs
examples var ext = gl.getextension('ext_disjoint_timer_query'); var startquery = ext.createqueryext(); ext.querycounterext(startquery, ext.timestamp_ext); var currentquery = ext.getqueryext(ext.timestamp_ext, ext.current_query_ext); specifications specification status
comment ext_disjoint_timer_querythe definition of 'ext_disjoint_timer_query' in that specification.
EXT_disjoint_timer_query - Web APIs
examples var ext = gl.getextension('ext_disjoint_timer_query'); specifications specification status
comment ext_disjoint_timer_querythe definition of 'ext_disjoint_timer_query' in that specification.
EXT_frag_depth - Web APIs
examples enable the extension: gl.getextension('ext_frag_depth'); now the output variable gl_fragdepthext is available to set a depth value of a fragment from within the fragment shader: <script type="x-shader/x-fragment"> void main() { gl_fragcolor = vec4(1.0, 0.0, 1.0, 1.0); gl_fragdepthext = 0.5; } </script> specifications specification status
comment ext_frag_depththe definition of 'ext_frag_depth' in that specification.
EXT_sRGB - Web APIs
examples var ext = gl.getextension('ext_srgb'); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.teximage2d(gl.texture_2d, 0, ext.srgb_ext, 512, 512, 0, ext.srgb_ext, gl.unsigned_byte, image); specifications specification status
comment ext_srgbthe definition of 'ext_srgb' in that specification.
EXT_shader_texture_lod - Web APIs
pt type="x-shader/x-fragment"> #extension gl_ext_shader_texture_lod : enable #extension gl_oes_standard_derivatives : enable uniform sampler2d mytexture; varying vec2 texcoord; void main(){ gl_fragcolor = texture2dgradext(mytexture, mod(texcoord, vec2(0.1, 0.5)), dfdx(texcoord), dfdy(texcoord)); } </script> specifications specification status
comment ext_shader_texture_lodthe definition of 'ext_shader_texture_lod' in that specification.
EXT_texture_filter_anisotropic - Web APIs
texture); var ext = ( gl.getextension('ext_texture_filter_anisotropic') || gl.getextension('moz_ext_texture_filter_anisotropic') || gl.getextension('webkit_ext_texture_filter_anisotropic') ); if (ext){ var max = gl.getparameter(ext.max_texture_max_anisotropy_ext); gl.texparameterf(gl.texture_2d, ext.texture_max_anisotropy_ext, max); } specifications specification status
comment ext_texture_filter_anisotropicthe definition of 'ext_texture_filter_anisotropic' in that specification.
EcKeyGenParams - Web APIs
specifications specification status
comment web cryptography apithe definition of 'subtlecrypto.eckeygenparams' in that specification.
EcKeyImportParams - Web APIs
specifications specification status
comment web cryptography apithe definition of 'subtlecrypto.eckeyimportparams' in that specification.
EcdhKeyDeriveParams - Web APIs
specifications specification status
comment web cryptography apithe definition of 'subtlecrypto.ecdhkeyderiveparams' in that specification.
EcdsaParams - Web APIs
specifications specification status
comment web cryptography apithe definition of 'subtlecrypto.ecdsaparams' in that specification.
EffectTiming.delay - Web APIs
ugh each tear tears.foreach(function(el) { // animate each tear el.animate( tearsfalling, { delay: getrandommsrange(-1000, 1000), // randomized for each tear duration: getrandommsrange(2000, 6000), // randomized for each tear iterations: infinity, easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)" }); }); specifications specification status
comment web animationsthe definition of 'delay' in that specification.
EffectTiming.direction - Web APIs
s her arm up and down by passing her an alternate value for her direction property: // get alice's arm, and wave it up and down document.getelementbyid("alice_arm").animate([ { transform: 'rotate(10deg)' }, { transform: 'rotate(-40deg)' } ], { easing: 'steps(2, end)', iterations: infinity, direction: 'alternate', duration: 600 }); specifications specification status
comment web animationsthe definition of 'direction' in that specification.
EffectTiming.duration - Web APIs
h each tear tears.foreach(function(el) { // animate each tear el.animate( tearsfalling, { delay: getrandommsrange(-1000, 1000), // randomized for each tear duration: getrandommsrange(2000, 6000), // randomized for each tear iterations: infinity, easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)" }); }); specifications specification status
comment web animationsthe definition of 'duration' in that specification.
EffectTiming.easing - Web APIs
resents alice and the red queen var redqueen_alice_sprite = document.getelementbyid('red-queen_and_alice_sprite'); // animate alice and the red queen using steps() var redqueen_alice = redqueen_alice_sprite.animate( spriteframes, { easing: 'steps(7, end)', direction: "reverse", duration: 600, playbackrate: 1, iterations: infinity }); specifications specification status
comment web animationsthe definition of 'easing' in that specification.
EffectTiming.fill - Web APIs
animation.commitstyles(); animation.cancel(); }); specifications specification status
comment web animationsthe definition of 'fill' in that specification.
EffectTiming.iterations - Web APIs
time the page is open by passing infinity as the value for her iterations property: // get alice's arm, and wave it up and down document.getelementbyid("alice_arm").animate([ { transform: 'rotate(10deg)' }, { transform: 'rotate(-40deg)' } ], { easing: 'steps(2, end)', iterations: infinity, direction: 'alternate', duration: 600 }); specifications specification status
comment web animationsthe definition of 'iterations' in that specification.
EffectTiming - Web APIs
specifications specification status
comment web animationsthe definition of 'effecttiming' in that specification.
Element.animate() - Web APIs
specifications specification status
comment web animations level 2the definition of 'keyframeanimationoptions.iterationcomposite' in that specification.
Element.attachShadow() - Web APIs
ount; // append it to the shadow root shadow.appendchild(text); // update count when element content changes setinterval(function() { var count = 'words: ' + countwords(wcparent); text.textcontent = count; }, 200) } } // define the new element customelements.define('word-count', wordcount, { extends: 'p' }); specifications specification status
comment domthe definition of 'attachshadow()' in that specification.
Element.attributes - Web APIs
esult.value = "no attributes to show"; } } </script> </head> <body> <p id="paragraph" style="color: green;">sample paragraph</p> <form action=""> <p> <input type="button" value="show first attribute name and value" onclick="listattributes();"> <input id="result" type="text" value=""> </p> </form> </body> </html> specifications specification status
comment domthe definition of 'element.attributes' in that specification.
Element: blur event - Web APIs
text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const form = document.getelementbyid('form'); form.addeventlistener('focus', (event) => { event.target.style.background = 'pink'; }, true); form.addeventlistener('blur', (event) => { event.target.style.background = ''; }, true); result specifications specification status
comment ui events working draft added info that this event is composed.
Element.clientHeight - Web APIs
example specification specification status
comment css object model (cssom) view modulethe definition of 'clientheight' in that specification.
Element.clientLeft - Web APIs
padding-bottom left top right bottom margin-top margin-bottom border-top border-bottom specifications specification status
comment css object model (cssom) view modulethe definition of 'clientleft' in that specification.
Element.clientTop - Web APIs
specifications specification status
comment css object model (cssom) view modulethe definition of 'clienttop' in that specification.
Element.clientWidth - Web APIs
example specification specification status
comment css object model (cssom) view modulethe definition of 'clientwidth' in that specification.
Element.closest() - Web APIs
t && !element.prototype.closest) { element.prototype.closest = function(s) { var matches = (this.document || this.ownerdocument).queryselectorall(s), i, el = this; do { i = matches.length; while (--i >= 0 && matches.item(i) !== el) {}; } while ((i < 0) && (el = el.parentelement)); return el; }; } specifications specification status
comment domthe definition of 'element.closest()' in that specification.
Element: contextmenu event - Web APIs
html <p id="nocontextmenu">the context menu has been disabled on this paragraph.</p> <p>but it has not been disabled on this one.</p> javascript nocontext = document.getelementbyid('nocontextmenu'); nocontext.addeventlistener('contextmenu', e => { e.preventdefault(); }); result specifications specification status
comment html living standardthe definition of 'contextmenu' in that specification.
Element: focus event - Web APIs
text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const form = document.getelementbyid('form'); form.addeventlistener('focus', (event) => { event.target.style.background = 'pink'; }, true); form.addeventlistener('blur', (event) => { event.target.style.background = ''; }, true); result specifications specification status
comment ui events working draft added info that this event is composed.
Element: focusin event - Web APIs
type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const form = document.getelementbyid('form'); form.addeventlistener('focusin', (event) => { event.target.style.background = 'pink'; }); form.addeventlistener('focusout', (event) => { event.target.style.background = ''; }); result specifications specification status
comment ui events working draft added info that this event is composed.
Element: focusout event - Web APIs
type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const form = document.getelementbyid('form'); form.addeventlistener('focusin', (event) => { event.target.style.background = 'pink'; }); form.addeventlistener('focusout', (event) => { event.target.style.background = ''; }); result specifications specification status
comment ui events working draft added info that this event is composed.
Element.getAnimations() - Web APIs
promise.all( elem.getanimations({ subtree: true }) .map(animation => animation.finished) ).then(() => elem.remove()); specifications specification status
comment web animationsthe definition of 'animatable.getanimations()' in that specification.
Element.getAttribute() - Web APIs
let nonce = script.getattribute('nonce'); // returns empty string instead of retrieving the nonce from the content attribute, use the nonce property: let nonce = script.nonce; specifications specification status
comment domthe definition of 'getattribute()' in that specification.
Element.getAttributeNS() - Web APIs
om level 2 namespace-aware methods for dealing with attr nodes directly (seldom used) setattribute (dom 1) setattributens setattributenode setattributenodens getattribute (dom 1) getattributens getattributenode getattributenodens hasattribute (dom 2) hasattributens - - removeattribute (dom 1) removeattributens removeattributenode - specifications specification status
comment domthe definition of 'element.getattributens()' in that specification.
Element.getAttributeNames() - Web APIs
e); } polyfill if (element.prototype.getattributenames == undefined) { element.prototype.getattributenames = function () { var attributes = this.attributes; var length = attributes.length; var result = new array(length); for (var i = 0; i < length; i++) { result[i] = attributes[i].name; } return result; }; } specifications specification status
comment domthe definition of 'element.getattributenames' in that specification.
Element.getAttributeNode() - Web APIs
om level 2 namespace-aware methods for dealing with attr nodes directly (seldom used) setattribute (dom 1) setattributens setattributenode setattributenodens getattribute (dom 1) getattributens getattributenode getattributenodens hasattribute (dom 2) hasattributens - - removeattribute (dom 1) removeattributens removeattributenode - specifications specification status
comment domthe definition of 'getattributenode()' in that specification.
Element.getAttributeNodeNS() - Web APIs
om level 2 namespace-aware methods for dealing with attr nodes directly (seldom used) setattribute (dom 1) setattributens setattributenode setattributenodens getattribute (dom 1) getattributens getattributenode getattributenodens hasattribute (dom 2) hasattributens - - removeattribute (dom 1) removeattributens removeattributenode - specifications specification status
comment domthe definition of 'getattributenodens()' in that specification.
Element.getClientRects() - Web APIs
document.body.appendchild(tablerectdiv); } } (function() { /* call function addclientrectsoverlay(elt) for all elements with assigned class "withclientrectsoverlay" */ var elt = document.getelementsbyclassname('withclientrectsoverlay'); for (var i = 0; i < elt.length; i++) { addclientrectsoverlay(elt[i]); } })(); result specifications specification status
comment css object model (cssom) view modulethe definition of 'element.getclientrects()' in that specification.
Element.getElementsByClassName() - Web APIs
here we'll find all <div> elements that have a class of test: var testelements = document.getelementsbyclassname('test'); var testdivs = array.prototype.filter.call(testelements, function(testelement) { return testelement.nodename === 'div'; }); specifications specification status
comment domthe definition of 'element.getelementsbyclassname()' in that specification.
Element.getElementsByTagName() - Web APIs
example // check the status of each data cell in a table const table = document.getelementbyid('forecast-table'); const cells = table.getelementsbytagname('td'); for (let cell of cells) { let status = cell.getattribute('data-status'); if (status === 'open') { // grab the data } } specifications specification status
comment domthe definition of 'element.getelementsbytagname()' in that specification.
Element.getElementsByTagNameNS() - Web APIs
var table = document.getelementbyid("forecast-table"); var cells = table.getelementsbytagnamens("http://www.w3.org/1999/xhtml", "td"); for (var i = 0; i < cells.length; i++) { var axis = cells[i].getattribute("axis"); if (axis == "year") { // grab the data } } specifications specification status
comment domthe definition of 'element.getelementsbytagnamens()' in that specification.
Element.hasAttribute() - Web APIs
om level 2 namespace-aware methods for dealing with attr nodes directly (seldom used) setattribute (dom 1) setattributens setattributenode setattributenodens getattribute (dom 1) getattributens getattributenode getattributenodens hasattribute (dom 2) hasattributens - - removeattribute (dom 1) removeattributens removeattributenode - specifications specification status
comment domthe definition of 'element.hasattribute()' in that specification.
Element.hasAttributeNS() - Web APIs
om level 2 namespace-aware methods for dealing with attr nodes directly (seldom used) setattribute (dom 1) setattributens setattributenode setattributenodens getattribute (dom 1) getattributens getattributenode getattributenodens hasattribute (dom 2) hasattributens - - removeattribute (dom 1) removeattributens removeattributenode - specifications specification status
comment domthe definition of 'document.hasattributens' in that specification.
Element.hasAttributes() - Web APIs
examples let foo = document.getelementbyid('foo'); if (foo.hasattributes()) { // do something with 'foo.attributes' } polyfill ;(function(prototype) { prototype.hasattributes = prototype.hasattributes || function() { return (this.attributes.length > 0); } })(element.prototype); specifications specification status
comment domthe definition of 'element.hasattributes()' in that specification.
Element.hasPointerCapture() - Web APIs
} } function init() { const el = document.getelementbyid("target"); el.onpointerdown = downhandler; } </script> <body onload="init();"> <div id="target">touch this element with a pointer.</div> </body> </html> specifications specification status
comment pointer events – level 2the definition of 'haspointercapture()' in that specification.
Element.id - Web APIs
specifications specification status
comment domthe definition of 'id' in that specification.
Element.innerHTML - Web APIs
specification specification status
comment dom parsing and serializationthe definition of 'element.innerhtml' in that specification.
Element.insertAdjacentText() - Web APIs
and higher with the following code: if (!element.prototype.insertadjacenttext) element.prototype.insertadjacenttext = function(type, txt){ this.insertadjacenthtml( type, (txt+'') // convert to string .replace(/&/g, '&') // embed ampersand symbols .replace(/</g, '<') // embed less-than symbols ) } specification specification status
comment domthe definition of 'insertadjacenttext()' in that specification.
Element.matches() - Web APIs
if (!element.prototype.matches) { element.prototype.matches = element.prototype.msmatchesselector || element.prototype.webkitmatchesselector; } specification specification status
comment domthe definition of 'element.prototype.matches' in that specification.
Element.onfullscreenchange - Web APIs
ullscreen().then({}).catch(err => { alert(`error attempting to enable full-screen mode: ${err.message} (${err.name})`); }); } else { document.exitfullscreen(); } } function handlefullscreenchange(event) { let elem = event.target; let isfullscreen = document.fullscreenelement === elem; adjustmycontrols(isfullscreen); } specifications specification status
comment fullscreen apithe definition of 'onfullscreenchange' in that specification.
Element.onfullscreenerror - Web APIs
elem.requestfullscreen(); specifications specification status
comment fullscreen apithe definition of 'onfullscreenerror' in that specification.
Element.outerHTML - Web APIs
p.outerhtml = "<div>this div replaced a paragraph.</div>"; console.log(p.nodename); // still "p"; the returned value will contain html escaped attributes: var anc = document.createelement("a"); anc.href = "https://developer.mozilla.org?a=b&c=d"; console.log(anc.outerhtml); // output: "<a href='https://developer.mozilla.org?a=b&c=d'></a>" specification specification status
comment dom parsing and serializationthe definition of 'element.outerhtml' in that specification.
Element.part - Web APIs
let tabs = []; let children = this.shadowroot.children; for(let elem of children) { if(elem.getattribute('part')) { tabs.push(elem); } } tabs.foreach((tab) => { tab.addeventlistener('click', (e) => { tabs.foreach((tab) => { tab.part = 'tab'; }) e.target.part = 'tab active'; }) console.log(tab.part); }) specifications specification status
comment shadow partsthe definition of 'element.part' in that specification.
Element.prefix - Web APIs
specifications specification status
comment domthe definition of 'element: prefix' in that specification.
Element.querySelectorAll() - Web APIs
the :scope pseudo-class restores the expected behavior, only matching selectors on descendants of the base element: var select = document.queryselector('.select'); var inner = select.queryselectorall(':scope .outer .inner'); inner.length; // 0 specifications specification status
comment domthe definition of 'parentnode.queryselectorall()' in that specification.
Element.releasePointerCapture() - Web APIs
capture(e.pointerid); } function stopsliding(e) { slider.onpointermove = null; slider.releasepointercapture(e.pointerid); } function slide(e) { slider.style.transform = `translate(${e.clientx - 70}px)`; } const slider = document.getelementbyid('slider'); slider.onpointerdown = beginsliding; slider.onpointerup = stopsliding; result specifications specification status
comment pointer events – level 2the definition of 'releasepointercapture' in that specification.
Element.removeAttribute() - Web APIs
s getattribute (dom 1) getattributens getattributenode getattributenodens hasattribute (dom 2) hasattributens - - removeattribute (dom 1) removeattributens removeattributenode - example // given: <div id="div1" align="left" width="200px"> document.getelementbyid("div1").removeattribute("align"); // now: <div id="div1" width="200px"> specifications specification status
comment domthe definition of 'element" removeattribute' in that specification.
Element.removeAttributeNS() - Web APIs
om level 2 namespace-aware methods for dealing with attr nodes directly (seldom used) setattribute (dom 1) setattributens setattributenode setattributenodens getattribute (dom 1) getattributens getattributenode getattributenodens hasattribute (dom 2) hasattributens - - removeattribute (dom 1) removeattributens removeattributenode - specifications specification status
comment domthe definition of 'element: removeattributens' in that specification.
Element.removeAttributeNode() - Web APIs
om level 2 namespace-aware methods for dealing with attr nodes directly (seldom used) setattribute (dom 1) setattributens setattributenode setattributenodens getattribute (dom 1) getattributens getattributenode getattributenodens hasattribute (dom 2) hasattributens - - removeattribute (dom 1) removeattributens removeattributenode - specifications specification status
comment domthe definition of 'element: removeattributenode' in that specification.
Element.requestPointerLock() - Web APIs
syntax instanceofelement.requestpointerlock(); specifications specification status
comment pointer lockthe definition of 'requestpointerlock()' in that specification.
Element.scroll() - Web APIs
examples // put the 1000th vertical pixel at the top of the element element.scroll(0, 1000); using options: element.scroll({ top: 100, left: 100, behavior: 'smooth' }); specification specification status
comment css object model (cssom) view modulethe definition of 'element.scroll()' in that specification.
Element.scrollBy() - Web APIs
examples // scroll an element element.scrollby(300, 300); using options: element.scrollby({ top: 100, left: 100, behavior: 'smooth' }); specification specification status
comment css object model (cssom) view modulethe definition of 'element.scrollby()' in that specification.
Element.scrollHeight - Web APIs
x = document.createelement("span"); document.registration.accept.checked = false; checkreading.noticebox.id = "notice"; otoberead.parentnode.insertbefore(checkreading.noticebox, otoberead); otoberead.parentnode.insertbefore(document.createelement("br"), otoberead); otoberead.onscroll = checkreading; checkreading.call(otoberead); } specifications specification status
comment css object model (cssom) view modulethe definition of 'element.scrollheight' in that specification.
Element.scrollIntoView() - Web APIs
specifications specification status
comment css object model (cssom) view modulethe definition of 'element.scrollintoview()' in that specification.
Element.scrollLeft - Web APIs
on">slide right</button> css #container { width: 100px; height: 100px; border: 1px solid #ccc; overflow-x: scroll; } #content { width: 250px; background-color: #ccc; } javascript const button = document.getelementbyid('slide'); button.onclick = function () { document.getelementbyid('container').scrollleft += 20; }; result specifications specification status
comment css object model (cssom) view modulethe definition of 'scrollleft' in that specification.
Element.scrollTo() - Web APIs
examples element.scrollto(0, 1000); using options: element.scrollto({ top: 100, left: 100, behavior: 'smooth' }); specifications specification status
comment css object model (cssom) view modulethe definition of 'element.scrollto()' in that specification.
Element.scrollTop - Web APIs
if you can see this, scrolltop is maxed-out padding-bottom left top right bottom margin-top margin-bottom border-top border-bottom specifications specification status
comment css object model (cssom) view modulethe definition of 'scrolltop' in that specification.
Element.scrollWidth - Web APIs
alert('contents are overflowing the container.'); } else { alert('no overflows!'); } } buttonone.addeventlistener('click', function() { alertoverflow(divone); }); buttontwo.addeventlistener('click', function() { alertoverflow(divtwo); }); </script> </html> result specification specification status
comment css object model (cssom) view modulethe definition of 'element.scrollwidth' in that specification.
Element.setAttribute() - Web APIs
om level 2 namespace-aware methods for dealing with attr nodes directly (seldom used) setattribute (dom 1) setattributens setattributenode setattributenodens getattribute (dom 1) getattributens getattributenode getattributenodens hasattribute (dom 2) hasattributens - - removeattribute (dom 1) removeattributens removeattributenode - specifications specification status
comment domthe definition of 'setattribute()' in that specification.
Element.setAttributeNode() - Web APIs
om level 2 namespace-aware methods for dealing with attr nodes directly (seldom used) setattribute (dom 1) setattributens setattributenode setattributenodens getattribute (dom 1) getattributens getattributenode getattributenodens hasattribute (dom 2) hasattributens - - removeattribute (dom 1) removeattributens removeattributenode - specifications specification status
comment domthe definition of 'setattributenode()' in that specification.
Element.setAttributeNodeNS() - Web APIs
om level 2 namespace-aware methods for dealing with attr nodes directly (seldom used) setattribute (dom 1) setattributens setattributenode setattributenodens getattribute (dom 1) getattributens getattributenode getattributenodens hasattribute (dom 2) hasattributens - - removeattribute (dom 1) removeattributens removeattributenode - specifications specification status
comment domthe definition of 'document.setattributenodens' in that specification.
Element.setPointerCapture() - Web APIs
capture(e.pointerid); } function stopsliding(e) { slider.onpointermove = null; slider.releasepointercapture(e.pointerid); } function slide(e) { slider.style.transform = `translate(${e.clientx - 70}px)`; } const slider = document.getelementbyid('slider'); slider.onpointerdown = beginsliding; slider.onpointerup = stopsliding; result specifications specification status
comment pointer events – level 2the definition of 'setpointercapture' in that specification.
Element.shadowRoot - Web APIs
ldnodes = array.from(shadow.childnodes); childnodes.foreach(childnode => { if (childnode.nodename === 'style') { childnode.textcontent = ` div { width: ${elem.getattribute('l')}px; height: ${elem.getattribute('l')}px; background-color: ${elem.getattribute('c')}; } `; } }); } specifications specification status
comment domthe definition of 'shadowroot' in that specification.
Element.slot - Web APIs
let slottedspan = document.queryselector('my-paragraph span') console.log(slottedspan.slot); // logs 'my-text' specifications specification status
comment domthe definition of 'slot' in that specification.
Element.tagName - Web APIs
specifications specification status
comment domthe definition of 'element: tagname' in that specification.
Element.toggleAttribute() - Web APIs
.toggleattribute) { element.prototype.toggleattribute = function(name, force) { if(force !== void 0) force = !!force if (this.hasattribute(name)) { if (force) return true; this.removeattribute(name); return false; } if (force === false) return false; this.setattribute(name, ""); return true; }; } specification specification status
comment domthe definition of 'element.toggleattribute' in that specification.
Element: wheel event - Web APIs
ct scale scale = math.min(math.max(.125, scale), 4); // apply scale transform el.style.transform = `scale(${scale})`; } let scale = 1; const el = document.queryselector('div'); el.onwheel = zoom; addeventlistener equivalent the event handler can also be set up using the addeventlistener() method: el.addeventlistener('wheel', zoom); specifications specification status
comment ui eventsthe definition of 'wheel' in that specification.
Element - Web APIs
also available via the ontouchstart property specifications specification status
comment css pseudo-elements level 4the definition of 'element' in that specification.
ElementCSSInlineStyle.style - Web APIs
note the presence of the value bold for font-weight in the computed style and the absence of it in the element's style property specifications specification status
comment css object model (cssom)the definition of 'the elementcssinlinestyle.style property' in that specification.
ElementCSSInlineStyle - Web APIs
specifications specification status
comment css object model (cssom)the definition of 'htmlorforeignelement' in that specification.
ErrorEvent - Web APIs
specifications specification status
comment html living standardthe definition of 'errorevent' in that specification.
Event() - Web APIs
example // create a look event that bubbles up and cannot be canceled const evt = new event("look", {"bubbles":true, "cancelable":false}); document.dispatchevent(evt); // event can be dispatched from any element, not only the document mydiv.dispatchevent(evt); specifications specification status
comment domthe definition of 'event()' in that specification.
Event.bubbles - Web APIs
specifications specification status
comment domthe definition of 'event.bubbles' in that specification.
Event.cancelBubble - Web APIs
example elem.onclick = function(event) { // do cool things here event.cancelbubble = true; } specifications specification status
comment domthe definition of 'cancelbubble' in that specification.
Event.defaultPrevented - Web APIs
{ if (event.defaultprevented) { log.innertext = 'sorry, but you cannot visit this link!\n' + log.innertext; } else { log.innertext = 'visiting link...\n' + log.innertext; } } } const a = document.getelementbyid('link2'); a.addeventlistener('click', stoplink); document.addeventlistener('click', logclick); result specifications specification status
comment domthe definition of 'event.defaultprevented()' in that specification.
Event.eventPhase - Web APIs
"#f6eedb" : "#cceeff" } } divinfo.innerhtml = '' } result specifications specification status
comment domthe definition of 'event.eventphase' in that specification.
Event.initEvent() - Web APIs
elem.addeventlistener('click', function (e) { // e.target matches elem }, false); elem.dispatchevent(event); specifications specification status
comment domthe definition of 'event.initevent()' in that specification.
Event.isTrusted - Web APIs
syntax var eventistrusted = event.istrusted; value boolean example if (e.istrusted) { /* the event is trusted */ } else { /* the event is not trusted */ } specification specification status
comment domthe definition of 'event.istrusted' in that specification.
Event.target - Web APIs
child(li2); function hide(evt) { // e.target refers to the clicked <li> element // this is different than e.currenttarget, which would refer to the parent <ul> in this context evt.target.style.visibility = 'hidden'; } // attach the listener to the list // it will fire when each <li> is clicked ul.addeventlistener('click', hide, false); specifications specification status
comment domthe definition of 'event.target' in that specification.
Event.timeStamp - Web APIs
specifications specification status
comment domthe definition of 'event.timestamp' in that specification.
Event.type - Web APIs
press', geteventtype, false); // second document.addeventlistener('keyup', geteventtype, false); // third // mouse events document.addeventlistener('mousedown', geteventtype, false); // first document.addeventlistener('mouseup', geteventtype, false); // second document.addeventlistener('click', geteventtype, false); // third result specifications specification status
comment domthe definition of 'event.type' in that specification.
Event - Web APIs
specifications specification status
comment domthe definition of 'event' in that specification.
EventListener - Web APIs
buttonelement.addeventlistener('click', { handleevent: function (event) { alert('element clicked through handleevent property!'); } }); result see also: addeventlistener specifications specification status
comment domthe definition of 'eventlistener' in that specification.
EventSource() - Web APIs
specifications specification status
comment html living standardthe definition of 'eventsource()' in that specification.
EventSource.url - Web APIs
specifications specification status
comment html living standardthe definition of 'url' in that specification.
EventTarget() - Web APIs
get secret() { return this._secret; } }; let myeventtarget = new myeventtarget(5); let value = myeventtarget.secret; // == 5 myeventtarget.addeventlistener("foo", function(e) { this._secret = e.detail; }); let event = new customevent("foo", { detail: 7 }); myeventtarget.dispatchevent(event); let newvalue = myeventtarget.secret; // == 7 specifications specification status
comment domthe definition of 'eventtarget() constructor' in that specification.
EventTarget.removeEventListener() - Web APIs
olor = 'white'; } else { body.style.backgroundcolor = 'yellow'; } toggle = !toggle; } clicktarget.addeventlistener('click', makebackgroundyellow, false ); mouseovertarget.addeventlistener('mouseover', function () { clicktarget.removeeventlistener('click', makebackgroundyellow, false ); }); specifications specification status
comment domthe definition of 'eventtarget.removeeventlistener()' in that specification.
EventTarget - Web APIs
stack.splice(i, 1); return; } } }; eventtarget.prototype.dispatchevent = function(event) { if (!(event.type in this.listeners)) { return true; } var stack = this.listeners[event.type].slice(); for (var i = 0, l = stack.length; i < l; i++) { stack[i].call(this, event); } return !event.defaultprevented; }; specifications specification status
comment domthe definition of 'eventtarget' in that specification.
ExtendableEvent() - Web APIs
specifications specification status
comment service workersthe definition of 'extendableevent' in that specification.
ExtendableEvent.waitUntil() - Web APIs
example using waituntil() within a service worker's install event: addeventlistener('install', event => { const precache = async () => { const cache = await caches.open('static-v1'); return cache.addall([ '/', '/about/', '/static/styles.css' ]); }; event.waituntil(precache()); }); specifications specification status
comment service workersthe definition of 'waituntil()' in that specification.
ExtendableEvent - Web APIs
specifications specification status
comment service workersthe definition of 'extendableevent' in that specification.
ExtendableMessageEvent() - Web APIs
examples var init = { data : 'hello message', source : messageportreference, ports : messageportlistreference } var myeme = new extendablemessageevent('message', init); specifications specification status
comment service workersthe definition of 'extendablemessageevent()' in that specification.
ExtendableMessageEvent.data - Web APIs
self.addeventlistener('push', function(e) { var obj = e.data.json(); if(obj.action === 'subscribe' || obj.action === 'unsubscribe') { port.postmessage(obj); } else if(obj.action === 'init' || obj.action === 'chatmsg') { port.postmessage(obj); } }); self.onmessage = function(e) { console.log(e.data); port = e.ports[0]; } specifications specification status
comment service workersthe definition of 'extendablemessageevent.data' in that specification.
ExtendableMessageEvent.lastEventId - Web APIs
addeventlistener('push', function(e) { var obj = e.data.json(); if(obj.action === 'subscribe' || obj.action === 'unsubscribe') { port.postmessage(obj); } else if(obj.action === 'init' || obj.action === 'chatmsg') { port.postmessage(obj); } }); self.onmessage = function(e) { console.log(e.lasteventid); port = e.ports[0]; } specifications specification status
comment service workersthe definition of 'extendablemessageevent.lasteventid' in that specification.
ExtendableMessageEvent.origin - Web APIs
self.addeventlistener('push', function(e) { var obj = e.data.json(); if(obj.action === 'subscribe' || obj.action === 'unsubscribe') { port.postmessage(obj); } else if(obj.action === 'init' || obj.action === 'chatmsg') { port.postmessage(obj); } }); self.onmessage = function(e) { console.log(e.origin); port = e.ports[0]; } specifications specification status
comment service workersthe definition of 'extendablemessageevent.origin' in that specification.
ExtendableMessageEvent.ports - Web APIs
var port; self.addeventlistener('push', function(e) { var obj = e.data.json(); if(obj.action === 'subscribe' || obj.action === 'unsubscribe') { port.postmessage(obj); } else if(obj.action === 'init' || obj.action === 'chatmsg') { port.postmessage(obj); } }); self.onmessage = function(e) { port = e.ports[0]; } specifications specification status
comment service workersthe definition of 'extendablemessageevent.ports' in that specification.
ExtendableMessageEvent.source - Web APIs
self.addeventlistener('push', function(e) { var obj = e.data.json(); if(obj.action === 'subscribe' || obj.action === 'unsubscribe') { port.postmessage(obj); } else if(obj.action === 'init' || obj.action === 'chatmsg') { port.postmessage(obj); } }); self.onmessage = function(e) { console.log(e.source); port = e.ports[0]; } specifications specification status
comment service workersthe definition of 'extendablemessageevent.source' in that specification.
ExtendableMessageEvent - Web APIs
tive.postmessage("hi service worker"); }); } the service worker can receive the message by listening to the message event: // in the service worker addeventlistener('message', event => { // event is an extendablemessageevent object console.log(`the client sent me a message: ${event.data}`); event.source.postmessage("hi client"); }); specifications specification status
comment service workersthe definition of 'extendablemessageevent' in that specification.
FeaturePolicy.allowedFeatures() - Web APIs
// first, get the feature policy object const featurepolicy = document.featurepolicy // then query feature for specific const allowed = featurepolicy.allowedfeatures() for (const directive of allowed){ console.log(directive) } specifications specification status
comment feature policythe definition of 'allowsfeature' in that specification.
FeaturePolicy.allowsFeature() - Web APIs
// first, get the feature policy object const featurepolicy = document.featurepolicy // then query feature for specific const allowed = featurepolicy.allowsfeature("camera") if (allowed){ console.log("fp allows camera.") } else { console.log("fp does not allows camera.") } specifications specification status
comment feature policythe definition of 'allowsfeature' in that specification.
FeaturePolicy.features() - Web APIs
// get the feature policy object const featurepolicy = document.featurepolicy // retreive the list of all supported feature policy directives const supporteddirectives = featurepolicy.features() // print out each directive into the console for (const directive of supporteddirectives){ console.log(directive) } specification specification status
comment feature policythe definition of 'features' in that specification.
FeaturePolicy.getAllowlistForFeature() - Web APIs
// first, get the feature policy object const featurepolicy = document.featurepolicy // then query feature for specific const allowlist = featurepolicy.getallowlistforfeature("camera") for (const origin of allowlist){ console.log(origin) } specification specification status
comment feature policythe definition of 'getallowlistforfeature' in that specification.
FetchEvent() - Web APIs
specifications specification status
comment service workersthe definition of 'fetchevent() constructor' in that specification.
FetchEvent.preloadResponse - Web APIs
return fetch(event.request); }()); }); specifications specification status
comment service workersthe definition of 'preloadresponse' in that specification.
FetchEvent.clientId - Web APIs
example self.addeventlistener('fetch', function(event) { console.log(event.clientid); }); specifications specification status
comment service workersthe definition of 'clientid' in that specification.
FetchEvent.navigationPreload - Web APIs
return fetch(event.request); }()); }); specifications specification status
comment service workersthe definition of 'navigationpreload' in that specification.
FetchEvent.replacesClientId - Web APIs
example self.addeventlistener('fetch', function(event) { console.log(event.replacesclientid); }); specifications specification status
comment service workersthe definition of 'replacesclientid' in that specification.
FetchEvent.request - Web APIs
about to fetch from network...'); return fetch(event.request).then(function(response) { console.log('response from network is:', response); return response; }).catch(function(error) { console.error('fetching failed:', error); throw error; }); }) ); }); specifications specification status
comment service workersthe definition of 'request' in that specification.
FetchEvent.resultingClientId - Web APIs
example self.addeventlistener('fetch', function(event) { console.log(event.resultingclientid); }); specifications specification status
comment service workersthe definition of 'resultingclientid' in that specification.
FetchEvent - Web APIs
return fetch(event.request); }()); }); specifications specification status
comment service workersthe definition of 'fetchevent()' in that specification.
Using Fetch - Web APIs
specifications specification status
comment fetch living standard initial definition ...
Fetch API - Web APIs
specifications specification status
comment fetch living standard initial definition ...
File.File() - Web APIs
example var file = new file(["foo"], "foo.txt", { type: "text/plain", }); specifications specification status
comment file api working draft initial definition ...
Using files from web applications - Web APIs
here is how to preview uploaded video: const video = document.getelementbyid('video'); const obj_url = url.createobjecturl(blob); video.src = obj_url; video.play(); url.revokeobjecturl(obj_url); specifications specification status
comment html living standardthe definition of 'file upload state' in that specification.
File.name - Web APIs
example <input type="file" multiple onchange="processselectedfiles(this)"> function processselectedfiles(fileinput) { var files = fileinput.files; for (var i = 0; i < files.length; i++) { alert("filename " + files[i].name); } } try the results out below: specifications specification status
comment file apithe definition of 'name' in that specification.
File.type - Web APIs
specifications specification status
comment file apithe definition of 'type' in that specification.
File.webkitRelativePath - Web APIs
lementbyid("filepicker").addeventlistener("change", function(event) { let output = document.getelementbyid("listing"); let files = event.target.files; for (let i=0; i<files.length; i++) { let item = document.createelement("li"); item.innerhtml = files[i].webkitrelativepath; output.appendchild(item); }; }, false); result specifications specification status
comment file and directory entries apithe definition of 'webkitrelativepath' in that specification.
File - Web APIs
specifications specification status
comment file apithe definition of 'the file interface' in that specification.
FileList - Web APIs
les; // cache files.length var fl = files.length; var i = 0; while ( i < fl) { // localize file var in the loop var file = files[i]; alert(file.name); i++; } } // set the input element onchange to call pullfiles document.queryselector("#myfiles").onchange=pullfiles; //a.t </script> </html> specifications specification status
comment file apithe definition of 'filelist' in that specification.
FileReader() - Web APIs
example the following code snippet shows creation of a filereader object using the filereader() constructor and subsequent usage of the object: function printfile(file) { var reader = new filereader(); reader.onload = function(evt) { console.log(evt.target.result); }; reader.readastext(file); } specifications specification status
comment file api working draft initial definition ...
FileReader.error - Web APIs
specifications specification status
comment file apithe definition of 'filereader: error' in that specification.
FileReader.readAsBinaryString() - Web APIs
eight = height; var ctx = canvas.getcontext('2d'); ctx.strokestyle = '#090'; ctx.beginpath(); ctx.arc(width/2, height/2, width/2 - width/10, 0, math.pi*2); ctx.stroke(); canvas.toblob(function (blob) { var reader = new filereader(); reader.onload = function () { console.log(reader.result); } reader.readasbinarystring(blob); }); specifications specification status
comment file apithe definition of 'readasbinarystring' in that specification.
FileReader.result - Web APIs
var fileinput = document.queryselector('input[type="file"]'); function read(callback) { var file = fileinput.files.item(0); var reader = new filereader(); reader.onload = function() { callback(reader.result); } reader.readastext(file); } specifications specification status
comment file apithe definition of 'result' in that specification.
FileReader - Web APIs
specifications specification status
comment file apithe definition of 'filereader' in that specification.
FileReaderSync - Web APIs
specifications specification status
comment file apithe definition of 'filereadersync' in that specification.
FileRequest - Web APIs
specifications specification status
comment filesystem api editor's draft draft proposal.
FileSystem.name - Web APIs
example // tbd specifications specification status
comment file and directory entries apithe definition of 'name' in that specification.
FileSystem.root - Web APIs
example // tbd specifications specification status
comment file and directory entries apithe definition of 'root' in that specification.
FileSystem - Web APIs
specifications specification status
comment file and directory entries apithe definition of 'filesystem' in that specification.
FileSystemDirectoryEntry - Web APIs
specifications specification status
comment file and directory entries apithe definition of 'filesystemdirectoryentry' in that specification.
FileSystemDirectoryReader - Web APIs
specifications specification status
comment file and directory entries api draft draft of proposed api this api has no official w3c or whatwg specification.
FileSystemEntry.filesystem - Web APIs
let rootdirentry = fileentry.filesystem.root; specifications specification status
comment file and directory entries apithe definition of 'filesystem' in that specification.
FileSystemEntry.isDirectory - Web APIs
if (entry.isdirectory) { processsubdirectory(entry); } else if (entry.isfile) { processfile(entry); } else { displayerrormessage("unsupported file system entry specified."); } specifications specification status
comment file and directory entries apithe definition of 'isdirectory' in that specification.
FileSystemEntry.isFile - Web APIs
if (entry.isdirectory) { processsubdirectory(entry); } else if (entry.isfile) { processfile(entry); } else { displayerrormessage("unsupported file system entry specified."); } specifications specification status
comment file and directory entries apithe definition of 'isfile' in that specification.
FileSystemEntry.name - Web APIs
function isfilewithextension(entry, extension) { return (entry.isfile && entry.name.endswith("." + extension)); } specifications specification status
comment file and directory entries apithe definition of 'name' in that specification.
FileSystemEntry - Web APIs
specifications specification status
comment file and directory entries api draft draft of proposed api this api has no official w3c or whatwg specification.
FileSystemFileEntry - Web APIs
var bb = new blobbuilder(); bb.append('meow'); filewriter.write(bb.getblob('text/plain')); }, errorhandler); }, errorhandler); } window.requestfilesystem(window.temporary, 1024*1024, oninitfs, errorhandler); specifications specification status
comment file and directory entries apithe definition of 'filesystemfileentry' in that specification.
FileSystemFlags.create - Web APIs
specifications specification status
comment file and directory entries apithe definition of 'filesystemflags' in that specification.
FileSystemFlags - Web APIs
specifications specification status
comment file and directory entries apithe definition of 'filesystemflags' in that specification.
File and Directory Entries API - Web APIs
metadata specifications specification status
comment file and directory entries api draft draft of proposed api this api has no official w3c or whatwg specification.
FocusEvent() - Web APIs
specifications specification status
comment document object model (dom) level 3 events specificationthe definition of 'focusevent()' in that specification.
FocusEvent.relatedTarget - Web APIs
syntax secondtarget = focusevent.relatedtarget specifications specification status
comment ui eventsthe definition of 'focusevent.relatedtarget' in that specification.
FocusEvent - Web APIs
specifications specification status
comment ui eventsthe definition of 'focusevent' in that specification.
FontFace.FontFace() - Web APIs
iant featuresettings: feature settings example async function loadfonts() { const font = new fontface('myfont', 'url(myfont.woff)'); // wait for font to be loaded await font.load(); // add font to document document.fonts.add(font); // enable font with css class document.body.classlist.add('fonts-loaded'); } specifications specification status
comment css font loading module level 3the definition of 'fontface constructor' in that specification.
FontFace.display - Web APIs
specifications specification status
comment css font loading module level 3the definition of 'display' in that specification.
FontFace.family - Web APIs
example var fontface = new fontface('roboto', 'url(https://fonts.example.com/roboto.woff2)'); console.log(fontface.family); // 'roboto' fontface.family = 'newroboto'; console.log(fontface.family); // 'newroboto' specifications specification status
comment css font loading module level 3the definition of 'family' in that specification.
FontFace.load - Web APIs
specifications specification status
comment css font loading module level 3the definition of 'load' in that specification.
FontFace.loaded - Web APIs
specifications specification status
comment css font loading module level 3the definition of 'loaded' in that specification.
FontFace.status - Web APIs
specifications specification status
comment css font loading module level 3the definition of 'status' in that specification.
FontFace.stretch - Web APIs
specifications specification status
comment css font loading module level 3the definition of 'stretch' in that specification.
FontFace.style - Web APIs
specifications specification status
comment css font loading module level 3the definition of 'style' in that specification.
FontFace.unicodeRange - Web APIs
specifications specification status
comment css font loading module level 3the definition of 'unicoderange' in that specification.
FontFace.variant - Web APIs
specifications specification status
comment css font loading module level 3the definition of 'variant' in that specification.
FontFace.weight - Web APIs
specifications specification status
comment css font loading module level 3the definition of 'weight' in that specification.
FontFace - Web APIs
specifications specification status
comment css font loading module level 3the definition of 'fontface' in that specification.
FontFaceSet.check() - Web APIs
specifications specification status
comment css font loading module level 3the definition of 'check' in that specification.
FontFaceSet.load() - Web APIs
document.fonts.load("12px myfont", "ß").then(…); specifications specification status
comment css font loading module level 3the definition of 'load' in that specification.
FontFaceSet.ready - Web APIs
specifications specification status
comment css font loading module level 3the definition of 'fontfaceset' in that specification.
FontFaceSet - Web APIs
specifications specification status
comment css font loading module level 3the definition of 'fontfaceset' in that specification.
FontFaceSetLoadEvent - Web APIs
specifications specification status
comment css font loading module level 3the definition of 'fontfacesetloadevent' in that specification.
FormData() - Web APIs
let myform = document.getelementbyid('myform'); let formdata = new formdata(myform); specifications specification status
comment xmlhttprequestthe definition of 'formdata()' in that specification.
FormData.append() - Web APIs
if the sent value is different than string or blob it will be automatically converted to string: formdata.append('name', true); formdata.append('name', 74); formdata.append('name', 'john'); formdata.getall('name'); // ["true", "74", "john"] specifications specification status
comment xmlhttprequestthe definition of 'append()' in that specification.
FormData.delete() - Web APIs
example the following line creates an empty formdata object and prepopulates it with key/value pairs from a form: var formdata = new formdata(myform); you can delete keys and their values using delete(): formdata.delete('username'); specifications specification status
comment xmlhttprequestthe definition of 'delete()' in that specification.
FormData.entries() - Web APIs
example // create a test formdata object var formdata = new formdata(); formdata.append('key1', 'value1'); formdata.append('key2', 'value2'); // display the key/value pairs for(var pair of formdata.entries()) { console.log(pair[0]+ ', '+ pair[1]); } the result is: key1, value1 key2, value2 specifications specification status
comment xmlhttprequestthe definition of 'entries() (as iterator<>)' in that specification.
FormData.get() - Web APIs
ple the following line creates an empty formdata object: var formdata = new formdata(); if we add two username values using formdata.append: formdata.append('username', 'chris'); formdata.append('username', 'bob'); the following get() function will only return the first username value appended: formdata.get('username'); // returns "chris" specifications specification status
comment xmlhttprequestthe definition of 'get()' in that specification.
FormData.getAll() - Web APIs
following line creates an empty formdata object: var formdata = new formdata(); if we add two username values using formdata.append: formdata.append('username', 'chris'); formdata.append('username', 'bob'); the following getall() function will return both username values in an array: formdata.getall('username'); // returns ["chris", "bob"] specifications specification status
comment xmlhttprequestthe definition of 'getall()' in that specification.
FormData.has() - Web APIs
ta object: var formdata = new formdata(); the following snippet shows the results of testing for the existence of username in the formdata object, before and after appending a username value to it with formdata.append: formdata.has('username'); // returns false formdata.append('username', 'chris'); formdata.has('username'); // returns true specifications specification status
comment xmlhttprequestthe definition of 'has()' in that specification.
FormData.keys() - Web APIs
example // create a test formdata object var formdata = new formdata(); formdata.append('key1', 'value1'); formdata.append('key2', 'value2'); // display the keys for (var key of formdata.keys()) { console.log(key); } the result is: key1 key2 specifications specification status
comment xmlhttprequestthe definition of 'keys() (as iterator<>)' in that specification.
FormData.set() - Web APIs
a = new formdata(); // currently empty you can set key/value pairs on this using formdata.set: formdata.set('username', 'chris'); formdata.set('userpic', myfileinput.files[0], 'chris.jpg'); if the sent value is different than string or blob it will be automatically converted to string: formdata.set('name', 72); formdata.get('name'); // "72" specifications specification status
comment xmlhttprequestthe definition of 'set()' in that specification.
FormData.values() - Web APIs
example // create a test formdata object var formdata = new formdata(); formdata.append('key1', 'value1'); formdata.append('key2', 'value2'); // display the values for (var value of formdata.values()) { console.log(value); } the result is: value1 value2 specifications specification status
comment xmlhttprequestthe definition of 'values() (as iterator<>)' in that specification.
FormData - Web APIs
specifications specification status
comment xmlhttprequestthe definition of 'formdata' in that specification.
FormDataEvent() - Web APIs
examples let fd = new formdata(); fd.append('test', 'test'); let fdev = new formdataevent('formdata', { formdata: fd }); for (let value of fdev.formdata.values()) { console.log(value); } specifications specification status
comment html living standardthe definition of 'formdataevent' in that specification.
FormDataEvent.formData - Web APIs
melem.addeventlistener('formdata', (e) => { console.log('formdata fired'); // get the form data from the event object let data = e.formdata; for (var value of data.values()) { console.log(value); } // submit the data via xhr var request = new xmlhttprequest(); request.open("post", "/formhandler"); request.send(data); }); specifications specification status
comment html living standardthe definition of 'formdata' in that specification.
FormDataEvent - Web APIs
melem.addeventlistener('formdata', (e) => { console.log('formdata fired'); // get the form data from the event object let data = e.formdata; for (var value of data.values()) { console.log(value); } // submit the data via xhr var request = new xmlhttprequest(); request.open("post", "/formhandler"); request.send(data); }); specifications specification status
comment html living standardthe definition of 'formdataevent' in that specification.
Guide to the Fullscreen API - Web APIs
hange document.onfullscreenerror onwebkitfullscreenerror onmozfullscreenerror onmsfullscreenerror document.exitfullscreen() webkitexitfullscreen() mozcancelfullscreen() msexitfullscreen() element.requestfullscreen() webkitrequestfullscreen() mozrequestfullscreen() msrequestfullscreen() specifications specification status
comment fullscreen api living standard initial version.
GainNode() - Web APIs
specifications specification status
comment web audio apithe definition of 'gainnode()' in that specification.
GainNode.gain - Web APIs
gainnode.gain.setvalueattime(0, audioctx.currenttime); mute.id = "activated"; mute.innerhtml = "unmute"; } else { gainnode.gain.setvalueattime(1, audioctx.currenttime); mute.id = ""; mute.innerhtml = "mute"; } } specifications specification status
comment web audio apithe definition of 'gain' in that specification.
GainNode - Web APIs
gainnode.gain.setvalueattime(0, audioctx.currenttime); mute.id = "activated"; mute.innerhtml = "unmute"; } else { gainnode.gain.setvalueattime(1, audioctx.currenttime); mute.id = ""; mute.innerhtml = "mute"; } } specifications specification status
comment web audio apithe definition of 'gainnode' in that specification.
Gamepad.axes - Web APIs
specifications specification status
comment gamepadthe definition of 'gamepad.axes' in that specification.
Gamepad.buttons - Web APIs
specifications specification status
comment gamepadthe definition of 'gamepad.buttons' in that specification.
Gamepad.connected - Web APIs
specifications specification status
comment gamepadthe definition of 'gamepad.connected' in that specification.
Gamepad.hand - Web APIs
examples tbc specifications specification status
comment gamepad extensionsthe definition of 'hand' in that specification.
Gamepad.id - Web APIs
specifications specification status
comment gamepadthe definition of 'gamepad.id' in that specification.
Gamepad.index - Web APIs
specifications specification status
comment gamepadthe definition of 'gamepad.index' in that specification.
Gamepad.mapping - Web APIs
specifications specification status
comment gamepadthe definition of 'gamepad.mapping' in that specification.
Gamepad.timestamp - Web APIs
specifications specification status
comment gamepadthe definition of 'gamepad.timestamp' in that specification.
Gamepad - Web APIs
%d buttons, %d axes.", e.gamepad.index, e.gamepad.id, e.gamepad.buttons.length, e.gamepad.axes.length); }); specifications specification status
comment gamepadthe definition of 'gamepad' in that specification.
GamepadButton - Web APIs
p.buttons[1].value > 0 || gp.buttons[1].pressed == true) { a++; } else if(gp.buttons[2].value > 0 || gp.buttons[2].pressed == true) { b++; } else if(gp.buttons[3].value > 0 || gp.buttons[3].pressed == true) { a--; } } ball.style.left = a*2 + "px"; ball.style.top = b*2 + "px"; var start = raf(gameloop); }; specifications specification status
comment gamepadthe definition of 'gamepadbutton' in that specification.
GamepadEvent() - Web APIs
specifications specification status
comment gamepadthe definition of 'gamepadevent_' in that specification.
GamepadEvent - Web APIs
window.addeventlistener("gamepaddisconnected", function(e) { console.log("gamepad disconnected from index %d: %s", e.gamepad.index, e.gamepad.id); }); specifications specification status
comment gamepadthe definition of 'gamepadevent' in that specification.
Using the Gamepad API - Web APIs
if (gamepads[i].index in controllers) { controllers[gamepads[i].index] = gamepads[i]; } else { addgamepad(gamepads[i]); } } } } window.addeventlistener("gamepadconnected", connecthandler); window.addeventlistener("gamepaddisconnected", disconnecthandler); if (!haveevents) { setinterval(scangamepads, 500); } specifications specification status
comment gamepadthe definition of 'gamepad' in that specification.
Gamepad API - Web APIs
tutorials and guides using the gamepad api implementing controls using the gamepad api specifications specification status
comment gamepad extensions editor's draft defines the experimental gamepad extensions.
Geolocation.clearWatch() - Web APIs
reach the target'); navigator.geolocation.clearwatch(id); } }; function error(err) { console.warn('error(' + err.code + '): ' + err.message); }; target = { latitude : 0, longitude: 0, } options = { enablehighaccuracy: false, timeout: 5000, maximumage: 0 }; id = navigator.geolocation.watchposition(success, error, options); specifications specification status
comment geolocation api recommendation initial specification.
Geolocation.getCurrentPosition() - Web APIs
ords; console.log('your current position is:'); console.log(`latitude : ${crd.latitude}`); console.log(`longitude: ${crd.longitude}`); console.log(`more or less ${crd.accuracy} meters.`); } function error(err) { console.warn(`error(${err.code}): ${err.message}`); } navigator.geolocation.getcurrentposition(success, error, options); specifications specification status
comment geolocation api recommendation initial specification.
Geolocation.watchPosition() - Web APIs
reached the target'); navigator.geolocation.clearwatch(id); } } function error(err) { console.warn('error(' + err.code + '): ' + err.message); } target = { latitude : 0, longitude: 0 }; options = { enablehighaccuracy: false, timeout: 5000, maximumage: 0 }; id = navigator.geolocation.watchposition(success, error, options); specifications specification status
comment geolocation apithe definition of 'watchposition()' in that specification.
Geolocation - Web APIs
specifications specification status
comment geolocation api recommendation initial specification.
GeolocationCoordinates.longitude - Web APIs
</p> <button id="get-location"> get my location </button> result take this example for a test drive here: specifications specification status
comment geolocation apithe definition of 'coordinates.longitude' in that specification.
GeolocationPosition - Web APIs
specifications specification status
comment geolocation apithe definition of 'geolocationposition' in that specification.
Geolocation API - Web APIs
able to retrieve your location'; } if(!navigator.geolocation) { status.textcontent = 'geolocation is not supported by your browser'; } else { status.textcontent = 'locating…'; navigator.geolocation.getcurrentposition(success, error); } } document.queryselector('#find-me').addeventlistener('click', geofindme); result specifications specification status
comment geolocation api recommendation ...
GeometryUtils - Web APIs
geometryutils.convertquadfromnode() fixme: needs a description geometryutils.convertrectfromnode() fixme: needs a description geometryutils.convertpointfromnode() fixme: needs a description specifications specification status
comment css object model (cssom) view modulethe definition of 'geometryutils' in that specification.
GlobalEventHandlers.onabort - Web APIs
example window.onabort = function() { alert('load aborted.'); } specification specification status
comment html living standardthe definition of 'onabort' in that specification.
GlobalEventHandlers.onchange - Web APIs
ype something here, then click outside of the field." size="50"> <p id="log"></p> javascript let input = document.queryselector('input'); let log = document.getelementbyid('log'); input.onchange = handlechange; function handlechange(e) { log.textcontent = `the field's value is ${e.target.value.length} character(s) long.`; } result specification specification status
comment html living standardthe definition of 'onchange' in that specification.
GlobalEventHandlers.onclick - Web APIs
html <p>click anywhere in this example.</p> <p id="log"></p> javascript let log = document.getelementbyid('log'); document.onclick = inputchange; function inputchange(e) { log.textcontent = `position: (${e.clientx}, ${e.clienty})`; } result specification specification status
comment html living standardthe definition of 'onclick' in that specification.
GlobalEventHandlers.oncontextmenu - Web APIs
ipt function pause(e) { body.classlist.add('paused'); note.removeattribute('hidden'); } function play(e) { body.classlist.remove('paused'); note.setattribute('hidden', ''); } const body = document.queryselector('body'); const note = document.queryselector('.note'); window.oncontextmenu = pause; window.onpointerdown = play; result specifications specification status
comment html living standardthe definition of 'oncontextmenu' in that specification.
GlobalEventHandlers.ondblclick - Web APIs
html <p>double click anywhere in this example.</p> <p id="log"></p> javascript let log = document.getelementbyid('log'); document.ondblclick = logdoubleclick; function logdoubleclick(e) { log.textcontent = `position: (${e.clientx}, ${e.clienty})`; } result specifications specification status
comment html living standardthe definition of 'ondblclick' in that specification.
GlobalEventHandlers.ondrag - Web APIs
"> --> <p id="source" ondrag="drag_handler(event);" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specifications specification status
comment html living standardthe definition of 'ondrag' in that specification.
GlobalEventHandlers.ondragend - Web APIs
<code>ondragexit</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specifications specification status
comment html living standardthe definition of 'ondragend' in that specification.
GlobalEventHandlers.ondragenter - Web APIs
<code>ondragexit</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specifications specification status
comment html living standardthe definition of 'ondragenter' in that specification.
GlobalEventHandlers.ondragexit - Web APIs
<code>ondragexit</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specifications specification status
comment html living standardthe definition of 'ondragexit' in that specification.
GlobalEventHandlers.ondragleave - Web APIs
<code>ondragexit</code></h1> <div> <p id="source" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specifications specification status
comment html living standardthe definition of 'ondragleave' in that specification.
GlobalEventHandlers.ondragover - Web APIs
<div> <p id="source" ondrag="drag_handler(event);" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specifications specification status
comment html living standardthe definition of 'ondragover' in that specification.
GlobalEventHandlers.ondragstart - Web APIs
<div> <p id="source" ondrag="drag_handler(event);" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specifications specification status
comment html living standardthe definition of 'ondragstart' in that specification.
GlobalEventHandlers.ondrop - Web APIs
urce"> <p id="source" ondrag="drag_handler(event);" ondragstart="dragstart_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> </body> </html> specifications specification status
comment html living standardthe definition of 'ondrop' in that specification.
GlobalEventHandlers.onformdata - Web APIs
etrieve data formelem.onformdata = (e) => { console.log('formdata fired'); // get the form data from the event object let data = e.formdata; for (var value of data.values()) { console.log(value); } // submit the data via xhr var request = new xmlhttprequest(); request.open("post", "/formhandler"); request.send(data); }; specifications specification status
comment html living standardthe definition of 'onformdata' in that specification.
GlobalEventHandlers.ongotpointercapture - Web APIs
example function overhandler(event) { // determine the target event's gotpointercapture handler let gotcapturehandler = event.target.ongotpointercapture; } function init() { let el = document.getelementbyid('target'); el.ongotpointercapture = overhandler; } specifications specification status
comment pointer events – level 2the definition of 'ongotpointercapture' in that specification.
GlobalEventHandlers.oninput - Web APIs
t" placeholder="type something here to see its length." size="50"> <p id="log"></p> javascript let input = document.queryselector('input'); let log = document.getelementbyid('log'); input.oninput = handleinput; function handleinput(e) { log.textcontent = `the field's value is ${e.target.value.length} character(s) long.`; } result specifications specification status
comment html living standardthe definition of 'oninput' in that specification.
GlobalEventHandlers.oninvalid - Web APIs
hanks = document.getelementbyid('thanks'); city.oninvalid = invalid; form.onsubmit = submit; function invalid(event) { error.removeattribute('hidden'); } function submit(event) { form.setattribute('hidden', ''); thanks.removeattribute('hidden'); // for this example, don't actually submit the form event.preventdefault(); } result specification specification status
comment html living standardthe definition of 'oninvalid' in that specification.
GlobalEventHandlers.onkeydown - Web APIs
html <input> <p id="log"></p> javascript const input = document.queryselector('input'); const log = document.getelementbyid('log'); input.onkeydown = logkey; function logkey(e) { log.textcontent += ` ${e.code}`; } result specifications specification status
comment html living standardthe definition of 'onkeydown' in that specification.
GlobalEventHandlers.onkeyup - Web APIs
html <input> <p id="log"></p> javascript const input = document.queryselector('input'); const log = document.getelementbyid('log'); input.onkeyup = logkey; function logkey(e) { log.textcontent += ` ${e.code}`; } result specifications specification status
comment html living standardthe definition of 'onkeyup' in that specification.
GlobalEventHandlers.onloadstart - Web APIs
jpg"> javascript content // 'loadstart' fires first, then 'load', then 'loadend' image.addeventlistener('load', function(e) { console.log('image loaded'); }); image.addeventlistener('loadstart', function(e) { console.log('image load started'); }); image.addeventlistener('loadend', function(e) { console.log('image load finished'); }); specifications specification status
comment html living standardthe definition of 'onloadstart' in that specification.
GlobalEventHandlers.onlostpointercapture - Web APIs
example function overhandler(event) { // determine the target event's lostpointercapture handler let lostcapturehandler = event.target.onlostpointercapture; } function init() { let el = document.getelementbyid('target'); el.onlostpointercapture = overhandler; } specifications specification status
comment pointer events – level 2the definition of 'onlostpointercapture' in that specification.
GlobalEventHandlers.onmousedown - Web APIs
.clientx - 50 + 'px'; view.style.top = event.clienty - 50 + 'px'; } function hideview(event) { view.setattribute('hidden', ''); } const container = document.queryselector('.container'); const view = document.queryselector('.view'); container.onmousedown = showview; container.onmousemove = moveview; document.onmouseup = hideview; result specification specification status
comment html living standardthe definition of 'onmousedown' in that specification.
GlobalEventHandlers.onmouseout - Web APIs
html <p>test your mouse on me!</p> javascript const p = document.queryselector('p'); p.onmouseover = logmouseover; p.onmouseout = logmouseout; function logmouseover() { p.innerhtml = 'mouse over detected'; } function logmouseout() { p.innerhtml = 'mouse out detected'; } result specification specification status
comment html living standardthe definition of 'onmouseout' in that specification.
GlobalEventHandlers.onmouseover - Web APIs
html <p>test your mouse on me!</p> javascript const p = document.queryselector('p'); p.onmouseover = logmouseover; p.onmouseout = logmouseout; function logmouseover() { p.innerhtml = 'mouse over detected'; } function logmouseout() { p.innerhtml = 'mouse out detected'; } result specifications specification status
comment html living standardthe definition of 'onmouseover' in that specification.
GlobalEventHandlers.onmouseup - Web APIs
{ transform: translate(-50%, -50%); } javascript function depress() { toast.classlist.add('depressed'); } function release() { toast.classlist.remove('depressed'); } const toaster = document.queryselector('.toaster'); const toast = document.queryselector('.toast'); toaster.onmousedown = depress; document.onmouseup = release; result specification specification status
comment html living standardthe definition of 'onmouseup' in that specification.
GlobalEventHandlers.onplay - Web APIs
</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.
GlobalEventHandlers.onreset - Web APIs
time stamp: ${event.timestamp}`; } const form = document.getelementbyid('form'); const log = document.getelementbyid('log'); form.onreset = logreset; result specification specification status
comment html living standardthe definition of 'onreset' in that specification.
GlobalEventHandlers.onresize - Web APIs
ndow height: <span id="height"></span></p> <p>window width: <span id="width"></span></p> const heightoutput = document.queryselector('#height'); const widthoutput = document.queryselector('#width'); function resize() { heightoutput.textcontent = window.innerheight; widthoutput.textcontent = window.innerwidth; } window.onresize = resize; specification specification status
comment html living standardthe definition of 'onresize' in that specification.
GlobalEventHandlers.onscroll - Web APIs
6 7 8 9</textarea> <p id="log"></p> css textarea { width: 4rem; height: 8rem; font-size: 3rem; } javascript const textarea = document.queryselector('textarea'); const log = document.getelementbyid('log'); textarea.onscroll = logscroll; function logscroll(e) { log.textcontent = `scroll position: ${e.target.scrolltop}`; } result specifications specification status
comment html living standardthe definition of 'onscroll' in that specification.
GlobalEventHandlers.onselect - Web APIs
> javascript function logselection(event) { const log = document.getelementbyid('log'); const selection = event.target.value.substring(event.target.selectionstart, event.target.selectionend); log.textcontent = `you selected: ${selection}`; } const textarea = document.queryselector('textarea'); textarea.onselect = logselection; result specification specification status
comment html living standardthe definition of 'onselect' in that specification.
GlobalEventHandlers.onsubmit - Web APIs
anks = document.getelementbyid('thanks'); city.oninvalid = invalid; form.onsubmit = submit; function invalid(event) { error.removeattribute('hidden'); } function submit(event) { form.setattribute('hidden', ''); thanks.removeattribute('hidden'); // for this example, don't actually submit the form event.preventdefault(); } result specifications specification status
comment html living standardthe definition of 'onsubmit' in that specification.
GlobalEventHandlers.onwheel - Web APIs
0) { // zoom in scale *= event.deltay * -2; } else { // zoom out scale /= event.deltay * 2; } // restrict scale scale = math.min(math.max(.125, scale), 4); // apply scale transform el.style.transform = `scale(${scale})`; } let scale = 1; const el = document.queryselector('div'); document.onwheel = zoom; result specification specification status
comment html living standardthe definition of 'onwheel' in that specification.
GlobalEventHandlers - Web APIs
specifications specification status
comment selection apithe definition of 'extension to globaleventhandlers' in that specification.
Gyroscope.x - Web APIs
let gyroscope = new gyroscope({frequency: 60}); gyroscope.addeventlistener('reading', e => { console.log("angular velocity along the x-axis " + gyroscope.x); console.log("angular velocity along the y-axis " + gyroscope.y); console.log("angular velocity along the z-axis " + gyroscope.z); }); gyroscope.start(); specifications specification status
comment generic sensor api candidate recommendation defines sensors in general.
Gyroscope.y - Web APIs
let gyroscope = new gyroscope({frequency: 60}); gyroscope.addeventlistener('reading', e => { console.log("angular velocety along the x-axis " + gyroscope.x); console.log("angular velocety along the y-axis " + gyroscope.y); console.log("angular velocety along the z-axis " + gyroscope.z); }); gyroscope.start(); specifications specification status
comment generic sensor api candidate recommendation defines sensors in general.
Gyroscope.z - Web APIs
let gyroscope = new gyroscope({frequency: 60}); gyroscope.addeventlistener('reading', e => { console.log("angular velocety along the x-axis " + gyroscope.x); console.log("angular velocety along the y-axis " + gyroscope.y); console.log("angular velocety along the z-axis " + gyroscope.z); }); gyroscope.start(); specifications specification status
comment generic sensor api candidate recommendation defines sensors in general.
Gyroscope - Web APIs
let gyroscope = new gyroscope({frequency: 60}); gyroscope.addeventlistener('reading', e => { console.log("angular velocity along the x-axis " + gyroscope.x); console.log("angular velocity along the y-axis " + gyroscope.y); console.log("angular velocity along the z-axis " + gyroscope.z); }); gyroscope.start(); specifications specification status
comment generic sensor api candidate recommendation defines sensors in general.
HTMLAnchorElement.download - Web APIs
syntax var dnload = anchorelt.download; anchorelt.download = dnload; specifications specification status
comment html living standardthe definition of 'download' in that specification.
HTMLAnchorElement.rel - Web APIs
syntax var relstr = anchorelt.rel; anchorelt.rel = relstr; example var anchors = document.getelementsbytagname("a"); var length = anchors.length; for (var i = 0; i < length; i++) { alert("rel: " + anchors[i].rel); } specifications specification status
comment html living standardthe definition of 'rel' in that specification.
HTMLAnchorElement.relList - Web APIs
example var anchors = document.getelementsbytagname("a"); var length = anchors.length; for (var i = 0; i < length; i++) { var list = anchors[i].rellist; var listlength = list.length; console.log("new anchor node found with", listlength, "link types in rellist."); for (var j = 0; j < listlength; j++) { console.log(list[j]); } } specifications specification status
comment html living standardthe definition of 'rellist' in that specification.
HTMLAnchorElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmlanchorelement' in that specification.
HTMLAreaElement.rel - Web APIs
syntax var relstr = areaelt.rel; areaelt.rel = relstr; example var areas = document.getelementsbytagname("area"); var length = areas.length; for (var i = 0; i < length; i++) { alert("rel: " + areas[i].rel); } specifications specification status
comment html living standardthe definition of 'rel' in that specification.
HTMLAreaElement.relList - Web APIs
syntax var relstr = areaelt.rellist; example var areas = document.getelementsbytagname("area"); var length = areas.length; for (var i = 0; i < length; i++) { var list = areas[i].rellist; var listlength = list.length; console.log("new area found."); for (var j = 0; j < listlength; j++) { console.log(list[j]); } } specifications specification status
comment html living standardthe definition of 'rellist' in that specification.
HTMLAreaElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmlareaelement' in that specification.
Audio() - Web APIs
specifications specification status
comment html living standardthe definition of 'audio()' in that specification.
HTMLAudioElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmlaudioelement' in that specification.
HTMLBRElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmlbrelement' in that specification.
HTMLBaseElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmlbaseelement' in that specification.
HTMLBaseFontElement - Web APIs
specifications specification status
comment document object model (dom) level 2 html specificationthe definition of 'htmlbasefontelement' in that specification.
HTMLBodyElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmlbodyelement' in that specification.
HTMLButtonElement.labels - Web APIs
l 1</label> <button id="test">button</button> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const button = document.getelementbyid("test"); for(var i = 0; i < button.labels.length; i++) { console.log(button.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status
comment html living standardthe definition of 'labels' in that specification.
HTMLButtonElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmlbuttonelement' in that specification.
HTMLCanvasElement.captureStream() - Web APIs
send it to another computer using an rtcpeerconnection // pc is an rtcpeerconnection created elsewhere pc.addstream(stream); specifications specification status
comment media capture from dom elementsthe definition of 'htmlcanvaselement.capturestream()' in that specification.
HTMLCanvasElement.height - Web APIs
syntax var pxl = canvas.height; canvas.height = pxl; examples given this <canvas> element: <canvas id="canvas" width="300" height="300"></canvas> you can get the height of the canvas with the following code: var canvas = document.getelementbyid('canvas'); console.log(canvas.height); // 300 specifications specification status
comment html living standardthe definition of 'htmlcanvaselement.height' in that specification.
HTMLCanvasElement.toBlob() - Web APIs
tmp'}); promise.then( function() { console.log('successfully wrote file'); }, function() { console.log('failure writing file') } ); }; r.readasarraybuffer(b); } } canvas.toblob(blobcallback('passthisstring'), 'image/vnd.microsoft.icon', '-moz-parse-options:format=bmp;bpp=32'); specifications specification status
comment html living standardthe definition of 'htmlcanvaselement.toblob' in that specification.
HTMLCanvasElement.toDataURL() - Web APIs
/ 3; } octx.putimagedata(oimgdata, 0, 0); ograyimg = new image(); ograyimg.src = ocanvas.todataurl(); ograyimg.onmouseover = showcolorimg; ocolorimg.onmouseout = showgrayimg; octx.clearrect(0, 0, nwidth, nheight); ocolorimg.style.display = "none"; ocolorimg.parentnode.insertbefore(ograyimg, ocolorimg); } } specifications specification status
comment html living standardthe definition of 'htmlcanvaselement.todataurl' in that specification.
HTMLCanvasElement: webglcontextcreationerror event - Web APIs
event handler property none example var canvas = document.getelementbyid('canvas'); canvas.addeventlistener('webglcontextcreationerror', function(e) { console.log(e.statusmessage || 'unknown error'); }, false); var gl = canvas.getcontext('webgl'); // logs statusmessage or "unknown error" if unable to create webgl context specifications specification status
comment webgl 1.0the definition of 'webglcontextcreationerror' in that specification.
HTMLCanvasElement.width - Web APIs
syntax var pxl = canvas.width; canvas.width = pxl; examples given this <canvas> element: <canvas id="canvas" width="300" height="300"></canvas> you can get the width of the canvas with the following code: var canvas = document.getelementbyid('canvas'); console.log(canvas.width); // 300 specifications specification status
comment html living standardthe definition of 'htmlcanvaselement.width' in that specification.
HTMLCanvasElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmlcanvaselement' in that specification.
HTMLCollection - Web APIs
s id is myform: var elem1, elem2; // document.forms is an htmlcollection elem1 = document.forms[0]; elem2 = document.forms.item(0); alert(elem1 === elem2); // shows: "true" elem1 = document.forms.myform; elem2 = document.forms.nameditem("myform"); alert(elem1 === elem2); // shows: "true" elem1 = document.forms["named.item.with.periods"]; specifications specification status
comment domthe definition of 'htmlcollection' in that specification.
HTMLDListElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmldlistelement' in that specification.
HTMLDataElement.value - Web APIs
specifications specification status
comment html living standardthe definition of 'htmldataelement.value' in that specification.
HTMLDataElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmldataelement' in that specification.
HTMLDataListElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmldatalistelement' in that specification.
HTMLDetailsElement: toggle event - Web APIs
: 0; padding-left: 3em; } #summaries { flex-grow: 1; } javascript function logitem(e) { const item = document.queryselector(`[data-id=${e.target.id}]`); item.toggleattribute('hidden'); } const chapters = document.queryselectorall('details'); chapters.foreach((chapter) => { chapter.addeventlistener('toggle', logitem); }); result specifications specification status
comment html living standardthe definition of 'toggle event' in that specification.
HTMLDetailsElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmldetailselement' in that specification.
HTMLDialogElement.show() - Web APIs
modal dialog updatebutton.addeventlistener('click', function() { dialog.showmodal(); opencheck(dialog); }); // form cancel button closes the dialog box cancelbutton.addeventlistener('click', function() { dialog.close('animalnotchosen'); opencheck(dialog); }); })(); </script> specifications specification status
comment html living standardthe definition of 'show()' in that specification.
HTMLDialogElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmldialogelement' in that specification.
HTMLDivElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmldivelement' in that specification.
accessKeyLabel - Web APIs
e.accesskeylabel) { node.title += ' [' + node.accesskeylabel + ']'; } else { node.title += ' [' + node.accesskey + ']'; } node.onclick = function () { var p = document.createelement('p'); p.textcontent = 'clicked!'; node.parentnode.appendchild(p); }; html <button accesskey="h" title="caption" id="btn1">hover me</button> result specifications specification status
comment html living standardthe definition of 'htmlelement.accesskeylabel' in that specification.
HTMLElement: animationcancel event - Web APIs
ion.addeventlistener('click', () => { animation.classlist.toggle('active'); animationeventlog.textcontent = ''; iterationcount = 0; let active = animation.classlist.contains('active'); if (active) { applyanimation.textcontent = "cancel animation"; } else { applyanimation.textcontent = "activate animation"; } }); result specifications specification status
comment css animations working draft initial definition ...
HTMLElement: animationend event - Web APIs
ion.addeventlistener('click', () => { animation.classlist.toggle('active'); animationeventlog.textcontent = ''; iterationcount = 0; let active = animation.classlist.contains('active'); if (active) { applyanimation.textcontent = "cancel animation"; } else { applyanimation.textcontent = "activate animation"; } }); result specifications specification status
comment css animations working draft initial definition ...
HTMLElement: animationiteration event - Web APIs
ion.addeventlistener('click', () => { animation.classlist.toggle('active'); animationeventlog.textcontent = ''; iterationcount = 0; let active = animation.classlist.contains('active'); if (active) { applyanimation.textcontent = "cancel animation"; } else { applyanimation.textcontent = "activate animation"; } }); result specifications specification status
comment css animations working draft initial definition ...
HTMLElement: animationstart event - Web APIs
ion.addeventlistener('click', () => { animation.classlist.toggle('active'); animationeventlog.textcontent = ''; iterationcount = 0; let active = animation.classlist.contains('active'); if (active) { applyanimation.textcontent = "cancel animation"; } else { applyanimation.textcontent = "activate animation"; } }); result specifications specification status
comment css animations working draft initial definition ...
HTMLElement.click() - Web APIs
element.click() example simulate a mouse-click when moving the mouse pointer over a checkbox: html <form> <input type="checkbox" id="mycheck" onmouseover="myfunction()" onclick="alert('click event occured')"> </form> javascript // on mouse-over, execute myfunction function myfunction() { document.getelementbyid("mycheck").click(); } specification specification status
comment html living standard living standard document object model (dom) level 2 html specification obsolete initial definition.
HTMLElement.contentEditable - Web APIs
syntax editable = element.contenteditable element.contenteditable = 'true' specifications specification status
comment html living standardthe definition of 'contenteditable' in that specification.
HTMLElement.dir - Web APIs
example var parg = document.getelementbyid("para1"); parg.dir = "rtl"; // change the text direction on a paragraph identified as "para1" specifications specification status
comment html living standardthe definition of 'dir' in that specification.
HTMLElement.hidden - Web APIs
.panel { font: 16px "open sans", helvetica, arial, sans-serif; border: 1px solid #22d; padding: 12px; width: 500px; text-align: center; } .button { font: 22px "open sans", helvetica, arial, sans-serif; padding: 5px 36px; } h1 { margin-top: 0; font-size: 175%; } result specifications specification status
comment html living standardthe definition of 'htmlelement.hidden' in that specification.
HTMLElement.innerText - Web APIs
t" rows="6" cols="30" readonly>...</textarea> javascript const source = document.getelementbyid("source"); const textcontentoutput = document.getelementbyid("textcontentoutput"); const innertextoutput = document.getelementbyid("innertextoutput"); textcontentoutput.value = source.textcontent; innertextoutput.value = source.innertext; result specification specification status
comment html living standardthe definition of 'innertext' in that specification.
HTMLElement.isContentEditable - Web APIs
</p> javascript document.getelementbyid('infotext1').innerhtml += document.getelementbyid('mytext1').iscontenteditable; document.getelementbyid('infotext2').innerhtml += document.getelementbyid('mytext2').iscontenteditable; result specifications specification status
comment html living standardthe definition of 'htmlelement.contenteditable' in that specification.
HTMLElement.lang - Web APIs
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.
HTMLElement.offsetLeft - Web APIs
box = document.getelementbyid("box"); var longspan = document.getelementbyid("longspan"); box.style.left = longspan.offsetleft + document.body.scrollleft + "px"; box.style.top = longspan.offsettop + document.body.scrolltop + "px"; box.style.width = longspan.offsetwidth + "px"; box.style.height = longspan.offsetheight + "px"; </script> specification specification status
comment css object model (cssom) view modulethe definition of 'offsetleft' in that specification.
HTMLElement.offsetTop - Web APIs
example var d = document.getelementbyid("div1"); var toppos = d.offsettop; if (toppos > 10) { // object is offset more // than 10 pixels from its parent } specification specification status
comment css object model (cssom) view modulethe definition of 'offsettop' in that specification.
HTMLElement.offsetWidth - Web APIs
example specification specification status
comment css object model (cssom) view modulethe definition of 'offsetwidth' in that specification.
HTMLElement.title - Web APIs
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.
HTMLElement - Web APIs
specifications specification status
comment css object model (cssom) view modulethe definition of 'htmlelement' in that specification.
HTMLEmbedElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmlembedelement' in that specification.
HTMLFieldSetElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmlfieldsetelement' in that specification.
HTMLFormControlsCollection.namedItem() - Web APIs
example html <form> <input id="my-form-control" type="textarea"> </form> javascript // returns the htmlinputelement representing #my-form-control elem1 = document.forms[0]['my-form-control']; specifications specification status
comment html living standardthe definition of 'htmlformcontrolscollection.nameditem()' in that specification.
HTMLFormElement.acceptCharset - Web APIs
syntax var string = form.acceptcharset; form.acceptcharset = string; example inputs = document.forms['myform'].acceptcharset; specifications specification status
comment html living standardthe definition of 'htmlformelement: acceptcharset' in that specification.
HTMLFormElement.action - Web APIs
syntax var string = form.action; form.action = string; example form.action = '/cgi-bin/publish'; specifications specification status
comment html living standardthe definition of 'htmlformelement: action' in that specification.
HTMLFormElement.elements - Web APIs
"input" && inputs[i].type === "text") { // update text input inputs[i].value.tolocaleuppercase(); } } disabling form controls var inputs = document.getelementbyid("my-form").elements; // iterate over the form controls for (i = 0; i < inputs.length; i++) { // disable all form controls inputs[i].setattribute("disabled", ""); } specifications specification status
comment html living standardthe definition of 'htmlformelement.elements' in that specification.
HTMLFormElement.enctype - Web APIs
syntax var string = form.enctype; form.enctype = string; example form.enctype = 'application/x-www-form-urlencoded'; specifications specification status
comment html living standardthe definition of 'htmlformelement: enctype' in that specification.
HTMLFormElement: formdata event - Web APIs
k like this: formelem.onformdata = (e) => { console.log('formdata fired'); // get the form data from the event object let data = e.formdata; for (var value of data.values()) { console.log(value); } // submit the data via xhr var request = new xmlhttprequest(); request.open("post", "/formhandler"); request.send(data); }; specifications specification status
comment html living standardthe definition of 'formdata' in that specification.
HTMLFormElement.length - Web APIs
example if (document.getelementbyid('form1').length > 1) { // more than one form control here } specifications specification status
comment html living standardthe definition of 'htmlformelement: length' in that specification.
HTMLFormElement.method - Web APIs
syntax var string = form.method; form.method = string; example document.forms['myform'].method = 'post'; const formelement = document.createelement("form"); // create a form document.body.appendchild(formelement); console.log(formelement.method); // 'get' specifications specification status
comment html living standardthe definition of 'htmlformelement: method' in that specification.
HTMLFormElement.name - Web APIs
syntax var string = form.name; form.name = string; example var form1name = document.getelementbyid('form1').name; if (form1name != document.form.form1) { // browser doesn't support this form of reference } specifications specification status
comment html living standardthe definition of 'htmlformelement: name' in that specification.
HTMLFormElement.reportValidity() - Web APIs
syntax htmlformelement.reportvalidity() return value boolean example document.forms['myform'].addeventlistener('submit', function() { document.forms['myform'].reportvalidity(); }, false); specifications specification status
comment html living standardthe definition of 'htmlformelement.reportvalidity()' in that specification.
HTMLFormElement.requestSubmit() - Web APIs
let myform = document.queryselector("form"); let submitbutton = myform.queryselector("#main-submit"); if (myform.requestsubmit) { if (submitbutton) { myform.requestsubmit(submitbutton); } else { myform.requestsubmit(); } } else { myform.submit(); } specifications specification status
comment html living standardthe definition of 'requestsubmit()' in that specification.
HTMLFormElement.reset() - Web APIs
syntax htmlformelement.reset() example document.getelementbyid('myform').reset(); specifications specification status
comment html living standardthe definition of 'htmlformelement: reset' in that specification.
HTMLFormElement: reset event - Web APIs
time stamp: ${event.timestamp}`; } const form = document.getelementbyid('form'); const log = document.getelementbyid('log'); form.addeventlistener('reset', logreset); result specifications specification status
comment html living standardthe definition of 'reset' in that specification.
HTMLFormElement.submit() - Web APIs
syntax htmlformelement.submit() example document.forms["myform"].submit(); specifications specification status
comment html living standardthe definition of 'htmlformelement: submit' in that specification.
HTMLFormElement: submit event - Web APIs
time stamp: ${event.timestamp}`; event.preventdefault(); } const form = document.getelementbyid('form'); const log = document.getelementbyid('log'); form.addeventlistener('submit', logsubmit); result specifications specification status
comment html living standardthe definition of 'submit' in that specification.
HTMLFormElement.target - Web APIs
syntax string = htmlformelement.target htmlformelement.target = string example myform.target = document.frames[1].name; specifications specification status
comment html living standardthe definition of 'htmlformelement: target' in that specification.
HTMLFormElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmlformelement' in that specification.
HTMLFrameSetElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmlframesetelement' in that specification.
HTMLHRElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmlhrelement' in that specification.
HTMLHeadElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmlheadelement' in that specification.
HTMLHeadingElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmlheadingelement' in that specification.
HTMLHtmlElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmlhtmlelement' in that specification.
HTMLHyperlinkElementUtils.hash - Web APIs
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.
HTMLHyperlinkElementUtils.host - Web APIs
eveloper.mozilla.org" anchor.href = "https://developer.mozilla.org:443/htmlhyperlinkelementutils.host" anchor.host == "developer.mozilla.org" // the port number is not included because 443 is the scheme's default port anchor.href = "https://developer.mozilla.org:4097/htmlhyperlinkelementutils.host" anchor.host == "developer.mozilla.org:4097" specifications specification status
comment html living standardthe definition of 'htmlhyperlinkelementutils.host' in that specification.
HTMLHyperlinkElementUtils.hostname - Web APIs
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.
HTMLHyperlinkElementUtils.href - Web APIs
yntax string = object.href; object.href = string; examples // lets imagine an <a id="myanchor" href="https://developer.mozilla.org/htmlhyperlinkelementutils/href"> element is in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.href; // returns: 'https://developer.mozilla.org/htmlhyperlinkelementutils/href' specifications specification status
comment html living standardthe definition of 'htmlhyperlinkelementutils.href' in that specification.
HTMLHyperlinkElementUtils.origin - Web APIs
syntax string = object.origin; examples // on this page, returns the origin var result = window.location.origin; // returns:'https://developer.mozilla.org' specifications specification status
comment html living standardthe definition of 'htmlhyperlinkelementutils.origin' in that specification.
HTMLHyperlinkElementUtils.password - Web APIs
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.
HTMLHyperlinkElementUtils.pathname - Web APIs
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.
HTMLHyperlinkElementUtils.port - Web APIs
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.
HTMLHyperlinkElementUtils.protocol - Web APIs
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.
HTMLHyperlinkElementUtils.search - Web APIs
myanchor" href="https://developer.mozilla.org/docs/htmlhyperlinkelementutils.search?q=123"> element be in the document var anchor = document.getelementbyid("myanchor"); var querystring = anchor.search; // returns:'?q=123' // further parsing: let params = new urlsearchparams(querystring); let q = parseint(params.get("q")); // is the number 123 specifications specification status
comment html living standardthe definition of 'htmlhyperlinkelementutils.search' in that specification.
HTMLHyperlinkElementUtils.toString() - Web APIs
tring = object.tostring(); examples // let's imagine an <a id="myanchor" href="https://developer.mozilla.org/docs/htmlhyperlinkelementutils/tostring"> element is in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.tostring(); // returns: 'https://developer.mozilla.org/docs/htmlhyperlinkelementutils/tostring' specifications specification status
comment html living standard living standard ...
HTMLHyperlinkElementUtils.username - Web APIs
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.
contentDocument - Web APIs
specifications specification status
comment html living standardthe definition of 'htmliframeelement: contentdocument' in that specification.
HTMLIFrameElement.csp - Web APIs
specifications specification status
comment content security policy: embedded enforcementthe definition of 'csp' in that specification.
HTMLIFrameElement.referrerPolicy - Web APIs
examples var iframe = document.createelement("iframe"); iframe.src = "/"; iframe.referrerpolicy = "unsafe-url"; var body = document.getelementsbytagname("body")[0]; body.appendchild(iframe); // fetch the image using the complete url as the referrer specifications specification status
comment referrer policythe definition of 'referrerpolicy attribute' in that specification.
HTMLIFrameElement.src - Web APIs
syntax refstr = iframeelt.src; iframeelt.src= refstr; example var iframe = document.createelement("iframe"); iframe.src = "/"; var body = document.getelementsbytagname("body")[0]; body.appendchild(iframe); // fetch the image using the complete url as the referrer specifications specification status
comment html living standardthe definition of 'htmliframeelement: src' in that specification.
srcdoc - Web APIs
examples var iframe = document.createelement("iframe"); iframe.srcdoc = `<!doctype html><p>hello world!</p>`; document.body.appendchild(iframe); specifications specification status
comment html living standardthe definition of 'htmliframeelement: srcdoc' in that specification.
HTMLIFrameElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmliframeelement' in that specification.
Image() - Web APIs
examples var myimage = new image(100, 200); myimage.src = 'picture.jpg'; document.body.appendchild(myimage); this would be the equivalent of defining the following html tag inside the <body>: <img width="100" height="200" src="picture.jpg"> specifications specification status
comment html living standardthe definition of 'image()' in that specification.
HTMLImageElement.alt - Web APIs
specifications specification status
comment html living standardthe definition of 'htmlimageelement.alt' in that specification.
HTMLImageElement.border - Web APIs
ollowing html: <img src="image.png" border="2"> the following will provide the same appearance using css instead of this obsolete property: <img src="image.png" style="border: 2px;"> you can further provide additional information to change the color and other features of the border: <img src="image.png" style="border: dashed 2px #333388;"> specifications specification status
comment html living standardthe definition of 'htmlimageelement.border' in that specification.
HTMLImageElement.complete - Web APIs
*/ function fixredeyecommand() { if (lightboxelem.style.display === "block" && lightboximgelem.complete) { fixredeye(lightboximgelem); } else { /* can't start doing this until the image is fully loaded */ } } specifications specification status
comment html living standardthe definition of 'htmlimageelement.complete' in that specification.
HTMLImageElement.crossOrigin - Web APIs
thanks for reading me.</p> </div> css body { font: 1.125rem/1.5, helvetica, sans-serif; } .container { display: flow-root; width: 37.5em; border: 1px solid #d2d2d2; } img { float: left; padding-right: 1.5em; } output { background: rgba(100, 100, 100, 0.1); font-family: courier, monospace; width: 95%; } result specifications specification status
comment html living standardthe definition of 'htmlimageelement.crossorigin' in that specification.
HTMLImageElement.currentSrc - Web APIs
-400px.png 400w" sizes="(max-width: 400px) 50%, 90%"> javascript var clockimage = document.queryselector("img"); let p = document.createelement("p"); if (!clockimage.currentsrc.endswith("200px.png")) { p.innertext = "using the 200px image."; } else { p.innertext = "using the 400px image!"; } document.body.appendchild(p); result specifications specification status
comment html living standardthe definition of 'htmlimageelement.currentsrc' in that specification.
HTMLImageElement.decoding - Web APIs
examples var img = new image(); img.decoding = 'sync'; img.src = 'img/logo.png'; specifications specification status
comment html living standardthe definition of 'decoding' in that specification.
HTMLImageElement.loading - Web APIs
{ const list = document.queryselector("div.photo-list"); let newitem = document.createelement("div"); newitem.classname = "photo-item"; let newimg = document.createelement("img"); newimg.loading = "lazy"; newimg.width = 320; newimg.height = 240; newimg.src = url; newitem.appendchild(newimg); list.appendchild(newitem); } specifications specification status
comment html living standardthe definition of 'htmlimageelement.loading' in that specification.
HTMLImageElement.name - Web APIs
specifications specification status
comment html living standardthe definition of 'htmlimageelement.name' in that specification.
HTMLImageElement.referrerPolicy - Web APIs
examples var img = new image(); img.src = 'img/logo.png'; img.referrerpolicy = 'origin'; var div = document.getelementbyid('divaround'); div.appendchild(img); // fetch the image using the origin as the referrer specifications specification status
comment referrer policythe definition of 'referrerpolicy attribute' in that specification.
HTMLImageElement.src - Web APIs
html result specifications specification status
comment html living standardthe definition of 'htmlimageelement.src' in that specification.
HTMLImageElement.x - Web APIs
e css defining the appearance of the table: .group1 { background-color: #d7d9f2; } table { border-collapse: collapse; border: 2px solid rgb(100, 100, 100); font-family: sans-serif; } td, th { border: 1px solid rgb(100, 100, 100); padding: 10px 14px; } td > img { max-width: 4em; } result the resulting table looks like this: specifications specification status
comment css object model (cssom) view modulethe definition of 'htmlimageelement.x' in that specification.
HTMLImageElement.y - Web APIs
e css defining the appearance of the table: .group1 { background-color: #d7d9f2; } table { border-collapse: collapse; border: 2px solid rgb(100, 100, 100); font-family: sans-serif; } td, th { border: 1px solid rgb(100, 100, 100); padding: 10px 14px; } td > img { max-width: 4em; } result the resulting table looks like this: specifications specification status
comment css object model (cssom) view modulethe definition of 'htmlimageelement.y' in that specification.
HTMLImageElement - Web APIs
le var img1 = new image(); // image constructor img1.src = 'image1.png'; img1.alt = 'alt'; document.body.appendchild(img1); var img2 = document.createelement('img'); // use dom htmlimageelement img2.src = 'image2.jpg'; img2.alt = 'alt text'; document.body.appendchild(img2); // using first image in the document alert(document.images[0].src); specifications specification status
comment css object model (cssom) view modulethe definition of 'extensions to htmlimageelement' in that specification.
HTMLInputElement: invalid event - Web APIs
mber" min="1" max="10" required></label></li> <li><input type="submit" value="submit"></li> </ul> </form><p id="log"></p> javascript const input = document.queryselector('input') const log = document.getelementbyid('log') input.addeventlistener('invalid', logvalue) function logvalue(e) { log.textcontent += e.target.value } result specifications specification status
comment html living standardthe definition of 'invalid event' in that specification.
HTMLInputElement.labels - Web APIs
1" for="test">label 1</label> <input id="test"/> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const input = document.getelementbyid("test"); for(var i = 0; i < input.labels.length; i++) { console.log(input.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status
comment html living standardthe definition of 'labels' in that specification.
HTMLInputElement.select() - Web APIs
in browsers where it is not supported, it is possible to replace it with a call to htmlinputelement.setselectionrange() with parameters 0 and the input's value length: <input onclick="this.select();" value="sample text" /> <!-- equivalent to --> <input onclick="this.setselectionrange(0, this.value.length);" value="sample text" /> specifications specification status
comment html living standardthe definition of 'select' in that specification.
HTMLInputElement.setRangeText() - Web APIs
html <input type="text" id="text-box" size="30" value="this text has not been updated."> <button onclick="selecttext()">update text</button> javascript function selecttext() { const input = document.getelementbyid('text-box'); input.focus(); input.setrangetext('already', 14, 17, 'select'); } result specifications specification status
comment html living standardthe definition of 'htmlinputelement.setselectionrange()' in that specification.
HTMLInputElement.setSelectionRange() - Web APIs
html <input type="text" id="text-box" size="20" value="mozilla"> <button onclick="selecttext()">select text</button> javascript function selecttext() { const input = document.getelementbyid('text-box'); input.focus(); input.setselectionrange(2, 5); } result specifications specification status
comment html living standardthe definition of 'htmlinputelement.setselectionrange()' in that specification.
HTMLInputElement.webkitdirectory - Web APIs
lementbyid("filepicker").addeventlistener("change", function(event) { let output = document.getelementbyid("listing"); let files = event.target.files; for (let i=0; i<files.length; i++) { let item = document.createelement("li"); item.innerhtml = files[i].webkitrelativepath; output.appendchild(item); }; }, false); result specifications specification status
comment file and directory entries apithe definition of 'webkitdirectory' in that specification.
HTMLInputElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmlinputelement' in that specification.
HTMLLIElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmllielement' in that specification.
HTMLLabelElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmllabelelement' in that specification.
HTMLLegendElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmllegendelement' in that specification.
HTMLLinkElement.referrerPolicy - Web APIs
syntax domstring htmllinkelement.referrerpolicy example var links = document.getelementsbytagname("link"); links[0].referrerpolicy; // "no-referrer" specifications specification status
comment referrer policythe definition of 'referrerpolicy attribute' in that specification.
HTMLLinkElement.rel - Web APIs
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.
HTMLLinkElement.relList - Web APIs
syntax var relstr = linkelt.rellist; example var links = document.getelementsbytagname("link"); var length = links.length; for (var i = 0; i < length; i++) { var list = links[i].rellist; var listlength = list.length; console.log("new link found."); for (var j = 0; j < listlength; j++) { console.log(list[j]); } } specifications specification status
comment html living standardthe definition of 'rellist' in that specification.
HTMLLinkElement - Web APIs
specifications specification status
comment preload candidate recommendation defines <link rel="preload">, and the as property.
HTMLMapElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmlmapelement' in that specification.
HTMLMarqueeElement - Web APIs
examples <marquee>this text will scroll from right to left</marquee> <marquee direction="up">this text will scroll from bottom to top</marquee> <marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid"> <marquee behavior="alternate"> this text will bounce </marquee> </marquee> specifications specification status
comment html living standardthe definition of 'htmlmarqueeelement' in that specification.
HTMLMediaElement.audioTracks - Web APIs
var video = document.getelementbyid("video"); for (var i = 0; i < video.audiotracks.length; i += 1) { video.audiotracks[i].enabled = false; } specifications specification status
comment html living standardthe definition of 'htmlmediaelement.audiotracks' in that specification.
HTMLMediaElement.autoplay - Web APIs
<video id="video" controls> <source src="https://player.vimeo.com/external/250688977.sd.mp4?s=d14b1f1a971dde13c79d6e436b88a6a928dfe26b&profile_id=165"> </video> *** disable autoplay (recommended) *** false is the default value document.queryselector('#video').autoplay = false; specifications specification status
comment html living standardthe definition of 'htmlmediaelement.autoplay' in that specification.
HTMLMediaElement.buffered - Web APIs
example var obj = document.createelement('video'); console.log(obj.buffered); // timeranges { length: 0 } specifications specification status
comment html living standardthe definition of 'htmlmediaelement.buffered' in that specification.
HTMLMediaElement.canPlayType() - Web APIs
example var obj = document.createelement('video'); console.log(obj.canplaytype('video/mp4')); // "maybe" specifications specification status
comment html living standardthe definition of 'canplaytype' in that specification.
HTMLMediaElement.controls - Web APIs
example var obj = document.createelement('video'); obj.controls = true; specifications specification status
comment html living standardthe definition of 'htmlmediaelement.controls' in that specification.
HTMLMediaElement.controlsList - Web APIs
specifications specification status
comment controls list api: solution outline browser compatibility the compatibility table on this page is generated from structured data.
HTMLMediaElement.currentSrc - Web APIs
example var obj = document.createelement('video'); console.log(obj.currentsrc); // "" specifications specification status
comment html living standardthe definition of 'htmlmediaelement.currentsrc' in that specification.
HTMLMediaElement.defaultMuted - Web APIs
example var videoele = document.createelement('video'); videoele.defaultmuted = true; console.log(videoele.outerhtml); // <video muted=""></video> specifications specification status
comment html living standardthe definition of 'htmlmediaelement.defaultmuted' in that specification.
HTMLMediaElement.defaultPlaybackRate - Web APIs
example var obj = document.createelement('video'); console.log(obj.defaultplaybackrate); // 1 specifications specification status
comment html living standardthe definition of 'htmlmediaelement.defaultplaybackrate' in that specification.
HTMLMediaElement.disableRemotePlayback - Web APIs
(false means "not disabled", which means "enabled") example var obj = document.createelement('audio'); obj.disableremoteplayback = true; specifications specification status
comment remote playback apithe definition of 'disableremoteplayback' in that specification.
HTMLMediaElement.duration - Web APIs
examples var obj = document.createelement('video'); console.log(obj.duration); // nan specifications specification status
comment html living standardthe definition of 'htmlmediaelement.duration' in that specification.
HTMLMediaElement.ended - Web APIs
example var obj = document.createelement('video'); console.log(obj.ended); // false specifications specification status
comment html living standardthe definition of 'htmlmediaelement.ended' in that specification.
HTMLMediaElement.error - Web APIs
var videoelement = document.createelement('video'); videoelement.onerror = function() { console.log("error " + videoelement.error.code + "; details: " + videoelement.error.message); } videoelement.src = "https://example.com/bogusvideo.mp4"; specifications specification status
comment html living standardthe definition of 'htmlmediaelement.error' in that specification.
HTMLMediaElement.fastSeek() - Web APIs
let myvideo = document.getelementbyid("myvideoelement"); myvideo.fastseek(20); specifications specification status
comment html living standardthe definition of 'fastseek()' in that specification.
HTMLMediaElement.load() - Web APIs
var mediaelem = document.queryselector("video"); mediaelem.load(); specifications specification status
comment html living standardthe definition of 'htmlmediaelement.load()' in that specification.
HTMLMediaElement.loop - Web APIs
example var obj = document.createelement('video'); obj.loop = true; // true specifications specification status
comment html living standardthe definition of 'htmlmediaelement.loop' in that specification.
HTMLMediaElement.muted - Web APIs
example var obj = document.createelement('video'); console.log(obj.muted); // false specifications specification status
comment html living standardthe definition of 'htmlmediaelement.muted' in that specification.
HTMLMediaElement.paused - Web APIs
example var obj = document.createelement('video'); console.log(obj.paused); // true specifications specification status
comment html living standardthe definition of 'htmlmediaelement.paused' in that specification.
HTMLMediaElement.playbackRate - Web APIs
(default: 1.0) example var obj = document.createelement('video'); console.log(obj.playbackrate); // expected output: 1 specifications specification status
comment html living standardthe definition of 'htmlmediaelement.playbackrate' in that specification.
HTMLMediaElement.readyState - Web APIs
<audio id="example" preload="auto"> <source src="sound.ogg" type="audio/ogg" /> </audio> var obj = document.getelementbyid('example'); obj.addeventlistener('loadeddata', function() { if(obj.readystate >= 2) { obj.play(); } }); specifications specification status
comment html living standardthe definition of 'htmlmediaelement.readystate' in that specification.
HTMLMediaElement.seekable - Web APIs
examples var video = document.queryselector("video"); var timerangesobject = video.seekable; var timeranges = []; //go through the object and output an array for (let count = 0; count < timerangesobject.length; count ++) { timeranges.push([timerangesobject.start(count), timerangesobject.end(count)]); } specifications specification status
comment html living standardthe definition of 'htmlmediaelement' in that specification.
HTMLMediaElement.setSinkId() - Web APIs
sion to use the requested device examples const devices = await navigator.mediadevices.enumeratedevices(); const audiodevices = devices.filter(device => device.kind === 'audiooutput'); const audio = document.createelement('audio'); await audio.setsinkid(audiodevices[0].deviceid); console.log('audio is being played on ' + audio.sinkid); specifications specification status
comment audio output devices apithe definition of 'sinkid' in that specification.
HTMLMediaElement.sinkId - Web APIs
syntax var sinkid = htmlmediaelement.sinkid specifications specification status
comment audio output devices apithe definition of 'sinkid' in that specification.
HTMLMediaElement.src - Web APIs
example var obj = document.createelement('video'); console.log(obj.src); // "" specifications specification status
comment html living standardthe definition of 'htmlmediaelement.src' in that specification.
HTMLMediaElement.srcObject - Web APIs
sers may not have srcobject if ('srcobject' in video) { try { video.srcobject = mediasource; } catch (err) { if (err.name != "typeerror") { throw err; } // even if they do, they may only support mediastream video.src = url.createobjecturl(mediasource); } } else { video.src = url.createobjecturl(mediasource); } specifications specification status
comment html living standardthe definition of 'srcobject' in that specification.
HTMLMediaElement.volume - Web APIs
example var obj = document.createelement('audio'); console.log(obj.volume); // 1 obj.volume = 0.75; specifications specification status
comment html living standardthe definition of 'htmlmediaelement.volume' in that specification.
HTMLMediaElement - Web APIs
waiting fired when playback has stopped because of a temporary lack of data specifications specification status
comment encrypted media extensionsthe definition of 'encrypted media extensions' in that specification.
HTMLMenuElement - Web APIs
ale mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmenuelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} propertiesthis interface has no properties, but inherits properties from: htmlelementmethodsthis interface has no methods, but inherits methods from: htmlelement specifications specification status
comment html living standardthe definition of 'htmlmenuelement' in that specification.
HTMLMenuItemElement - Web APIs
mono,monospace" fill="#4d4e53" text-anchor="middle" alignment-baseline="middle">htmlmenuitemelement</text></a></svg></div> a:hover text { fill: #0095dd; pointer-events: all;} propertiesthis interface has no properties, but inherits properties from: htmlelementmethodsthis interface has no methods, but inherits methods from: htmlelement specifications specification status
comment html 5.1the definition of 'htmlmenuitemelement' in that specification.
HTMLMetaElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmlmetaelement' in that specification.
HTMLMeterElement.labels - Web APIs
d="test" min="0" max="100" value="70">70</meter> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const meter = document.getelementbyid("test"); for(var i = 0; i < meter.labels.length; i++) { console.log(meter.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status
comment html living standardthe definition of 'labels' in that specification.
HTMLMeterElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmlmeterelement' in that specification.
HTMLModElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmlanchorelement' in that specification.
HTMLOListElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmlolistelement' in that specification.
HTMLObjectElement.typeMustMatch - Web APIs
syntax var mustmatch = obj.typemustmatch; obj.typemustmatch = mustmatch; example html <object id="obj" data="move.swf" type="application/x-shockwave-flash" typemustmatch></object> javascript let obj = document.getelementbyid('obj'); console.log(obj.typemustmatch); specifications specification status
comment html5the definition of 'htmlobjectelement' in that specification.
HTMLObjectElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmlobjectelement' in that specification.
HTMLOptGroupElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmloptgroupelement' in that specification.
Option() - Web APIs
ttribute } if (element == 'two') { s[s.options.length] = new option(element, s.options.length, false, true); // just will be selected in "view" } }); /* result <select id="s"> <option value="0">zero</option> <option value="1" selected="">one</option> <option value="2">two</option> // user will see this as 'selected' </select> */ specification specification status
comment html5 the definition of 'option' in that specification.
HTMLOptionElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmloptionelement' in that specification.
HTMLOptionsCollection - Web APIs
specifications specification status
comment html living standardthe definition of 'htmloptionscollection' in that specification.
HTMLElement.blur() - Web APIs
" value="sample text"> <br><br> <button type="button" onclick="focusinput()">click me to gain focus</button> <button type="button" onclick="blurinput()">click me to lose focus</button> javascript function focusinput() { document.getelementbyid('mytext').focus(); } function blurinput() { document.getelementbyid('mytext').blur(); } result specification specification status
comment html living standardthe definition of 'blur' in that specification.
HTMLOrForeignElement.dataset - Web APIs
set.dateofbirth === '' // set the data attribute el.dataset.dateofbirth = '1960-10-03'; // result: el.dataset.dateofbirth === 1960-10-03 delete el.dataset.dateofbirth; // result: el.dataset.dateofbirth === undefined // 'somedataattr' in el.dataset === false el.dataset.somedataattr = 'mydata'; // result: 'somedataattr' in el.dataset === true specifications specification status
comment html living standardthe definition of 'htmlelement.dataset' in that specification.
HTMLElement.focus() - Web APIs
nclick="focusscrollmethod()">click me to focus on the button!</button> <button type="button" onclick="focusnoscrollmethod()">click me to focus on the button without scrolling!</button> <div id="container" style="height: 1000px; width: 1000px;"> <button type="button" id="mybutton" style="margin-top: 500px;">click me!</button> </div> result specification specification status
comment html living standardthe definition of 'focus' in that specification.
HTMLOrForeignElement.tabIndex - Web APIs
syntax element.tabindex = index; var index = element.tabindex; value index is an integer example const b1 = document.getelementbyid('button1'); b1.tabindex = 1; specifications specification status
comment html living standardthe definition of 'tabindex' in that specification.
HTMLOrForeignElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmlorforeignelement' in that specification.
HTMLOutputElement.labels - Web APIs
l 1</label> <output id="test">output</output> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const output = document.getelementbyid("test"); for(var i = 0; i < output.labels.length; i++) { console.log(output.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status
comment html living standardthe definition of 'labels' in that specification.
HTMLOutputElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmloutputelement' in that specification.
HTMLParagraphElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmlparagraphelement' in that specification.
HTMLParamElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmlparamelement' in that specification.
HTMLPictureElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmlpictureelement' in that specification.
HTMLPreElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmlpreelement' in that specification.
HTMLProgressElement.labels - Web APIs
st" value="70" max="100">70%</progress> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const progress = document.getelementbyid("test"); for(var i = 0; i < progress.labels.length; i++) { console.log(progress.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status
comment html living standardthe definition of 'labels' in that specification.
HTMLProgressElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmlprogresselement' in that specification.
HTMLQuoteElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmlquoteelement' in that specification.
HTMLScriptElement.referrerPolicy - Web APIs
examples var scriptelem = document.createelement("script"); scriptelem.src = "/"; scriptelem.referrerpolicy = "unsafe-url"; document.body.appendchild(script); specifications specification status
comment referrer policythe definition of 'referrerpolicy attribute' in that specification.
HTMLSelectElement.add() - Web APIs
: <select id="existinglist"> <option value="1">option: value 1</option> <option value="2">option: value 2</option> </select> and changes it to: <select id="existinglist"> <option value="1">option: value 1</option> <option value="3">option: value 3</option> <option value="2">option: value 2</option> </select> */ specifications specification status
comment html living standardthe definition of 'htmlselectelement.add()' in that specification.
HTMLSelectElement.autofocus - Web APIs
us; // get the value of autofocus aselectelement.autofocus = abool; // set the value of autofocus example html <select id="myselect" autofocus> <option>option 1</option> <option>option 2</option> </select> javascript // check if the autofocus attribute on the <select> var hasautofocus = document.getelementbyid('myselect').autofocus; specifications specification status
comment html living standardthe definition of 'autofocus' in that specification.
HTMLSelectElement.checkValidity() - Web APIs
syntax var result = selectelt.checkvalidity(); specifications specification status
comment html living standardthe definition of 'htmlselectelement.checkvalidity()' in that specification.
HTMLSelectElement.disabled - Web APIs
select> javascript var allowdrinkscheckbox = document.getelementbyid("allow-drinks"); var drinkselect = document.getelementbyid("drink-select"); allowdrinkscheckbox.addeventlistener("change", function(event) { if (event.target.checked) { drinkselect.disabled = false; } else { drinkselect.disabled = true; } }, false); result specifications specification status
comment html living standardthe definition of 'disabled' in that specification.
HTMLSelectElement.form - Web APIs
the below code gives all select elements in a particular form a css class of "selectclass": <script type="text/javascript"> var form_element = document.getelementbyid('subscribe_form'); var vist = form_element.style; if (vist.display=='' || vist.display=='none') { vist.display = 'block'; } else { vist.display = 'none'; } </script> specifications specification status
comment html living standardthe definition of 'form' in that specification.
HTMLSelectElement.item() - Web APIs
examples html <form> <select id="myformcontrol" type="textarea"> <option id="o1">opt 1</option> <option id="o2">opt 2</option> </select> </form> javascript // returns the htmloptionelement representing #o2 elem1 = document.forms[0]['myformcontrol'][1]; specifications specification status
comment html living standardthe definition of 'htmlselectelement.item()' in that specification.
HTMLSelectElement.labels - Web APIs
<option value="2">option 2</option> </select> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const select = document.getelementbyid("test"); for(var i = 0; i < select.labels.length; i++) { console.log(select.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status
comment html living standardthe definition of 'labels' in that specification.
HTMLSelectElement.namedItem() - Web APIs
example html <form> <select id="myformcontrol"> <option id="o1">opt 1</option> <option id="o2">opt 2</option> </select> </form> javascript elem1 = document.forms[0]['myformcontrol']['o1']; // returns the htmloptionelement representing #o1 specifications specification status
comment html living standardthe definition of 'htmlselectelement.nameditem()' in that specification.
HTMLSelectElement.options - Web APIs
"test"> <option value="1">option 1</option> <option value="2">option 2</option> </select> javascript window.addeventlistener("domcontentloaded", function() { const select = document.getelementbyid("test"); for(var i = 0; i < select.options.length; i++) { console.log(select.options[i].label); // "option 1" and "option 2" } }); specifications specification status
comment html living standardthe definition of 'options' in that specification.
HTMLSelectElement.remove() - Web APIs
stinglist"> <option value="1">option: value 1</option> <option value="2">option: value 2</option> <option value="3">option: value 3</option> </select> and changes it to: <select id="existinglist" name="existinglist"> <option value="1">option: value 1</option> <option value="3">option: value 3</option> </select> */ specifications specification status
comment html living standardthe definition of 'htmlselectelement.remove()' in that specification.
HTMLSelectElement.selectedIndex - Web APIs
ion>option e</option> </select> javascript var selectelem = document.getelementbyid('select') var pelem = document.getelementbyid('p') // when a new <option> is selected selectelem.addeventlistener('change', function() { var index = selectelem.selectedindex; // add that data to the <p> pelem.innerhtml = 'selectedindex: ' + index; }) specifications specification status
comment html living standardthe definition of 'htmlselectelement' in that specification.
HTMLSelectElement.selectedOptions - Web APIs
result the resulting content looks like this in action: specifications specification status
comment html living standardthe definition of 'htmlselectelement.selectedoptions' in that specification.
HTMLSelectElement.type - Web APIs
example switch (select.type) { case 'select-multiple': // multiple values may be selected break; case 'select-one': // only one value may be selected break; default: // non-standard value (or this isn't a select element) } specifications specification status
comment html living standardthe definition of 'htmlselectelement' in that specification.
HTMLSelectElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmlselectelement' in that specification.
HTMLSlotElement.assignedElements() - Web APIs
examples let slots = this.shadowroot.queryselector('slot'); let elements = slots.assignedelements({flatten: true}); specifications specification status
comment html living standardthe definition of 'assignedelements()' in that specification.
HTMLSlotElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmlslotelement' in that specification.
HTMLSourceElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmlsourceelement' in that specification.
HTMLSpanElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmlspanelement' in that specification.
HTMLStyleElement.media - Web APIs
="screen" /> <style id="inlinestyle" rel="stylesheet" type="text/css" media="screen, print"> p { color: blue; } </style> </head> <body> <script> alert('linkedstyle: ' + document.getelementbyid('linkedstyle').media); // 'screen' alert('inlinestyle: ' + document.getelementbyid('inlinestyle').media); // 'screen, print' </script> </body> </html> specifications specification status
comment html living standardthe definition of 'htmlstyleelement' in that specification.
HTMLStyleElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmlstyleelement' in that specification.
HTMLTableCellElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmltablecellelement' in that specification.
HTMLTableColElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmltablecolelement' in that specification.
HTMLTableElement.caption - Web APIs
syntax var string = tableelement.caption; example if (table.caption) { // do something with the caption } specifications specification status
comment html living standardthe definition of 'htmltableelement.caption' in that specification.
HTMLTableElement.createCaption() - Web APIs
html <table> <tr><td>cell 1.1</td><td>cell 1.2</td><td>cell 1.3</td></tr> <tr><td>cell 2.1</td><td>cell 2.2</td><td>cell 2.3</td></tr> </table> javascript let table = document.queryselector('table'); let caption = table.createcaption(); caption.textcontent = 'this caption was created by javascript!'; result specifications specification status
comment html living standardthe definition of 'htmltableelement: createcaption' in that specification.
HTMLTableElement.createTFoot() - Web APIs
syntax htmltablesectionelement = table.createtfoot(); return value htmltablesectionelement example let myfoot = mytable.createtfoot(); // now this should be true: myfoot == mytable.tfoot specifications specification status
comment html living standardthe definition of 'htmltableelement: createtfoot' in that specification.
HTMLTableElement.createTHead() - Web APIs
syntax htmltablesectionelement = table.createthead(); return value htmltablesectionelement example let myhead = mytable.createthead(); // now this should be true: myhead == mytable.thead specifications specification status
comment html living standardthe definition of 'htmltableelement: createthead' in that specification.
HTMLTableElement.deleteCaption() - Web APIs
html <table> <caption>this caption will be deleted!</caption> <tr><td>cell 1.1</td><td>cell 1.2</td></tr> <tr><td>cell 2.1</td><td>cell 2.2</td></tr> </table> javascript let table = document.queryselector('table'); table.deletecaption(); result specifications specification status
comment html living standardthe definition of 'htmltableelement: deletecaption' in that specification.
HTMLTableElement.deleteRow() - Web APIs
html <table> <tr><td>cell 1.1</td><td>cell 1.2</td><td>cell 1.3</td></tr> <tr><td>cell 2.1</td><td>cell 2.2</td><td>cell 2.3</td></tr> <tr><td>cell 3.1</td><td>cell 3.2</td><td>cell 3.3</td></tr> </table> javascript let table = document.queryselector('table'); // delete second row table.deleterow(1); result specifications specification status
comment html living standardthe definition of 'htmltableelement: deleterow' in that specification.
HTMLTableElement.deleteTFoot() - Web APIs
html <table> <thead><th>name</th><th>score</th></thead> <tr><td>bob</td><td>541</td></tr> <tr><td>jim</td><td>225</td></tr> <tfoot><th>average</th><td>383</td></tfoot> </table> javascript let table = document.queryselector('table'); table.deletetfoot(); result specifications specification status
comment html living standardthe definition of 'htmltableelement: deletetfoot' in that specification.
HTMLTableElement.deleteTHead() - Web APIs
html <table> <thead><th>name</th><th>occupation</th></thead> <tr><td>bob</td><td>plumber</td></tr> <tr><td>jim</td><td>roofer</td></tr> </table> javascript let table = document.queryselector('table'); table.deletethead(); result specifications specification status
comment html living standardthe definition of 'htmltableelement: deletethead' in that specification.
HTMLTableElement.insertRow() - Web APIs
a row at the end of the table let newrow = tableref.insertrow(-1); // insert a cell in the row at index 0 let newcell = newrow.insertcell(0); // append a text node to the cell let newtext = document.createtextnode('new bottom row'); newcell.appendchild(newtext); } // call addrow() with the table's id addrow('my-table'); result specifications specification status
comment html living standardthe definition of 'htmltableelement.insertrow()' in that specification.
HTMLTableElement.rows - Web APIs
specifications specification status
comment html living standardthe definition of 'htmltableelement: rows' in that specification.
HTMLTableElement.tBodies - Web APIs
mytable.tbodies.length; specifications specification status
comment html living standardthe definition of 'htmltableelement: tbodies' in that specification.
HTMLTableElement.tFoot - Web APIs
} specifications specification status
comment html living standardthe definition of 'htmltableelement.tfoot' in that specification.
HTMLTableElement.tHead - Web APIs
} specifications specification status
comment html living standardthe definition of 'htmltableelement.thead' in that specification.
HTMLTableElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmltableelement' in that specification.
HTMLTableRowElement.insertCell() - Web APIs
a row at the end of the table let newrow = tableref.insertrow(-1); // insert a cell in the row at index 0 let newcell = newrow.insertcell(0); // append a text node to the cell let newtext = document.createtextnode('new bottom row'); newcell.appendchild(newtext); } // call addrow() with the table's id addrow('my-table'); result specifications specification status
comment html living standardthe definition of 'htmltablerowelement.insertcell()' in that specification.
HTMLTableRowElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmltablerowelement' in that specification.
HTMLTemplateElement.content - Web APIs
syntax var documentfragment = templateelement.content example var templateelement = document.queryselector("#foo"); var documentfragment = templateelement.content.clonenode(true); specifications specification status
comment html living standardthe definition of 'htmltemplateelement interface' in that specification.
HTMLTemplateElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmltemplateelement interface' in that specification.
HTMLTextAreaElement.labels - Web APIs
textarea id="test">some text</textarea> <label id="label2" for="test">label 2</label> javascript window.addeventlistener("domcontentloaded", function() { const textarea = document.getelementbyid("test"); for(var i = 0; i < textarea.labels.length; i++) { console.log(textarea.labels[i].textcontent); // "label 1" and "label 2" } }); specifications specification status
comment html living standardthe definition of 'labels' in that specification.
HTMLTimeElement.dateTime - Web APIs
p12dt7h12m13.45s p12dt7h12m13.455s pt7h12m13s pt7h12m13.2s pt7h12m13.56s pt7h12m13.999s 7d 5h 24m 13s syntax datetimestring = timeelt.datetime; timeelt.datetime = datetimestring example // assumes there is <time id="t"> element in the html var t = document.getelementbyid("t"); t.datetime = "6w 5h 34m 5s"; specifications specification status
comment html living standardthe definition of 'htmltimeelement' in that specification.
HTMLTimeElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmltimeelement' in that specification.
HTMLTitleElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmltitleelement' in that specification.
HTMLTrackElement.src - Web APIs
example // coming soon specifications specification status
comment html living standardthe definition of 'htmltrackelement.src' in that specification.
HTMLTrackElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmltrackelement' in that specification.
HTMLUListElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmlulistelement' in that specification.
HTMLUnknownElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmlunknownelement' in that specification.
HTMLVideoElement.getVideoPlaybackQuality() - Web APIs
this value includes any dropped or corrupted frames, so it's not the same as "total number of frames played." var videoelem = document.getelementbyid("my_vid"); var counterelem = document.getelementbyid("counter"); var quality = videoelem.getvideoplaybackquality(); counterelem.innertext = quality.totalvideoframes; specifications specification status
comment media playback qualitythe definition of 'htmlvideoelement.getvideoplaybackquality()' in that specification.
HTMLVideoElement - Web APIs
specifications specification status
comment html living standardthe definition of 'htmlvideoelement' in that specification.
The HTML DOM API - Web APIs
items marked with "*" are required.</p> <form action="" method="get"> <p> <label for="username" required>your name:</label> <input type="text" id="username"> (*) </p> <p> <label for="email">email:</label> <input type="email" id="useremail"> </p> <input type="submit" value="send" id="sendbutton"> </form> result specifications specification status
comment html living standard living standard whatwg html specification html5 recommendation no change from document object model (dom) level 2 html specification document object model (dom) level 2 html specification obsolete no change from document object model (dom) level 1 specification.
HTML Drag and Drop API - Web APIs
nts with the datatransfer interface copying and moving elements with the datatransferlistitem interface dragging and dropping files (firefox only): http://jsfiddle.net/9c2ef/ dragging and dropping files (all browsers): https://jsbin.com/hiqasek/ a parking project using the drag and drop api: https://park.glitch.me/ (you can edit here) specifications specification status
comment html living standard living standard see also drag operations dragging and dropping multiple items recommended drag types html5 living standard: drag and drop drag and drop interoperability data from caniuse ...
HashChangeEvent.newURL - Web APIs
example window.addeventlistener('hashchange', function(event) { console.log('hash changed to ' + event.newurl); }); specifications specification status
comment html living standardthe definition of 'hashchangeevent: newurl' in that specification.
HashChangeEvent.oldURL - Web APIs
example window.addeventlistener('hashchange', function(event) { console.log('hash changed from ' + event.oldurl); }); specifications specification status
comment html living standardthe definition of 'hashchangeevent: oldurl' in that specification.
HashChangeEvent - Web APIs
if ( newhash != oldhash && typeof window.onhashchange === "function" ) { // execute the handler window.onhashchange({ type: "hashchange", oldurl: oldurl, newurl: newurl }); oldurl = newurl; oldhash = newhash; } }, 100); })(window); specifications specification status
comment html living standardthe definition of 'hashchangeevent' in that specification.
Headers() - Web APIs
x-my-custom-header' : 'zeke are cool' }; var myheaders = new headers(httpheaders); you can now create another headers object, passing it the first headers object as its init object: var secondheadersobj = new headers(myheaders); secondheadersobj.get('content-type'); // would return 'image/jpeg' — it inherits it from the first headers object specifications specification status
comment fetchthe definition of 'headers()' in that specification.
Headers.delete() - Web APIs
var myheaders = new headers(); // currently empty you could add a header to this using headers.append: myheaders.append('content-type', 'image/jpeg'); myheaders.get('content-type'); // returns 'image/jpeg' you can then delete it again: myheaders.delete('content-type'); myheaders.get('content-type'); // returns null, as it has been deleted specifications specification status
comment fetchthe definition of 'delete()' in that specification.
Headers.get() - Web APIs
specifications specification status
comment fetchthe definition of 'get()' in that specification.
Headers.has() - Web APIs
e creating an empty headers object is simple: var myheaders = new headers(); // currently empty you could add a header to this using headers.append, then test for the existence of it using has(): myheaders.append('content-type', 'image/jpeg'); myheaders.has('content-type'); // returns true myheaders.has('accept-encoding'); // returns false specifications specification status
comment fetchthe definition of 'has()' in that specification.
Headers.set() - Web APIs
specifications specification status
comment fetchthe definition of 'set()' in that specification.
Headers - Web APIs
should return 'text/xml' the same can be achieved by passing an array of arrays or an object literal to the constructor: var myheaders = new headers({ 'content-type': 'text/xml' }); // or, using an array of arrays: myheaders = new headers([ ['content-type', 'text/xml'] ]); myheaders.get('content-type') // should return 'text/xml' specifications specification status
comment fetchthe definition of 'headers' in that specification.
History.back() - Web APIs
html <button id="go-back">go back!</button> javascript document.getelementbyid('go-back').addeventlistener('click', () => { history.back(); }); specifications specification status
comment html living standardthe definition of 'history.back()' in that specification.
History.forward() - Web APIs
html <button id='go-forward'>go forward!</button> javascript document.getelementbyid('go-forward').addeventlistener('click', e => { window.history.forward(); }) specifications specification status
comment html living standardthe definition of 'history' in that specification.
History.go() - Web APIs
to move back one page (the equivalent of calling back()): history.go(-1) to move forward a page, just like calling forward(): history.go(1) to move forward two pages: history.go(2); to move backwards by two pages: history.go(-2); and, finally either of the following statements will reload the current page: history.go(); history.go(0); specifications specification status
comment html living standardthe definition of 'history.go()' in that specification.
History.length - Web APIs
syntax const length = history.length specifications specification status
comment html living standardthe definition of 'history.length' in that specification.
History.pushState() - Web APIs
javascript const state = { 'page_id': 1, 'user_id': 5 } const title = '' const url = 'hello-world.html' history.pushstate(state, title, url) specifications specification status
comment html living standardthe definition of 'history.pushstate()' in that specification.
History.scrollRestoration - Web APIs
const scrollrestoration = history.scrollrestoration if (scrollrestoration === 'manual') { console.log('the location on the page is not restored, user will need to scroll manually.'); } prevent automatic page location restoration if (history.scrollrestoration) { history.scrollrestoration = 'manual'; } specifications specification status
comment html living standardthe definition of 'scroll restoration mode' in that specification.
History.state - Web APIs
console.log(`history.state after pushstate: ${history.state}`); specificationse specification status
comment html living standardthe definition of 'history.state' in that specification.
History - Web APIs
specifications specification status
comment html living standardthe definition of 'history' in that specification.
History API - Web APIs
title 2", "?page=2") history.replacestate({page: 3}, "title 3", "?page=3") history.back() // alerts "location: http://example.com/example.html?page=1, state: {"page":1}" history.back() // alerts "location: http://example.com/example.html, state: null" history.go(2) // alerts "location: http://example.com/example.html?page=3, state: {"page":3}" specifications specification status
comment html living standardthe definition of 'history' in that specification.
HkdfParams - Web APIs
specifications specification status
comment web cryptography apithe definition of 'subtlecrypto.hkdfparams' in that specification.
HmacImportParams - Web APIs
specifications specification status
comment web cryptography apithe definition of 'subtlecrypto.hmacimportparams' in that specification.
HmacKeyGenParams - Web APIs
specifications specification status
comment web cryptography apithe definition of 'subtlecrypto.hmackeygenparams' in that specification.
IDBCursor.advance() - Web APIs
{ var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.albumtitle + '</strong>, ' + cursor.value.year; list.appendchild(listitem); cursor.advance(2); } else { console.log('every other entry displayed.'); } }; }; specifications specification status
comment indexed database api 2.0the definition of 'advance()' in that specification.
IDBCursor.continue() - Web APIs
onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification status
comment indexed database api 2.0the definition of 'continue()' in that specification.
IDBCursor.continuePrimaryKey() - Web APIs
(lastprimarykey > cursor.primarykey) { cursor.continueprimarykey("javascript", lastprimarykey); return; } // update lastiteratedarticleid setlastiteratedarticleid(cursor.primarykey); // preload 5 articles into the unread list; unreadlist.push(cursor.value); if (++count < 5) { cursor.continue(); } }; specifications specification status
comment indexed database api draftthe definition of 'continueprimarykey()' in that specification.
IDBCursor.delete() - Web APIs
power windows is better.'); }; } else { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.albumtitle + '</strong>, ' + cursor.value.year; list.appendchild(listitem); } cursor.continue(); } else { console.log('entries displayed.'); } }; }; specifications specification status
comment indexed database api 2.0the definition of 'delete()' in that specification.
IDBCursor.direction - Web APIs
) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.albumtitle + '</strong>, ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.direction); cursor.continue(); } else { console.log('entries displayed backwards.'); } }; }; specifications specification status
comment indexed database api 2.0the definition of 'direction' in that specification.
IDBCursor.key - Web APIs
var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.key); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification status
comment indexed database api 2.0the definition of 'key' in that specification.
IDBCursor.primaryKey - Web APIs
cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.primarykey); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification status
comment indexed database api 2.0the definition of 'primarykey' in that specification.
IDBCursor.request - Web APIs
if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.albumtitle + '</strong>, ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.request); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status
comment indexed database api draftthe definition of 'request' in that specification.
IDBCursor.source - Web APIs
var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.source); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification status
comment indexed database api 2.0the definition of 'source' in that specification.
IDBCursor.update() - Web APIs
console.log('a better album year?'); }; }; const listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.albumtitle + '</strong>, ' + cursor.value.year; list.appendchild(listitem); cursor.continue(); } else { console.log('entries displayed.'); } }; }; specifications specification status
comment indexed database api 2.0the definition of 'update()' in that specification.
IDBCursor - Web APIs
.onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; } specifications specification status
comment indexed database api 2.0the definition of 'cursor' in that specification.
IDBCursorWithValue.value - Web APIs
var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.value); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification status
comment indexed database api 2.0the definition of 'source' in that specification.
IDBCursorWithValue - Web APIs
onsuccess = function(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification status
comment indexed database api 2.0the definition of 'idbcursorwithvalue' in that specification.
IDBDatabase.close() - Web APIs
db.close(); }; specification specification status
comment indexed database api 2.0the definition of 'close()' in that specification.
IDBDatabase.createObjectStore() - Web APIs
"minutes", { unique: false }); objectstore.createindex("day", "day", { unique: false }); objectstore.createindex("month", "month", { unique: false }); objectstore.createindex("year", "year", { unique: false }); objectstore.createindex("notified", "notified", { unique: false }); note.innerhtml += "<li>object store created.</li>"; }; specification specification status
comment indexed database api 2.0the definition of 'createobjectstore()' in that specification.
IDBDatabase.name - Web APIs
this is used a lot below db = dbopenrequest.result; // this line will log the name of the database, which should be "todolist" console.log(db.name); }; specifications specification status
comment indexed database api 2.0the definition of 'name' in that specification.
IDBDatabase.objectStoreNames - Web APIs
this is used a lot below db = dbopenrequest.result; // this line will log the version of the connected database, which should be // an object that looks like { ['my-store-name'] } console.log(db.objectstorenames); }; specifications specification status
comment indexed database api 2.0the definition of 'objectstorenames' in that specification.
IDBDatabase.onabort - Web APIs
"minutes", { unique: false }); objectstore.createindex("day", "day", { unique: false }); objectstore.createindex("month", "month", { unique: false }); objectstore.createindex("year", "year", { unique: false }); objectstore.createindex("notified", "notified", { unique: false }); note.innerhtml += '<li>object store created.</li>'; }; specifications specification status
comment indexed database api 2.0the definition of 'onabort' in that specification.
IDBDatabase.onclose - Web APIs
example db.onclose = function(event) { myappshowalert('the database "' + db.name + '" has unexpectedly closed.'); }; specifications specification status
comment indexed database api draftthe definition of 'onclose' in that specification.
IDBDatabase.onerror - Web APIs
"minutes", { unique: false }); objectstore.createindex("day", "day", { unique: false }); objectstore.createindex("month", "month", { unique: false }); objectstore.createindex("year", "year", { unique: false }); objectstore.createindex("notified", "notified", { unique: false }); note.innerhtml += '<li>object store created.</li>'; }; specifications specification status
comment indexed database api 2.0the definition of 'onerror' in that specification.
IDBDatabase.onversionchange - Web APIs
note.innerhtml += '<li>object store created.</li>'; db.onversionchange = function(event) { note.innerhtml += '<li>a database change has occurred; you should refresh this browser window, or close it down and use the other open version of this application, wherever it exists.</li>'; }; }; specifications specification status
comment indexed database api 2.0the definition of 'onversionchange' in that specification.
IDBDatabase.version - Web APIs
this is used a lot below db = dbopenrequest.result; // this line will log the version of the connected database, which should be "4" console.log(db.version); }; specifications specification status
comment indexed database api 2.0the definition of 'version' in that specification.
IDBDatabase - Web APIs
var objectstore = db.transaction('todolist', 'readwrite').objectstore('todolist'); specifications specification status
comment indexed database api 2.0the definition of 'idbdatabase' in that specification.
IDBFactory.cmp() - Web APIs
example var a = 1; var b = 2; var result = window.indexeddb.cmp(a, b); console.log( "comparison results: " + result ); specifications specification status
comment indexed database api 2.0the definition of 'cmp()' in that specification.
databases - Web APIs
example const promise = indexeddb.databases() promise.then(databases => { console.log(databases) }) specifications specification status
comment indexed database api draftthe definition of 'databases()' in that specification.
IDBFactory.deleteDatabase() - Web APIs
example var dbdeleterequest = window.indexeddb.deletedatabase("todolist"); dbdeleterequest.onerror = function(event) { console.log("error deleting database."); }; dbdeleterequest.onsuccess = function(event) { console.log("database deleted successfully"); console.log(event.result); // should be undefined }; specifications specification status
comment indexed database api draftthe definition of 'deletedatabase()' in that specification.
IDBFactory.open() - Web APIs
db = dbopenrequest.result; }; specifications specification status
comment indexed database api 2.0the definition of 'open()' in that specification.
IDBFactory - Web APIs
db = dbopenrequest.result; }; specifications specification status
comment indexed database api 2.0the definition of 'idbfactory' in that specification.
IDBIndex.count() - Web APIs
td>' + '<td>' + cursor.value.email + '</td>' + '<td>' + cursor.value.phone + '</td>' + '<td>' + cursor.value.age + '</td>'; tableentry.appendchild(tablerow); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status
comment indexed database api 2.0the definition of 'count()' in that specification.
IDBIndex.get() - Web APIs
td>' + '<td>' + cursor.value.email + '</td>' + '<td>' + cursor.value.phone + '</td>' + '<td>' + cursor.value.age + '</td>'; tableentry.appendchild(tablerow); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status
comment indexed database api 2.0the definition of 'get()' in that specification.
IDBIndex.getAll() - Web APIs
example var myindex = objectstore.index('index'); var getallrequest = myindex.getall(); getallrequest.onsuccess = function() { console.log(getallrequest.result); } specification specification status
comment indexed database api draftthe definition of 'getall()' in that specification.
IDBIndex.getAllKeys() - Web APIs
example var myindex = objectstore.index('index'); var getallkeysrequest = myindex.getallkeys(); getallkeysrequest.onsuccess = function() { console.log(getallkeysrequest.result); } specification specification status
comment indexed database api draftthe definition of 'getall()' in that specification.
IDBIndex.getKey() - Web APIs
</td>' + '<td>' + cursor.value.email + '</td>' + '<td>' + cursor.value.phone + '</td>' + '<td>' + cursor.value.age + '</td>'; tableentry.appendchild(tablerow); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status
comment indexed database api 2.0the definition of 'getkey()' in that specification.
IDBIndex.keyPath - Web APIs
+ '</td>' + '<td>' + cursor.value.email + '</td>' + '<td>' + cursor.value.phone + '</td>' + '<td>' + cursor.value.age + '</td>'; tableentry.appendchild(tablerow); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status
comment indexed database api 2.0the definition of 'keypath' in that specification.
IDBIndex.multiEntry - Web APIs
+ '</td>' + '<td>' + cursor.value.email + '</td>' + '<td>' + cursor.value.phone + '</td>' + '<td>' + cursor.value.age + '</td>'; tableentry.appendchild(tablerow); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status
comment indexed database api 2.0the definition of 'multientry' in that specification.
IDBIndex.name - Web APIs
+ '</td>' + '<td>' + cursor.value.email + '</td>' + '<td>' + cursor.value.phone + '</td>' + '<td>' + cursor.value.age + '</td>'; tableentry.appendchild(tablerow); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status
comment indexed database api 2.0the definition of 'name' in that specification.
IDBIndex.objectStore - Web APIs
+ '</td>' + '<td>' + cursor.value.email + '</td>' + '<td>' + cursor.value.phone + '</td>' + '<td>' + cursor.value.age + '</td>'; tableentry.appendchild(tablerow); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status
comment indexed database api 2.0the definition of 'objectstore' in that specification.
IDBIndex.openCursor() - Web APIs
</td>' + '<td>' + cursor.value.email + '</td>' + '<td>' + cursor.value.phone + '</td>' + '<td>' + cursor.value.age + '</td>'; tableentry.appendchild(tablerow); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status
comment indexed database api 2.0the definition of 'opencursor()' in that specification.
IDBIndex.openKeyCursor() - Web APIs
result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.key + '</td>' + '<td>' + cursor.primarykey + '</td>'; tableentry.appendchild(tablerow); cursor.continue(); } else { console.log('all last names displayed.'); } }; }; specification specification status
comment indexed database api 2.0the definition of 'openkeycursor()' in that specification.
IDBIndex.unique - Web APIs
+ '</td>' + '<td>' + cursor.value.email + '</td>' + '<td>' + cursor.value.phone + '</td>' + '<td>' + cursor.value.age + '</td>'; tableentry.appendchild(tablerow); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status
comment indexed database api 2.0the definition of 'unique' in that specification.
IDBIndex - Web APIs
+ '</td>' + '<td>' + cursor.value.email + '</td>' + '<td>' + cursor.value.phone + '</td>' + '<td>' + cursor.value.age + '</td>'; tableentry.appendchild(tablerow); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status
comment indexed database api 2.0the definition of 'idbindex' in that specification.
IDBKeyRange.bound() - Web APIs
sor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status
comment indexed database api 2.0the definition of 'bound()' in that specification.
IDBKeyRange.includes() - Web APIs
, c; if (r.lower !== undefined) { c = indexeddb.cmp(key, r.lower); if (r.loweropen && c <= 0) return false; if (!r.loweropen && c < 0) return false; } if (r.upper !== undefined) { c = indexeddb.cmp(key, r.upper); if (r.upperopen && c >= 0) return false; if (!r.upperopen && c > 0) return false; } return true; }; specification specification status
comment indexed database api draftthe definition of 'includes()' in that specification.
IDBKeyRange.lower - Web APIs
r = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status
comment indexed database api 2.0the definition of 'lower' in that specification.
IDBKeyRange.lowerBound() - Web APIs
r = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status
comment indexed database api 2.0the definition of 'lowerbound()' in that specification.
IDBKeyRange.lowerOpen - Web APIs
rsor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status
comment indexed database api 2.0the definition of 'loweropen' in that specification.
IDBKeyRange.only() - Web APIs
rsor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status
comment indexed database api 2.0the definition of 'only' in that specification.
IDBKeyRange.upper - Web APIs
r = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status
comment indexed database api 2.0the definition of 'upper' in that specification.
IDBKeyRange.upperBound() - Web APIs
event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status
comment indexed database api 2.0the definition of 'upperbound()' in that specification.
IDBKeyRange.upperOpen - Web APIs
r = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status
comment indexed database api 2.0the definition of 'upperopen' in that specification.
IDBKeyRange - Web APIs
(event) { var cursor = event.target.result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; } specifications specification status
comment indexed database api 2.0the definition of 'idbkeyrange' in that specification.
IDBObjectStore.add() - Web APIs
ansaction var objectstore = transaction.objectstore("todolist"); // make a request to add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status
comment indexed database api 2.0the definition of 'add()' in that specification.
IDBObjectStore.autoIncrement - Web APIs
on.objectstore("todolist"); console.log(objectstore.autoincrement); // make a request to add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status
comment indexed database api 2.0the definition of 'autoincrement' in that specification.
IDBObjectStore.clear() - Web APIs
e on the transaction var objectstore = transaction.objectstore("todolist"); // make a request to clear all the data out of the object store var objectstorerequest = objectstore.clear(); objectstorerequest.onsuccess = function(event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status
comment indexed database api 2.0the definition of 'clear()' in that specification.
IDBObjectStore.count() - Web APIs
var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); var countrequest = objectstore.count(); countrequest.onsuccess = function() { console.log(countrequest.result); } specification specification status
comment indexed database api 2.0the definition of 'count()' in that specification.
IDBObjectStore.createIndex() - Web APIs
nique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "day", { unique: false }); objectstore.createindex("month", "month", { unique: false }); objectstore.createindex("year", "year", { unique: false }); objectstore.createindex("notified", "notified", { unique: false }); }; specifications specification status
comment indexed database api 2.0the definition of 'createindex()' in that specification.
IDBObjectStore.delete() - Web APIs
var objectstore = transaction.objectstore("todolist"); // make a request to delete the specified record out of the object store var objectstorerequest = objectstore.delete("walk dog"); objectstorerequest.onsuccess = function(event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status
comment indexed database api 2.0the definition of 'delete()' in that specification.
IDBObjectStore.deleteIndex() - Web APIs
false }); objectstore.createindex("day", "day", { unique: false }); objectstore.createindex("month", "month", { unique: false }); objectstore.createindex("year", "year", { unique: false }); objectstore.createindex("notified", "notified", { unique: false }); objectstore.deleteindex("seconds"); objectstore.deleteindex("contact"); }; specifications specification status
comment indexed database api 2.0the definition of 'deleteindex()' in that specification.
IDBObjectStore.get() - Web APIs
ectstore("todolist"); // make a request to get a record by key from the object store var objectstorerequest = objectstore.get("walk dog"); objectstorerequest.onsuccess = function(event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; var myrecord = objectstorerequest.result; }; }; specifications specification status
comment indexed database api 2.0the definition of 'get()' in that specification.
IDBObjectStore.getKey() - Web APIs
logs").objectstore("netlogs"); let today = new date(); let yesterday = new date(today); yesterday.setdate(today.getdate() - 1); let request = store.getkey(idbkeyrange(yesterday, today)); request.onsuccess = (event) => { let when = event.target.result; alert("the 1st activity in last 24 hours was occurred at " + when); }; }; specifications specification status
comment indexed database api draftthe definition of 'getkey()' in that specification.
IDBObjectStore.index() - Web APIs
+ '</td>' + '<td>' + cursor.value.email + '</td>' + '<td>' + cursor.value.phone + '</td>' + '<td>' + cursor.value.age + '</td>'; tableentry.appendchild(tablerow); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status
comment indexed database api 2.0the definition of 'index()' in that specification.
IDBObjectStore.indexNames - Web APIs
ction.objectstore("todolist"); console.log(objectstore.indexnames); // make a request to add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status
comment indexed database api 2.0the definition of 'indexnames' in that specification.
IDBObjectStore.keyPath - Web APIs
nsaction.objectstore("todolist"); console.log(objectstore.keypath); // make a request to add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status
comment indexed database api 2.0the definition of 'keypath' in that specification.
IDBObjectStore.name - Web APIs
transaction.objectstore("todolist"); console.log(objectstore.name); // make a request to add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status
comment indexed database api 2.0the definition of 'name' in that specification.
IDBObjectStore.openCursor() - Web APIs
on.objectstore("name"); var request = objectstore.opencursor(); request.onsuccess = function(event) { var cursor = event.target.result; if(cursor) { // cursor.value contains the current record being iterated through // this is where you'd do something with the result cursor.continue(); } else { // no more results } }; specification specification status
comment indexed database api 2.0the definition of 'opencursor()' in that specification.
IDBObjectStore.openKeyCursor() - Web APIs
.onsuccess = function(event) { var cursor = event.target.result; if(cursor) { // cursor.key contains the key of the current record being iterated through // note that there is no cursor.value, unlike for opencursor // this is where you'd do something with the result cursor.continue(); } else { // no more results } }; specifications specification status
comment indexed database api 2.0the definition of 'openkeycursor()' in that specification.
IDBObjectStore.put() - Web APIs
st = objectstore.put(data); // log the transaction that originated this request console.log("the transaction that originated this request is " + updatetitlerequest.transaction); // when this new request succeeds, run the displaydata() function again to update the display updatetitlerequest.onsuccess = () => { displaydata(); }; }; specification specification status
comment indexed database api 2.0the definition of 'put()' in that specification.
IDBObjectStore.transaction - Web APIs
tion.objectstore("todolist"); console.log(objectstore.transaction); // make a request to add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of our request note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status
comment indexed database api 2.0the definition of 'transaction' in that specification.
IDBObjectStore - Web APIs
not allowed.</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // make a request to add our newitem object to the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { note.innerhtml += '<li>request successful .</li>'; } specifications specification status
comment indexed database api 2.0the definition of 'idbobjectstore' in that specification.
IDBOpenDBRequest.onblocked - Web APIs
}; request.onblocked = function() { console.log("your database version can't be upgraded because the app is open somewhere else."); } specifications specification status
comment indexed database api 2.0the definition of 'onblocked' in that specification.
IDBOpenDBRequest.onupgradeneeded - Web APIs
r", "publisher"); var frequencyindex = magazines.createindex("by_frequency", "frequency"); } }; request.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; request.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; db = request.result; populateanddisplaydata(); }; specifications specification status
comment indexed database api 2.0the definition of 'onupgradeneeded' in that specification.
IDBOpenDBRequest - Web APIs
{ unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "day", { unique: false }); objectstore.createindex("month", "month", { unique: false }); objectstore.createindex("year", "year", { unique: false }); objectstore.createindex("notified", "notified", { unique: false }); }; specifications specification status
comment indexed database api 2.0the definition of 'idbopendbrequest' in that specification.
IDBRequest.error - Web APIs
run the displaydata() // function again to update the display updatetitlerequest.onsuccess = function() { displaydata(); }; }; objectstoretitlerequest.onerror = function() { // if an error occurs with the request, log what it is console.log("there has been an error with retrieving your data: " + objectstoretitlerequest.error); }; specifications specification status
comment indexed database api 2.0the definition of 'error' in that specification.
IDBRequest.onerror - Web APIs
}; specifications specification status
comment indexed database api 2.0the definition of 'onerror' in that specification.
IDBRequest.onsuccess - Web APIs
e object to "yes" data.notified = "yes"; // create another request that inserts the item back // into the database var updatetitlerequest = objectstore.put(data); // when this new request succeeds, run the displaydata() // function again to update the display updatetitlerequest.onsuccess = function() { displaydata(); }; }; specifications specification status
comment indexed database api 2.0the definition of 'onsuccess' in that specification.
IDBRequest.readyState - Web APIs
var updatetitlerequest = objectstore.put(data); // log the source of this request console.log("the readystate of this request is " + updatetitlerequest.readystate); // when this new request succeeds, run the displaydata() // function again to update the display updatetitlerequest.onsuccess = function() { displaydata(); }; }; specifications specification status
comment indexed database api 2.0the definition of 'readystate' in that specification.
IDBRequest.result - Web APIs
e object to "yes" data.notified = "yes"; // create another request that inserts the item // back into the database var updatetitlerequest = objectstore.put(data); // when this new request succeeds, run the displaydata() // function again to update the display updatetitlerequest.onsuccess = function() { displaydata(); }; }; specifications specification status
comment indexed database api 2.0the definition of 'result' in that specification.
IDBRequest.source - Web APIs
the database var updatetitlerequest = objectstore.put(data); // log the source of this request console.log("the source of this request is " + updatetitlerequest.source); // when this new request succeeds, run the displaydata() // function again to update the display updatetitlerequest.onsuccess = function() { displaydata(); }; }; specifications specification status
comment indexed database api 2.0the definition of 'source' in that specification.
IDBRequest - Web APIs
db = dbopenrequest.result; }; specifications specification status
comment indexed database api 2.0the definition of 'idbrequest' in that specification.
IDBTransaction.abort() - Web APIs
(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; // abort the transaction we just did transaction.abort(); }; specification specification status
comment indexed database api 2.0the definition of 'abort()' in that specification.
IDBTransaction.commit() - Web APIs
[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; // force the changes to be committed to the database asap transaction.commit(); specification specification status
comment indexed database api draftthe definition of 'idbtransaction.commit()' in that specification.
IDBTransaction.db - Web APIs
nction(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; // return the database (idbdatabase) connection with which this transaction is associated transaction.db; }; specification specification status
comment indexed database api 2.0the definition of 'db' in that specification.
IDBTransaction.error - Web APIs
o the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status
comment indexed database api 2.0the definition of 'error' in that specification.
IDBTransaction.mode - Web APIs
on(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; // return the mode this transaction has been opened in (should be "readwrite" in this case) transaction.mode; }; specification specification status
comment indexed database api 2.0the definition of 'mode' in that specification.
IDBTransaction.objectStore() - Web APIs
the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; specification specification status
comment indexed database api 2.0the definition of 'objectstore()' in that specification.
IDBTransaction.onabort - Web APIs
been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; transaction.onabort = function() { // report when the transaction was successfully aborted console.log("transaction aborted!"); }; // abort the transaction we just did transaction.abort(); }; specification specification status
comment indexed database api 2.0the definition of 'onabort' in that specification.
IDBTransaction.oncomplete - Web APIs
the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.oncomplete) note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status
comment indexed database api 2.0the definition of 'oncomplete' in that specification.
IDBTransaction.onerror - Web APIs
o the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.onsuccess) note.innerhtml += '<li>request successful.</li>'; }; }; specification specification status
comment indexed database api 2.0the definition of 'onerror' in that specification.
IDBTransaction - Web APIs
the object store var objectstorerequest = objectstore.add(newitem[0]); objectstorerequest.onsuccess = function(event) { // report the success of the request (this does not mean the item // has been stored successfully in the db - for that you need transaction.oncomplete) note.innerhtml += '<li>request successful.</li>'; }; }; specifications specification status
comment indexed database api 2.0the definition of 'idbtransaction' in that specification.
IDBVersionChangeEvent - Web APIs
db = dbopenrequest.result; }; specifications specification status
comment indexed database api 2.0the definition of 'idbversionchangeevent' in that specification.
IIRFilterNode() - Web APIs
examples let feedforward = [0.00020298, 0.0004059599, 0.00020298]; let feedbackward = [1.0126964558, -1.9991880801, 0.9873035442]; const audiocontext = window.audiocontext || window.webkitaudiocontext; const audioctx = new audiocontext(); const iirfilter = new iirfilternode(audioctx, { feedforward: feedforward, feedback: feedbackward }); specifications specification status
comment web audio apithe definition of 'iirfilternode()' in that specification.
IIRFilterNode.getFrequencyResponse() - Web APIs
tput); for(i = 0; i <= myfrequencyarray.length-1;i++){ var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + myfrequencyarray[i] + 'hz</strong>: magnitude ' + magresponseoutput[i] + ', phase ' + phaseresponseoutput[i] + ' radians.'; freqresponseoutput.appendchild(listitem); } } calcfrequencyresponse(); specifications specification status
comment web audio apithe definition of 'getfrequencyresponse()' in that specification.
IIRFilterNode - Web APIs
specifications specification status
comment web audio apithe definition of 'iirfilternode' in that specification.
IdleDeadline - Web APIs
specifications specification status
comment cooperative scheduling of background tasks proposed recommendation ...
ImageBitmap.close() - Web APIs
var bitmap = offscreen.transfertoimagebitmap(); // imagebitmap { width: 256, height: 256 } bitmap.close(); // imagebitmap { width: 0, height: 0 } -- disposed specifications specification status
comment html living standardthe definition of 'close()' in that specification.
ImageBitmap.height - Web APIs
specifications specification status
comment html living standardthe definition of 'imagebitmap.height' in that specification.
ImageBitmap.width - Web APIs
specifications specification status
comment html living standardthe definition of 'imagebitmap.height' in that specification.
ImageBitmap - Web APIs
specifications specification status
comment html living standardthe definition of 'imagebitmap' in that specification.
ImageBitmapRenderingContext.transferFromImageBitmap() - Web APIs
// transfer the current frame to the visible canvas var bitmap = offscreen.transfertoimagebitmap(); htmlcanvas.transferfromimagebitmap(bitmap); specifications specification status
comment html living standardthe definition of 'transferfromimagebitmap()' in that specification.
ImageCapture() constructor - Web APIs
navigator.mediadevices.getusermedia({video: true}) .then(mediastream => { document.queryselector('video').srcobject = mediastream const track = mediastream.getvideotracks()[0]; imagecapture = new imagecapture(track); }) .catch(error => console.log(error)); specifications specification status
comment mediastream image capturethe definition of 'imagecapture' in that specification.
ImageCapture.getPhotoCapabilities() - Web APIs
re.track.getsettings(); input.min = photocapabilities.imagewidth.min; input.max = photocapabilities.imagewidth.max; input.step = photocapabilities.imagewidth.step; return imagecapture.getphotosettings(); }) .then(photosettings => { input.value = photosettings.imagewidth; }) .catch(error => console.log('argh!', error.name || error)); specifications specification status
comment mediastream image capturethe definition of 'getphotocapabilities()' in that specification.
ImageCapture.getPhotoSettings() - Web APIs
re.track.getsettings(); input.min = photocapabilities.imagewidth.min; input.max = photocapabilities.imagewidth.max; input.step = photocapabilities.imagewidth.step; return imagecapture.getphotosettings(); }) .then(photosettings => { input.value = photosettings.imagewidth; }) .catch(error => console.log('argh!', error.name || error)); specifications specification status
comment mediastream image capturethe definition of 'getphotosettings()' in that specification.
ImageCapture.grabFrame() - Web APIs
e() .then(function(imagebitmap) { console.log('grabbed frame:', imagebitmap); canvas.width = imagebitmap.width; canvas.height = imagebitmap.height; canvas.getcontext('2d').drawimage(imagebitmap, 0, 0); canvas.classlist.remove('hidden'); }) .catch(function(error) { console.log('grabframe() error: ', error); }); } specifications specification status
comment mediastream image capturethe definition of 'grabframe()' in that specification.
ImageCapture.takePhoto() - Web APIs
= document.queryselector('canvas'); takephotobutton.onclick = takephoto; function takephoto() { imagecapture.takephoto().then(function(blob) { console.log('took photo:', blob); img.classlist.remove('hidden'); img.src = url.createobjecturl(blob); }).catch(function(error) { console.log('takephoto() error: ', error); }); } specifications specification status
comment mediastream image capturethe definition of 'takephoto()' in that specification.
ImageCapture.track - Web APIs
specifications specification status
comment mediastream image capturethe definition of 'track' in that specification.
ImageCapture - Web APIs
idth, canvas.height); canvas.getcontext('2d').drawimage(img, 0, 0, img.width, img.height, x, y, img.width * ratio, img.height * ratio); } document.queryselector('video').addeventlistener('play', function() { document.queryselector('#grabframebutton').disabled = false; document.queryselector('#takephotobutton').disabled = false; }); specifications specification status
comment mediastream image capturethe definition of 'imagecapture' in that specification.
ImageData() - Web APIs
ugh every pixel for (let i = 0; i < arr.length; i += 4) { arr[i + 0] = 0; // r value arr[i + 1] = 190; // g value arr[i + 2] = 0; // b value arr[i + 3] = 255; // a value } // initialize a new imagedata object let imagedata = new imagedata(arr, 200); // draw image data to the canvas ctx.putimagedata(imagedata, 20, 20); result specification specification status
comment html living standardthe definition of 'imagedata()' in that specification.
ImageData.data - Web APIs
specification specification status
comment html living standardthe definition of 'imagedata.data' in that specification.
ImageData.height - Web APIs
let imagedata = new imagedata(200, 100); console.log(imagedata.height); // 100 specification specification status
comment html living standardthe definition of 'imagedata.height' in that specification.
ImageData.width - Web APIs
let imagedata = new imagedata(200, 100); console.log(imagedata.width); // 200 specification specification status
comment html living standardthe definition of 'imagedata.width' in that specification.
ImageData - Web APIs
specifications specification status
comment html living standardthe definition of 'imagedata' in that specification.
IndexedDB API - Web APIs
storing images and files in indexeddb specifications specification status
comment indexed database api draft recommendation indexed database api 2.0 recommendation initial definition ...
firesTouchEvents - Web APIs
syntax var boolean = inputdevicecapabilities.firestouchevents returns a boolean example mybutton.addeventlistener('mousedown', function(e) { if (!e.sourcecapabilities.firestouchevents) mybutton.classlist.add("pressed"); }); specifications specification status
comment inputdevicecapabilitiesthe definition of 'firetouchevents' in that specification.
InputEvent.data - Web APIs
<p>some text to copy and paste.</p> <input type="text"> <p class="result"></p> var editable = document.queryselector('input') var result = document.queryselector('.result'); editable.addeventlistener('input', (e) => { result.textcontent = "inputted text: " + e.data; }); specifications specification status
comment input events level 2the definition of 'data' in that specification.
InputEvent.dataTransfer - Web APIs
, try pasting some content into this editable paragraph and see what happens!</p> <p class="result"></p> var editable = document.queryselector('p[contenteditable]'); var result = document.queryselector('.result') var datatransferobj; editable.addeventlistener('input', (e) => { result.textcontent = e.datatransfer.getdata('text/html'); }); specifications specification status
comment input events level 2the definition of 'datatransfer' in that specification.
InputEvent.isComposing - Web APIs
syntax var bool = event.iscomposing; example var inputevent = new inputevent('syntheticinput', false); console.log(inputevent.iscomposing); // return false specifications specification status
comment document object model (dom) level 3 events specificationthe definition of 'inputevent.iscomposing' in that specification.
InputEvent - Web APIs
specifications specification status
comment input events level 2the definition of 'inputevent' in that specification.
InstallEvent - Web APIs
cache) { return cache.addall(urlstoprefetch.map(function(urltoprefetch) { return new request(urltoprefetch, {mode: 'no-cors'}); })).then(function() { console.log('all resources have been fetched and cached.'); }); }).catch(function(error) { console.error('pre-fetching failed:', error); }) ); }); specifications specification status
comment service workers working draft as of may 2015, the install event is an instance of extendableevent rather than a child of it.
IntersectionObserver.IntersectionObserver() - Web APIs
let observer = new intersectionobserver(myobservercallback, {threshold: 0.1}); specifications specification status
comment intersection observerthe definition of 'intersectionobserver constructor' in that specification.
IntersectionObserver.root - Web APIs
observer.root.style.border = "2px solid #44aa44"; specifications specification status
comment intersection observerthe definition of 'intersectionobserver' in that specification.
IntersectionObserver.unobserve() - Web APIs
*/ observer.unobserve(document.getelementbyid("elementtoobserve")); specifications specification status
comment intersection observerthe definition of 'intersectionobserver.unobserve()' in that specification.
IntersectionObserver - Web APIs
if (entries[0].intersectionratio <= 0) return; loaditems(10); console.log('loaded new items'); }); // start observing intersectionobserver.observe(document.queryselector('.scrollerfooter')); specifications specification status
comment intersection observerthe definition of 'intersectionobserver' in that specification.
IntersectionObserverEntry.intersectionRect - Web APIs
function intersectioncallback(entries) { entries.foreach(function(entry) { refreshzones.push({ element: entry.target, rect: entry.intersectionrect }); }); } specifications specification status
comment intersection observerthe definition of 'intersectionobserverentry.intersectionrect' in that specification.
InterventionReportBody - Web APIs
ingobserver(function(reports, observer) { let firstreport = reports[0]; console.log(firstreport.type); // intervention console.log(firstreport.body.id); console.log(firstreport.body.message); console.log(firstreport.body.sourcefile); console.log(firstreport.body.linenumber); console.log(firstreport.body.columnnumber); }, options); specifications specification status
comment reporting apithe definition of 'interventionreportbody' in that specification.
Keyboard.getLayoutMap() - Web APIs
var keyboard = navigator.keyboard; keyboard.getlayoutmap() .then(keyboardlayoutmap => { var upkey = keyboardlayoutmap.get('keyw'); window.alert('press ' + upkey + ' to move up.'); }) specifications specification status
comment keyboard mapthe definition of 'getlayoutmap()' in that specification.
Keyboard.lock() - Web APIs
navigator.keyboard.lock(["keyw", "keya", "keys", "keyd"]); specifications specification status
comment keyboard lockthe definition of 'lock()' in that specification.
Keyboard.unlock() - Web APIs
return value undefined specifications specification status
comment keyboard mapthe definition of 'keyboard' in that specification.
Keyboard - Web APIs
} specifications specification status
comment keyboard mapthe definition of 'keyboard' in that specification.
KeyboardEvent() - Web APIs
specifications specification status
comment ui eventsthe definition of 'keyboardevent()' in that specification.
KeyboardEvent.altKey - Web APIs
</p> </body> </html> specifications specification status
comment document object model (dom) level 3 events specificationthe definition of 'keyboardevent.altkey' in that specification.
KeyboardEvent.charCode - Web APIs
specifications specification status
comment document object model (dom) level 3 events specificationthe definition of 'keyboardevent.charcode' in that specification.
KeyboardEvent.ctrlKey - Web APIs
javascript"> function showchar(e){ alert( "key pressed: " + e.key + "\n" + "ctrl key pressed: " + e.ctrlkey + "\n" ); } </script> </head> <body onkeypress="showchar(event);"> <p>press any character key, with or without holding down the ctrl key.<br /> you can also use the shift key together with the ctrl key.</p> </body> </html> specifications specification status
comment document object model (dom) level 3 events specificationthe definition of 'keyboardevent.ctrlkey' in that specification.
KeyboardEvent.isComposing - Web APIs
syntax var bool = event.iscomposing; example var kbdevent = new keyboardevent("synthetickey", false); console.log(kbdevent.iscomposing); // return false specifications specification status
comment ui eventsthe definition of 'keyboardevent.prototype.iscomposing' in that specification.
Key Values - Web APIs
the value of data will be one of the following: compositionevent.data value symbol
comments gdk_key_dead_grave (0xfe50) qt::key_dead_grave (0x01001250) ` gdk_key_dead_acute (0xfe51) qt::key_dead_acute (0x01001251) ´ gdk_key_dead_circumflex (0xfe52) qt::key_dead_circumflex (0x01001252) ˆ gdk_key_dead_tilde (0xfe53) qt::key_dead_tilde (0x01001253) ˜ gdk_key_dead_perispomeni (0xfe53) ͂ ...
KeyboardEvent.key - Web APIs
} // cancel the default action to avoid it being handled twice event.preventdefault(); }, true); specification specification status
comment ui eventsthe definition of 'keyboardevent.key' in that specification.
KeyboardEvent.keyCode - Web APIs
} if (handled) { // suppress "double action" if event handled event.preventdefault(); } }, true); specifications specification status
comment document object model (dom) level 3 events specificationthe definition of 'keyboardevent.keycode' in that specification.
KeyboardEvent.location - Web APIs
syntax var location = event.location; example function keyevent(event) { console.log("location of key pressed: " + event.location); } specifications specification status
comment document object model (dom) level 3 events specificationthe definition of 'keyboardevent.location' in that specification.
KeyboardEvent.metaKey - Web APIs
syntax var metakeypressed = instanceofkeyboardevent.metakey return value a boolean example function ismetakey(e) { alert("metakey = " + e.metakey); } <button onclick="ismetakey(event)">click me with the meta key</button> specifications specification status
comment document object model (dom) level 3 events specificationthe definition of 'keyboardevent.metakey' in that specification.
KeyboardEvent.repeat - Web APIs
syntax var repeat = event.repeat; return value boolean specifications specification status
comment document object model (dom) level 3 events specificationthe definition of 'keyboardevent.repeat' in that specification.
KeyboardEvent.shiftKey - Web APIs
"charcode: " + e.charcode + "\n" + "shift key pressed: " + e.shiftkey + "\n" + "alt key pressed: " + e.altkey + "\n" ); } </script> </head> <body onkeypress="showchar(event);"> <p>press any character key, with or without holding down the shift key.<br /> you can also use the shift key together with the alt key.</p> </body> </html> specifications specification status
comment document object model (dom) level 3 events specificationthe definition of 'keyboardevent.shiftkey' in that specification.
KeyboardEvent.which - Web APIs
.fromcharcode(evt.charcode) + "\n" ); } function keydown(evt) { alert("onkeydown handler: \n" + "keycode property: " + evt.keycode + "\n" + "which property: " + evt.which + "\n" ); } </script> </head> <body onkeypress="showkeypress(event);" onkeydown="keydown(event);" > <p>please press any key.</p> </body> </html> specifications specification status
comment document object model (dom) level 3 events specificationthe definition of 'keyboardevent.which' in that specification.
KeyboardEvent - Web APIs
if (keyname === 'control') { alert('control key was released'); } }, false); </script> </head> <body> </body> </html> specifications specification status
comment ui eventsthe definition of 'keyboardevent' in that specification.
KeyboardLayoutMap.get() - Web APIs
var keyboard = navigator.keyboard; keyboard.getlayoutmap() .then(keyboardlayoutmap => { var upkey = keyboardlayoutmap.get('keyw'); window.alert('press ' + upkey + ' to move up.'); } specifications specification status
comment keyboard mapthe definition of 'get()' in that specification.
KeyboardLayoutMap - Web APIs
var keyboard = navigator.keyboard; keyboard.getlayoutmap() .then(keyboardlayoutmap => { var upkey = keyboardlayoutmap.get('keyw'); window.alert('press ' + upkey + ' to move up.'); }) specifications specification status
comment keyboard mapthe definition of 'keyboardlayoutmap' in that specification.
Keyboard API - Web APIs
specifications specification status
comment keyboard map editor's draft initial definition.
KeyframeEffect.KeyframeEffect() - Web APIs
keyframes that dictate how the white rabbit should animate down the hole: var rabbitdownkeyframes = new keyframeeffect( whiterabbit, // element to animate [ { transform: 'translatey(0%)' }, // keyframe { transform: 'translatey(100%)' } // keyframe ], { duration: 3000, fill: 'forwards' } // keyframe options ); specifications specification status
comment web animations level 2the definition of 'keyframeeffectoptions.iterationcomposite' in that specification.
KeyframeEffect.getKeyframes() - Web APIs
examples in the red queen race example, we can inspect alice and the redqueen's animation to see its individual keyframes like so: // return the array of keyframes redqueen_alice.effect.getkeyframes(); specifications specification status
comment web animationsthe definition of 'keyframeeffect.getkeyframes()' in that specification.
KeyframeEffect.setKeyframes() - Web APIs
ngkeyframeeffect.setkeyframes( [ { color: 'blue' }, { color: 'green', left: '10px' } ] ); // passing an object with arrays for values existingkeyframeeffect.setkeyframes( { color: ['blue', 'green'], left: [ '0', '10px'] } ); // passing a single-member object existingkeyframeeffect.setkeyframes( { color: 'blue' } ); specifications specification status
comment web animationsthe definition of 'keyframeeffect.setkeyframes()' in that specification.
KeyframeEffect.target - Web APIs
ed: var whiterabbit = document.getelementbyid("rabbit"); var rabbitdownkeyframes = new keyframeeffect( whiterabbit, [ { transform: 'translatey(0%)' }, { transform: 'translatey(100%)' } ], { duration: 3000, fill: 'forwards' } ); // returns <div id="rabbit">click the rabbit's ears!</div> rabbitdownkeyframes.target; specifications specification status
comment web animationsthe definition of 'keyframeeffect' in that specification.
KeyframeEffect - Web APIs
keyframes that dictate how the white rabbit should animate down the hole: var rabbitdownkeyframes = new keyframeeffect( whiterabbit, // element to animate [ { transform: 'translatey(0%)' }, // keyframe { transform: 'translatey(100%)' } // keyframe ], { duration: 3000, fill: 'forwards' } // keyframe options ); specifications specification status
comment web animationsthe definition of 'keyframeeffect' in that specification.
KeyframeEffectOptions - Web APIs
specifications specification status
comment web animations level 2the definition of 'keyframeeffectoptions' in that specification.
LargestContentfulPaint - Web APIs
} specifications specification status
comment largest contentful paintthe definition of 'largestcontentfulpaint' in that specification.
LayoutShift - Web APIs
} specifications specification status
comment layout instability apithe definition of 'layoutshift' in that specification.
LayoutShiftAttribution - Web APIs
specifications specification status
comment layout instability apithe definition of 'layoutshiftattribution' in that specification.
LinearAccelerationSensor.x - Web APIs
let lasensor = new linearaccelerationsensor({frequency: 60}); lasensor.addeventlistener('reading', e => { console.log("linear acceleration along the x-axis " + lasensor.x); console.log("linear acceleration along the y-axis " + lasensor.y); console.log("linear acceleration along the z-axis " + lasensor.z); }); lasensor.start(); specifications specification status
comment generic sensor api candidate recommendation defines sensors in general.
LinearAccelerationSensor.y - Web APIs
let lasensor = new linearaccelerationsensor({frequency: 60}); lasensor.addeventlistener('reading', e => { console.log("linear acceleration along the x-axis " + lasensor.x); console.log("linear acceleration along the y-axis " + lasensor.y); console.log("linear acceleration along the z-axis " + lasensor.z); }); lasensor.start(); specifications specification status
comment generic sensor api candidate recommendation defines sensors in general.
LinearAccelerationSensor.z - Web APIs
let lasensor = new linearaccelerationsensor({frequency: 60}); lasensor.addeventlistener('reading', e => { console.log("linear acceleration along the x-axis " + lasensor.x); console.log("linear acceleration along the y-axis " + lasensor.y); console.log("linear acceleration along the z-axis " + lasensor.z); }); lasensor.start(); specifications specification status
comment generic sensor api candidate recommendation defines sensors in general.
LinearAccelerationSensor - Web APIs
let lasensor = new linearaccelerationsensor({frequency: 60}); lasensor.addeventlistener('reading', e => { console.log("linear acceleration along the x-axis " + lasensor.x); console.log("linear acceleration along the y-axis " + lasensor.y); console.log("linear acceleration along the z-axis " + lasensor.z); }); lasensor.start(); specifications specification status
comment generic sensor api candidate recommendation defines sensors in general.
LinkStyle - Web APIs
specifications specification status
comment css object model (cssom)the definition of 'linkstyle' in that specification.
Location: ancestorOrigins - Web APIs
syntax const ancestors = location.ancestororigins; specifications specification status
comment html living standardthe definition of 'ancestororigins ' in that specification.
Location: assign() - Web APIs
example // navigate to the location.reload article window.location.assign('/docs/web/api/location/reload'); specifications specification status
comment html living standardthe definition of 'location.assign()' in that specification.
Location: hash - Web APIs
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.
Location: host - Web APIs
g/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.
Location: hostname - Web APIs
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.
Location: href - Web APIs
syntax string = object.href; object.href = string; examples // lets imagine an <a id="myanchor" href="https://developer.mozilla.org/location/href"> element is in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.href; // returns: 'https://developer.mozilla.org/location/href' specifications specification status
comment html living standardthe definition of 'href' in that specification.
Location: origin - Web APIs
syntax string = object.origin; examples // on this page, returns the origin var result = window.location.origin; // returns:'https://developer.mozilla.org' specifications specification status
comment html living standardthe definition of 'origin' in that specification.
Location: pathname - Web APIs
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.
Location: port - Web APIs
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.
Location: protocol - Web APIs
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.
Location: reload() - Web APIs
syntax location.reload(); specifications specification status
comment html living standardthe definition of 'location.reload()' in that specification.
Location: replace() - Web APIs
examples // navigate to the location.reload article by replacing this page window.location.replace('/docs/web/api/location.reload'); specifications specification status
comment html living standardthe definition of 'location.replace()' in that specification.
Location: search - Web APIs
// let an <a id="myanchor" href="https://developer.mozilla.org/docs/location.search?q=123"> element be in the document var anchor = document.getelementbyid("myanchor"); var querystring = anchor.search; // returns:'?q=123' // further parsing: let params = new urlsearchparams(querystring); let q = parseint(params.get("q")); // is the number 123 specifications specification status
comment html living standardthe definition of 'search' in that specification.
Location: toString() - Web APIs
syntax string = object.tostring(); examples // let's imagine an <a id="myanchor" href="https://developer.mozilla.org/docs/location/tostring"> element is in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.tostring(); // returns: 'https://developer.mozilla.org/docs/location/tostring' specifications specification status
comment html living standard living standard ...
Location - Web APIs
.log(url.host); // developer.mozilla.org:8080 console.log(url.hostname); // developer.mozilla.org console.log(url.port); // 8080 console.log(url.pathname); // /search console.log(url.search); // ?q=url console.log(url.hash); // #search-results-close-container console.log(url.origin); // https://developer.mozilla.org:8080 specifications specification status
comment html living standardthe definition of 'location' in that specification.
Locks.mode - Web APIs
d show "exclusive" navigator.locks.request("my_resource", {mode: "exclusive"}, show_lock_properties); // should show "shared" navigator.locks.request("my_resource", {mode: "shared"}, show_lock_properties); function show_lock_properties(lock) { console.log(`the lock name is: ${lock.name}`); console.log(`the lock mode is: ${lock.mode}`); } specifications specification status
comment web locks apithe definition of 'mode' in that specification.
Locks.name - Web APIs
navigator.locks.request("net_db_sync", show_lock_properties); function show_lock_properties(lock) { console.log(`the lock name is: ${lock.name}`); console.log(`the lock mode is: ${lock.mode}`); } specifications specification status
comment web locks apithe definition of 'name' in that specification.
Lock - Web APIs
navigator.locks.request("net_db_sync", show_lock_properties); navigator.locks.request("another_lock", {mode: "shared"}, show_lock_properties); function show_lock_properties(lock) { console.log(`the lock name is: ${lock.name}`); console.log(`the lock mode is: ${lock.mode}`); } specifications specification status
comment web locks apithe definition of 'lock' in that specification.
LockManager.query() - Web APIs
example const state = await navigator.locks.query(); for (const lock of state.held) { console.log(`held lock: name ${lock.name}, mode ${lock.mode}`); } for (const request of state.pending) { console.log(`requested lock: name ${request.name}, mode ${request.mode}`); } specifications specification status
comment web locks apithe definition of 'query()' in that specification.
LockManager - Web APIs
specifications specification status
comment web locks apithe definition of 'lockmanager' in that specification.
LockedFile.getMetadata() - Web APIs
they have the following format: size : a number lastmodified : a date object specifications specification status
comment filesystem api editor's draft draft proposal ...
LockedFile - Web APIs
specifications specification status
comment filesystem api editor's draft draft proposal.
MIDIAccess - Web APIs
on(access) { // get lists of available midi controllers const inputs = access.inputs.values(); const outputs = access.outputs.values(); access.onstatechange = function(e) { // print information about the (dis)connected midi controller console.log(e.port.name, e.port.manufacturer, e.port.state); }; }); specifications specification status
comment web midi api working draft initial definition.
MIDIConnectionEvent - Web APIs
properties midiconnectionevent.port returns a reference to a midiport instance for a port that has been connected or disconnected." examples specifications specification status
comment web midi api working draft initial definition.
MIDIInput - Web APIs
specifications specification status
comment web midi api working draft initial definition.
MIDIMessageEvent - Web APIs
examples // printing all messages to console navigator.requestmidiaccess().then(midiaccess => { array.from(midiaccess.inputs).foreach(input => { input[1].onmidimessage = console.log; }) }); specifications specification status
comment web midi apithe definition of 'midimessageevent' in that specification.
Magnetometer.x - Web APIs
let magsensor = new magnetometer({frequency: 60}); magsensor.addeventlistener('reading', e => { console.log("magnetic field along the x-axis " + magsensor.x); console.log("magnetic field along the y-axis " + magsensor.y); console.log("magnetic field along the z-axis " + magsensor.z); }); magsensor.start(); specifications specification status
comment generic sensor api candidate recommendation defines sensors in general.
Magnetometer.y - Web APIs
let magsensor = new magnetometer({frequency: 60}); magsensor.addeventlistener('reading', e => { console.log("magnetic field along the x-axis " + magsensor.x); console.log("magnetic field along the y-axis " + magsensor.y); console.log("magnetic field along the z-axis " + magsensor.z); }); magsensor.start(); specifications specification status
comment generic sensor api candidate recommendation defines sensors in general.
Magnetometer.z - Web APIs
let magsensor = new magnetometer({frequency: 60}); magsensor.addeventlistener('reading', e => { console.log("magnetic field along the x-axis " + magsensor.x); console.log("magnetic field along the y-axis " + magsensor.y); console.log("magnetic field along the z-axis " + magsensor.z); }); magsensor.start(); specifications specification status
comment generic sensor api candidate recommendation defines sensors in general.
Magnetometer - Web APIs
let magsensor = new magnetometer({frequency: 60}); magsensor.addeventlistener('reading', e => { console.log("magnetic field along the x-axis " + magsensor.x); console.log("magnetic field along the y-axis " + magsensor.y); console.log("magnetic field along the z-axis " + magsensor.z); }); magsensor.start(); specifications specification status
comment generic sensor api candidate recommendation defines sensors in general.
MathMLElement - Web APIs
ace has no methods, but inherits methods from: documentandelementeventhandlers, element, elementcssinlinestyle, globaleventhandlers, htmlorforeignelement examples mathml <math xmlns="http://www.w3.org/1998/math/mathml"> <msqrt> <mi>x</mi> </msqrt> </math> javascript document.queryselector('msqrt').constructor.name; // mathmlelement specifications specification status
comment mathmlelement interface ...
MediaCapabilities - Web APIs
specifications specification status
comment media capabilitiesthe definition of 'mediacapabilities' in that specification.
MediaCapabilitiesInfo - Web APIs
}); specifications specification status
comment media capabilitiesthe definition of 'mediacapabilitiesinfo' in that specification.
MediaConfiguration - Web APIs
} }; specifications specification status
comment media capabilitiesthe definition of 'mediaconfiguration' in that specification.
MediaDecodingConfiguration - Web APIs
'' : 'not ') + 'supported.') }); specifications specification status
comment media capabilitiesthe definition of 'mediadecodingconfiguration' in that specification.
MediaDeviceInfo - Web APIs
ne or more media streams are active, or if persistent permissions have been granted: videoinput: facetime hd camera (built-in) id=cso9c0ypaf274oucpua53cne0yhlir2yxci+sqfbzz8= audioinput: default (built-in microphone) id=rkxxbyjnabbadgqnnzqlvldmxls0yketycibg+xxnvm= audioinput: built-in microphone id=r2/xw1xupiyzunfv1lgrkoma5wtovckwfz368xcndm0= specifications specification status
comment media capture and streamsthe definition of 'mediadevicesinfo' in that specification.
MediaDevices.enumerateDevices() - Web APIs
= or if one or more mediastreams are active or persistent permissions are granted: videoinput: facetime hd camera (built-in) id=cso9c0ypaf274oucpua53cne0yhlir2yxci+sqfbzz8= audioinput: default (built-in microphone) id=rkxxbyjnabbadgqnnzqlvldmxls0yketycibg+xxnvm= audioinput: built-in microphone id=r2/xw1xupiyzunfv1lgrkoma5wtovckwfz368xcndm0= specifications specification status
comment media capture and streamsthe definition of 'mediadevices: enumeratedevices' in that specification.
MediaDevices.getSupportedConstraints() - Web APIs
tlist"); let supportedconstraints = navigator.mediadevices.getsupportedconstraints(); for (let constraint in supportedconstraints) { if (supportedconstraints.hasownproperty(constraint)) { let elem = document.createelement("li"); elem.innerhtml = "<code>" + constraint + "</code>"; constraintlist.appendchild(elem); } } result specifications specification status
comment media capture and streamsthe definition of 'getsupportedconstraints()' in that specification.
MediaDevices.getUserMedia() - Web APIs
"user" : "environment") } }; specifications specification status
comment media capture and streamsthe definition of 'mediadevices.getusermedia()' in that specification.
MediaDevices - Web APIs
camera and ' + 'microphone, you need to allow the page access to your devices in ' + 'order for the demo to work.'); } errormsg('getusermedia error: ' + error.name, error); }); function errormsg(msg, error) { errorelement.innerhtml += '<p>' + msg + '</p>'; if (typeof error !== 'undefined') { console.error(error); } } specifications specification status
comment media capture and streamsthe definition of 'mediadevices' in that specification.
MediaElementAudioSourceNode() - Web APIs
example var ac = new audiocontext(); var mediaelement = document.createelement('audio'); var options = { mediaelement : mediaelement } var myaudiosource = new mediaelementaudiosourcenode(ac, options); specifications specification status
comment web audio apithe definition of 'mediaelementaudiosourcenode' in that specification.
MediaElementAudioSourceNode.mediaElement - Web APIs
examples const audioctx = new window.audiocontext(); const audioelem = document.queryselector('audio'); let options = { mediaelement: audioelem } let source = new mediaelementaudiosourcenode(audioctx, options); console.log(source.mediaelement); specifications specification status
comment web audio apithe definition of 'mediaelementaudiosourcenode.mediaelement' in that specification.
MediaEncodingConfiguration - Web APIs
'' : 'not ') + 'supported.') }); specifications specification status
comment media capabilitiesthe definition of 'mediaencodingconfiguration' in that specification.
MediaError.code - Web APIs
the error handler simply outputs a message var obj = document.createelement('video'); obj.onerror = function() {console.log("error with media: " + obj.error.code);} obj.src="https://example.com/blahblah.mp4"; specifications specification status
comment html living standardthe definition of 'mediaerror.code' in that specification.
MediaError.message - Web APIs
specifications specification status
comment html living standardthe definition of 'mediaerror.message' in that specification.
MediaError - Web APIs
specifications specification status
comment html living standardthe definition of 'mediaerror' in that specification.
MediaImage - Web APIs
specifications specification status
comment media session standardthe definition of 'mediaimage' in that specification.
message - Web APIs
syntax var messagetype = mediakeymessageevent.messagetype; specifications specification status
comment encrypted media extensionsthe definition of 'message' in that specification.
MediaKeyMessageEvent.messageType - Web APIs
syntax var messagetype = mediakeymessageevent.messagetype; specifications specification status
comment encrypted media extensionsthe definition of 'messagetype' in that specification.
MediaKeyMessageEvent - Web APIs
examples // tbd specifications specification status
comment encrypted media extensionsthe definition of 'mediakeymessageevent' in that specification.
close() - Web APIs
specifications specification status
comment encrypted media extensionsthe definition of 'close()' in that specification.
expiration - Web APIs
syntax var expirationtime = mediakeysessionobj.expiration; specifications specification status
comment encrypted media extensionsthe definition of 'expiration' in that specification.
generateRequest() - Web APIs
}); specifications specification status
comment encrypted media extensionsthe definition of 'generaterequest()' in that specification.
keyStatuses - Web APIs
syntax var mediakeystatusmapobj = mediakeysessionobj.keystatuses; specifications specification status
comment encrypted media extensionsthe definition of 'keystatuses' in that specification.
load() - Web APIs
specifications specification status
comment encrypted media extensionsthe definition of 'load()' in that specification.
remove() - Web APIs
specifications specification status
comment encrypted media extensionsthe definition of 'remove()' in that specification.
sessionId - Web APIs
syntax var sessionid = mediakeysessionobj.sessionid; specifications specification status
comment encrypted media extensionsthe definition of 'sessionid' in that specification.
update() - Web APIs
specifications specification status
comment encrypted media extensionsthe definition of 'update()' in that specification.
MediaKeySession - Web APIs
examples // tbd specifications specification status
comment encrypted media extensionsthe definition of 'mediakeysession' in that specification.
MediaKeyStatusMap - Web APIs
specifications specification status
comment encrypted media extensionsthe definition of 'mediakeystatusmap' in that specification.
createMediaKeys() - Web APIs
syntax var mediakeys = await mediakeysystemaccess.createmediakeys(); specifications specification status
comment encrypted media extensionsthe definition of 'createmediakeys()' in that specification.
getConfiguration() - Web APIs
syntax var mediakeysystemconfiguration = mediakeysystemaccess.getconfiguration(); specifications specification status
comment encrypted media extensionsthe definition of 'getconfiguration()' in that specification.
keySystem - Web APIs
syntax var keysystem = mediakeysystemaccess.keysystem; specifications specification status
comment encrypted media extensionsthe definition of 'keysystem' in that specification.
MediaKeySystemAccess - Web APIs
specifications specification status
comment encrypted media extensionsthe definition of 'mediakeysystemaccess' in that specification.
audioCapabilities - Web APIs
syntax var audiocapabilities[ {contenttype: 'contenttype', robustness:'robustness'}] = mediasystemconfiguration.audiocapabilities; specifications specification status
comment encrypted media extensionsthe definition of 'audiocapabilities' in that specification.
distinctiveIdentifier - Web APIs
syntax var distinctiveidentifier = mediasystemconfiguration.distinctiveidentifier; specifications specification status
comment encrypted media extensionsthe definition of 'distinctiveidentifier' in that specification.
initDataTypes - Web APIs
syntax var datatypes[] = mediasystemconfiguration.initdatatypes; specifications specification status
comment encrypted media extensionsthe definition of 'initdatatypes' in that specification.
persistentState - Web APIs
syntax var persistentstate = mediasystemconfiguration.persistentstate; specifications specification status
comment encrypted media extensionsthe definition of 'persistentstate' in that specification.
videoCapabilities - Web APIs
syntax var videocapabilities[{contenttype: 'contenttype', robustness:'robustness'}] = mediasystemconfiguration.videocapabilities; specifications specification status
comment encrypted media extensionsthe definition of 'videocapabilities' in that specification.
createSession() - Web APIs
syntax var mediakeysessionobject = mediakeys.createsession([mediakeysessiontype]); specifications specification status
comment encrypted media extensionsthe definition of 'createsession()' in that specification.
setServerCertificate() - Web APIs
}); specifications specification status
comment encrypted media extensionsthe definition of 'setservercertificate()' in that specification.
MediaKeys - Web APIs
examples //tbd specifications specification status
comment encrypted media extensionsthe definition of 'mediakeys' in that specification.
MediaList.mediaText - Web APIs
const stylesheets = document.stylesheets; let stylesheet = stylesheets[0]; console.log(stylesheet.media.mediatext); specifications specification status
comment css object model (cssom)the definition of 'mediatext' in that specification.
MediaList - Web APIs
const stylesheets = document.stylesheets; let stylesheet = stylesheets[0]; console.log(stylesheet.media.mediatext); specifications specification status
comment css object model (cssom)the definition of 'medialist' in that specification.
MediaMetadata.MediaMetadata() - Web APIs
iasession.setactionhandler('pause', function() {}); navigator.mediasession.setactionhandler('seekbackward', function() {}); navigator.mediasession.setactionhandler('seekforward', function() {}); navigator.mediasession.setactionhandler('previoustrack', function() {}); navigator.mediasession.setactionhandler('nexttrack', function() {}); } specifications specification status
comment media session standardthe definition of 'mediametadata()' in that specification.
MediaMetadata - Web APIs
specifications specification status
comment media session standardthe definition of 'mediametadata' in that specification.
MediaPositionState.duration - Web APIs
let positionstate = { duration: infinity; playbackrate: 1.0; position: 0.0; }; navigator.mediasession.setpositionstate(positionstate); specifications specification status
comment media session standardthe definition of 'mediapositionstate.duration' in that specification.
MediaPositionState.position - Web APIs
let positioninterval = window.setinterval(() => { if (mymedia.isplaying) { navigator.mediasession.setpositionstate({ duration: mymedia.trackdurationinseconds, playbackrate: mymedia.playbackrate, position: mymedia.trackplaypositioninseconds }); } else { window.clearinterval(positioninterval); } }, 1000); specifications specification status
comment media session standardthe definition of 'mediapositionstate.position' in that specification.
MediaPositionState - Web APIs
specifications specification status
comment media session standardthe definition of 'mediapositionstate' in that specification.
MediaQueryList.addListener() - Web APIs
ra.textcontent = 'this is a narrow screen — less than 600px wide.'; document.body.style.backgroundcolor = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600px wide.'; document.body.style.backgroundcolor = 'blue'; } } mql.addlistener(screentest); specifications specification status
comment css object model (cssom) view modulethe definition of 'addlistener' in that specification.
MediaQueryList.matches - Web APIs
er(mq, callback) { if (mq.addeventlistener) { mq.addeventlistener("change", callback); } else { mq.addlistener(callback); } } addmqlistener(window.matchmedia("(orientation:landscape)"), event => { if (event.matches) { /* now in landscape orientation */ } else { /* now in portrait orientation */ } } ); specifications specification status
comment css object model (cssom) view modulethe definition of 'matches' in that specification.
MediaQueryList.media - Web APIs
css .mq-value { font: 18px arial, sans-serif; font-weight: bold; color: #88f; padding: 0.4em; border: 1px solid #dde; } result specifications specification status
comment css object model (cssom) view modulethe definition of 'media' in that specification.
MediaQueryList.onchange - Web APIs
max-width: 600px)'); mql.addeventlistener( "change", (e) => { if (e.matches) { /* the viewport is 600 pixels wide or less */ console.log('this is a narrow screen — less than 600px wide.') } else { /* the viewport is more than than 600 pixels wide */ console.log('this is a wide screen — more than 600px wide.') } }) specifications specification status
comment css object model (cssom) view modulethe definition of 'onchange' in that specification.
MediaQueryList.removeListener() - Web APIs
ocument.body.style.backgroundcolor = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600px wide.'; document.body.style.backgroundcolor = 'blue'; } } mql.addlistener(screentest); // later on, when it is no longer needed mql.removelistener(screentest); specifications specification status
comment css object model (cssom) view modulethe definition of 'removelistener' in that specification.
MediaQueryList - Web APIs
specifications specification status
comment css object model (cssom) view modulethe definition of 'mediaquerylist' in that specification.
MediaQueryListEvent.MediaQueryListEvent() - Web APIs
examples var media = '(max-width: 600px)'; var matches = true; var mymediaquerylistevent = new mediaquerylistevent({media, matches}); specifications specification status
comment css object model (cssom) view modulethe definition of 'mediaquerylistevent()' in that specification.
MediaQueryListEvent.matches - Web APIs
a.textcontent = 'this is a narrow screen — less than 600px wide.'; document.body.style.backgroundcolor = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600px wide.'; document.body.style.backgroundcolor = 'blue'; } } mql.addlistener(screentest); specifications specification status
comment css object model (cssom) view modulethe definition of 'matches' in that specification.
MediaQueryListEvent.media - Web APIs
a narrow screen — less than 600px wide.'; document.body.style.backgroundcolor = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600px wide.'; document.body.style.backgroundcolor = 'blue'; } console.log(e.media); } mql.addlistener(screentest); specifications specification status
comment css object model (cssom) view modulethe definition of 'media' in that specification.
MediaQueryListEvent - Web APIs
ra.textcontent = 'this is a narrow screen — less than 600px wide.'; document.body.style.backgroundcolor = 'red'; } else { /* the viewport is more than than 600 pixels wide */ para.textcontent = 'this is a wide screen — more than 600px wide.'; document.body.style.backgroundcolor = 'blue'; } } mql.addlistener(screentest); specifications specification status
comment css object model (cssom) view modulethe definition of 'mediaquerylistevent' in that specification.
MediaQueryListListener - Web APIs
specifications specification status
comment css object model (cssom) view modulethe definition of 'mediaquerylistlistener' in that specification.
MediaRecorder() - Web APIs
} } specifications specification status
comment mediastream recording working draft initial definition ...
MediaRecorder.onerror - Web APIs
default: shownotification("a problem occurred while trying " + "to record the video."); break; } }; /* this would be a good place to create a worker to handle writing the buffers to disk periodically */ recorder.start(100); /* 100ms time slices per buffer */ return recorder; } specifications specification status
comment mediastream recordingthe definition of 'mediarecorder.onerror' in that specification.
MediaRecorder.onpause - Web APIs
specifications specification status
comment mediastream recordingthe definition of 'mediarecorder.onpause' in that specification.
MediaRecorder.onstart - Web APIs
specifications specification status
comment mediastream recordingthe definition of 'mediarecorder.onstart' in that specification.
MediaRecorder.onstop - Web APIs
specifications specification status
comment mediastream recordingthe definition of 'mediarecorder.onstop' in that specification.
MediaRecorder.pause() - Web APIs
specifications specification status
comment mediastream recordingthe definition of 'mediarecorder.pause()' in that specification.
MediaRecorder.start() - Web APIs
specifications specification status
comment mediastream recordingthe definition of 'mediarecorder.start()' in that specification.
MediaRecorder.state - Web APIs
specifications specification status
comment mediastream recordingthe definition of 'mediarecorder.state' in that specification.
MediaRecorder.stop() - Web APIs
specifications specification status
comment mediastream recordingthe definition of 'mediarecorder.stop()' in that specification.
MediaRecorder.stream - Web APIs
specifications specification status
comment mediastream recordingthe definition of 'mediarecorder.stream' in that specification.
MediaRecorder - Web APIs
specifications specification status
comment mediastream recording working draft initial definition ...
MediaRecorderErrorEvent.error - Web APIs
corder(stream); } catch(err) { /* exception while trying to create the recorder; handle that */ } recorder.ondataavailable = function(event) { bufferlist.push(event.data); }; recorder.onerror = function(event) { let error = event.error; }; recorder.start(100); /* 100ms time slices per buffer */ return recorder; } specifications specification status
comment mediastream recordingthe definition of 'mediarecordererrorevent.error' in that specification.
MediaSession.metadata - Web APIs
iasession.setactionhandler('pause', function() {}); navigator.mediasession.setactionhandler('seekbackward', function() {}); navigator.mediasession.setactionhandler('seekforward', function() {}); navigator.mediasession.setactionhandler('previoustrack', function() {}); navigator.mediasession.setactionhandler('nexttrack', function() {}); } specifications specification status
comment media session standardthe definition of 'mediasession.metadata' in that specification.
MediaSession.playbackState - Web APIs
.queryselector("#player"); audio.src = "song.mp3"; navigator.mediasession.setactionhandler('play', play); navigator.mediasession.setactionhandler('pause', pause); function play() { audio.play(); navigator.mediasession.playbackstate = "playing"; } function pause() { audio.pause(); navigator.mediasession.playbackstate = "paused"; } specifications specification status
comment media session standardthe definition of 'playbackstate' in that specification.
MediaSession.setPositionState() - Web APIs
let positioninterval = window.setinterval(() => { if (mymedia.isplaying) { navigator.mediasession.setpositionstate({ duration: mymedia.trackdurationinseconds, playbackrate: mymedia.playbackrate, position: mymedia.trackplaypositioninseconds }); } else { window.clearinterval(positioninterval); } }, 1000); specifications specification status
comment media session standardthe definition of 'mediasession.setpositionstate()' in that specification.
MediaSession - Web APIs
ment.queryselector("#player"); audio.src = "song.mp3"; navigator.mediasession.setactionhandler('play', play); navigator.mediasession.setactionhandler('pause', pause); function play() { audio.play(); navigator.mediasession.playbackstate = "playing"; } function pause() { audio.pause(); navigator.mediasession.playbackstate = "paused"; } specifications specification status
comment media session standardthe definition of 'mediasession' in that specification.
MediaSettingsRange - Web APIs
re.track.getsettings(); input.min = photocapabilities.imagewidth.min; input.max = photocapabilities.imagewidth.max; input.step = photocapabilities.imagewidth.step; return imagecapture.getphotosettings(); }) .then(photosettings => { input.value = photosettings.imagewidth; }) .catch(error => console.log('argh!', error.name || error)); specifications specification status
comment mediastream image capturethe definition of 'mediasettingsrange' in that specification.
MediaSource.addSourceBuffer() - Web APIs
var mediasource = this; var sourcebuffer = mediasource.addsourcebuffer(mimecodec); fetchab(asseturl, function (buf) { sourcebuffer.addeventlistener('updateend', function (_) { mediasource.endofstream(); video.play(); //console.log(mediasource.readystate); // ended }); sourcebuffer.appendbuffer(buf); }); }; specifications specification status
comment media source extensionsthe definition of 'addsourcebuffer()' in that specification.
MediaSource.endOfStream() - Web APIs
var mediasource = this; var sourcebuffer = mediasource.addsourcebuffer(mimecodec); fetchab(asseturl, function (buf) { sourcebuffer.addeventlistener('updateend', function (_) { mediasource.endofstream(); video.play(); //console.log(mediasource.readystate); // ended }); sourcebuffer.appendbuffer(buf); }); }; specifications specification status
comment media source extensionsthe definition of 'endofstream()' in that specification.
MediaSource.isTypeSupported() - Web APIs
var mediasource = this; var sourcebuffer = mediasource.addsourcebuffer(mimecodec); fetchab(asseturl, function (buf) { sourcebuffer.addeventlistener('updateend', function (_) { mediasource.endofstream(); video.play(); //console.log(mediasource.readystate); // ended }); sourcebuffer.appendbuffer(buf); }); }; specifications specification status
comment media source extensionsthe definition of 'istypesupported()' in that specification.
MediaSource.readyState - Web APIs
var mediasource = this; var sourcebuffer = mediasource.addsourcebuffer(mimecodec); fetchab(asseturl, function (buf) { sourcebuffer.addeventlistener('updateend', function (_) { mediasource.endofstream(); video.play(); //console.log(mediasource.readystate); // ended }); sourcebuffer.appendbuffer(buf); }); }; specifications specification status
comment media source extensionsthe definition of 'readystate' in that specification.
MediaSource.removeSourceBuffer() - Web APIs
examples for (i = 0; i < 10; i++) { var sourcebuffer = mediasource.addsourcebuffer(mimecodec); } mediasource.removesourcebuffer(mediasource.sourcebuffers[0]); specifications specification status
comment media source extensionsthe definition of 'removesourcebuffer()' in that specification.
MediaSource - Web APIs
m(); video.play(); //console.log(mediasource.readystate); // ended }); sourcebuffer.appendbuffer(buf); }); }; function fetchab (url, cb) { console.log(url); var xhr = new xmlhttprequest; xhr.open('get', url); xhr.responsetype = 'arraybuffer'; xhr.onload = function () { cb(xhr.response); }; xhr.send(); }; specifications specification status
comment media source extensionsthe definition of 'mediasource' in that specification.
MediaStream() - Web APIs
specifications specification status
comment media capture and streamsthe definition of 'mediastream' in that specification.
active - Web APIs
var promise = navigator.mediadevices.getusermedia({ audio: true, video: true }); promise.then(function(stream) { var startbtn = document.queryselector('#startbtn'); startbtn.disabled = stream.active; };) specifications specification status
comment media capture and streamsthe definition of 'active' in that specification.
MediaStream.addTrack() - Web APIs
return value undefined example specifications specification status
comment media capture and streamsthe definition of 'addtrack()' in that specification.
MediaStream.clone() - Web APIs
specifications specification status
comment media capture and streamsthe definition of 'mediastream.clone()' in that specification.
MediaStream.getAudioTracks() - Web APIs
navigator.mediadevices.getusermedia({audio: true, video: true}) .then(mediastream => { document.queryselector('video').srcobject = mediastream; // stop the audio stream after 5 seconds settimeout(() => { const tracks = mediastream.getaudiotracks() tracks[0].stop() }, 5000) }) specifications specification status
comment media capture and streamsthe definition of 'getaudiotracks()' in that specification.
MediaStream.getTracks() - Web APIs
example navigator.mediadevices.getusermedia({audio: false, video: true}) .then(mediastream => { document.queryselector('video').srcobject = mediastream; // stop the stream after 5 seconds settimeout(() => { const tracks = mediastream.gettracks() tracks[0].stop() }, 5000) }) specifications specification status
comment media capture and streamsthe definition of 'gettracks()' in that specification.
MediaStream.getVideoTracks() - Web APIs
var imagecapture; navigator.mediadevices.getusermedia({video: true}) .then(mediastream => { document.queryselector('video').srcobject = mediastream; const track = mediastream.getvideotracks()[0]; imagecapture = new imagecapture(track); return imagecapture.getphotocapabilities(); }) specifications specification status
comment media capture and streamsthe definition of 'getvideotracks()' in that specification.
MediaStream.id - Web APIs
syntax var id = mediastream.id; example var p = navigator.mediadevices.getusermedia({ audio: true, video: true }); p.then(function(stream) { console.log(stream.id); }) specifications specification status
comment media capture and streamsthe definition of 'mediastream.id' in that specification.
MediaStream.onaddtrack - Web APIs
stream.onaddtrack = function(event) { let tracklist = document.getelementbyid("tracks"); let label = document.createelement("li"); label.innerhtml = event.track.kind + ": " + event.track.label; tracklist.appendchild(label); }; specifications specification status
comment media capture and streamsthe definition of 'mediastream.onaddtrack' in that specification.
MediaStream.onremovetrack - Web APIs
stream.onremovetrack = function(event) { let tracklist = document.getelementbyid("tracks"); let label = document.createelement("li"); label.innerhtml = "removed: " + event.track.kind + ": " + event.track.label; tracklist.appendchild(label); }; specifications specification status
comment media capture and streamsthe definition of 'mediastream.onremovetrack' in that specification.
MediaStream - Web APIs
specifications specification status
comment media capture and streamsthe definition of 'mediastream' in that specification.
MediaStreamAudioSourceNode() - Web APIs
s = { mediastream : stream } var source = new mediastreamaudiosourcenode(audioctx, options); source.connect(audioctx.destination); }).catch(function(err) { console.log('the following gum error occured: ' + err); }); } else { console.log('new getusermedia not supported on your browser!'); } specifications specification status
comment web audio apithe definition of 'mediastreamaudiosourcenode()' in that specification.
MediaStreamAudioSourceNode.mediaStream - Web APIs
examples const audioctx = new window.audiocontext(); let options = { mediastream : stream } let source = new mediastreamaudiosourcenode(audioctx, options); console.log(source.mediastream); specifications specification status
comment web audio apithe definition of 'mediastreamaudiosourcenode.mediastream' in that specification.
MediaStreamTrack: ended event - Web APIs
nded', () => { let statuselem = document.getelementbyid("status-icon"); statuselem.src = "/images/stopped-icon.png"; }) you can also set up the event handler using the mediastreamtrack.onended property: track.onended = function() { let statuselem = document.getelementbyid("status-icon"); statuselem.src = "/images/stopped-icon.png"; } specifications specification status
comment media capture and streamsthe definition of 'ended' in that specification.
MediaStreamTrack.getConstraints() - Web APIs
function switchcameras(track, camera) { const constraints = track.getconstraints(); constraints.facingmode = camera; track.applyconstraints(constraints); } specifications specification status
comment media capture and streamsthe definition of 'getconstraints()' in that specification.
MediaStreamTrack.id - Web APIs
syntax const id = track.id specifications specification status
comment media capture and streamsthe definition of 'mediastreamtrack.id' in that specification.
MediaStreamTrack.kind - Web APIs
specifications specification status
comment media capture and streamsthe definition of 'mediastreamtrack.kind' in that specification.
MediaStreamTrack.label - Web APIs
syntax const label = track.label specifications specification status
comment media capture and streamsthe definition of 'mediastreamtrack.label' in that specification.
MediaStreamTrack: mute event - Web APIs
the following example shows this: musictrack.onmute = event => { document.getelementbyid("timeline-widget").style.backgroundcolor = "#aaa"; } musictrack.mute = event = > { document.getelementbyid("timeline-widget").style.backgroundcolor = "#fff"; } specifications specification status
comment media capture and streamsthe definition of 'mute' in that specification.
MediaStreamTrack.muted - Web APIs
let mutedcount = 0; tracklist.foreach((track) => { if (track.muted) { mutedcount += 1; } }); specifications specification status
comment media capture and streamsthe definition of 'muted' in that specification.
MediaStreamTrack.onended - Web APIs
track.onended = function(event) { let statuselem = document.getelementbyid("status-icon"); statuselem.src = "/images/stopped-icon.png"; } specifications specification status
comment media capture and streamsthe definition of 'mediastreamtrack.onended' in that specification.
MediaStreamTrack.onmute - Web APIs
mytrack.onmute = function(evt) { playstateicon.innerhtml = "f507;"; }; specifications specification status
comment media capture and streamsthe definition of 'mediastreamtrack.onmute' in that specification.
MediaStreamTrack.onunmute - Web APIs
mytrack.onunmute = function(evt) { playstateicon.innerhtml = "🔈"; }; specifications specification status
comment media capture and streamsthe definition of 'mediastreamtrack.onunmute' in that specification.
MediaStreamTrack.stop() - Web APIs
specifications specification status
comment media capture and streamsthe definition of 'mediastreamtrack.stop()' in that specification.
MediaStreamTrack: unmute event - Web APIs
the following example shows this: musictrack.onmute = event => { document.getelementbyid("timeline-widget").style.backgroundcolor = "#aaa"; } musictrack.mute = event = > { document.getelementbyid("timeline-widget").style.backgroundcolor = "#fff"; } specifications specification status
comment media capture and streamsthe definition of 'unmute' in that specification.
MediaStreamTrack - Web APIs
specifications specification status
comment identity for webrtcthe definition of 'isolated tracks' in that specification.
MediaStreamTrackAudioSourceNode() - Web APIs
iastreamtrack: stream.getaudiotracks()[0]; } let source = new mediastreamtrackaudiosourcenode(audioctx, options); source.connect(audioctx.destination); }).catch(function(err) { console.log('the following gum error occured: ' + err); }); } else { console.log('new getusermedia not supported on your browser!'); } specifications specification status
comment web audio apithe definition of 'mediastreamtrackaudiosourcenode()' in that specification.
MediaStreamTrackAudioSourceOptions.mediaStreamTrack - Web APIs
iastreamtrack: stream.getaudiotracks()[0]; } let source = new mediastreamtrackaudiosourcenode(audioctx, options); source.connect(audioctx.destination); }).catch(function(err) { console.log('the following gum error occured: ' + err); }); } else { console.log('new getusermedia not supported on your browser!'); } specifications specification status
comment web audio apithe definition of 'mediastreamtrackaudiosourceoptions.mediastream' in that specification.
MediaStreamTrackEvent() - Web APIs
specifications specification status
comment media capture and streamsthe definition of 'mediastreamtrackevent()' in that specification.
MediaStreamTrackEvent - Web APIs
specifications specification status
comment media capture and streamsthe definition of 'mediastreamtrackevent' in that specification.
MediaTrackSettings - Web APIs
specifications specification status
comment screen capturethe definition of 'mediatracksettings' in that specification.
MediaTrackSupportedConstraints.aspectRatio - Web APIs
example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().aspectratio) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status
comment media capture and streamsthe definition of 'aspectratio' in that specification.
MediaTrackSupportedConstraints.autoGainControl - Web APIs
html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().autogaincontrol) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status
comment media capture and streamsthe definition of 'autogaincontrol' in that specification.
MediaTrackSupportedConstraints.channelCount - Web APIs
example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().channelcount) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status
comment media capture and streamsthe definition of 'channelcount' in that specification.
MediaTrackSupportedConstraints.cursor - Web APIs
let displaymediaoptions = { video: { displaysurface: "browser" }, audio: false; }; if (supportedconstraints.cursor) { displaymediaoptions.video.cursor = "always"; } try { videoelem.srcobject = await navigator.mediadevices.getdisplaymedia(displaymediaoptions); } catch(err) { /* handle the error */ } } specifications specification status
comment screen capturethe definition of 'mediatracksupportedconstraints.cursor' in that specification.
MediaTrackSupportedConstraints.deviceId - Web APIs
example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().deviceid) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status
comment media capture and streamsthe definition of 'deviceid' in that specification.
MediaTrackSupportedConstraints.displaySurface - Web APIs
nstraints(); let displaymediaoptions = { video: { }, audio: false; }; if (supportedconstraints.displaysurface) { displaymediaoptions.video.displaysurface = "monitor"; } try { videoelem.srcobject = await navigator.mediadevices.getdisplaymedia(displaymediaoptions); } catch(err) { /* handle the error */ } } specifications specification status
comment screen capturethe definition of 'mediatracksupportedconstraints.displaysurface' in that specification.
MediaTrackSupportedConstraints.echoCancellation - Web APIs
xample html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().echocancellation) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status
comment media capture and streamsthe definition of 'echocancellation' in that specification.
MediaTrackSupportedConstraints.facingMode - Web APIs
example html <div id="result"> </div> css #result { font: 14px "arial", sans-serif; } javascript let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().facingmode) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status
comment media capture and streamsthe definition of 'facingmode' in that specification.
MediaTrackSupportedConstraints.groupId - Web APIs
example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().groupid) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status
comment media capture and streamsthe definition of 'groupid' in that specification.
MediaTrackSupportedConstraints.height - Web APIs
example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().height) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status
comment media capture and streamsthe definition of 'height' in that specification.
MediaTrackSupportedConstraints.latency - Web APIs
example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().latency) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status
comment media capture and streamsthe definition of 'latency' in that specification.
MediaTrackSupportedConstraints.logicalSurface - Web APIs
nstraints(); let displaymediaoptions = { video: { }, audio: false; }; if (supportedconstraints.logicalsurface) { displaymediaoptions.video.logicalsurface = "monitor"; } try { videoelem.srcobject = await navigator.mediadevices.getdisplaymedia(displaymediaoptions); } catch(err) { /* handle the error */ } } specifications specification status
comment screen capturethe definition of 'mediatracksupportedconstraints.logicalsurface' in that specification.
MediaTrackSupportedConstraints.noiseSuppression - Web APIs
html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().noisesuppression) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status
comment media capture and streamsthe definition of 'noisesuppression' in that specification.
MediaTrackSupportedConstraints.sampleRate - Web APIs
example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().samplerate) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status
comment media capture and streamsthe definition of 'samplerate' in that specification.
MediaTrackSupportedConstraints.sampleSize - Web APIs
example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().samplesize) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status
comment media capture and streamsthe definition of 'samplesize' in that specification.
MediaTrackSupportedConstraints.width - Web APIs
example html content <div id="result"> </div> css content #result { font: 14px "arial", sans-serif; } javascript content let result = document.getelementbyid("result"); if (navigator.mediadevices.getsupportedconstraints().width) { result.innerhtml = "supported!"; } else { result.innerhtml = "not supported!"; } result specifications specification status
comment media capture and streamsthe definition of 'width' in that specification.
Media Session API - Web APIs
*/ }) .catch(error => { console.log(error) }); }); specifications specification status
comment media session standard draft initial definition.
MessageChannel() - Web APIs
specifications specification status
comment html living standardthe definition of 'messagechannel()' in that specification.
MessageChannel.port1 - Web APIs
'p'); var ifr = document.queryselector('iframe'); var otherwindow = ifr.contentwindow; ifr.addeventlistener("load", iframeloaded, false); function iframeloaded() { otherwindow.postmessage('hello from the main page!', '*', [channel.port2]); } channel.port1.onmessage = handlemessage; function handlemessage(e) { para.innerhtml = e.data; } specifications specification status
comment html living standardthe definition of 'port1' in that specification.
MessageChannel - Web APIs
specifications specification status
comment html living standardthe definition of 'message channels' in that specification.
MessageEvent.MessageEvent() - Web APIs
example var mymessage = new messageevent('worker', { data : 'hello' }); specifications specification status
comment html living standardthe definition of 'messageevent()' in that specification.
MessageEvent.data - Web APIs
example myworker.onmessage = function(e) { result.textcontent = e.data; console.log('message received from worker'); }; specifications specification status
comment html living standardthe definition of 'messageevent: data' in that specification.
MessageEvent.lastEventId - Web APIs
example myworker.onmessage = function(e) { result.textcontent = e.data; console.log('message received from worker'); console.log(e.lasteventid); }; specifications specification status
comment html living standardthe definition of 'messageevent: lasteventid' in that specification.
MessageEvent.origin - Web APIs
example myworker.onmessage = function(e) { result.textcontent = e.data; console.log('message received from worker'); console.log(e.origin); }; specifications specification status
comment html living standardthe definition of 'messageevent: origin' in that specification.
MessageEvent.source - Web APIs
example myworker.onmessage = function(e) { result.textcontent = e.data; console.log('message received from worker'); console.log(e.source); }; specifications specification status
comment html living standardthe definition of ' messageevent: source' in that specification.
MessageEvent - Web APIs
} specifications specification status
comment html living standardthe definition of 'messageevent' in that specification.
MessagePort.close() - Web APIs
channel.port1.addeventlistener('message', handlemessage, false); function handlemessage(e) { para.innerhtml = e.data; textinput.value = ''; } channel.port1.start(); you could stop messages being sent at any time using channel.port1.close(); specifications specification status
comment html living standardthe definition of 'close()' in that specification.
MessagePort.start() - Web APIs
would be to do this using eventtarget.addeventlistener, however, when this method is used, you need to explicitly call start() to begin the flow of messages to this document: channel.port1.addeventlistener('message', handlemessage, false); function handlemessage(e) { para.innerhtml = e.data; textinput.value = ''; } channel.port1.start(); specifications specification status
comment html living standardthe definition of 'start()' in that specification.
MessagePort - Web APIs
specifications specification status
comment html living standardthe definition of 'message ports' in that specification.
Metadata - Web APIs
specifications specification status
comment file and directory entries api draft draft of proposed api this api has no official w3c or whatwg specification.
MimeType - Web APIs
specifications specification status
comment html living standardthe definition of 'mimetype' in that specification.
MimeTypeArray - Web APIs
} specifications specification status
comment html living standardthe definition of 'mimetypearray' in that specification.
MouseEvent() - Web APIs
specifications specification status
comment css object model (cssom) view modulethe definition of 'mouseevent' in that specification.
MouseEvent.altKey - Web APIs
html <p>click anywhere to test the <code>altkey</code> property.</p> <p id="log"></p> javascript let log = document.queryselector('#log'); document.addeventlistener('click', logkey); function logkey(e) { log.textcontent = `the alt key is pressed: ${e.altkey}`; } result specifications specification status
comment document object model (dom) level 3 events specificationthe definition of 'mouseevent.altkey' in that specification.
MouseEvent.button - Web APIs
tton) { case 0: log.textcontent = 'left button clicked.'; break; case 1: log.textcontent = 'middle button clicked.'; break; case 2: log.textcontent = 'right button clicked.'; break; default: log.textcontent = `unknown button code: ${e.button}`; } } } result specifications specification status
comment document object model (dom) level 3 events specificationthe definition of 'mouseevent.button' in that specification.
MouseEvent.buttons - Web APIs
ew text('?'); function logbuttons(e) { log.data = `${e.buttons} (${e.type})`; // log.nodevalue= `${e.buttons} (${e.type})`; } document.addeventlistener('mouseup', logbuttons); document.addeventlistener('mousedown', logbuttons); // document.addeventlistener('mousemove', logbuttons); document.queryselector('#log').appendchild(log) result specifications specification status
comment document object model (dom) level 3 events specificationthe definition of 'mouseevent.buttons' in that specification.
MouseEvent.clientX - Web APIs
html <p>move your mouse to see its position.</p> <p id="screen-log"></p> javascript let screenlog = document.queryselector('#screen-log'); document.addeventlistener('mousemove', logkey); function logkey(e) { screenlog.innertext = ` screen x/y: ${e.screenx}, ${e.screeny} client x/y: ${e.clientx}, ${e.clienty}`; } result specifications specification status
comment css object model (cssom) view modulethe definition of 'clientx' in that specification.
MouseEvent.clientY - Web APIs
html <p>move your mouse to see its position.</p> <p id="screen-log"></p> javascript let screenlog = document.queryselector('#screen-log'); document.addeventlistener('mousemove', logkey); function logkey(e) { screenlog.innertext = ` screen x/y: ${e.screenx}, ${e.screeny} client x/y: ${e.clientx}, ${e.clienty}`; } result specifications specification status
comment css object model (cssom) view modulethe definition of 'clienty' in that specification.
MouseEvent.ctrlKey - Web APIs
html <p>click anywhere to test the <code>ctrlkey</code> property.</p> <p id="log"></p> javascript let log = document.queryselector('#log'); document.addeventlistener('click', logkey); function logkey(e) { log.textcontent = `the ctrl key is pressed: ${e.ctrlkey}`; } result specifications specification status
comment document object model (dom) level 3 events specificationthe definition of 'mouseevent.ctrlkey' in that specification.
MouseEvent.getModifierState() - Web APIs
specifications specification status
comment document object model (dom) level 3 events specificationthe definition of 'getmodifierstate()' in that specification.
MouseEvent.initMouseEvent() - Web APIs
arget,stag = dt.tagname.tolowercase(); document.getelementbyid("out").innerhtml = stag; }; var simulateclick = function(){ var evt = document.createevent("mouseevents"); evt.initmouseevent("click", true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null); document.body.dispatchevent(evt); } simulateclick(); result specifications specification status
comment document object model (dom) level 3 events specificationthe definition of 'mouseevent.initmouseevent()' in that specification.
MouseEvent.metaKey - Web APIs
html <p>click anywhere to test the <code>metakey</code> property.</p> <p id="log"></p> javascript let log = document.queryselector('#log'); document.addeventlistener('click', logkey); function logkey(e) { log.textcontent = `the meta key is pressed: ${e.metakey}`; } result specifications specification status
comment document object model (dom) level 3 events specificationthe definition of 'mouseevent.metakey' in that specification.
MouseEvent.movementX - Web APIs
id="log">move your mouse around.</p> javascript function logmovement(event) { log.insertadjacenthtml('afterbegin', `movement: ${event.movementx}, ${event.movementy}<br>`); while (log.childnodes.length > 128) log.lastchild.remove() } const log = document.getelementbyid('log'); document.addeventlistener('mousemove', logmovement); result specifications specification status
comment pointer lockthe definition of 'mouseevent.movementx' in that specification.
MouseEvent.movementY - Web APIs
html <p id="log">move your mouse around.</p> javascript function logmovement(event) { log.innertext = `movement: ${event.movementx}, ${event.movementy}\n${log.innertext}`; } const log = document.getelementbyid('log'); document.addeventlistener('mousemove', logmovement); result specifications specification status
comment pointer lockthe definition of 'mouseevent.movementy' in that specification.
MouseEvent.offsetX - Web APIs
specifications specification status
comment css object model (cssom) view modulethe definition of 'mouseevent' in that specification.
MouseEvent.offsetY - Web APIs
specifications specification status
comment css object model (cssom) view modulethe definition of 'mouseevent' in that specification.
MouseEvent.pageX - Web APIs
.box { width: 400px; height: 250px; border: 2px solid darkblue; background-color: blue; color: white; font: 16px "zilla", "open sans", "helvetica", "arial", sans-serif; } result try this out here: specifications specification status
comment css object model (cssom) view modulethe definition of 'pagex' in that specification.
MouseEvent.pageY - Web APIs
examples var pagey = event.pagey; specifications specification status
comment css object model (cssom) view modulethe definition of 'pagey' in that specification.
MouseEvent.relatedTarget - Web APIs
event.relatedtarget.id : "unknown"; log.innertext = `\ninto ${event.target.id} from ${related} ${mouseoutlog.innertext}`; } result specifications specification status
comment ui eventsthe definition of 'mouseevent.relatedtarget' in that specification.
MouseEvent.screenX - Web APIs
p events on the window, document, or other roomy elements, you can get the coordinates of that event (e.g., a click) and route it properly, as the following example demonstrates: function checkclickmap(e) { if (e.screenx < 50) doredbutton(); if (50 <= e.screenx && e.screenx < 100) doyellowbutton(); if (e.screenx >= 100) doredbutton(); } specifications specification status
comment css object model (cssom) view modulethe definition of 'screenx' in that specification.
MouseEvent.screenY - Web APIs
html <p>move your mouse to see its position.</p> <p id="screen-log"></p> javascript let screenlog = document.queryselector('#screen-log'); document.addeventlistener('mousemove', logkey); function logkey(e) { screenlog.innertext = ` screen x/y: ${e.screenx}, ${e.screeny} client x/y: ${e.clientx}, ${e.clienty}`; } result specifications specification status
comment css object model (cssom) view modulethe definition of 'screeny' in that specification.
MouseEvent.shiftKey - Web APIs
html <p>click anywhere to test the <code>shiftkey</code> property.</p> <p id="log"></p> javascript let log = document.queryselector('#log'); document.addeventlistener('click', logkey); function logkey(e) { log.textcontent = `the shift key is pressed: ${e.shiftkey}`; } result specifications specification status
comment document object model (dom) level 3 events specificationthe definition of 'mouseevent.shiftkey' in that specification.
MouseEvent.x - Web APIs
specifications specification status
comment css object model (cssom) view modulethe definition of 'mouseevent.x' in that specification.
MouseEvent.y - Web APIs
specifications specification status
comment css object model (cssom) view modulethe definition of 'mouseevent.y' in that specification.
MouseEvent - Web APIs
elementbyid("checkbox"); //element to click on var canceled = !cb.dispatchevent(evt); if(canceled) { // a handler called preventdefault alert("canceled"); } else { // none of the handlers called preventdefault alert("not canceled"); } } document.getelementbyid("button").addeventlistener('click', simulateclick); result specifications specification status
comment css object model (cssom) view modulethe definition of 'mouseevent' in that specification.
MutationObserver.observe() - Web APIs
er`, // passing it a callback function const observer = new mutationobserver(function() { console.log('callback that runs when observer is triggered'); }); // call `observe()` on that mutationobserver instance, // passing it the element to observe, and the options object observer.observe(elementtoobserve, {subtree: true, childlist: true}); specifications specification status
comment domthe definition of 'mutationobserver.observe()' in that specification.
MutationObserver - Web APIs
' + mutation.attributename + ' attribute was modified.'); } } }; // create an observer instance linked to the callback function const observer = new mutationobserver(callback); // start observing the target node for configured mutations observer.observe(targetnode, config); // later, you can stop observing observer.disconnect(); specifications specification status
comment domthe definition of 'mutationobserver' in that specification.
MutationObserverInit.subtree - Web APIs
to monitor the entire subtree for attribute changes, simply set subtree to true: var options = { attributes: true, subtree: true }; example specifications specification status
comment domthe definition of 'mutationobserverinit.subtree' in that specification.
MutationRecord - Web APIs
note that for this to work as expected, attributeoldvalue or characterdataoldvalue must be set to true in the corresponding mutationobserverinit parameter of the mutationobserver observe method specifications specification status
comment domthe definition of 'mutationrecord' in that specification.
NDEFMessage - Web APIs
specifications specification status
comment web nfc, ndefmessage draft initial definition.
NDEFReader - Web APIs
specifications specification status
comment web nfc, ndefreader draft initial definition.
NDEFRecord - Web APIs
specifications specification status
comment web nfc, ndefrecord draft initial definition.
NDEFWriter - Web APIs
specifications specification status
comment web nfc, ndefreader draft initial definition.
NameList - Web APIs
specifications specification status
comment document object model (dom) level 3 core specificationthe definition of 'namelist' in that specification.
NamedNodeMap - Web APIs
specifications specification status
comment domthe definition of 'namednodemap' in that specification.
NavigationPreloadManager - Web APIs
return fetch(event.request); }()); }); specifications specification status
comment service workersthe definition of 'navigationpreloadmanager' in that specification.
Navigation Timing API - Web APIs
specifications specification status
comment navigation timing level 2 working draft adds performancenavigationtiming navigation timing recommendation initial definition.
Navigator.clipboard - Web APIs
specifications specification status
comment clipboard api and eventsthe definition of 'navigator.clipboard' in that specification.
Navigator.connection - Web APIs
specifications specification status
comment network information apithe definition of 'navigator.connection' in that specification.
Navigator.deviceMemory - Web APIs
example const memory = navigator.devicememory console.log (`this device has at least ${memory}gib of ram.`) specifications specification status
comment device memory 1the definition of 'devicememory' in that specification.
Navigator.doNotTrack - Web APIs
example console.log(navigator.donottrack); // prints "1" if dnt is enabled; "0" if the user opted-in for tracking; otherwise this is "unspecified" specifications specification status
comment tracking preference expression (dnt)the definition of 'navigator.donottrack' in that specification.
Navigator.geolocation - Web APIs
syntax geo = navigator.geolocation specifications specification status
comment geolocation apithe definition of 'navigator.geolocation' in that specification.
Navigator.getGamepads() - Web APIs
%d buttons, %d axes.", gp.index, gp.id, gp.buttons.length, gp.axes.length ); }); specifications specification status
comment gamepadthe definition of 'the gamepad api specification' in that specification.
Navigator.locks - Web APIs
specifications specification status
comment web locks apithe definition of 'locks' in that specification.
Navigator.maxTouchPoints - Web APIs
syntax touchpoints = navigator.maxtouchpoints; example if (navigator.maxtouchpoints > 1) { // browser supports multi-touch } specifications specification status
comment pointer events – level 2the definition of 'maxtouchpoints' in that specification.
Navigator.mediaDevices - Web APIs
specifications specification status
comment media capture and streamsthe definition of 'navigatorusermedia.mediadevices' in that specification.
Navigator.mediaSession - Web APIs
if ("mediasession" in navigator){ navigator.mediasession.metadata = new mediametadata({ title: "podcast episode title", artist: "podcast host", album: "podcast name", artwork: [{src: "podcast.jpg"}] }); } specifications specification status
comment media session standardthe definition of 'navigator.mediasession' in that specification.
Navigator.oscpu - Web APIs
specifications specification status
comment html living standardthe definition of 'navigatorid: oscpu' in that specification.
Navigator.productSub - Web APIs
specifications specification status
comment html living standardthe definition of 'navigatorid: productsub' in that specification.
Navigator.registerProtocolHandler() - Web APIs
see the screenshot below for an example on google.co.uk: specifications specification status
comment html living standardthe definition of 'registerprotocolhandler()' in that specification.
Navigator.share() - Web APIs
avigator.canshare && navigator.canshare({ files: filesarray })) { navigator.share({ files: filesarray, title: 'pictures', text: 'our pictures.', }) .then(() => console.log('share was successful.')) .catch((error) => console.log('sharing failed', error)); } else { console.log(`your system doesn't support sharing files.`); } specifications specification status
comment web share apithe definition of 'share()' in that specification.
Navigator.vendor - Web APIs
specifications specification status
comment html living standardthe definition of 'navigatorid: vendor' in that specification.
Navigator.vendorSub - Web APIs
syntax vensub = window.navigator.vendorsub value the empty string specifications specification status
comment html living standardthe definition of 'navigatorid: vendorsub' in that specification.
Navigator.vibrate() - Web APIs
specifications specification status
comment vibration api recommendation linked to spec is the latest editor's draft; w3c version is a rec.
Navigator.wakeLock - Web APIs
syntax const wakelock = navigator.wakelock; specifications specification status
comment screen wake lock api editor's draft initial definition ...
Navigator.xr - Web APIs
*/ } else { /* webxr isn't available */ } specifications specification status
comment webxr device apithe definition of 'navigator.xr' in that specification.
Navigator - Web APIs
specifications specification status
comment html living standardthe definition of 'the navigator object' in that specification.
navigator.hardwareConcurrency - Web APIs
let workerlist = []; for (let i = 0; i < window.navigator.hardwareconcurrency; i++) { let newworker = { worker: new worker('cpuworker.js'), inuse: false }; workerlist.push(newworker); } specification specification status
comment html living standardthe definition of 'navigator.hardwareconcurrency' in that specification.
NavigatorID.appName - Web APIs
specifications specification status
comment html living standardthe definition of 'navigatorid.appname' in that specification.
NavigatorID.platform - Web APIs
specifications specification status
comment html living standardthe definition of 'navigatorid.platform' in that specification.
NavigatorID.product - Web APIs
specifications specification status
comment html living standardthe definition of 'navigatorid.product' in that specification.
NavigatorID.taintEnabled() - Web APIs
syntax result = window.navigator.taintenabled() specifications specification status
comment html living standardthe definition of 'navigatorid.taintenabled' in that specification.
NavigatorID.userAgent - Web APIs
following general structure: useragent = appcodename/appversion number (platform; security; os-or-cpu; localization; rv: revision-version-number) product/productsub application-name application-name-version example alert(window.navigator.useragent) // alerts "mozilla/5.0 (windows; u; win98; en-us; rv:0.9.2) gecko/20010725 netscape6/6.1" specifications specification status
comment html living standardthe definition of 'navigatorid.useragent' in that specification.
NavigatorID - Web APIs
specifications specification status
comment html living standardthe definition of 'navigatorid' in that specification.
NavigatorLanguage.language - Web APIs
example if (/^en\b/.test(navigator.language)) { dolangselect(window.navigator.language); } specifications specification status
comment html living standardthe definition of 'navigatorlanguage: language' in that specification.
NavigatorLanguage.languages - Web APIs
syntax preferredlanguages = globalobj.navigator.languages examples navigator.language //"en-us" navigator.languages //["en-us", "zh-cn", "ja-jp"] specifications specification status
comment html living standardthe definition of 'navigatorlanguage: languages' in that specification.
NavigatorLanguage - Web APIs
specifications specification status
comment html living standardthe definition of 'navigatorlanguage' in that specification.
Navigator.onLine - Web APIs
to see changes in the network state, use addeventlistener to listen for the events on window.online and window.offline, as in the following example: window.addeventlistener('offline', function(e) { console.log('offline'); }); window.addeventlistener('online', function(e) { console.log('online'); }); specifications specification status
comment html living standardthe definition of 'navigator.online' in that specification.
NavigatorPlugins.mimeTypes - Web APIs
example function isjavapresent() { return 'application/x-java-applet' in navigator.mimetypes; } function getjavaplugindescription() { var mimetype = navigator.mimetypes['application/x-java-applet']; if (mimetype === undefined) { // no java plugin present return undefined; } return mimetype.enabledplugin.description; } specifications specification status
comment html living standardthe definition of 'navigatorplugins.mimetypes' in that specification.
NavigatorPlugins - Web APIs
specifications specification status
comment html living standardthe definition of 'navigatorplugins' in that specification.
NetworkInformation.downlinkMax - Web APIs
vigator.connection.effectivetype; if ('downlinkmax' in navigator.connection) { downlinkmax = navigator.connection.downlinkmax; } } console.log('current connection type: ' + connectiontype + ' (downlink max: ' + downlinkmax + ')'); } logconnectiontype(); navigator.connection.addeventlistener('change', logconnectiontype); specifications specification status
comment network information apithe definition of 'downlinkmax' in that specification.
NetworkInformation.onchange - Web APIs
} // register for event changes: navigator.connection.onchange = changehandler; // another way: navigator.connection.addeventlistener('change', changehandler); specifications specification status
comment network information apithe definition of 'onchange' in that specification.
NetworkInformation.type - Web APIs
syntax var type = netinfo.type return value an enumerated value that is one of the following values: "bluetooth" "cellular" "ethernet" "none" "wifi" "wimax" "other" "unknown" specifications specification status
comment network information apithe definition of 'type' in that specification.
NetworkInformation - Web APIs
specifications specification status
comment network information apithe definition of 'networkinformation' in that specification.
Node.appendChild() - Web APIs
example // create a new paragraph element, and append it to the end of the document body let p = document.createelement("p"); document.body.appendchild(p); specifications specification status
comment domthe definition of 'node.appendchild()' in that specification.
Node.baseURI - Web APIs
specifications specification status
comment domthe definition of 'node: baseuri' in that specification.
Node.contains() - Web APIs
false : document.body.contains(node); } specifications specification status
comment domthe definition of 'node.contains()' in that specification.
Node.getRootNode() - Web APIs
; var shadowchild = shadowroot.queryselector('.js-shadowchild'); // the default value of composed is false console.log(shadowchild.getrootnode() === shadowroot); // true console.log(shadowchild.getrootnode({composed:false}) === shadowroot); // true console.log(shadowchild.getrootnode({composed:true}).nodename); // #document </script> specifications specification status
comment domthe definition of 'getrootnode()' in that specification.
Node.getUserData() - Web APIs
example var d = document.setuserdata('key', 15, null); console.log(document.getuserdata('key')); // 15 specifications specification status
comment document object model (dom) level 3 core specificationthe definition of 'node.getuserdata()' in that specification.
Node.hasChildNodes() - Web APIs
prototype.haschildnodes = prototype.haschildnodes || function() { return !!this.firstchild; } })(node.prototype); there are various ways to determine whether the node has a child node: node.haschildnodes() node.firstchild != null (or just node.firstchild) node.childnodes && node.childnodes.length (or node.childnodes.length > 0) specifications specification status
comment domthe definition of 'node: haschildnodes' in that specification.
Node.isConnected - Web APIs
*/ if (!('isconnected' in node.prototype)) { object.defineproperty(node.prototype, 'isconnected', { get() { return ( !this.ownerdocument || !( this.ownerdocument.comparedocumentposition(this) & this.document_position_disconnected ) ); }, }); } specifications specification status
comment domthe definition of 'isconnected' in that specification.
Node.isDefaultNamespace() - Web APIs
example var xulns = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; var el = document.getelementsbytagnamens(xulns, 'textbox')[0]; alert(el.isdefaultnamespace(xulns)); // true specifications specification status
comment domthe definition of 'node: isdefaultnamespace' in that specification.
Node.isEqualNode() - Web APIs
utput"); let divlist = document.getelementsbytagname("div"); output.innerhtml += "div 0 equals div 0: " + divlist[0].isequalnode(divlist[0]) + "<br/>"; output.innerhtml += "div 0 equals div 1: " + divlist[0].isequalnode(divlist[1]) + "<br/>"; output.innerhtml += "div 0 equals div 2: " + divlist[0].isequalnode(divlist[2]) + "<br/>"; results specifications specification status
comment domthe definition of 'node.isequalnode' in that specification.
Node.isSameNode() - Web APIs
tput"); let divlist = document.getelementsbytagname("div"); output.innerhtml += "div 0 same as div 0: " + divlist[0].issamenode(divlist[0]) + "<br/>"; output.innerhtml += "div 0 same as div 1: " + divlist[0].issamenode(divlist[1]) + "<br/>"; output.innerhtml += "div 0 same as div 2: " + divlist[0].issamenode(divlist[2]) + "<br/>"; results specifications specification status
comment domthe definition of 'node: issamenode' in that specification.
Node.isSupported() - Web APIs
var main = document.getelementbyid('doc'); var output = main.issupported('html', '2.0'); </script> specifications specification status
comment document object model (dom) level 3 core specificationthe definition of 'node.issupported()' in that specification.
Node.localName - Web APIs
specifications specification status
comment document object model (dom) level 3 core specificationthe definition of 'node.localname' in that specification.
Node.namespaceURI - Web APIs
specifications specification status
comment document object model (dom) level 3 core specificationthe definition of 'node.namespaceuri' in that specification.
Node.normalize() - Web APIs
"part 1 ") ); wrapper.appendchild( document.createtextnode("part 2 ") ); // at this point, wrapper.childnodes.length === 2 // wrapper.childnodes[0].textcontent === "part 1 " // wrapper.childnodes[1].textcontent === "part 2 " wrapper.normalize(); // now, wrapper.childnodes.length === 1 // wrapper.childnodes[0].textcontent === "part 1 part 2 " specifications specification status
comment domthe definition of 'node: normalize' in that specification.
Node.ownerDocument - Web APIs
example // given a node "p", get the top-level html // child of the document object var d = p.ownerdocument; var html = d.documentelement; specifications specification status
comment domthe definition of 'node: ownerdocument' in that specification.
Node.parentElement - Web APIs
example if (node.parentelement) { node.parentelement.style.color = "red"; } specifications specification status
comment domthe definition of 'parentelement' in that specification.
Node.parentNode - Web APIs
specifications specification status
comment domthe definition of 'node: parentnode' in that specification.
Node.prefix - Web APIs
specifications specification status
comment document object model (dom) level 3 core specificationthe definition of 'node.prefix' in that specification.
Node.removeChild() - Web APIs
iv id="top"> <div id="nested"></div> </div> <script type="text/javascript"> let top = document.getelementbyid("top"); let nested = document.getelementbyid("nested"); // this first call correctly removes the node let garbage = top.removechild(nested); // throws uncaught notfounderror garbage = top.removechild(nested); </script> specifications specification status
comment domthe definition of 'node: removechild' in that specification.
Node.replaceChild() - Web APIs
ndchild(sp1_content); // build a reference to the existing node to be replaced var sp2 = document.getelementbyid("childspan"); var parentdiv = sp2.parentnode; // replace existing node sp2 with the new span element sp1 parentdiv.replacechild(sp1, sp2); // result: // <div> // <span id="newspan">new replacement span element.</span> // </div> specifications specification status
comment domthe definition of 'node: replacechild' in that specification.
Node.setUserData() - Web APIs
andle:function (o, k, d, s, ds) {console.log(o+'::'+k+'::'+d+'::'+s+'::'+ds)}}); // 2::key::15::[object element]::[object element] console.log(d.documentelement.getuserdata('key')); // 15 var e = document.importnode(d.documentelement, true); // causes handler to be called console.log(e.getuserdata('key')); // null since user data is not copied specifications specification status
comment document object model (dom) level 3 core specificationthe definition of 'node.setuserdata()' in that specification.
NodeFilter.acceptNode() - Web APIs
/^\s*$/.test(node.data) ) { return nodefilter.filter_accept; } } }, false ); // show the content of every non-empty text node that is a child of root var node; while ((node = iterator.nextnode())) { alert(node.data); } specifications specification status
comment domthe definition of 'nodefilter.acceptnode()' in that specification.
NodeFilter - Web APIs
/^\s*$/.test(node.data) ) { return nodefilter.filter_accept } } }, false ); // show the content of every non-empty text node that is a child of root let node; while ((node = nodeiterator.nextnode())) { alert(node.data) } specifications specification status
comment domthe definition of 'nodefilter' in that specification.
NodeIterator.detach() - Web APIs
syntax nodeiterator.detach(); example var nodeiterator = document.createnodeiterator( document.body, nodefilter.show_element, { acceptnode: function(node) { return nodefilter.filter_accept; } }, false ); nodeiterator.detach(); // detaches the iterator nodeiterator.nextnode(); // throws an invalid_state_err exception specifications specification status
comment domthe definition of 'nodeiterator.detach' in that specification.
NodeIterator.expandEntityReferences - Web APIs
syntax expand = nodeiterator.expandentityreferences; example var nodeiterator = document.createnodeiterator( document.body, nodefilter.show_element, { acceptnode: function(node) { return nodefilter.filter_accept; } }, false ); expand = nodeiterator.expandentityreferences; specifications specification status
comment document object model (dom) level 2 traversal and range specificationthe definition of 'nodeiterator.expandentityreferences' in that specification.
NodeIterator.filter - Web APIs
syntax nodefilter = nodeiterator.filter; example const nodeiterator = document.createnodeiterator( document.body, nodefilter.show_element, { acceptnode: function(node) { return nodefilter.filter_accept; } }, false ); nodefilter = nodeiterator.filter; specifications specification status
comment domthe definition of 'nodeiterator.filter' in that specification.
NodeIterator.nextNode() - Web APIs
syntax node = nodeiterator.nextnode(); example var nodeiterator = document.createnodeiterator( document.body, nodefilter.show_element, { acceptnode: function(node) { return nodefilter.filter_accept; } }, false // this optional argument is not used any more ); currentnode = nodeiterator.nextnode(); // returns the next node specifications specification status
comment domthe definition of 'nodeiterator.nextnode' in that specification.
NodeIterator.pointerBeforeReferenceNode - Web APIs
syntax flag = nodeiterator.pointerbeforereferencenode; example var nodeiterator = document.createnodeiterator( document.body, nodefilter.show_element, { acceptnode: function(node) { return nodefilter.filter_accept; } }, false ); flag = nodeiterator.pointerbeforereferencenode; specifications specification status
comment domthe definition of 'nodeiterator.pointerbeforereferencenode' in that specification.
NodeIterator.previousNode() - Web APIs
document.body, nodefilter.show_element, { acceptnode: function(node) { return nodefilter.filter_accept; } }, false // this optional argument is not used any more ); currentnode = nodeiterator.nextnode(); // returns the next node previousnode = nodeiterator.previousnode(); // same result, since we backtracked to the previous node specifications specification status
comment domthe definition of 'nodeiterator.previousnode' in that specification.
NodeIterator.referenceNode - Web APIs
syntax node = nodeiterator.referencenode; example var nodeiterator = document.createnodeiterator( document.body, nodefilter.show_element, { acceptnode: function(node) { return nodefilter.filter_accept; } }, false ); node = nodeiterator.referencenode; specifications specification status
comment domthe definition of 'nodeiterator.referencenode' in that specification.
NodeIterator.root - Web APIs
syntax root = nodeiterator.root; example var nodeiterator = document.createnodeiterator( document.body, nodefilter.show_element, { acceptnode: function(node) { return nodefilter.filter_accept; } }, false ); root = nodeiterator.root; // document.body in this case specifications specification status
comment domthe definition of 'nodeiterator.root' in that specification.
NodeList.item() - Web APIs
alternate syntax javascript also offers an array-like bracketed syntax for obtaining an item from a nodelist by index: nodeitem = nodelist[index] example var tables = document.getelementsbytagname("table"); var firsttable = tables.item(1); // or simply tables[1] - returns the second table in the dom specifications specification status
comment domthe definition of 'nodelist: item' in that specification.
NodeList.length - Web APIs
// all the paragraphs in the document var items = document.getelementsbytagname("p"); // for each item in the list, // append the entire element as a string of html var gross = ""; for (var i = 0; i < items.length; i++) { gross += items[i].innerhtml; } // gross is now all the html for the paragraphs specifications specification status
comment domthe definition of 'nodelist: length' in that specification.
NodeList - Web APIs
there is also an internet explorer-compatible way to use array.prototype.foreach for iteration: const list = document.queryselectorall('input[type=checkbox]'); array.prototype.foreach.call(list, function (checkbox) { checkbox.checked = true; }); specifications specification status
comment domthe definition of 'nodelist' in that specification.
NonDocumentTypeChildNode.nextElementSibling - Web APIs
ntsibling', { configurable: true, enumerable: true, get: function () { var el = this; while (el = el.nextsibling) { if (el.nodetype === 1) { return el; } } return null; }, set: undefined }); }); })([element.prototype, characterdata.prototype]); specifications specification status
comment domthe definition of 'childnodenextelementsibling' in that specification.
NonDocumentTypeChildNode.previousElementSibling - Web APIs
sibling', { configurable: true, enumerable: true, get: function () { let el = this; while (el = el.previoussibling) { if (el.nodetype === 1) { return el; } } return null; }, set: undefined }); }); })([element.prototype, characterdata.prototype]); specifications specification status
comment domthe definition of 'nondocumenttypechildnode.previouselementsibling' in that specification.
Notation - Web APIs
specifications specification status
comment document object model (dom) level 3 core specificationthe definition of 'notation' in that specification.
Notification.Notification() - Web APIs
function spawnnotification(thebody,theicon,thetitle) { var options = { body: thebody, icon: theicon } var n = new notification(thetitle,options); } specifications specification status
comment notifications apithe definition of 'notification() constructor' in that specification.
Notification.body - Web APIs
examples function spawnnotification(thebody, theicon, thetitle) { var options = { body: thebody, icon: theicon } var n = new notification(thetitle, options); console.log(n.body); } specifications specification status
comment notifications apithe definition of 'body' in that specification.
Notification.data - Web APIs
var options = { body: 'do you like my body?', data: 'i like peas.' } var n = new notification('test notification',options); console.log(n.data) // should return 'i like peas.' specifications specification status
comment notifications apithe definition of 'data' in that specification.
Notification.dir - Web APIs
var options = { body: 'do you like my body?', dir: 'rtl' } var n = new notification('test notification',options); console.log(n.dir) // should return 'rtl' specifications specification status
comment notifications apithe definition of 'dir' in that specification.
Notification.icon - Web APIs
var notification = new notification('to do list', { body: text, icon: img }); specifications specification status
comment notifications apithe definition of 'icon' in that specification.
Notification.lang - Web APIs
var options = { body: 'do you like my body?', lang: 'en-us' } var n = new notification('test notification',options); console.log(n.lang) // should return 'en-us' specifications specification status
comment notifications apithe definition of 'lang' in that specification.
Notification.maxActions - Web APIs
const maxactions = notification.maxactions; console.log('this device can display at most ' + maxactions + ' actions on each notification.'); specifications specification status
comment notifications api living standard living standard ...
Notification.onclick - Web APIs
he following example, we use an onclick handler to open a webpage in a new tab (specified by the inclusion of the '_blank' parameter) once a notification is clicked: notification.onclick = function(event) { event.preventdefault(); // prevent the browser from focusing the notification's tab window.open('http://www.mozilla.org', '_blank'); } specifications specification status
comment notifications apithe definition of 'onclick' in that specification.
Notification.renotify - Web APIs
var options = { body: 'do you like my body?', renotify: true } var n = new notification('test notification',options); console.log(n.renotify) // should log true specifications specification status
comment notifications apithe definition of 'renotify' in that specification.
Notification.silent - Web APIs
var options = { body: 'do you like my body?', silent: true } var n = new notification('test notification', options); console.log(n.silent) // should log true specifications specification status
comment notifications apithe definition of 'silent' in that specification.
Notification.tag - Web APIs
specifications specification status
comment notifications apithe definition of 'tag' in that specification.
Notification.timestamp - Web APIs
var dts = math.floor(date.now()); var options = { body: 'do you like my body?', timestamp: dts } var n = new notification('test notification',options); console.log(n.timestamp) // should log original timestamp specifications specification status
comment notifications apithe definition of 'timestamp' in that specification.
Notification.title - Web APIs
examples function spawnnotification(thebody,theicon,thetitle) { var options = { body: thebody, icon: theicon } var n = new notification(thetitle,options); console.log(n.title) } specifications specification status
comment notifications apithe definition of 'title' in that specification.
Notification.vibrate - Web APIs
var options = { body: 'do you like my body?', vibrate: [200, 100, 200] } var n = new notification('test notification',options); console.log(n.vibrate) // should log [200,100,200] specifications specification status
comment notifications apithe definition of 'vibrate' in that specification.
Notification - Web APIs
specifications specification status
comment notifications api living standard living standard ...
NotificationAction - Web APIs
action: 'archive', title: 'archive' } ] }); self.addeventlistener('notificationclick', function(event) { event.notification.close(); if (event.action === 'archive') { // archive action was clicked archiveemail(); } else { // main body of notification was clicked clients.openwindow('/inbox'); } }, false); specifications specification status
comment notifications api living standard living standard ...
NotificationEvent.NotificationEvent() - Web APIs
example var n = new notification('hello'); var init = { notification: n }; var mynotificationevent = new notificationevent(type, init); specifications specification status
comment notifications apithe definition of 'notificationevent() constructor' in that specification.
NotificationEvent.action - Web APIs
example self.registration.shownotification("new articles available", { actions: [{action: "get", title: "get now."}] }); self.addeventlistener('notificationclick', function(event) { event.notification.close(); if (event.action === 'get') { synchronizereader(); } else { clients.openwindow("/reader"); } }, false); specifications specification status
comment notifications apithe definition of 'action' in that specification.
NotificationEvent.notification - Web APIs
if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }); specifications specification status
comment notifications apithe definition of 'notification' in that specification.
NotificationEvent - Web APIs
if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }); specifications specification status
comment notifications apithe definition of 'notificationevent' in that specification.
Using the Notifications API - Web APIs
l); } }, 200); } // otherwise, we can fallback to a regular modal alert else { alert("hi!"); } }); } // if the user refuses to get notified else { // we can fallback to a regular modal alert alert("hi!"); } }); }); see the live result below: specifications specification status
comment notifications api living standard living standard ...
OES_element_index_uint - Web APIs
examples var ext = gl.getextension('oes_element_index_uint'); gl.drawelements(gl.points, 8, gl.unsigned_int, 0); specifications specification status
comment oes_element_index_uintthe definition of 'oes_element_index_uint' in that specification.
OES_standard_derivatives - Web APIs
pt type="x-shader/x-fragment"> #extension gl_ext_shader_texture_lod : enable #extension gl_oes_standard_derivatives : enable uniform sampler2d mytexture; varying vec2 texcoord; void main(){ gl_fragcolor = texture2dgradext(mytexture, mod(texcoord, vec2(0.1, 0.5)), dfdx(texcoord), dfdy(texcoord)); } </script> specifications specification status
comment oes_standard_derivativesthe definition of 'oes_standard_derivatives' in that specification.
OES_texture_float - Web APIs
examples var ext = gl.getextension('oes_texture_float'); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.teximage2d(gl.texture_2d, 0, gl.rgba, gl.rgba, gl.float, image); specifications specification status
comment oes_texture_floatthe definition of 'oes_texture_float' in that specification.
OES_texture_float_linear - Web APIs
examples gl.getextension('oes_texture_float'); gl.getextension('oes_texture_float_linear'); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.texparameterf(gl.texture_2d, gl.texture_mag_filter, gl.linear); gl.teximage2d(gl.texture_2d, 0, gl.rgba, gl.rgba, gl.float, image); specifications specification status
comment oes_texture_float_linearthe definition of 'oes_texture_float_linear' in that specification.
OES_texture_half_float - Web APIs
examples var ext = gl.getextension('oes_texture_half_float'); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.teximage2d(gl.texture_2d, 0, gl.rgba, gl.rgba, ext.half_float_oes, image); specifications specification status
comment oes_texture_half_floatthe definition of 'oes_texture_half_float' in that specification.
OES_texture_half_float_linear - Web APIs
examples var halffloat = gl.getextension('oes_texture_half_float'); gl.getextension('oes_texture_half_float_linear'); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.texparameterf(gl.texture_2d, gl.texture_mag_filter, gl.linear); gl.teximage2d(gl.texture_2d, 0, gl.rgba, gl.rgba, halffloat.half_float_oes, image); specifications specification status
comment oes_texture_half_float_linearthe definition of 'oes_texture_half_float_linear' in that specification.
OfflineAudioContext.OfflineAudioContext() - Web APIs
for a full working example, see our offline-audio-context-promise github repo (see the source code too.) specifications specification status
comment web audio apithe definition of 'offlineaudiocontext()' in that specification.
OfflineAudioContext: complete event - Web APIs
n.disabled = false; }) you can also set up the event handler using the offlineaudiocontext.oncomplete property: let offlineaudioctx = new offlineaudiocontext(); offlineaudioctx.oncomplete = function() { console.log('offline audio processing now complete'); showmodaldialog('song processed and ready to play'); playbtn.disabled = false; } specifications specification status
comment web audio apithe definition of 'offlineaudiocompletionevent' in that specification.
OfflineAudioContext.oncomplete - Web APIs
offlineaudioctx.oncomplete = function() { console.log('offline audio processing now complete'); showmodaldialog('song processed and ready to play'); playbtn.disabled = false; } specifications specification status
comment web audio apithe definition of 'oncomplete' in that specification.
OfflineAudioContext.startRendering() - Web APIs
lick = function() { song.start(); } }).catch(function(err) { console.log('rendering failed: ' + err); // note: the promise should reject when startrendering is called a second time on an offlineaudiocontext }); }); } request.send(); } // run getdata to start the process off getdata(); specifications specification status
comment web audio apithe definition of 'startrendering()' in that specification.
OfflineAudioContext.suspend() - Web APIs
invalidstateerror if the quantized frame number is one of the following: a negative number is less than or equal to the current time is greater than or equal to the total render duration is scheduled by another suspend for the same time specifications specification status
comment web audio apithe definition of 'suspend()' in that specification.
OfflineAudioContext - Web APIs
lick = function() { song.start(); } }).catch(function(err) { console.log('rendering failed: ' + err); // note: the promise should reject when startrendering is called a second time on an offlineaudiocontext }); }); } request.send(); } // run getdata to start the process off getdata(); specifications specification status
comment web audio apithe definition of 'offlineaudiocontext' in that specification.
OffscreenCanvas() - Web APIs
let offscreen = new offscreencanvas(256, 256); let gl = offscreen.getcontext('webgl'); specifications specification status
comment html living standardthe definition of 'offscreencanvas()' in that specification.
OffscreenCanvas.convertToBlob() - Web APIs
offscreen.converttoblob().then(function(blob) { console.log(blob); }); // blob { size: 334, type: "image/png" } specifications specification status
comment html living standardthe definition of 'offscreencanvas: converttoblob' in that specification.
OffscreenCanvas.getContext() - Web APIs
examples var offscreen = new offscreencanvas(256, 256); var gl = offscreen.getcontext("webgl"); gl; // webglrenderingcontext gl.canvas; // offscreencanvas specifications specification status
comment html living standardthe definition of 'offscreencanvas.getcontext()' in that specification.
OffscreenCanvas.height - Web APIs
syntax var pxl = offscreen.height; offscreen.height = pxl; examples creating a new offscreen canvas and returning or setting the height of the offscreen canvas: var offscreen = new offscreencanvas(256, 256); offscreen.height; // 256 offscreen.height = 512; specifications specification status
comment html living standardthe definition of 'offscreencanvas.height' in that specification.
OffscreenCanvas.transferToImageBitmap() - Web APIs
offscreen.transfertoimagebitmap(); // imagebitmap { width: 256, height: 256 } specifications specification status
comment html living standardthe definition of 'offscreencanvas.transfertoimagebitmap()' in that specification.
OffscreenCanvas.width - Web APIs
syntax var pxl = offscreen.width; offscreen.width = pxl; examples creating a new offscreen canvas and returning or setting the width of the offscreen canvas: var offscreen = new offscreencanvas(256, 256); offscreen.width; // 256 offscreen.width = 512; specifications specification status
comment html living standardthe definition of 'offscreencanvas.width' in that specification.
OffscreenCanvas - Web APIs
requestanimationframe(render); } requestanimationframe(render); }; specifications specification status
comment html living standardthe definition of 'offscreencanvas' in that specification.
OrientationSensor.populateMatrix() - Web APIs
parameters targetmatrix tbd return value undefined example // tbd specifications specification status
comment orientation sensorthe definition of 'populatematrix' in that specification.
OrientationSensor - Web APIs
} else { console.log("no permissions to use absoluteorientationsensor."); } }); specifications specification status
comment orientation sensorthe definition of 'orientationsensor' in that specification.
OscillatorNode.detune - Web APIs
ctx = new (window.audiocontext || window.webkitaudiocontext)(); // create oscillator node var oscillator = audioctx.createoscillator(); oscillator.type = 'square'; oscillator.frequency.setvalueattime(440, audioctx.currenttime); // value in hertz oscillator.detune.setvalueattime(100, audioctx.currenttime); // value in cents oscillator.start(); specifications specification status
comment web audio apithe definition of 'detune' in that specification.
OscillatorNode.frequency - Web APIs
// create web audio api context var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); // create oscillator node var oscillator = audioctx.createoscillator(); oscillator.type = 'square'; oscillator.frequency.setvalueattime(440, audioctx.currenttime); // value in hertz oscillator.start(); specifications specification status
comment web audio apithe definition of 'frequency' in that specification.
OscillatorNode.start() - Web APIs
// create web audio api context var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); // create oscillator node var oscillator = audioctx.createoscillator(); oscillator.type = 'square'; oscillator.frequency.setvalueattime(3000, audioctx.currenttime); // value in hertz oscillator.start(); specifications specification status
comment web audio apithe definition of 'start' in that specification.
OscillatorNode.stop() - Web APIs
// create web audio api context var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); // create oscillator node var oscillator = audioctx.createoscillator(); oscillator.connect(audioctx.destination); oscillator.start(); oscillator.stop(audioctx.currenttime + 2); // stop 2 seconds after the current time specifications specification status
comment web audio apithe definition of 'stop' in that specification.
OscillatorNode.type - Web APIs
// create web audio api context var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); // create oscillator node var oscillator = audioctx.createoscillator(); oscillator.type = 'square'; oscillator.frequency.setvalueattime(440, audioctx.currenttime); // value in hertz oscillator.start(); specifications specification status
comment web audio apithe definition of 'type' in that specification.
OscillatorNode - Web APIs
reate web audio api context var audioctx = new (window.audiocontext || window.webkitaudiocontext)(); // create oscillator node var oscillator = audioctx.createoscillator(); oscillator.type = 'square'; oscillator.frequency.setvalueattime(440, audioctx.currenttime); // value in hertz oscillator.connect(audioctx.destination); oscillator.start(); specifications specification status
comment web audio apithe definition of 'oscillatornode' in that specification.
OverconstrainedError.constraint - Web APIs
syntax var constraint = overconstrainederror.constraint; value a string specifications specification status
comment media capture and streamsthe definition of 'constraint' in that specification.
OverconstrainedError - Web APIs
specifications specification status
comment media capture and streamsthe definition of 'overconstrainederror' in that specification.
PageTransitionEvent - Web APIs
example html <!doctype html> <html> <body> </body> </html> javascript window.addeventlistener('pageshow', myfunction); function myfunction(event) { if (event.persisted) { alert("the page was cached by the browser"); } else { alert("the page was not cached by the browser"); } } specifications specification status
comment html living standardthe definition of 'pagetransitionevent' in that specification.
Page Visibility API - Web APIs
//startsimulation and pausesimulation defined elsewhere function handlevisibilitychange() { if (document.hidden) { pausesimulation(); } else { startsimulation(); } } document.addeventlistener("visibilitychange", handlevisibilitychange, false); specifications specification status
comment page visibility (second edition) recommendation initial definition.
PaintWorklet.registerPaint - Web APIs
li { background-image: paint(checkerboard); } specifications specification status
comment css painting api level 1the definition of 'paintworklet.registerpaint' in that specification.
PaintWorklet - Web APIs
@supports (background: paint(id)) { background-image: paint(checkerboard); } specifications specification status
comment css painting api level 1the definition of 'paintworkletglobalscope' in that specification.
PannerNode.PannerNode() - Web APIs
example var ctx = new audiocontext(); var options = { positionx : 1, maxdistance: 5000 } var mypanner = new pannernode(ctx, options); specifications specification status
comment web audio apithe definition of 'pannernode()' in that specification.
PannerNode.coneInnerAngle - Web APIs
osc.connect(panner) .connect(context.destination); osc.start(0); specifications specification status
comment web audio apithe definition of 'coneinnerangle' in that specification.
PannerNode.coneOuterAngle - Web APIs
osc.connect(panner) .connect(context.destination); osc.start(0); specifications specification status
comment web audio apithe definition of 'coneouterangle' in that specification.
PannerNode.coneOuterGain - Web APIs
osc.connect(panner) .connect(context.destination); osc.start(0); specifications specification status
comment web audio apithe definition of 'coneoutergain' in that specification.
PannerNode.orientationX - Web APIs
osc.connect(panner) .connect(context.destination); osc.start(0); specifications specification status
comment web audio apithe definition of 'orientationx' in that specification.
PannerNode.orientationY - Web APIs
osc.connect(panner) .connect(context.destination); osc.start(0); specifications specification status
comment web audio apithe definition of 'orientationy' in that specification.
PannerNode.orientationZ - Web APIs
osc.connect(panner) .connect(context.destination); osc.start(0); specifications specification status
comment web audio apithe definition of 'orientationz' in that specification.
PannerNode.positionX - Web APIs
xt(); const osc = new oscillatornode(context); const panner = new pannernode(context); panner.positionx.setvalueattime(-1, context.currenttime + 1); panner.positionx.setvalueattime(1, context.currenttime + 2); panner.positionx.setvalueattime(0, context.currenttime + 3); osc.connect(panner) .connect(context.destination); osc.start(0); specifications specification status
comment web audio apithe definition of 'positionx' in that specification.
PannerNode.positionY - Web APIs
latornode(context); const panner = new pannernode(context); panner.panningmodel = 'hrtf'; panner.positiony.setvalueattime(1, context.currenttime + 1); panner.positiony.setvalueattime(-1, context.currenttime + 2); panner.positiony.setvalueattime(0, context.currenttime + 3); osc.connect(panner) .connect(context.destination); osc.start(0); specifications specification status
comment web audio apithe definition of 'positiony' in that specification.
PannerNode.positionZ - Web APIs
latornode(context); const panner = new pannernode(context); panner.panningmodel = 'hrtf'; panner.positionz.setvalueattime(1, context.currenttime + 1); panner.positionz.setvalueattime(-1, context.currenttime + 2); panner.positionz.setvalueattime(0, context.currenttime + 3); osc.connect(panner) .connect(context.destination); osc.start(0); specifications specification status
comment web audio apithe definition of 'positionz' in that specification.
PannerNode.refDistance - Web APIs
e); // this tone should decay slower and later than the previous one scheduletesttone(4, context.currenttime + note_length); // this tone should decay only slightly, and only start decaying fairly late scheduletesttone(7, context.currenttime + note_length * 2); after running this code, the resulting waveforms should look something like this: specifications specification status
comment web audio apithe definition of 'refdistance' in that specification.
PannerNode.rolloffFactor - Web APIs
ckly scheduletesttone(1, context.currenttime); // this tone should decay slower than the previous one scheduletesttone(0.5, context.currenttime + note_length); // this tone should decay only slightly scheduletesttone(0.1, context.currenttime + note_length * 2); after running this code, the resulting waveforms should look something like this: specifications specification status
comment web audio apithe definition of 'rollofffactor' in that specification.
PannerNode - Web APIs
specifications specification status
comment web audio apithe definition of 'pannernode' in that specification.
ParentNode.append() - Web APIs
argitem : document.createtextnode(string(argitem))); }); this.appendchild(docfrag); } }); }); })([element.prototype, document.prototype, documentfragment.prototype]); specification specification status
comment domthe definition of 'parentnode.append()' in that specification.
ParentNode.childElementCount - Web APIs
lementcount == null) { object.defineproperty(constructor.prototype, 'childelementcount', { get: function() { var i = 0, count = 0, node, nodes = this.childnodes; while (node = nodes[i++]) { if (node.nodetype === 1) count++; } return count; } }); } })(window.node || window.element); specification specification status
comment domthe definition of 'parentnode.childelementcount' in that specification.
ParentNode.children - Web APIs
fineproperty(constructor.prototype, 'children', { get: function() { let i = 0, node, nodes = this.childnodes, children = []; while (node = nodes[i++]) { if (node.nodetype === 1) { children.push(node); } } return children; } }); } })(window.node || window.element); specification specification status
comment domthe definition of 'parentnode.children' in that specification.
ParentNode.firstElementChild - Web APIs
get: function() { var node, nodes = this.childnodes, i = 0; while (node = nodes[i++]) { if (node.nodetype === 1) { return node; } } return null; } }); } })(window.node || window.element); specification specification status
comment domthe definition of 'parentnode.firstelementchild' in that specification.
ParentNode.lastElementChild - Web APIs
ect.defineproperty(constructor.prototype, 'lastelementchild', { get: function() { var node, nodes = this.childnodes, i = nodes.length - 1; while(node = nodes[i--]) { if(node.nodetype === 1) { return node; } } return null; } }); } })(window.node || window.element); specification specification status
comment domthe definition of 'parentnode.lastelementchild' in that specification.
ParentNode.prepend() - Web APIs
argitem : document.createtextnode(string(argitem))); }); this.insertbefore(docfrag, this.firstchild); } }); }); })([element.prototype, document.prototype, documentfragment.prototype]); specification specification status
comment domthe definition of 'parentnode.prepend()' in that specification.
ParentNode.querySelectorAll() - Web APIs
the :scope pseudo-class restores the expected behavior, only matching selectors on descendants of the base element: var select = document.queryselector('.select'); var inner = select.queryselectorall(':scope .outer .inner'); inner.length; // 0 specifications specification status
comment domthe definition of 'parentnode.queryselectorall()' in that specification.
ParentNode.replaceChildren() - Web APIs
options, ...existingyesoptions); }); nobtn.addeventlistener('click', () => { const selectedtransferoptions = document.queryselectorall('#yes option:checked'); const existingnooptions = document.queryselectorall('#no option'); noselect.replacechildren(...selectedtransferoptions, ...existingnooptions); }); the end result looks like this: specification specification status
comment domthe definition of 'parentnode.replacechildren()' in that specification.
ParentNode - Web APIs
specification specification status
comment domthe definition of 'parentnode' in that specification.
PasswordCredential.additionalData - Web APIs
get(options).then(function(creds) { if (creds.type == 'password') { var form = new formdata(); var csrf_token = document.queryselector('csrf_token').value; form.append('csrf_token', csrf_token); creds.additionaldata = form; fetch('https://www.example.com', { method: 'post', credentials: creds }); }; }); specifications specification status
comment credential management level 1 working draft initial definition.
Path2D() - Web APIs
<canvas id="canvas"></canvas> const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); let p = new path2d('m10 10 h 80 v 80 h -80 z'); ctx.fill(p); specification specification status
comment html living standardthe definition of 'path2d()' in that specification.
Path2D.addPath() - Web APIs
(); p2.rect(0, 0, 100, 75); // create transformation matrix that moves 200 points to the right let m = document.createelementns('http://www.w3.org/2000/svg', 'svg').createsvgmatrix(); m.a = 1; m.b = 0; m.c = 0; m.d = 1; m.e = 200; m.f = 0; // add second path to the first path p1.addpath(p2, m); // draw the first path ctx.fill(p1); result specifications specification status
comment html living standardthe definition of 'path2d.addpath()' in that specification.
Path2D - Web APIs
specifications specification status
comment html living standardthe definition of 'path2d' in that specification.
PayerErrors.email - Web APIs
// } specifications specification status
comment payment request apithe definition of 'payererrors.email' in that specification.
PayerErrors.name - Web APIs
// } specifications specification status
comment payment request apithe definition of 'payererrors.name' in that specification.
PayerErrors.phone - Web APIs
// } specifications specification status
comment payment request apithe definition of 'payererrors.phone' in that specification.
PayerErrors - Web APIs
example specifications specification status
comment payment request apithe definition of 'payererrors' in that specification.
PaymentAddress.addressLine - Web APIs
0 metal box factory 1 suite 441, 4th floor 2 30 great guildford street these, combined with additional values for other properties of the paymentaddress, would represent the full address, which is: mozilla metal box factory suite 441, 4th floor 30 great guildford street london se1 0hs united kingdom specifications specification status
comment payment request apithe definition of 'paymentaddress.addressline' in that specification.
PaymentAddress.city - Web APIs
specifications specification status
comment payment request apithe definition of 'paymentaddress.city' in that specification.
PaymentAddress.phone - Web APIs
specifications specification status
comment payment request apithe definition of 'paymentaddress.phone' in that specification.
PaymentAddress.region - Web APIs
specifications specification status
comment payment request apithe definition of 'paymentaddress.region' in that specification.
PaymentAddress - Web APIs
billing address is a paymentaddress object } } specifications specification status
comment payment request apithe definition of 'paymentaddress' in that specification.
PaymentCurrencyAmount.currency - Web APIs
let itemprice = { currency: "usd", value: "42.95" }; specifications specification status
comment payment request apithe definition of 'paymentcurrencyamount.currency' in that specification.
PaymentCurrencyAmount - Web APIs
specifications specification status
comment payment request apithe definition of 'paymentcurrencyamount' in that specification.
PaymentDetailsBase - Web APIs
specifications specification status
comment payment request apithe definition of 'paymentdetailsbase' in that specification.
PaymentDetailsUpdate - Web APIs
specifications specification status
comment payment request apithe definition of 'paymentdetailsupdate' in that specification.
PaymentItem - Web APIs
specifications specification status
comment payment request apithe definition of 'paymentitem' in that specification.
PaymentMethodChangeEvent.methodName - Web APIs
ev.updatewith(newstuff); }; const response = await request.show(); specifications specification status
comment payment request apithe definition of 'paymentmethodchangeevent.methodname' in that specification.
PaymentRequest.abort() - Web APIs
s, options); var paymenttimeout = window.settimeout(() => { window.cleartimeout(paymenttimeout); request.abort().then(() => { print('payment timed out after 20 minutes.'); }).catch(() => { print('unable to abort, because the user is currently in the process ' + 'of paying.'); }); }, 20 * 60 * 1000); /* 20 minutes */ specifications specification status
comment payment request apithe definition of 'abort()' in that specification.
PaymentRequest.canMakePayment() - Web APIs
let's see if we can use basic card const supportsbasiccard = await new paymentrequest( [{ supportedmethods: "basic-card" }], details ).canmakepayment(); if (supportsbasiccard) { // show basic card support return; } // otherwise, make payments using html form element } specifications specification status
comment payment request apithe definition of 'canmakepayment()' in that specification.
PaymentRequest: merchantvalidation event - Web APIs
related events payerdetailchange, paymentmethodchange, shippingaddresschange, and shippingoptionchange specifications specification status
comment payment request apithe definition of 'merchantvalidation' in that specification.
PaymentRequest.onpaymentmethodchange - Web APIs
ev.updatewith(newstuff); }; const response = await request.show(); specifications specification status
comment payment request apithe definition of 'onpaymentmethodchange' in that specification.
PaymentRequest.onshippingaddresschange - Web APIs
}).catch(function(err) { console.error("uh oh, something bad happened", err.message); }); specifications specification status
comment payment request apithe definition of 'onshippingaddresschange' in that specification.
PaymentRequest.onshippingoptionchange - Web APIs
(details.error); } // hardcode for simplicity if (details.displayitems.length === 2) { details.displayitems[2] = shippingoption; } else { details.displayitems.push(shippingoption); } details.shippingoptions = [shippingoption]; return promise.resolve(details); })(details, request.shippingaddress)); }); specifications specification status
comment payment request apithe definition of 'onshippingoptionchange' in that specification.
PaymentRequest: paymentmethodchange event - Web APIs
related events merchantvalidation, shippingaddresschange, shippingoptionchange, and payerdetailchange specifications specification status
comment payment request apithe definition of 'paymentmethodchange' in that specification.
PaymentRequest.shippingAddress - Web APIs
ngoption.id = 'us'; shippingoption.label = 'standard shipping in us'; shippingoption.amount.value = '5.00'; details.total.amount.value = '60.00'; } details.displayitems.splice(2, 1, shippingoption); details.shippingoptions = [shippingoption]; } else { delete details.shippingoptions; } resolve(details); } specifications specification status
comment payment request apithe definition of 'shippingaddress' in that specification.
PaymentRequest.shippingOption - Web APIs
we can't ship to your address.` }; } } specifications specification status
comment payment request apithe definition of 'shippingoption' in that specification.
PaymentRequest: shippingaddresschange event - Web APIs
return detailsupdate; }; you can also establish a handler for shippingaddresschange using the onshippingaddresschange event handler property: paymentrequest.onshippingaddresschange = event => { let detailsupdate = checkaddress(paymentrequest.shippingaddress); event.updatewith(detailsupdate); }; specifications specification status
comment payment request apithe definition of 'shippingaddresschange' in that specification.
PaymentRequest: shippingoptionchange event - Web APIs
e an event handler for shippingoptionchange using its corresponding event handler property, onshippingoptionchange: paymentrequest.onshippingoptionchange = event => { const value = calculatenewtotal(paymentrequest.shippingoption); const total = { currency: "eur", label: "total due", value, }; event.updatewith({ total }); }; specifications specification status
comment payment request apithe definition of 'shippingoptionchange' in that specification.
PaymentRequest.show() - Web APIs
} document.getelementbyid("buybutton").onclick = requestpayment; specifications specification status
comment payment request apithe definition of 'show(optional detailspromise)' in that specification.
PaymentRequest - Web APIs
specifications specification status
comment payment request apithe definition of 'paymentrequest' in that specification.
paymentRequestId - Web APIs
specifications specification status
comment payment handler apithe definition of 'paymentrequestid' in that specification.
PaymentRequestEvent.topOrigin - Web APIs
syntax var ausvstring = paymentrequestevent.toporigin value a usvstring specifications specification status
comment payment handler apithe definition of 'toporigin' in that specification.
PaymentRequestEvent - Web APIs
specifications specification status
comment payment handler apithe definition of 'paymentrequestevent' in that specification.
PaymentResponse.complete() - Web APIs
rpaymentrequest, fetchoptions).then( response => { if (response.status < 400) { paymentresponse.complete("success"); } else { paymentresponse.complete("fail"); }; }).catch( reason => { paymentresponse.complete("fail"); }); }).catch(function(err) { console.error("uh oh, something bad happened", err.message); }); specifications specification status
comment payment request apithe definition of 'paymentresponse: complete' in that specification.
PaymentResponse.details - Web APIs
payment.show().then(paymentresponse => { var paymentdata = { // payment method string method: paymentresponse.methodname, // payment details as you requested details: paymentresponse.details, // shipping address information address: todict(paymentresponse.shippingaddress) }; // send information to the server }); specifications specification status
comment payment request api candidate recommendation initial definition.
PaymentResponse.methodName - Web APIs
payment.show().then(paymentresponse => { var paymentdata = { // payment method string method: paymentresponse.methodname, // payment details as you requested details: paymentresponse.details, // shipping address information address: todict(paymentresponse.shippingaddress) }; // send information to the server }); specifications specification status
comment payment request api candidate recommendation initial definition.
PaymentResponse.onpayerdetailchange - Web APIs
rrors).length) { await response.retry(errors); } else { // we have a good payment; send the data to the server await fetch("/pay-for-things/", { method: "post", body: response.json() }); response.complete("success"); } }; await response.retry({ payer: { email: "invalid domain.", phone: "invalid number.", }, }); specifications specification status
comment payment request apithe definition of 'onpayerdetailchange' in that specification.
PaymentResponse.payerEmail - Web APIs
syntax var payeremail = paymentresponse.payeremail; specifications specification status
comment payment request api candidate recommendation initial definition.
PayerResponse.payerPhone - Web APIs
syntax var payerphone = paymentresponse.payerphone; specifications specification status
comment payment request api candidate recommendation initial definition.
PaymentResponse.retry() - Web APIs
event.removeeventlistener(event, listener); resolve(); } }); }); } dopaymentrequest(); specifications specification status
comment payment request apithe definition of 'retry()' in that specification.
PaymentResponse.shippingAddress - Web APIs
ngoption.id = 'us'; shippingoption.label = 'standard shipping in us'; shippingoption.amount.value = '5.00'; details.total.amount.value = '60.00'; } details.displayitems.splice(2, 1, shippingoption); details.shippingoptions = [shippingoption]; } else { delete details.shippingoptions; } resolve(details); } specifications specification status
comment payment request api candidate recommendation initial definition.
PaymentResponse.shippingOption - Web APIs
rshippingoption = details.shippingoptions[0]; details.total.amount.value = '67.00'; } else { reject('unknown shipping option \'' + shippingoption + '\''); return; } selectedshippingoption.selected = true; othershippingoption.selected = false; details.displayitems.splice(2, 1, selectedshippingoption); resolve(details); } specifications specification status
comment payment request api candidate recommendation initial definition.
PaymentResponse - Web APIs
specifications specification status
comment payment request apithe definition of 'paymentresponse' in that specification.
Pbkdf2Params - Web APIs
specifications specification status
comment web cryptography apithe definition of 'subtlecrypto.pbkdf2params' in that specification.
performance.clearMarks() - Web APIs
performance.clearmarks(); logmarkcount() // "found this many entries: 0" specifications specification status
comment user timing level 2the definition of 'clearmarks()' in that specification.
performance.clearMeasures() - Web APIs
performance.clearmeasures(); logmeasurecount() // "found this many entries: 0" specifications specification status
comment user timing level 2the definition of 'clearmeasures()' in that specification.
performance.getEntries() - Web APIs
i].duration); } // use getentriesbyname() to get all "mark" entries named "begin" p = performance.getentriesbyname("begin", "mark"); for (let i=0; i < p.length; i++) { console.log ("mark and begin entry[" + i + "]: name = " + p[i].name + "; starttime = " + p[i].starttime + "; duration = " + p[i].duration); } } specifications specification status
comment performance timeline level 2the definition of 'getentries()' in that specification.
performance.getEntriesByName() - Web APIs
= " + p[i].duration); } // use getentriesbyname() to get all "mark" entries named "begin" p = performance.getentriesbyname("begin", "mark"); for (var i=0; i < p.length; i++) { log ("mark and begin entry[" + i + "]: name = " + p[i].name + "; starttime = " + p[i].starttime + "; duration = " + p[i].duration); } } specifications specification status
comment performance timeline level 2the definition of 'getentriesbyname()' in that specification.
performance.getEntriesByType() - Web APIs
= " + p[i].duration); } // use getentriesbyname() to get all "mark" entries named "begin" p = performance.getentriesbyname("begin", "mark"); for (var i=0; i < p.length; i++) { log ("mark and begin entry[" + i + "]: name = " + p[i].name + "; starttime = " + p[i].starttime + "; duration = " + p[i].duration); } } specifications specification status
comment performance timeline level 2the definition of 'getentriesbytype()' in that specification.
performance.mark() - Web APIs
performance.clearmarks(); specifications specification status
comment user timing level 2the definition of 'mark()' in that specification.
performance.measure() - Web APIs
performance.clearmarks(); performance.clearmeasures(); }, 1000); }, 1000); specifications specification status
comment user timing level 2the definition of 'measure()' in that specification.
Performance.navigation - Web APIs
syntax navobject = performance.navigation; specifications specification status
comment navigation timingthe definition of 'performance.navigation' in that specification.
performance.now() - Web APIs
specifications specification status
comment high resolution time level 2the definition of 'performance.now()' in that specification.
Performance.onresourcetimingbufferfull - Web APIs
function buffer_full(event) { console.log("warning: resource timing buffer is full!"); performance.setresourcetimingbuffersize(200); } function init() { // set a callback if the resource buffer becomes filled performance.onresourcetimingbufferfull = buffer_full; } <body onload="init()"> specifications specification status
comment resource timing level 1the definition of 'onresourcetimingbufferfull' in that specification.
Performance: resourcetimingbufferfull event - Web APIs
resourcetimingbuffersize(200); } function init() { // set a callback if the resource buffer becomes filled performance.onresourcetimingbufferfull = buffer_full; } <body onload="init()"> note that you could also set up the handler using the addeventlistener() function: performance.addeventlistener('resourcetimingbufferfull', buffer_full); specifications specification status
comment resource timing level 1the definition of 'onresourcetimingbufferfull' in that specification.
Performance.timing - Web APIs
syntax timinginfo = performance.timing; specifications specification status
comment navigation timing level 2 working draft initial definition.
performance.toJSON() - Web APIs
example var js; js = window.performance.tojson(); console.log("json = " + json.stringify(js)); specifications specification status
comment high resolution time level 2the definition of 'tojson() serializer' in that specification.
Performance - Web APIs
specifications specification status
comment high resolution time level 2the definition of 'performance' in that specification.
PerformanceEntry.duration - Web APIs
" = not supported"); } for (var i=0; i < methods.length; i++) { // check each method var supported = typeof obj[methods[i]] == "function"; if (supported) { var js = obj[methods[i]](); log("..." + methods[i] + "() = " + json.stringify(js)); } else { log("..." + methods[i] + " = not supported"); } } } specifications specification status
comment performance timeline level 2the definition of 'duration' in that specification.
PerformanceEntry.entryType - Web APIs
d "begin" via the mark() method performance.mark("begin"); // check the entrytype of all the "begin" entries var entriesnamedbegin = performance.getentriesbyname("begin"); for (var i=0; i < entriesnamedbegin.length; i++) { var typeofentry = entriesnamedbegin[i].entrytype; console.log("entry is type: " + typeofentry); } } specifications specification status
comment performance timeline level 2the definition of 'entrytype' in that specification.
PerformanceEntry.name - Web APIs
" = not supported"); } for (var i=0; i < methods.length; i++) { // check each method var supported = typeof obj[methods[i]] == "function"; if (supported) { var js = obj[methods[i]](); log("..." + methods[i] + "() = " + json.stringify(js)); } else { log("..." + methods[i] + " = not supported"); } } } specifications specification status
comment performance timeline level 2the definition of 'name' in that specification.
PerformanceEntry.startTime - Web APIs
" = not supported"); } for (var i=0; i < methods.length; i++) { // check each method var supported = typeof obj[methods[i]] == "function"; if (supported) { var js = obj[methods[i]](); log("..." + methods[i] + "() = " + json.stringify(js)); } else { log("..." + methods[i] + " = not supported"); } } } specifications specification status
comment performance timeline level 2the definition of 'starttime' in that specification.
PerformanceEntry.toJSON() - Web APIs
" = not supported"); } for (var i=0; i < methods.length; i++) { // check each method var supported = typeof obj[methods[i]] == "function"; if (supported) { var js = obj[methods[i]](); log("..." + methods[i] + "() = " + json.stringify(js)); } else { log("..." + methods[i] + " = not supported"); } } } specifications specification status
comment performance timeline level 2the definition of 'tojson' in that specification.
PerformanceEntry - Web APIs
" + properties[i] + " is not supported"); } } } specifications specification status
comment resource timing level 3 editor's draft resource timing level 2 working draft resource timing level 1 candidate recommendation adds the performanceresourcetiming interface and the resource value for entrytype.
PerformanceMark - Web APIs
specifications specification status
comment user timing level 2the definition of 'performancemark' in that specification.
PerformanceMeasure - Web APIs
specifications specification status
comment user timing level 2the definition of 'performancemeasure' in that specification.
PerformanceNavigation.redirectCount - Web APIs
syntax amount = performancenavigation.redirectcount; specifications specification status
comment navigation timingthe definition of 'performancenavigation.redirectcount' in that specification.
PerformanceNavigation.type - Web APIs
syntax type = performancenavigation.type; specifications specification status
comment navigation timingthe definition of 'performancenavigation.type' in that specification.
PerformanceNavigationTiming.domComplete - Web APIs
active = " + p.interactive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status
comment navigation timing level 2the definition of 'domcomplete' in that specification.
PerformanceNavigationTiming.domContentLoadedEventEnd - Web APIs
ive = " + p.dominteractive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status
comment navigation timing level 2the definition of 'domcontentloadedeventend' in that specification.
PerformanceNavigationTiming.domContentLoadedEventStart - Web APIs
active = " + p.interactive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status
comment navigation timing level 2the definition of 'domcontentloadedeventstart' in that specification.
PerformanceNavigationTiming.domInteractive - Web APIs
ive = " + p.dominteractive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status
comment navigation timing level 2the definition of 'dominteractive' in that specification.
PerformanceNavigationTiming.loadEventEnd - Web APIs
ive = " + p.dominteractive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status
comment navigation timing level 2the definition of 'loadeventend' in that specification.
PerformanceNavigationTiming.loadEventStart - Web APIs
active = " + p.interactive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status
comment navigation timing level 2the definition of 'loadeventstart' in that specification.
PerformanceNavigationTiming.redirectCount - Web APIs
active = " + p.interactive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status
comment navigation timing level 2the definition of 'redirectcount' in that specification.
PerformanceNavigationTiming.toJSON() - Web APIs
example // get a resource performance entry var perfentries = performance.getentriesbytype("navigation"); var entry = perfentries[0]; // get the json and log it var json = entry.tojson(); var s = json.stringify(json); console.log("performancenavigationtiming.tojson() = " + s); specifications specification status
comment navigation timing level 2the definition of 'tojson()' in that specification.
PerformanceNavigationTiming.type - Web APIs
active = " + p.interactive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status
comment navigation timing level 2the definition of 'type' in that specification.
PerformanceNavigationTiming.unloadEventEnd - Web APIs
active = " + p.interactive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status
comment navigation timing level 2the definition of 'unloadeventend' in that specification.
PerformanceNavigationTiming.unloadEventStart - Web APIs
active = " + p.interactive); // document load and unload time console.log("document load = " + (p.loadeventend - p.loadeventstart)); console.log("document unload = " + (p.unloadeventend - p.unloadeventstart)); // other properties console.log("type = " + p.type); console.log("redirectcount = " + p.redirectcount); } } specifications specification status
comment navigation timing level 2the definition of 'unloadeventstart' in that specification.
PerformanceObserver() - Web APIs
es = list.getentries(); for (var i=0; i < entries.length; i++) { // process "mark" and "frame" events } }); observer.observe({entrytypes: ["mark", "frame"]}); function perf_observer(list, observer) { // process the "measure" event } var observer2 = new performanceobserver(perf_observer); observer2.observe({entrytypes: ["measure"]}); specifications specification status
comment performance timeline level 2the definition of 'performanceobserver()' in that specification.
PeformanceObserver.disconnect() - Web APIs
// disable additional performance events observer.disconnect(); } var observer2 = new performanceobserver(perf_observer); observer2.observe({entrytypes: ["measure"]}); specifications specification status
comment performance timeline level 2the definition of 'disconnect()' in that specification.
PerformanceObserver.observe() - Web APIs
es = list.getentries(); for (var i=0; i < entries.length; i++) { // process "mark" and "frame" events } }); observer.observe({entrytypes: ["mark", "frame"]}); function perf_observer(list, observer) { // process the "measure" event } var observer2 = new performanceobserver(perf_observer); observer2.observe({entrytypes: ["measure"]}); specifications specification status
comment performance timeline level 2the definition of 'observe()' in that specification.
PerformanceObserver.takeRecords() - Web APIs
observer(function(list, obj) { var entries = list.getentries(); for (var i=0; i < entries.length; i++) { // process "mark" and "frame" events } }); observer.observe({entrytypes: ["mark", "frame"]}); var records = observer.takerecords(); console.log(records[0].name); console.log(records[0].starttime); console.log(records[0].duration); specifications specification status
comment performance timeline level 2the definition of 'takerecords()' in that specification.
PerformanceObserver - Web APIs
example function perf_observer(list, observer) { // process the "measure" event } var observer2 = new performanceobserver(perf_observer); observer2.observe({entrytypes: ["measure"]}); specifications specification status
comment performance timeline level 2the definition of 'performanceobserver' in that specification.
PerformanceObserverEntryList.getEntries() - Web APIs
', 'resource', 'server']}); var observe_frame = new performanceobserver(function(list, obs) { var perfentries = list.getentries(); // should only have 'frame' entries for (var i=0; i < perfentries.length; i++) { print_perf_entry(perfentries[i]); } }); // subscribe to frame event only observe_frame.observe({entrytypes: ['frame']}); specifications specification status
comment performance timeline level 2the definition of 'getentries()' in that specification.
PerformanceObserverEntryList.getEntriesByName() - Web APIs
source', 'server']}); var observe_frame = new performanceobserver(function(list, obs) { var perfentries = list.getentries(); // should only have 'frame' entries for (var i=0; i < perfentries.length; i++) { print_perf_entry(perfentries[i]); } }); // subscribe to only the 'frame' event observe_frame.observe({entrytypes: ['frame']}); specifications specification status
comment performance timeline level 2the definition of 'getentriesbyname()' in that specification.
PerformanceObserverEntryList.getEntriesByType() - Web APIs
source', 'server']}); var observe_frame = new performanceobserver(function(list, obs) { var perfentries = list.getentries(); // should only have 'frame' entries for (var i=0; i < perfentries.length; i++) { print_perf_entry(perfentries[i]); } }); // subscribe to only the 'frame' event observe_frame.observe({entrytypes: ['frame']}); specifications specification status
comment performance timeline level 2the definition of 'getentriesbytype()' in that specification.
PerformanceObserverEntryList - Web APIs
example // create observer for all performance event types // list is of type performanceobserveentrylist var observe_all = new performanceobserver(function(list, obs) { var perfentries = list.getentries(); for (var i = 0; i < perfentries.length; i++) { print_perf_entry(perfentries[i]); // do something with it } }) specifications specification status
comment performance timeline level 2the definition of 'performanceobserverentrylist' in that specification.
PerformanceResourceTiming.decodedBodySize - Web APIs
perfentry) console.log("transfersize = " + perfentry.transfersize); else console.log("transfersize = not supported"); } function check_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { log_sizes(p[i]); } } specifications specification status
comment resource timing level 2the definition of 'decodedbodysize' in that specification.
PerformanceResourceTiming.encodedBodySize - Web APIs
perfentry) console.log("transfersize = " + perfentry.transfersize); else console.log("transfersize = not supported"); } function check_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { log_sizes(p[i]); } } specifications specification status
comment resource timing level 2the definition of 'encodedbodysize' in that specification.
PerformanceResourceTiming.nextHopProtocol - Web APIs
formance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { print_nexthopprotocol(p[i]); } } function print_nexthopprotocol(perfentry) { var value = "nexthopprotocol" in perfentry; if (value) console.log("nexthopprotocol = " + perfentry.nexthopprotocol); else console.log("nexthopprotocol = not supported"); } specifications specification status
comment resource timing level 2the definition of 'nexthopprotocol' in that specification.
PerformanceResourceTiming.toJSON() - Web APIs
example // get a resource performance entry var perfentries = performance.getentriesbytype("resource"); var entry = perfentries[0]; // get the json and log it var json = entry.tojson(); var s = json.stringify(json); console.log("performanceentry.tojson = " + s); specifications specification status
comment resource timing level 2the definition of 'tojson' in that specification.
PerformanceResourceTiming.transferSize - Web APIs
perfentry) console.log("transfersize = " + perfentry.transfersize); else console.log("transfersize = not supported"); } function check_performanceentries() { // use getentriesbytype() to just get the "resource" events var p = performance.getentriesbytype("resource"); for (var i=0; i < p.length; i++) { log_sizes(p[i]); } } specifications specification status
comment resource timing level 2the definition of 'transfersize' in that specification.
PerformanceServerTiming - Web APIs
property: let entries = performance.getentriesbytype('resource'); console.log(entries[0].servertiming); // 0: performanceservertiming {name: "cache", duration: 23.2, description: "cache read"} // 1: performanceservertiming {name: "db", duration: 53, description: ""} // 2: performanceservertiming {name: "app", duration: 47.2, description: ""} specifications specification status
comment server timingthe definition of 'performanceservertiming' in that specification.
PerformanceTiming.connectEnd - Web APIs
syntax time = performancetiming.connectend; specifications specification status
comment navigation timingthe definition of 'performancetiming.connectend' in that specification.
PerformanceTiming.connectStart - Web APIs
syntax time = performancetiming.connectstart; specifications specification status
comment navigation timingthe definition of 'performancetiming.connectstart' in that specification.
PerformanceTiming.domComplete - Web APIs
syntax time = performancetiming.domcomplete; specifications specification status
comment navigation timingthe definition of 'performancetiming.domcomplete' in that specification.
PerformanceTiming.domInteractive - Web APIs
syntax time = performancetiming.dominteractive; specifications specification status
comment navigation timingthe definition of 'performancetiming.dominteractive' in that specification.
PerformanceTiming.domLoading - Web APIs
syntax time = performancetiming.domloading; specifications specification status
comment navigation timingthe definition of 'performancetiming.domloading' in that specification.
PerformanceTiming.domainLookupEnd - Web APIs
syntax time = performancetiming.domainlookupend; specifications specification status
comment navigation timingthe definition of 'performancetiming.domainlookupend' in that specification.
PerformanceTiming.domainLookupStart - Web APIs
syntax time = performancetiming.domainlookupstart; specifications specification status
comment navigation timingthe definition of 'performancetiming.domainlookupstart' in that specification.
PerformanceTiming.fetchStart - Web APIs
syntax time = performance.timing.fetchstart; specifications specification status
comment navigation timingthe definition of 'performancetiming.fetchstart' in that specification.
PerformanceTiming.loadEventEnd - Web APIs
syntax time = performancetiming.loadeventend; specifications specification status
comment navigation timingthe definition of 'performancetiming.loadeventend' in that specification.
PerformanceTiming.loadEventStart - Web APIs
syntax time = performancetiming.loadeventstart; specifications specification status
comment navigation timingthe definition of 'performancetiming.loadeventstart' in that specification.
PerformanceTiming.navigationStart - Web APIs
syntax time = performancetiming.navigationstart; specifications specification status
comment navigation timingthe definition of 'performancetiming.navigationstart' in that specification.
PerformanceTiming.redirectEnd - Web APIs
syntax time = performancetiming.redirectend; specifications specification status
comment navigation timingthe definition of 'performancetiming.redirectend' in that specification.
PerformanceTiming.redirectStart - Web APIs
syntax time = performancetiming.redirectstart; specifications specification status
comment navigation timingthe definition of 'performancetiming.redirectstart' in that specification.
PerformanceTiming.requestStart - Web APIs
syntax time = performancetiming.requeststart; specifications specification status
comment navigation timingthe definition of 'performancetiming.requeststart' in that specification.
PerformanceTiming.responseEnd - Web APIs
syntax time = performancetiming.responseend; specifications specification status
comment navigation timingthe definition of 'performancetiming.responseend' in that specification.
PerformanceTiming.responseStart - Web APIs
syntax time = performancetiming.responsestart; specifications specification status
comment navigation timingthe definition of 'performancetiming.responsestart' in that specification.
PerformanceTiming.unloadEventEnd - Web APIs
syntax time = performancetiming.unloadeventend; specifications specification status
comment navigation timingthe definition of 'performancetiming.unloadeventend' in that specification.
PerformanceTiming.unloadEventStart - Web APIs
syntax time = performancetiming.unloadeventstart; specifications specification status
comment navigation timingthe definition of 'performancetiming.unloadeventstart' in that specification.
PerformanceTiming - Web APIs
specifications specification status
comment navigation timingthe definition of 'performancetiming' in that specification.
PeriodicWave.PeriodicWave() - Web APIs
example var real = new float32array(2); var imag = new float32array(2); var ac = new audiocontext(); real[0] = 0; imag[0] = 0; real[1] = 1; imag[1] = 0; var options = { real : real, imag : imag, disablenormalization : false } var wave = new periodicwave(ac, options); specifications specification status
comment web audio apithe definition of 'periodicwave' in that specification.
PeriodicWave - Web APIs
specifications specification status
comment web audio apithe definition of 'periodicwave' in that specification.
PermissionStatus.onchange - Web APIs
}) example navigator.permissions.query({name:'geolocation'}).then(function(permissionstatus) { console.log('geolocation permission state is ', permissionstatus.state); permissionstatus.onchange = function() { console.log('geolocation permission state has changed to ', this.state); }; }); specification specification status
comment permissionsthe definition of 'onchange' in that specification.
PermissionStatus.state - Web APIs
syntax var permission = permissionstatus.state; example navigator.permissions.query({name:'geolocation'}).then(function(permissionstatus) { console.log('geolocation permission state is ', permissionstatus.state); permissionstatus.onchange = function() { console.log('geolocation permission status has changed to ', this.state); }; }); specification specification status
comment permissionsthe definition of 'state' in that specification.
PermissionStatus - Web APIs
example navigator.permissions.query({name:'geolocation'}).then(function(permissionstatus) { console.log('geolocation permission status is ', permissionstatus.state); permissionstatus.onchange = function() { console.log('geolocation permission status has changed to ', this.state); }; }); specification specification status
comment permissionsthe definition of 'permissionstatus' in that specification.
Permissions - Web APIs
}); specification specification status
comment permissionsthe definition of 'permissions' in that specification.
imageWidth - Web APIs
specifications specification status
comment mediastream image capturethe definition of 'imagewidth' in that specification.
PhotoCapabilities - Web APIs
re.track.getsettings(); input.min = photocapabilities.imagewidth.min; input.max = photocapabilities.imagewidth.max; input.step = photocapabilities.imagewidth.step; return imagecapture.getphotosettings(); }) .then(photosettings => { input.value = photosettings.imagewidth; }) .catch(error => console.log('argh!', error.name || error)); specifications specification status
comment mediastream image capturethe definition of 'photocapabilities' in that specification.
Plugin - Web APIs
specifications specification status
comment html living standardthe definition of 'plugin' in that specification.
PluginArray - Web APIs
( pluginslength.tostring() + " plugin(s)<br>" + "name | filename | description<br>" ); for(var i = 0; i < pluginslength; i++) { document.write( navigator.plugins[i].name + " | " + navigator.plugins[i].filename + " | " + navigator.plugins[i].description + " | " + navigator.plugins[i].version + "<br>" ); } specifications specification status
comment html living standardthe definition of 'pluginarray' in that specification.
PointerEvent.isPrimary - Web APIs
target.addeventlistener('pointerdown', function(event) { if (event.isprimary) process_primary_pointer(event); else process_secondary_pointer(event); }, false); specifications specification status
comment pointer events – level 2the definition of 'isprimary' in that specification.
PointerEvent.pointerId - Web APIs
let id; // let's assume that this is a previously saved pointerid target.addeventlistener('pointerdown', function(event) { // compare previous event's id that was cached // to current event's id and handle accordingly if (id === event.pointerid) process_event(event); }, false); specifications specification status
comment pointer events – level 2the definition of 'pointerid' in that specification.
PointerEvent.pointerType - Web APIs
inter type handler switch (event.pointertype) { case 'mouse': process_pointer_mouse(event); break; case 'pen': process_pointer_pen(event); break; case 'touch': process_pointer_touch(event); break; default: console.log(`pointertype ${event.pointertype} is not suported`); } }, false); specifications specification status
comment pointer eventsthe definition of 'pointertype' in that specification.
PointerEvent.pressure - Web APIs
someelement.addeventlistener('pointerdown', function(event) { if (event.pressure == 0) { // no pressure process_no_pressure(event); } else if (event.pressure == 1) { // maximum pressure process_max_pressure(event); } else { // default process_pressure(event); } }, false); specifications specification status
comment pointer events – level 2the definition of 'pressure' in that specification.
PointerEvent.tangentialPressure - Web APIs
someelement.addeventlistener('pointerdown', function(event) { if (event.tangentialpressure == 0) { // no pressure process_no_tanpressure(event); } else if (event.tangentialpressure == 1) { // maximum pressure process_max_tanpressure(event); } else { // default process_tanpressure(event); } }, false); specifications specification status
comment pointer events – level 2the definition of 'tangentialpressure' in that specification.
PointerEvent.tiltX - Web APIs
someelement.addeventlistener("pointerdown", function(event) { process_tilt(event.tiltx, event.tilty); }, false); specifications specification status
comment pointer events – level 2the definition of 'tiltx' in that specification.
PointerEvent.tiltY - Web APIs
someelement.addeventlistener("pointerdown", function(event) { process_tilt(event.tiltx, event.tilty); }, false); specifications specification status
comment pointer events – level 2the definition of 'tilty' in that specification.
PointerEvent.twist - Web APIs
someelement.addeventlistener('pointerdown', function(event) { if (event.twist == 0) { // no twist process_no_twist(event); } else { // default process_twist(event); } }, false); specifications specification status
comment pointer events – level 2the definition of 'twist' in that specification.
PointerEvent.width - Web APIs
target.addeventlistener("pointerdown", function(ev) { // calculate the contact area var area = ev.width * ev.height; }, false); specifications specification status
comment pointer events – level 2the definition of 'width' in that specification.
PointerEvent - Web APIs
specifications specification status
comment pointer events – level 3the definition of 'pointerevent' in that specification.
Using Pointer Events - Web APIs
ongoingtouchindexbyid(idtofind) { for (var i = 0; i < ongoingtouches.length; i++) { var id = ongoingtouches[i].identifier; if (id == idtofind) { return i; } } return -1; // not found } showing what's going on function log(msg) { var p = document.getelementbyid('log'); p.innerhtml = msg + "\n" + p.innerhtml; } specifications specification status
comment pointer events – level 2the definition of 'pointerevent' in that specification.
Pointer events - Web APIs
specifications specification status
comment pointer events – level 3 editor's draft added new apis for getcoalescedevent and getpredictedevents, new pointerrawupdate event, additional touch-action property values pan-left, pan-right, pan-up, pan-down.
PopStateEvent - Web APIs
specifications specification status
comment html living standardthe definition of 'popstateevent' in that specification.
PositionOptions.enableHighAccuracy - Web APIs
syntax positionoptions.enablehighaccuracy = booleanvalue specifications specification status
comment geolocation apithe definition of 'positionoptions.enablehighaccuracy' in that specification.
PositionOptions.maximumAge - Web APIs
syntax positionoptions.maximumage = timelength specifications specification status
comment geolocation apithe definition of 'positionoptions.maximumage' in that specification.
PositionOptions.timeout - Web APIs
syntax positionoptions.timeout = timelength specifications specification status
comment geolocation apithe definition of 'positionoptions.timeout' in that specification.
PositionOptions - Web APIs
specifications specification status
comment geolocation apithe definition of 'positionoptions' in that specification.
ProcessingInstruction - Web APIs
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: all;} properties target (domstring) read only a name identifying the application to which the instruction is targeted, specification specification status
comment domthe definition of 'processinginstruction' in that specification.
ProgressEvent() - Web APIs
specifications specification status
comment xmlhttprequestthe definition of 'progressevent()' in that specification.
ProgressEvent.lengthComputable - Web APIs
syntax flag = progressevent.lengthcomputable specifications specification status
comment xmlhttprequestthe definition of 'progressevent.lengthcomputable' in that specification.
ProgressEvent.loaded - Web APIs
syntax value = progressevent.loaded specifications specification status
comment xmlhttprequestthe definition of 'progressevent.loaded' in that specification.
ProgressEvent.total - Web APIs
syntax value = progressevent.total specifications specification status
comment xmlhttprequestthe definition of 'progressevent.lengthcomputable' in that specification.
ProgressEvent - Web APIs
var progressbar = document.getelementbyid("p"), client = new xmlhttprequest() client.open("get", "magical-unicorns") client.onprogress = function(pe) { if(pe.lengthcomputable) { progressbar.max = pe.total progressbar.value = pe.loaded } } client.onloadend = function(pe) { progressbar.value = pe.loaded } client.send() specifications specification status
comment xmlhttprequestthe definition of 'progressevent' in that specification.
PromiseRejectionEvent() - Web APIs
let myrejectionevent = new promiserejectionevent("unhandledrejection", { promise : mypromise, reason : "my house is on fire" }); specifications specification status
comment html living standardthe definition of 'the promiserejectionevent interface' in that specification.
PromiseRejectionEvent.promise - Web APIs
window.onunhandledrejection = function(event) { if (event.reason.code && event.reason.code == "module not ready") { window.requestidlecallback(function(deadline) { loadmodule(event.reason.modulename) .then(performstartup); }); event.preventdefault(); } } specifications specification status
comment html living standardthe definition of 'promiserejectionevent.promise' in that specification.
PromiseRejectionEvent.reason - Web APIs
examples window.onunhandledrejection = function(e) { console.log(e.reason); } specifications specification status
comment html living standardthe definition of 'promiserejectionevent.reason' in that specification.
PromiseRejectionEvent - Web APIs
window.onunhandledrejection = function(e) { console.log(e.reason); } specifications specification status
comment html living standardthe definition of 'promiserejectionevent' in that specification.
Proximity Events - Web APIs
example window.addeventlistener('userproximity', function(event) { if (event.near) { // let's power off the screen navigator.mozpower.screenenabled = false; } else { // otherwise, let's power on the screen navigator.mozpower.screenenabled = true; } }); specifications specification status
comment proximity sensorthe definition of 'proximity events' in that specification.
PublicKeyCredential.getClientExtensionResults() - Web APIs
ublic-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { var mybuffer = newcredentialinfo.getclientextensionresults(); // mybuffer will contain the result of any of the processing of the "loc" and "uvi" extensions }).catch(function (err) { console.error(err); }); specifications specification status
comment web authentication: an api for accessing public key credentials level 1the definition of 'getclientextensionresults()' in that specification.
PublicKeyCredential.id - Web APIs
navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { var id = newcredentialinfo.id; // do something with the id // send attestation response and client extensions // to the server to proceed with the registration // of the credential }).catch(function (err) { console.error(err); }); specifications specification status
comment web authentication: an api for accessing public key credentials level 1the definition of 'id' in that specification.
PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable() - Web APIs
e() .then(function(available){ if(available){ // we can proceed with the creation of a publickeycredential // with this authenticator } else { // use another kind of authenticator or a classical login/password // workflow } }).catch(function(err){ // something went wrong console.error(err); }); specifications specification status
comment web authentication: an api for accessing public key credentials level 1the definition of 'isuserverifyingplatformauthenticatoravailable' in that specification.
PublicKeyCredential.rawId - Web APIs
ample.com", displayname: "john doe", }, pubkeycredparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey: options }) .then(function (pubkeycredential) { var rawid = pubkeycredential.rawid; // do something with rawid }).catch(function (err) { // deal with any error }); specifications specification status
comment web authentication: an api for accessing public key credentials level 1the definition of 'rawid' in that specification.
PublicKeyCredential.response - Web APIs
publickey: options }) .then(function (pubkeycredential) { var response = pubkeycredential.response; var clientextresults = pubkeycredential.getclientextensionresults(); // send response and client extensions to the server so that it can validate // and create credentials }).catch(function (err) { // deal with any error }); specifications specification status
comment web authentication: an api for accessing public key credentials level 1the definition of 'response' in that specification.
PublicKeyCredential - Web APIs
var options = { challenge: new uint8array([/* bytes sent from the server */]) }; navigator.credentials.get({ "publickey": options }) .then(function (credentialinfoassertion) { // send assertion response back to the server // to proceed with the control of the credential }).catch(function (err) { console.error(err); }); specifications specification status
comment web authentication: an api for accessing public key credentials level 1the definition of 'publickeycredential interface' in that specification.
PublicKeyCredentialCreationOptions.attestation - Web APIs
dparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { // send attestation response and client extensions // to the server to proceed with the registration // of the credential }).catch(function (err) { console.error(err); }); specifications specification status
comment web authentication: an api for accessing public key credentials level 1the definition of 'attestation' in that specification.
PublicKeyCredentialCreationOptions.authenticatorSelection - Web APIs
}, pubkeycredparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { // send attestation response and client extensions // to the server to proceed with the registration // of the credential }).catch(function (err) { console.error(err); }); specifications specification status
comment web authentication: an api for accessing public key credentials level 1the definition of 'authenticatorselection' in that specification.
PublicKeyCredentialCreationOptions.challenge - Web APIs
dparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { // send attestation response and client extensions // to the server to proceed with the registration // of the credential }).catch(function (err) { console.error(err); }); specifications specification status
comment web authentication: an api for accessing public key credentials level 1the definition of 'challenge' in that specification.
PublicKeyCredentialCreationOptions.excludeCredentials - Web APIs
}, pubkeycredparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { // send attestation response and client extensions // to the server to proceed with the registration // of the credential }).catch(function (err) { console.error(err); }); specifications specification status
comment web authentication: an api for accessing public key credentials level 1the definition of 'excludecredentials' in that specification.
PublicKeyCredentialCreationOptions.extensions - Web APIs
) { // mybuffer will contain the result of any of the processing of the extensions var mybuffer = newcredentialinfo.getclientextensionresults(); // send attestation response and client extensions // to the server to proceed with the registration // of the credential }).catch(function (err) { console.error(err); }); specifications specification status
comment web authentication: an api for accessing public key credentials level 1the definition of 'extensions' in that specification.
PublicKeyCredentialCreationOptions.pubKeyCredParams - Web APIs
*/ name: "jdoe@example.com", displayname: "john doe", } }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { // send attestation response and client extensions // to the server to proceed with the registration // of the credential }).catch(function (err) { console.error(err); }); specifications specification status
comment web authentication: an api for accessing public key credentials level 1the definition of 'pubkeycredparams' in that specification.
PublicKeyCredentialCreationOptions.rp - Web APIs
dparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { // send attestation response and client extensions // to the server to proceed with the registration // of the credential }).catch(function (err) { console.error(err); }); specifications specification status
comment web authentication: an api for accessing public key credentials level 1the definition of 'rp' in that specification.
PublicKeyCredentialCreationOptions.timeout - Web APIs
dparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { // send attestation response and client extensions // to the server to proceed with the registration // of the credential }).catch(function (err) { console.error(err); }); specifications specification status
comment web authentication: an api for accessing public key credentials level 1the definition of 'timeout' in that specification.
PublicKeyCredentialCreationOptions.user - Web APIs
dparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { // send attestation response and client extensions // to the server to proceed with the registration // of the credential }).catch(function (err) { console.error(err); }); specifications specification status
comment web authentication: an api for accessing public key credentials level 1the definition of 'user' in that specification.
PublicKeyCredentialCreationOptions - Web APIs
wcredentialinfo.response; var clientextensionsoutputs = newcredentialinfo.getclientextensionsresults(); // send the response to the relying party server // it will verify the content and integrity before // creating a new credential }).catch(function (err) { // deal with any error properly console.error(err); });; specifications specification status
comment web authentication: an api for accessing public key credentials level 1the definition of 'publickeycredentialcreationoptions dictionary' in that specification.
PublicKeyCredentialRequestOptions.allowCredentials - Web APIs
he server } ], challenge: new uint8array([/* bytes sent from the server */]) }; navigator.credentials.get({ "publickey": options }) .then(function (credentialinfoassertion) { // send assertion response back to the server // to proceed with the control of the credential }).catch(function (err) { console.error(err); }); specifications specification status
comment web authentication: an api for accessing public key credentials level 1the definition of 'allowcredentials' in that specification.
PublicKeyCredentialRequestOptions.challenge - Web APIs
es var options = { challenge: new uint8array([/* bytes sent from the server */]) }; navigator.credentials.get({ "publickey": options }) .then(function (credentialinfoassertion) { // send assertion response back to the server // to proceed with the control of the credential }).catch(function (err) { console.error(err); }); specifications specification status
comment web authentication: an api for accessing public key credentials level 1the definition of 'challenge' in that specification.
PublicKeyCredentialRequestOptions.extensions - Web APIs
ify yourself?" }, challenge: new uint8array([/* bytes sent from the server */]) }; navigator.credentials.get({ "publickey": options }) .then(function (credentialinfoassertion) { // send assertion response back to the server // to proceed with the control of the credential }).catch(function (err) { console.error(err); }); specifications specification status
comment web authentication: an api for accessing public key credentials level 1the definition of 'extensions' in that specification.
PublicKeyCredentialRequestOptions.rpId - Web APIs
ork if the current domain // is something like foo.example.com }; navigator.credentials.get({ "publickey": options }) .then(function (credentialinfoassertion) { // send assertion response back to the server // to proceed with the control of the credential }).catch(function (err) { console.error(err); }); specifications specification status
comment web authentication: an api for accessing public key credentials level 1the definition of 'rpid' in that specification.
PublicKeyCredentialRequestOptions.timeout - Web APIs
ute for the fetching operation // and maybe fail if it takes longer }; navigator.credentials.get({ "publickey": options }) .then(function (credentialinfoassertion) { // send assertion response back to the server // to proceed with the control of the credential }).catch(function (err) { console.error(err); }); specifications specification status
comment web authentication: an api for accessing public key credentials level 1the definition of 'timeout' in that specification.
PublicKeyCredentialRequestOptions.userVerification - Web APIs
ation: "preferred", challenge: new uint8array([/* bytes sent from the server */]), }; navigator.credentials.get({ "publickey": options }) .then(function (credentialinfoassertion) { // send assertion response back to the server // to proceed with the control of the credential }).catch(function (err) { console.error(err); }); specifications specification status
comment web authentication: an api for accessing public key credentials level 1the definition of 'userverification' in that specification.
PublicKeyCredentialRequestOptions - Web APIs
verified loc: false, txauthsimple: "could you please verify yourself?" } }; navigator.credentials.get({ "publickey": options }) .then(function (credentialinfoassertion) { // send assertion response back to the server // to proceed with the control of the credential }).catch(function (err) { console.error(err); }); specifications specification status
comment web authentication: an api for accessing public key credentials level 1the definition of 'publickeycredentialrequestoptions dictionary' in that specification.
PushEvent.data - Web APIs
"images/new-notification.png"; var notification = new notification(title, { body: message, tag: 'simple-push-demo-notification', icon: icon }); notification.addeventlistener('click', function() { if (clients.openwindow) { clients.openwindow('https://example.blog.com/2015/03/04/something-new.html'); } }); }); specifications specification status
comment push apithe definition of 'data' in that specification.
PushEvent - Web APIs
es/new-notification.png"; var notification = new self.notification(title, { body: message, tag: 'simple-push-demo-notification', icon: icon }); notification.addeventlistener('click', function() { if (clients.openwindow) { clients.openwindow('https://example.blog.com/2015/03/04/something-new.html'); } }); }); specifications specification status
comment push apithe definition of 'pushevent' in that specification.
PushManager.getSubscription() - Web APIs
scription); showcurlcommand(subscription); // set your ui to show they have subscribed for // push messages pushbutton.textcontent = 'disable push messages'; ispushenabled = true; }) .catch(function(err) { window.demo.debug.log('error during getsubscription()', err); }); }); specifications specification status
comment push apithe definition of 'getsubscription()' in that specification.
PushManager.register() - Web APIs
example var req = navigator.push.register(); req.onsuccess = function(e) { var endpoint = req.result; debug("new endpoint: " + endpoint ); } req.onerror = function(e) { debug("error getting a new endpoint: " + json.stringify(e)); } specification specification status
comment push api working draft defines the pushmanager interface.
PushManager.registrations() - Web APIs
var register = navigator.push.register(); register.onsuccess = function(e) { console.log("registered new endpoint", register.result); } } } specification specification status
comment push api working draft defines the pushmanager interface.
PushManager.unregister() - Web APIs
example var req = navigator.push.unregister(pushendpoint); req.onsuccess = function(e) { var endpoint = req.result; debug("unregistered endpoint: " + endpoint ); } req.onerror = function(e) { debug("error unregistering the endpoint: " + json.stringify(e)); } specification specification status
comment push api working draft defines the pushmanager interface.
PushManager - Web APIs
console.log(error); } ); }); specifications specification status
comment push apithe definition of 'pushmanager' in that specification.
PushMessageData.arrayBuffer() - Web APIs
examples self.addeventlistener('push', function(event) { var buffer = event.data.arraybuffer(); // do something with your array buffer }); specifications specification status
comment push apithe definition of 'arraybuffer()' in that specification.
PushMessageData.blob() - Web APIs
examples self.addeventlistener('push', function(event) { var blob = event.data.blob(); // do something with your blob }); specifications specification status
comment push apithe definition of 'blob()' in that specification.
PushMessageData.json() - Web APIs
examples self.addeventlistener('push', function(event) { var mydata = event.data.json(); // do something with your data }); specifications specification status
comment push apithe definition of 'json()' in that specification.
PushMessageData.text() - Web APIs
examples self.addeventlistener('push', function(event) { var textobj = event.data.text(); // do something with your text }); specifications specification status
comment push apithe definition of 'text()' in that specification.
PushMessageData - Web APIs
examples self.addeventlistener('push', function(event) { var obj = event.data.json(); if(obj.action === 'subscribe' || obj.action === 'unsubscribe') { firenotification(obj, event); port.postmessage(obj); } else if(obj.action === 'init' || obj.action === 'chatmsg') { port.postmessage(obj); } }); specifications specification status
comment push apithe definition of 'pushmessagedata' in that specification.
PushSubscription.endpoint - Web APIs
or.serviceworker.ready.then(function(reg) { reg.pushmanager.subscribe({uservisibleonly: true}).then(function(subscription) { console.log(subscription.endpoint); // at this point you would most likely send the subscription // endpoint to your server, save it, then use it to send a // push message at a later date }) }) specifications specification status
comment push apithe definition of 'endpoint' in that specification.
PushSubscription.getKey() - Web APIs
specifications specification status
comment push api working draft this is the push api spec, but note that getkey() is not currently specified in here.
PushSubscription.subscriptionId - Web APIs
syntax var subid = pushsubscription.subscriptionid; specifications specification status
comment push api working draft initial definition browser compatibility the compatibility table on this page is generated from structured data.
PushSubscription.toJSON() - Web APIs
example navigator.serviceworker.ready.then(function(reg) { reg.pushmanager.getsubscription().then(function(subscription) { var mysubscription = subscription.tojson(); // do something with subscription details }) }); specifications specification status
comment push apithe definition of 'pushsubscription: tojson' in that specification.
PushSubscription.unsubscribe() - Web APIs
example navigator.serviceworker.ready.then(function(reg) { reg.pushmanager.getsubscription().then(function(subscription) { subscription.unsubscribe().then(function(successful) { // you've successfully unsubscribed }).catch(function(e) { // unsubscription failed }) }) }); specifications specification status
comment push apithe definition of 'unsubscribe()' in that specification.
PushSubscription - Web APIs
example navigator.serviceworker.ready.then(function(reg) { reg.pushmanager.getsubscription().then(function(subscription) { subscription.unsubscribe().then(function(successful) { // you've successfully unsubscribed }).catch(function(e) { // unsubscription failed }) }) }); specifications specification status
comment push apithe definition of 'pushsubscription' in that specification.
Push API - Web APIs
specifications specification status
comment push api working draft initial definition ...
RTCAnswerOptions - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcansweroptions' in that specification.
RTCCertificate - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsers candidate recommendation initial definition.
RTCConfiguration.bundlePolicy - Web APIs
let config = { iceservers: [ { urls: [ "stun:stun.example.com" ] }, ], bundlepolicy: "max-compat" }; let pc = new rtcpeerconnection(config); specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcconfiguration.bundlepolicy' in that specification.
RTCConfiguration.certificates - Web APIs
<<<--- add link to information about identity --->>> examples specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcconfiguration.certificates' in that specification.
RTCConfiguration.iceServers - Web APIs
urls: "stun:stun.services.mozilla.com", username: "louis@mozilla.com", credential: "webrtcdemo" }, { urls: ["stun:stun.example.com", "stun:stun-1.example.com"] }] }; var pc = new rtcpeerconnection(configuration); specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcconfiguration.iceservers' in that specification.
RTCConfiguration.iceTransportPolicy - Web APIs
let config = { iceservers: [ { urls: [ "stun:stun.example.com" ] }, ], icetransportpolicy: "relay" }; let pc = new rtcpeerconnection(config); specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtccandidate.icetransportpolicy' in that specification.
RTCConfiguration - Web APIs
urls: "stun:stun.services.mozilla.com", username: "louis@mozilla.com", credential: "webrtcdemo" }, { urls: ["stun:stun.example.com", "stun:stun-1.example.com"] }] }; var pc = new rtcpeerconnection(configuration); specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcconfiguration' in that specification.
RTCDTMFSender.insertDTMF() - Web APIs
example tbd specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdtmfsender.insertdtmf()' in that specification.
RTCDTMFSender.ontonechange - Web APIs
example tbd specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'ontonechange' in that specification.
RTCDTMFSender.toneBuffer - Web APIs
example tbd specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdtmfsender.tonebuffer' in that specification.
RTCDTMFSender: tonechange event - Web APIs
= "<none>"; } document.getelementbyid("playingtone").innertext = tone; }, false); you can also just set the ontonechange event handler property directly: dtmfsender.ontonechange = function( ev ) { let tone = ev.tone; if (tone === "") { tone = "<none>" } document.getelementbyid("playingtone").innertext = tone; }; specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'tonechange' in that specification.
RTCDTMFSender - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdtmfsender' in that specification.
RTCDTMFToneChangeEvent.tone - Web APIs
dtmfsender.ontonechange = function( ev ) { let tone = ev.tone; if (tone === "") { tone = "<none>" } document.getelementbyid("playingtone").innertext = tone; }; specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdtmftonechangeevent.tone' in that specification.
RTCDTMFToneChangeEvent - Web APIs
dtmfsender.addeventlistener("change", function(event) { if (event.tone !== "") { dialstringbox.innertext += event.tone; } else { senddtmfbutton.disabled = false; } }, false); specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdtmftonechangeevent' in that specification.
RTCDataChannel.binaryType - Web APIs
var dc = peerconnection.createdatachannel("binary"); dc.binarytype = "arraybuffer"; dc.onmessage = function(event) { let bytearray = new uint8array(event.data); let hexstring = ""; bytearray.foreach(function(byte) { hexstring += byte.tostring(16) + " "; }); }; specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel.binarytype' in that specification.
RTCDataChannel.bufferedAmount - Web APIs
*/ function showbufferedamount(channel) { let el = document.getelementbyid("buffersize"); el.innerhtml = channel.bufferedamount + " bytes"; } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel.bufferedamount' in that specification.
RTCDataChannel.bufferedAmountLowThreshold - Web APIs
var dc = peerconnection.createdatachannel("file transfer"); dc.bufferedamountlowthreshold = 65535; dc.onbufferedamountlow = function() { /* use send() to queue more data to be sent */ }; specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel.bufferedamountlowthreshold' in that specification.
RTCDataChannel: bufferedamountlow event - Web APIs
you can also set up a listener for bufferedamountlow using its event handler property, onbufferedamountlow: pc.onbufferedamountlow = ev => { if (source.position <= source.length) { dc.send(source.readfile(65536)); } } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'bufferedamountlow' in that specification.
RTCDataChannel.close() - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel.close()' in that specification.
RTCDataChannel: close event - Web APIs
you can also use the onclose event handler property to set a handler for close events: dc.onclose = ev => { messageinputbox.disabled = true; sendbutton.disabled = true; connectbutton.disabled = false; disconnectbutton.disabled = true; } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'close' in that specification.
RTCDataChannel.id - Web APIs
example var pc = new rtcpeerconnection(); var dc = pc.createdatachannel("my channel"); console.log("channel id: " + dc.id); specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel.id' in that specification.
RTCDataChannel.label - Web APIs
*/ document.getelementbyid("channel-name").innerhtml = "<span class='channelname'>" + dc.label + "</span>"; specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel.label' in that specification.
RTCDataChannel.maxPacketLifeTime - Web APIs
example // tbd specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel.maxpacketlifetime' in that specification.
RTCDataChannel.maxRetransmits - Web APIs
example // tbd specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel.maxretransmits' in that specification.
RTCDataChannel: message event - Web APIs
you can also use an rtcdatachannel object's onmessage event handler property to set the event handler: dc.onmessage = ev => { let newparagraph = document.createelement("p"); let textnode = document.createtextnode(event.data); newparagraph.appendchild(textnode); document.body.appendchild(newparagraph); } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'the <code>message</code> event' in that specification.
RTCDataChannel.negotiated - Web APIs
if (datachannel.negotiated) { shutdownremotechannel(datachannel.id); } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel.negotiated' in that specification.
RTCDataChannel.onbufferedamountlow - Web APIs
*/ dc.onbufferedamountlow = function() { if (source.position <= source.length) { dc.send(source.readfile(65536)); } } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel.onbufferedamountlow' in that specification.
RTCDataChannel.onclose - Web APIs
*/ specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel.onclose' in that specification.
RTCDataChannel.onclosing - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel.onclosing' in that specification.
RTCDataChannel.onerror - Web APIs
*/ specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel.onerror' in that specification.
RTCDataChannel.onmessage - Web APIs
let pc = new rtcpeerconnection(); let dc = pc.createdatachannel(); dc.onmessage = function(event) { var el = document.createelement("p"); var txtnode = document.createtextnode(event.data); el.appendchild(txtnode); receivebox.appendchild(el); } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel.onmessage' in that specification.
RTCDataChannel.onopen - Web APIs
let dc = mypeerconnection.createdatachannel("message channel"); dc.onopen = function(event) { let messagebox = document.getelementbyid("messagebox"); let sendbutton = document.getelementbyid("sendbutton"); messagebox.disabled = false; messagebox.focus(); sendbutton.disabled = false; } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel.onopen' in that specification.
RTCDataChannel.ordered - Web APIs
example var pc = new rtcpeerconnection(); var dc = pc.createdatachannel("my channel"); if (!dc.ordered) { // handle unordered messaging } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel.ordered' in that specification.
RTCDataChannel.protocol - Web APIs
example var pc = new rtcpeerconnection(); var dc = pc.createdatachannel("my channel", { protocol: "json" }); function handlechannelmessage(datachannel, msg) { switch(datachannel.protocol) { case "json": /* process json data */ break; case "raw": /* process raw binary data */ break; } } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel.protocol' in that specification.
RTCDataChannel.readyState - Web APIs
attempt to send while connection closed."); break; } } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel.readystate' in that specification.
RTCDataChannel.send() - Web APIs
var pc = new rtcpeerconnection(); var dc = pc.createdatachannel("backchannel"); function sendmessage(msg) { let obj = { "message": msg, "timestamp": new date() } dc.send(json.stringify(obj)); } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel.send()' in that specification.
RTCDataChannel - Web APIs
example var pc = new rtcpeerconnection(); var dc = pc.createdatachannel("my channel"); dc.onmessage = function (event) { console.log("received: " + event.data); }; dc.onopen = function () { console.log("datachannel open"); }; dc.onclose = function () { console.log("datachannel close"); }; specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannel' in that specification.
RTCDataChannelEvent() - Web APIs
var event = new rtcdatachannelevent("datachannel", {"channel": dc}); specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannelevent' in that specification.
RTCDataChannelEvent.channel - Web APIs
pc.ondatachannel = function(event) { inbounddatachannel = event.channel; inbounddatachannel.onmessage = handleincomingmessage; inbounddatachannel.onopen = handlechannelopen; inbounddatachannel.onclose = handlechannelclose; } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannelevent.channel' in that specification.
RTCDataChannelEvent - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdatachannelevent' in that specification.
RTCDtlsTransport.iceTransport - Web APIs
examples tbd specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdtlstransport.icetransport' in that specification.
RTCDtlsTransport.state - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdtlstransport.state' in that specification.
RTCDtlsTransport - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcdtlstransport' in that specification.
RTCError - Web APIs
you can also use the rtcdatachannel object's onerror event handler property, like this: datachannel.onerror = (event) => { let error = event.error; /* and so forth */ }; specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcerror' in that specification.
RTCErrorEvent.error - Web APIs
you can also use the rtcdatachannel object's onerror event handler property, like this: datachannel.onerror = (event) => { let error = event.error; /* and so forth */ }; specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcerrorevent.error' in that specification.
RTCErrorEvent - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcerrorevent' in that specification.
RTCIceCandidate.address - Web APIs
if (ipbanlist.includes(candidate.address)) { rejectcandidate(candidate); } else { acceptcandidate(candidate); } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecandidate: address' in that specification.
RTCIceCandidate.candidate - Web APIs
this example could be simplified somewhat; you may more often see the code look something like this, taking advantage of more advanced ecmascript 2016 features: let handlenewicecandidate = candidatesdp => mypeerconnection.addicecandidate(new rtcicecandidate(candidatesdp)); specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecandidate.candidate' in that specification.
RTCIceCandidate.component - Web APIs
if (candidate.component == "rtp") { handlertpcandidate(candidate); } else if (candidate.component == "rtcp") { handlertcpcandidate(candidate); } else { handleunknowncandidate(candidate); } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecandidate.component' in that specification.
RTCIceCandidate.foundation - Web APIs
if (candidate1.foundation == candidate2.foundation) { /* the two candidates are the same, even if they're on different transports */ } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecandidate.foundation' in that specification.
RTCIceCandidate.port - Web APIs
var candidateloc = { address: candidate.ip, port: candidate.port } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecandidate.port' in that specification.
RTCIceCandidate.priority - Web APIs
var bestcandidate = { candidate: "", sdpmid: null, sdpmlineindex: null, priority: 0 }; function handlecandidate(candidatestring) { var candidate = new rtcicecandidate(candidatestring); if (candidate.priority > bestcandidate.priority) { bestcandidate = candidate; } } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecandidate.priority' in that specification.
RTCIceCandidate.protocol - Web APIs
if (candidate.protocol == "tcp") { if (candidate.tcptype == "so") { adjustforsimultaneousopen(candidate); } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecandidate.protocol' in that specification.
RTCIceCandidate.relatedAddress - Web APIs
break; case "prflx": console.log("peer reflexive candidate's base address is " + candidate.relatedaddress + "; reachable at " + candidate.ip); break; case "relay": console.log("relay candidate's address assigned by the turn server is " + candidate.relatedaddress + "; reachable at " + candidate.ip); break; } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecandidate.relatedaddress' in that specification.
RTCIceCandidate.relatedPort - Web APIs
idate.ip; var port = candidate.port; var relip = candidate.relatedaddress; var relport = candidate.relatedport; if (relip && relport) { console.log("candidate type '" + type + "' -- contact address: " + ip + " " + port + ", related address: " + relip + " " + relport); } else { console.log("host candidate address is " + ip + " " + port); } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecandidate.relatedport' in that specification.
RTCIceCandidate.sdpMLineIndex - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecandidate.sdpmlineindex' in that specification.
RTCIceCandidate.sdpMid - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecandidate.sdpmid' in that specification.
RTCIceCandidate.tcpType - Web APIs
if (candidate.protocol == "tcp" && candidate.tcptype == "so") { adjustforsimultaneousopen(candidate); } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecandidate.tcptype' in that specification.
RTCIceCandidate. toJSON() - Web APIs
var jsonstring = candidate.tojson().stringify(); specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecandidate.tojson()' in that specification.
RTCIceCandidate.type - Web APIs
if (candidate.type == "host") { showhostcontrols(); } else { hidehostcontrols(); } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecandidate.type' in that specification.
RTCIceCandidate.usernameFragment - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecandidate.usernamefragment' in that specification.
RTCIceCandidate - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecandidate' in that specification.
RTCIceCandidateInit.candidate - Web APIs
that usage would change the above sample to look like this: function goticecandidatemessage(msg) { var icecandidate = new rtcicecandidate(msg.candidate); pc.addicecandidate(icecandidate).catch({ /* handle error */ }); } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecandidateinit.candidate' in that specification.
RTCIceCandidateInit.sdpMid - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecandidateinit.sdpmid' in that specification.
RTCIceCandidateInit - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecandidateinit' in that specification.
RTCIceCandidatePair.local - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecandidatepair.local' in that specification.
RTCIceCandidatePair.remote - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecandidatepair.remote' in that specification.
RTCIceCandidatePair - Web APIs
t.getelementbyid("local-protocol"); var remoteproto = document.getelementbyid("remote-protocol"); icetransport.onselectedcandidatepairchange = function(event) { var pair = icetransport.getselectedcandidatepair(); localprotocol.innertext = pair.local.protocol.touppercase(); remoteprotocol.innertext = pair.remote.protocol.touppercase(); } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecandidatepair' in that specification.
RTCIceCandidatePairStats.firstRequestTimestamp - Web APIs
you can use this value in combination with lastrequesttimestamp and requestssent to compute the average interval between consecutive connectivity checks: avgcheckinterval = (candidatepairstats.lastrequesttimestamp - candidatepairstats.firstrequesttimestamp) / candidatepairstats.requestssent; specifications specification status
comment identifiers for webrtc's statistics apithe definition of 'rtcicecandidatepairstats.firstrequesttimestamp' in that specification.
RTCIceCandidatePairStats.lastRequestTimestamp - Web APIs
you can use this value in combination with firstrequesttimestamp and requestssent to compute the average interval between consecutive connectivity checks: avgcheckinterval = (candidatepairstats.lastrequesttimestamp - candidatepairstats.firstrequesttimestamp) / candidatepairstats.requestssent; specifications specification status
comment identifiers for webrtc's statistics apithe definition of 'rtcicecandidatepairstats.lastrequesttimestamp' in that specification.
RTCIceCandidatePairStats.totalRoundTripTime - Web APIs
you can calculate the average round-trip time (rtt) by dividing this value by the value of the responsesreceived property: rtt = rtcicecandidatepairstats.totalroundtriptime / rtcicecandidatepairstats.responsesreceived; specifications specification status
comment identifiers for webrtc's statistics apithe definition of 'rtcicecandidatepairstats.totalroundtriptime' in that specification.
RTCIceCandidatePairStats - Web APIs
specifications specification status
comment identifiers for webrtc's statistics apithe definition of 'rtcicecandidatepairstats' in that specification.
RTCIceCandidateStats.deleted - Web APIs
object.keys(report).foreach(statname => { if (statname !== "id" && statname !== "timestamp" && statname !== "type") { statsoutput += `<strong>${statname}:</strong> ${report[statname]}<br>\n`; } }); } }); document.queryselector(".stats-box").innerhtml = statsoutput; }); }, 1000); specifications specification status
comment identifiers for webrtc's statistics apithe definition of 'rtcicecandidatestats.deleted' in that specification.
RTCIceCandidateStats.port - Web APIs
specifications specification status
comment identifiers for webrtc's statistics apithe definition of 'rtcicecandidatestats.port' in that specification.
RTCIceCandidateStats.url - Web APIs
specifications specification status
comment identifiers for webrtc's statistics apithe definition of 'rtcicecandidatestats.url' in that specification.
RTCIceCandidateStats - Web APIs
specifications specification status
comment identifiers for webrtc's statistics apithe definition of 'rtcicecandidatestats' in that specification.
RTCIceCandidateType - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecandidatetype' in that specification.
RTCIceComponent - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecomponent' in that specification.
RTCIceCredentialType - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecredentialtype' in that specification.
RTCIceGathererState - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicegathererstate' in that specification.
RTCIceParameters.password - Web APIs
syntax password = rtciceparameters.password; value a domstring containing the password that corresponds to the transport's usernamefragment string specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtciceparameters.password' in that specification.
RTCIceParameters - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtciceparameters' in that specification.
RTCIceProtocol - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtciceprotocol' in that specification.
RTCIceRole - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicerole' in that specification.
RTCIceServer.credential - Web APIs
mypeerconnection = new rtcpeerconnection({ iceservers: [ { urls: "turn:turnserver.example.org", // a turn server username: "webrtc", credential: "turnpassword" } ] }); specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtciceserver.credential' in that specification.
RTCIceServer.credentialType - Web APIs
mypeerconnection = new rtcpeerconnection({ iceservers: [ { urls: "turn:turnserver.example.org", // a turn server username: "webrtc", credential: "turnpassword", credentialtype: "password" } ] }); specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtciceserver.credential' in that specification.
RTCIceServers.urls - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtciceserver.urls' in that specification.
RTCIceServer.username - Web APIs
mypeerconnection = new rtcpeerconnection({ iceservers: [ { urls: "turn:turnserver.example.org", // a turn server username: "webrtc", credential: "turnpassword" } ] }); specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtciceserver.username' in that specification.
RTCIceTcpCandidateType - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicetcpcandidatetype' in that specification.
RTCIceTransport.component - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicetransport.component' in that specification.
RTCIceTransport.gatheringState - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicetransport.gatheringstate' in that specification.
RTCIceTransport: gatheringstatechange event - Web APIs
ngstatechange event handler property: pc.getsenders().foreach(sender => { sender.transport.icetransport.ongatheringstatechange = ev => { let transport = ev.target; if (transport.gatheringstate === "complete") { /* this transport has finished gathering candidates, but others may still be working on it */ } }; }); specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'gatheringstatechange' in that specification.
RTCIceTransport.getLocalCandidates() - Web APIs
var localcandidates = pc.getsenders()[0].transport.transport.getlocalcandidates(); localcandidates.foreach(function(candidate, index)) { console.log("candidate " + index + ": " + candidate.candidate); }); specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecandidate.getlocalcandidates()' in that specification.
RTCIceTransport.getRemoteCandidates() - Web APIs
var remotecandidates = pc.getsenders()[0].transport.transport.getremotecandidates(); remotecandidates.foreach(function(candidate, index)) { console.log("candidate " + index + ": " + candidate.candidate); }); specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicecandidate.getremotecandidates()' in that specification.
RTCIceTransport.getSelectedCandidatePair() - Web APIs
t.getelementbyid("local-protocol"); var remoteproto = document.getelementbyid("remote-protocol"); icetransport.onselectedcandidatepairchange = function(event) { var pair = icetransport.getselectedcandidatepair(); localprotocol.innertext = pair.local.protocol.touppercase(); remoteprotocol.innertext = pair.remote.protocol.touppercase(); } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicetransport.getselectedcandidatepair()' in that specification.
RTCIceTransport.ongatheringstatechange - Web APIs
var icetransport = pc.getsenders()[0].transport.transport; icetransport.ongatheringstatechange = function(event) { if (icetransport.gatheringstate == "complete") { allcandidatesreceived(pc); } } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicetransport.ongatheringstatechange' in that specification.
RTCIceTransport.onselectedcandidatepairchange - Web APIs
t.getelementbyid("local-protocol"); var remoteproto = document.getelementbyid("remote-protocol"); icetransport.onselectedcandidatepairchange = function(event) { var pair = icetransport.getselectedcandidatepair(); localprotocol.innertext = pair.local.protocol.touppercase(); remoteprotocol.innertext = pair.remote.protocol.touppercase(); } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicetransport.onselectedcandidatepairchange' in that specification.
RTCIceTransport.onstatechange - Web APIs
var icetransport = pc.getsenders()[0].transport.icetransport; icetransport.onstatechange = function(event) { if (icetransport.state == "failed") { handlefailure(pc); } } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicetransport.onstatechange' in that specification.
RTCIceTransport.role - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicetransport.role' in that specification.
RTCIceTransport: selectedcandidatepairchange event - Web APIs
ument.getelementbyid("local-protocol"); let remoteprotoelem = document.getelementbyid("remote-protocol"); icetransport.onselectedcandidatepairchange = ev => { let pair = icetransport.getselectedcandidatepair(); localprotoelem.innertext = pair.local.protocol.touppercase(); remoteprotoelem.innertext = pair.remote.protocol.touppercase(); } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'selectedcandidatepairchange' in that specification.
RTCIceTransport.state - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicetransportstate' in that specification.
RTCIceTransport: statechange event - Web APIs
, ev => { if (icetransport.state === "failed") { handlefailure(pc); } }, false); the same code, using the onstatechange event handler property, looks like this: let icetransport = pc.getsenders()[0].transport.icetransport; icetransport.onstatechange = ev => { if (icetransport.state === "failed") { handlefailure(pc); } }; specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'statechange' in that specification.
RTCIceTransport - Web APIs
examples tbd specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicetransport' in that specification.
RTCIceTransportState - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcicerole' in that specification.
RTCIdentityAssertion - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsers candidate recommendation initial definition.
RTCInboundRtpStreamStats.qpSum - Web APIs
(stats) { let framecount = 0; switch(stats.type) { case "inbound-rtp": case "remote-inbound-rtp": framecount = stats.framesdecoded; break; case "outbound-rtp": case "remote-outbound-rtp": framecount = stats.framesencoded; break; default: return 0; } return status.qpsum / framecount; } specifications specification status
comment identifiers for webrtc's statistics apithe definition of 'rtcinboundrtpstreamstats.qpsum' in that specification.
RTCInboundRtpStreamStats - Web APIs
examples specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcinboundrtpstreamstats' in that specification.
RTCNetworkType - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcnetworktype' in that specification.
RTCOfferAnswerOptions - Web APIs
the default value is true, enabling this functionality specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcofferansweroptions' in that specification.
RTCOfferOptions.iceRestart - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcofferoptions.icerestart' in that specification.
RTCOfferOptions - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcofferoptions' in that specification.
RTCOutboundRtpStreamStats.qpSum - Web APIs
(stats) { let framecount = 0; switch(stats.type) { case "inbound-rtp": case "remote-inbound-rtp": framecount = stats.framesdecoded; break; case "outbound-rtp": case "remote-outbound-rtp": framecount = stats.framesencoded; break; default: return 0; } return status.qpsum / framecount; } specifications specification status
comment identifiers for webrtc's statistics apithe definition of 'rtcoutboundrtpstreamstats.qpsum' in that specification.
RTCOutboundRtpStreamStats - Web APIs
examples specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcoutboundrtpstreamstats' in that specification.
RTCPeerConnection() - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection()' in that specification.
RTCPeerConnection.addStream() - Web APIs
remove a track from a stream and the peer connection said stream was added to: stream.removetrack(track); if (pc.removetrack) { pc.removetrack(pc.getsenders().find(sender => sender.track == track)); } else { // if you have code listening for negotiationneeded events: settimeout(() => pc.dispatchevent(new event('negotiationneeded'))); } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.addstream()' in that specification.
RTCPeerConnection.addTrack() - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.addtrack()' in that specification.
RTCPeerConnection.canTrickleIceCandidates - Web APIs
icegatheringstate === 'complete') { r(pc.localdescription); } }); }); }) .then(answer => sendanswertopeer(answer)) // signaling message .catch(e => handleerror(e)); pc.addeventlistener('icecandidate', e => { if (pc.cantrickleicecandidates) { sendcandidatetopeer(e.candidate); // signaling message } }); specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.cantrickleicecandidates' in that specification.
RTCPeerConnection.close() - Web APIs
tcpeerconnection(); var dc = pc.createdatachannel("my channel"); dc.onmessage = function (event) { console.log("received: " + event.data); pc.close(); // we decided to close after the first received message }; dc.onopen = function () { console.log("datachannel open"); }; dc.onclose = function () { console.log("datachannel close"); }; specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.close()' in that specification.
RTCPeerConnection.connectionState - Web APIs
*/ var connectionstate = pc.connectionstate; specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.connectionstate' in that specification.
RTCPeerConnection.currentLocalDescription - Web APIs
var pc = new rtcpeerconnection(); … var sd = pc.currentlocaldescription; if (sd) { alert("local session: type='" + sd.type + "'; sdp description='" + sd.sdp + "'"); } else { alert("no local session yet."); } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.currentlocaldescription' in that specification.
RTCPeerConnection.currentRemoteDescription - Web APIs
var pc = new rtcpeerconnection(); … var sd = pc.currentremotedescription; if (sd) { alert("local session: type='" + sd.type + "'; sdp description='" + sd.sdp + "'"); } else { alert("no local session yet."); } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.currentremotedescription' in that specification.
RTCPeerConnection: datachannel event - Web APIs
this same code can also instead use the rtcpeerconnection interface's ondatachannel event handler property, like this: pc.ondatachannel = ev => { receivechannel = ev.channel; receivechannel.onmessage = myhandlemessage; receivechannel.onopen = myhandleopen; receivechannel.onclose = myhandleclose; } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'datachannel' in that specification.
RTCPeerConnection.generateCertificate() - Web APIs
example rtcpeerconnection.generatecertificate({ name: 'rsassa-pkcs1-v1_5', hash: 'sha-256', moduluslength: 2048, publicexponent: new uint8array([1, 0, 1]) }).then(function(cert) { var pc = new rtcpeerconnection({certificates: [cert]}); }); specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'generatecertificate()' in that specification.
RTCPeerConnection.getDefaultIceServers() - Web APIs
example var pc = new rtcpeerconnection(); var iceservers = pc.getdefaulticeservers(); if (iceservers.length === 0) { // deal with the lack of default ice servers, possibly by using our own defaults } specifications specification status
comment webrtc extensions ...
RTCPeerConnection.getReceivers() - Web APIs
example tbd specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.getreceivers()' in that specification.
RTCPeerConnection.getSenders() - Web APIs
function setmuting(pc, muting) { let senderlist = pc.getsenders(); senderlist.foreach(sender) { sender.track.enabled = !muting; } } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.getsenders()' in that specification.
RTCPeerConnection.getStats() - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.getstats()' in that specification.
RTCPeerConnection.getTransceivers() - Web APIs
pc.gettransceivers().foreach(transceiver => { transceiver.stop(); }); specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.gettransceivers()' in that specification.
RTCPeerConnection.iceConnectionState - Web APIs
example var pc = new rtcpeerconnection(); var state = pc.iceconnectionstate; specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.iceconnectionstate' in that specification.
RTCPeerConnection: iceconnectionstatechange event - Web APIs
onnectionstatechange", ev => { let stateelem = document.queryselector("#call-state"); stateelem.classname = `${pc.iceconnectionstate}-state`; }, false); this can also be written as: pc.oniceconnectionstatechange = ev => { let stateelem = document.queryselector("#call-state"); stateelem.classname = `${pc.iceconnectionstate}-state`; } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'iceconnectionstatechange' in that specification.
RTCPeerConnection.iceGatheringState - Web APIs
example var pc = new rtcpeerconnection(); var state = pc.icegatheringstate; specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.icegatheringstate' in that specification.
RTCPeerConnection: icegatheringstatechange event - Web APIs
er for icegatheringstatechange events: pc.addeventlistener("icegatheringstatechange", ev => { let connection = ev.target; switch(connection.icegatheringstate) { case "gathering": /* collection of candidates has begun */ break; case "complete": /* collection of candidates is finished */ break; } }, false); specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'icecandidatestatechange' in that specification.
RTCPeerConnection: icecandidate event - Web APIs
(ev.candidate) { sendmessage({ type: "new-ice-candidate", candidate: event.candidate }); } }, false); you can also set the onicecandidate event handler property directly: pc.onicecandidate = ev => { if (ev.candidate) { sendmessage({ type: "new-ice-candidate", candidate: event.candidate }); } }; specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'icecandidate' in that specification.
RTCPeerConnection: identityresult event - Web APIs
bubbles no cancelable no interface rtcidentityevent event handler property onidentityresult specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'identityresult' in that specification.
RTCPeerConnection.localDescription - Web APIs
var pc = new rtcpeerconnection(); … var sd = pc.localdescription; if (sd) { alert("local session: type='" + sd.type + "'; sdp description='" + sd.sdp + "'"); } else { alert("no local session yet."); } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.localdescription' in that specification.
RTCPeerConnection.onconnectionstatechange - Web APIs
= function(event) { switch(pc.connectionstate) { case "connected": // the connection has become fully connected break; case "disconnected": case "failed": // one or more transports has terminated unexpectedly or in an error break; case "closed": // the connection has been closed break; } } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.onconnectionstatechange' in that specification.
RTCPeerConnection.ondatachannel - Web APIs
example pc.ondatachannel = function(ev) { console.log('data channel is created!'); ev.channel.onopen = function() { console.log('data channel is open and ready to be used.'); }; }; specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.ondatachannel' in that specification.
RTCPeerConnection.onicecandidate - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.onicecandidate' in that specification.
RTCPeerConnection.onicegatheringstatechange - Web APIs
tual event handler looks like this: pc.onicegatheringstatechange = function() { let label = "unknown"; switch(pc.icegatheringstate) { case "new": case "complete": label = "idle"; break; case "gathering": label = "determining route"; break; } document.getelementbyid("icestatus").innerhtml = label; } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.onicegatheringstatechange' in that specification.
RTCPeerConnection.onsignalingstatechange - Web APIs
pc.onsignalingstatechange = function(event) { if (pc.signalingstate === "have-local-pranswer") { // setlocaldescription() has been called with an answer } }; specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.onsignalingstatechange' in that specification.
RTCPeerConnection.ontrack - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.ontrack' in that specification.
RTCPeerConnection.peerIdentity - Web APIs
*/ async function getidentityassertion(pc) { try { const identity = await pc.peeridentity; return identity; } catch(err) { console.log("error identifying remote peer: ", err); return null; } } specifications specification status
comment identity for webrtc candidate recommendation initial specification.
RTCPeerConnection.pendingLocalDescription - Web APIs
} else { // no description change pending } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.pendinglocaldescription' in that specification.
RTCPeerConnection.pendingRemoteDescription - Web APIs
} else { // no description change pending } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.pendingremotedescription' in that specification.
RTCPeerConnection.remoteDescription - Web APIs
var pc = new rtcpeerconnection(); … var sd = pc.remotedescription; if (sd) { alert("remote session: type='" + sd.type + "'; sdp description='" + sd.sdp + "'"); } else { alert("no remote session yet."); } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.remotedescription' in that specification.
RTCPeerConnection.removeTrack() - Web APIs
var pc, sender; navigator.getusermedia({video: true}, function(stream) { pc = new rtcpeerconnection(); var track = stream.getvideotracks()[0]; sender = pc.addtrack(track, stream); }); document.getelementbyid("closebutton").addeventlistener("click", function(event) { pc.removetrack(sender); pc.close(); }, false); specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.removetrack()' in that specification.
RTCPeerConnection.restartIce() - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.restartice()' in that specification.
RTCPeerConnection.sctp - Web APIs
ple var pc = new rtcpeerconnection(); var channel = pc.createdatachannel("mydata"); channel.onopen = function(event) { channel.send('sending a message'); } channel.onmessage = function(event) { console.log(event.data); } // determine the largest message size that can be sent var sctp = pc.sctp; var maxmessagesize = sctp.maxmessagesize; specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.sctp' in that specification.
RTCPeerConnection.setIdentityProvider() - Web APIs
example var pc = new peerconnection(); pc.setidentityassertion("developer.mozilla.org"); specifications specification status
comment identity for webrtcthe definition of 'rtcpeerconnection.setidentityprovider()' in that specification.
RTCPeerConnection.signalingState - Web APIs
example var pc = new rtcpeerconnection(configuration); var state = pc.signalingstate; specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection.signalingstate' in that specification.
RTCPeerConnection: signalingstatechange event - Web APIs
nge", ev => { switch(pc.signalingstate) { case "stable": updatestatus("ice negotiation complete"); break; } }, false); using onsignalingstatechange, it looks like this: pc.onsignalingstatechange = ev => { switch(pc.signalingstate) { case "stable": updatestatus("ice negotiation complete"); break; } }; specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'signalingstatechange' in that specification.
RTCPeerConnection: track event - Web APIs
pc.ontrack = e => { videoelement.srcobject = e.streams[0]; hangupbutton.disabled = false; return false; } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'track' in that specification.
RTCPeerConnection - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnection' in that specification.
RTCPeerConnectionIceErrorEvent.address - Web APIs
pc.addeventlistener("icecandidateerror", (event) => { let networkinfo = `[local interface: ${event.address}:${event.port}`; let iceserverinfo = `[ice server: ${event.url}`; showmessage(errortext, iceserverinfo, networkinfo); }); specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnectioniceerrorevent.address' in that specification.
RTCPeerConnectionIceErrorEvent - Web APIs
examples tbd specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnectioniceerrorevent' in that specification.
RTCPeerConnectionIceEvent() - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnectioniceevent()' in that specification.
RTCPeerConnectionIceEvent.candidate - Web APIs
example pc.onicecandidate = function( ev ) { alert("the ice candidate (transport address: '" + ev.candidate.candidate + "') has been added to this connection."); } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnectioniceevent.candidate' in that specification.
RTCPeerConnectionIceEvent - Web APIs
examples pc.onicecandidate = function( ev ) { alert("the ice candidate (transport address: '" + ev.candidate.candidate + "') has been added to this connection."); } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcpeerconnectioniceevent' in that specification.
RTCRtcpParameters - Web APIs
function getrtpcname(rtpobject) { let parameters = rtpobject.getparameters(); return parameters.rtcp.cname; } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtcpparameters' in that specification.
RTCRtpCapabilities - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtpcapabilities' in that specification.
RTCRtpCodecCapability - Web APIs
examples tbd specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtpcodeccapability' in that specification.
RTCRtpContributingSource - Web APIs
timestamp optional a domhighrestimestamp indicating the most recent time at which a frame originating from this source was delivered to the receiver's mediastreamtrack specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtpcontributingsource' in that specification.
RTCRtpEncodingParameters - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtpencodingparameters' in that specification.
RTCRtpParameters - Web APIs
function getrtpcname(rtpobject) { let parameters = rtpobject.getparameters(); return parameters.rtcp.cname; } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtpreceiveparameters' in that specification.
RTCRtpReceiveParameters - Web APIs
function getrtcpcname(receiver) { let parameters = receiver.getparameters(); return parameters.rtcp.cname; } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtpreceiveparameters' in that specification.
RTCRtpReceiver.getCapabilities() static function - Web APIs
function canreceiveh264() { let capabilities = rtcrtpreceiver.getcapabilities("video"); capabilities.codecs.foreach((codec) => { if (codec.mimetype === "video/h264") { return true; } }); return false; } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtpreceiver.getcapabilities()' in that specification.
RTCRtpReceiver.getParameters() - Web APIs
function getrtcpcname(receiver) { let parameters = receiver.getparameters(); return parameters.rtcp.cname; } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtpreceiver.getparameters()' in that specification.
RTCRtpReceiver.getStats() - Web APIs
receiver.getstats().then(function(stats) { document.getelementbyid("lostpackets").innertext = stats.packetslost; }); specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtpreceiver.getstats()' in that specification.
RTCRtpReceiver.track - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'track' in that specification.
RTCRtpReceiver.transport - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtpreceiver.transport' in that specification.
RTCRtpReceiver - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtpreceiver' in that specification.
RTCRtpSendParameters.encodings - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtpsendparameters.encodings' in that specification.
RTCRtpSendParameters - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtpsendparameters' in that specification.
RTCRtpSender.dtmf - Web APIs
only audio tracks can support dtmf, and typically only one audio track per rtcpeerconnection will have an associated rtcdtmfsender example tbd specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtpsender.dtmf' in that specification.
RTCRtpSender.getCapabilities() static function - Web APIs
function cansendh264() { let capabilities = rtcrtpsender.getcapabilities("video"); capabilities.codecs.foreach((codec) => { if (codec.mimetype === "video/h264") { return true; } }); return false; } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtpsender.getcapabilities()' in that specification.
RTCRtpSender.getParameters() - Web APIs
function getsendertransactionid(sender) { let parameters = sender.getparameters(); return parameters.transactionid; } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'getparameters()' in that specification.
RTCRtpSender.getStats() - Web APIs
sender.getstats().then(function(stats) { document.getelementbyid("currentrtt").innertext = stats.roundtriptime; }); specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtpsender.getstats()' in that specification.
RTCRtpSender.replaceTrack() - Web APIs
ack = stream.getvideotracks()[0]; pcs.foreach(function(pc) { var sender = pc.getsenders().find(function(s) { return s.track.kind == videotrack.kind; }); console.log('found sender:', sender); sender.replacetrack(videotrack); }); }) .catch(function(err) { console.error('error happens:', err); }); specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtpsender.replacetrack()' in that specification.
RTCRtpSender.setParameters() - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtpsender.setparameters()' in that specification.
RTCRtpSender.setStreams() - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtpsender.setstreams()' in that specification.
RTCRtpSender.track - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'track' in that specification.
RTCRtpSender.transport - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtpsender.transport' in that specification.
RTCRtpSender - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtpsender' in that specification.
RTCRtpStreamStats.codecId - Web APIs
specifications specification status
comment identifiers for webrtc's statistics apithe definition of 'rtcrtpstreamstats.codecid' in that specification.
RTCRtpStreamStats.firCount - Web APIs
specifications specification status
comment identifiers for webrtc's statistics apithe definition of 'rtcinboundrtpstreamstats: fircount' in that specification.
RTCRtpStreamStats.kind - Web APIs
specifications specification status
comment identifiers for webrtc's statistics apithe definition of 'rtcrtpstreamstats.kind' in that specification.
RTCRtpStreamStats.nackCount - Web APIs
specifications specification status
comment identifiers for webrtc's statistics apithe definition of 'rtcinboundrtpstreamstats: nackcount' in that specification.
RTCRtpStreamStats.pliCount - Web APIs
specifications specification status
comment identifiers for webrtc's statistics apithe definition of 'rtcinboundrtpstreamstats: plicount' in that specification.
RTCRtpStreamStats.qpSum - Web APIs
(stats) { let framecount = 0; switch(stats.type) { case "inbound-rtp": case "remote-inbound-rtp": framecount = stats.framesdecoded; break; case "outbound-rtp": case "remote-outbound-rtp": framecount = stats.framesencoded; break; default: return 0; } return status.qpsum / framecount; } specifications specification status
comment identifiers for webrtc's statistics apithe definition of 'rtcinboundrtpstreamstats: qpsum' in that specification.
RTCRtpStreamStats.sliCount - Web APIs
specifications specification status
comment identifiers for webrtc's statistics apithe definition of 'rtcinboundrtpstreamstats: slicount' in that specification.
RTCRtpStreamStats.ssrc - Web APIs
do not rely upon these values meaning anything other than "these objects are associated with the same source." specifications specification status
comment identifiers for webrtc's statistics apithe definition of 'rtcrtpstreamstats.ssrc' in that specification.
RTCRtpStreamStats.trackId - Web APIs
specifications specification status
comment identifiers for webrtc's statistics apithe definition of 'rtcrtpstreamstats.trackid' in that specification.
RTCRtpStreamStats - Web APIs
specifications specification status
comment identifiers for webrtc's statistics apithe definition of 'rtcrtpstreamstats' in that specification.
RTCRtpSynchronizationSource - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtpsynchronizationsource' in that specification.
RTCRtpTransceiver.direction - Web APIs
for example, if the direction is specified as "sendrecv", the corresponding sdp a-line is: a=sendrecv specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtptransceiver.direction' in that specification.
RTCRtpTransceiver.mid - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtptransceiver.mid' in that specification.
RTCRtpTransceiver.receiver - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtptransceiver.receiver' in that specification.
RTCRtpTransceiver.sender - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtptransceiver.sender' in that specification.
RTCRtpTransceiver.setCodecPreferences() - Web APIs
var availsendcodecs = transceiver.sender.getcapabilities("video").codecs; var availreceivecodecs = transceiver.receiver.getcapabilities("video").codecs; specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtptransceiver.setcodecpreferences()' in that specification.
RTCRtpTransceiver.stop() - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtptransceiver.stop()' in that specification.
RTCRtpTransceiver.stopped - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtptransceiver.stopped' in that specification.
RTCRtpTransceiver - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtptransceiver' in that specification.
RTCRtpTransceiverDirection - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtptransceiverdirection' in that specification.
RTCRtpTransceiverInit - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtptransceiverinit' in that specification.
RTCSctpTransport.state - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcsctptransport.state' in that specification.
RTCSctpTransport - Web APIs
methods this interface has no methods, but inherits methods from: eventtarget example tbd specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcsctptransport' in that specification.
RTCSessionDescription() - Web APIs
}, error); }, error); } specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcsessiondescription()' in that specification.
RTCSessionDescription.sdp - Web APIs
26 2890844526 in ip4 host.anywhere.com s= c=in ip4 host.anywhere.com t=0 0 m=audio 49170 rtp/avp 0 a=rtpmap:0 pcmu/8000 m=video 51372 rtp/avp 31 a=rtpmap:31 h261/90000 m=video 53000 rtp/avp 32 a=rtpmap:32 mpv/90000 example // the remote description has been set previously on pc, an rtcpeerconnection alert(pc.remotedescription.sdp); specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcsessiondescription.sdp' in that specification.
RTCSessionDescription.toJSON() - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcsessiondescription: tojson()' in that specification.
RTCSessionDescription.type - Web APIs
example // the remote description has been set previously on pc, a rtcpeerconnection alert(pc.remotedescription.type); specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcsessiondescription.type' in that specification.
RTCSessionDescription - Web APIs
cription(message), function () { // if we received an offer, we need to answer if (pc.remotedescription.type == "offer") pc.createanswer(localdesccreated, logerror); }, logerror); else pc.addicecandidate(new rtcicecandidate(message.candidate), function () {}, logerror); }; specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcsessiondescription' in that specification.
RTCSessionDescriptionCallback - Web APIs
example var pc = new rtcpeerconnection(); var descriptioncallback = function(offer) { pc.setlocaldescription(offer); } pc.createoffer(descriptioncallback); specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcsessiondescriptioncallback' in that specification.
RTCStats.id - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcstats.id' in that specification.
RTCStats.timestamp - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcstats.timestamp' in that specification.
RTCStats.type - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcstats.type' in that specification.
RTCStats - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcstats' in that specification.
RTCStatsReport - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcstatsreport' in that specification.
RTCStatsType - Web APIs
specifications specification status
comment identifiers for webrtc's statistics apithe definition of 'rtcstatstype' in that specification.
RTCTrackEvent() - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtctrackevent()' in that specification.
RTCTrackEvent.receiver - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtctrackevent.receiver' in that specification.
RTCTrackEvent.streams - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtctrackevent.streams' in that specification.
RTCTrackEvent.track - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtctrackevent.track' in that specification.
RTCTrackEvent.transceiver - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtctrackevent.transceiver' in that specification.
RTCTrackEvent - Web APIs
peerconnection.addeventlistener("track", e => { let videoelement = document.getelementbyid("videobox"); videoelement.srcobject = e.streams[0]; }, false); specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtctrackevent' in that specification.
RTCTrackEventInit.receiver - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtctrackeventinit.receiver' in that specification.
RTCTrackEventInit.streams - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtctrackeventinit.streams' in that specification.
RTCTrackEventInit.track - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtctrackeventinit.track' in that specification.
RTCTrackEventInit.transceiver - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtctrackeventinit.transceiver' in that specification.
RTCTrackEventInit - Web APIs
specifications specification status
comment webrtc 1.0: real-time communication between browsersthe definition of 'rtctrackeventinit' in that specification.
RadioNodeList.value - Web APIs
tml <form> <label><input type="radio" name="color" value="blue">blue</label> <label><input type="radio" name="color" value="red">red</label> </form> javascript // get the form const form = document.forms[0]; // get the form's radio buttons const radios = form.elements['color']; // choose the "red" option radios.value = 'red'; result specifications specification status
comments html living standardthe definition of 'radionodelist.value' in that specification.
RadioNodeList - Web APIs
specifications specification status
comments html living standardthe definition of 'radionodelist' in that specification.
Range() - Web APIs
queryselectorall('p'); // create new range const range = new range(); // start range at second paragraph range.setstartbefore(paragraphs[1]); // end range at third paragraph range.setendafter(paragraphs[2]); // get window selection const selection = window.getselection(); // add range to window selection selection.addrange(range); result specification specification status
comment domthe definition of 'range.range()' in that specification.
Range.cloneContents() - Web APIs
syntax documentfragment = range.clonecontents(); example range = document.createrange(); range.selectnode(document.getelementsbytagname("div").item(0)); documentfragment = range.clonecontents(); document.body.appendchild(documentfragment); specifications specification status
comment domthe definition of 'range.clonecontents()' in that specification.
Range.cloneRange() - Web APIs
syntax clone = range.clonerange(); example range = document.createrange(); range.selectnode(document.getelementsbytagname("div").item(0)); clone = range.clonerange(); specifications specification status
comment domthe definition of 'range.clonerange()' in that specification.
Range.collapse() - Web APIs
example var range = document.createrange(); referencenode = document.getelementsbytagname("div").item(0); range.selectnode(referencenode); range.collapse(true); specifications specification status
comment domthe definition of 'range.collapse()' in that specification.
Range.collapsed - Web APIs
syntax iscollapsed = range.collapsed; example let range = document.createrange(); range.setstart(startnode, startoffset); range.setend(endnode, endoffset); iscollapsed = range.collapsed; specifications specification status
comment domthe definition of 'range.collapsed' in that specification.
Range.commonAncestorContainer - Web APIs
tion.rangecount; i++) { const range = selection.getrangeat(i); playanimation(range.commonancestorcontainer); } } }); function playanimation(el) { if (el.nodetype === node.text_node) { el = el.parentnode; } el.classlist.remove('highlight'); settimeout(() => { el.classlist.add('highlight'); }, 0); } result specifications specification status
comment domthe definition of 'range.commonancestorcontainer' in that specification.
Range.compareBoundaryPoints() - Web APIs
example var range, sourcerange, compare; range = document.createrange(); range.selectnode(document.getelementsbytagname("div")[0]); sourcerange = document.createrange(); sourcerange.selectnode(document.getelementsbytagname("div")[1]); compare = range.compareboundarypoints(range.start_to_end, sourcerange); specifications specification status
comment domthe definition of 'range.compareboundarypoints()' in that specification.
Range.createContextualFragment() - Web APIs
example var tagstring = "<div>i am a div node</div>"; var range = document.createrange(); // make the parent of the first div in the document becomes the context node range.selectnode(document.getelementsbytagname("div").item(0)); var documentfragment = range.createcontextualfragment(tagstring); document.body.appendchild(documentfragment); specification specification status
comment dom parsing and serializationthe definition of 'range.createcontextualfragment()' in that specification.
Range.deleteContents() - Web APIs
syntax range.deletecontents() example range = document.createrange(); range.selectnode(document.getelementsbytagname("div").item(0)); range.deletecontents(); specifications specification status
comment domthe definition of 'range.deletecontents()' in that specification.
Range.detach() - Web APIs
syntax range.detach(); example var range = document.createrange(); range.selectnode(document.getelementsbytagname("div").item(0)); range.detach(); specifications specification status
comment domthe definition of 'range.detach()' in that specification.
Range.endContainer - Web APIs
syntax endrangenode = range.endcontainer; example var range = document.createrange(); range.setstart(startnode,startoffset); range.setend(endnode,endoffset); endrangenode = range.endcontainer; specifications specification status
comment domthe definition of 'range.endcontainer' in that specification.
Range.extractContents() - Web APIs
1) { const documentfragment = range.extractcontents(); list2.appendchild(documentfragment); } else if (range.commonancestorcontainer === list2 || range.commonancestorcontainer.parentnode === list2) { const documentfragment = range.extractcontents(); list1.appendchild(documentfragment); } } }); result specifications specification status
comment domthe definition of 'range.extractcontents()' in that specification.
Range.getBoundingClientRect() - Web APIs
ment.getelementsbytagname('b').item(1), 0); const clientrect = range.getboundingclientrect(); const highlight = document.getelementbyid('highlight'); highlight.style.left = `${clientrect.x}px`; highlight.style.top = `${clientrect.y}px`; highlight.style.width = `${clientrect.width}px`; highlight.style.height = `${clientrect.height}px`; result specification specification status
comment css object model (cssom) view modulethe definition of 'range.getboundingclientrect()' in that specification.
Range.getClientRects() - Web APIs
syntax rectlist = range.getclientrects() example range = document.createrange(); range.selectnode(document.getelementsbytagname("div").item(0)); rectlist = range.getclientrects(); specification specification status
comment css object model (cssom) view modulethe definition of 'range.getclientrects()' in that specification.
Range.insertNode() - Web APIs
example range = document.createrange(); newnode = document.createelement("p"); newnode.appendchild(document.createtextnode("new node inserted here")); range.selectnode(document.getelementsbytagname("div").item(0)); range.insertnode(newnode); specifications specification status
comment domthe definition of 'range.insertnode()' in that specification.
Range.intersectsNode() - Web APIs
example var range = document.createrange(); range.selectnode(document.getelementsbytagname("div").item(0)); var bool = range.intersectsnode(document.getelementsbytagname("p").item(0)); specification specification status
comment domthe definition of 'range.intersectnode()' in that specification.
Range.isPointInRange() - Web APIs
example range = document.createrange(); range.selectnode(document.getelementsbytagname("div").item(0)); bool = range.ispointinrange(document.getelementsbytagname("p").item(0),1); specification specification status
comment domthe definition of 'range.ispointinrange()' in that specification.
Range.selectNode() - Web APIs
example let range = document.createrange(); let referencenode = document.getelementsbytagname('div').item(0); range.selectnode(referencenode); specifications specification status
comment domthe definition of 'range.selectnode()' in that specification.
Range.selectNodeContents() - Web APIs
election const selection = window.getselection(); selection.removeallranges(); // select paragraph const range = document.createrange(); range.selectnodecontents(p); selection.addrange(range); }); deselectbutton.addeventlistener('click', e => { const selection = window.getselection(); selection.removeallranges(); }); result specifications specification status
comment domthe definition of 'range.selectnodecontents()' in that specification.
Range.setEndAfter() - Web APIs
example var range = document.createrange(); var referencenode = document.getelementsbytagname('div').item(0); range.setendafter(referencenode); specifications specification status
comment domthe definition of 'range.setendafter()' in that specification.
Range.setEndBefore() - Web APIs
example var range = document.createrange(); var referencenode = document.getelementsbytagname("div").item(0); range.setendbefore(referencenode); specifications specification status
comment domthe definition of 'range.setendbefore()' in that specification.
Range.setStartAfter() - Web APIs
example var range = document.createrange(); var referencenode = document.getelementsbytagname("div").item(0); range.setstartafter(referencenode); specifications specification status
comment domthe definition of 'range.setstartafter()' in that specification.
Range.setStartBefore() - Web APIs
example var range = document.createrange(); var referencenode = document.getelementsbytagname("div").item(0); range.setstartbefore(referencenode); specifications specification status
comment domthe definition of 'range.setstartbefore()' in that specification.
Range.startContainer - Web APIs
syntax startrangenode = range.startcontainer; example range = document.createrange(); range.setstart(startnode,startoffset); range.setend(endnode,endoffset); startrangenode = range.startcontainer; specifications specification status
comment domthe definition of 'range.endcontainer' in that specification.
Range.surroundContents() - Web APIs
example html <span class="header-text">put this in a headline</span> javascript const range = document.createrange(); const newparent = document.createelement('h1'); range.selectnode(document.queryselector('.header-text')); range.surroundcontents(newparent); result specifications specification status
comment domthe definition of 'range.surroundcontents()' in that specification.
Range.toString() - Web APIs
look at the output below.</p> <p id="log"></p> javascript const range = document.createrange(); range.setstartbefore(document.getelementsbytagname('b').item(0), 0); range.setendafter(document.getelementsbytagname('b').item(1), 0); document.getelementbyid('log').textcontent = range.tostring(); result specifications specification status
comment domthe definition of 'range.tostring()' in that specification.
Range - Web APIs
specifications specification status
comment domthe definition of 'range' in that specification.
ReadableStream.ReadableStream() - Web APIs
n.addeventlistener('click', function() { clearinterval(interval); fetchstream(); controller.close(); }) }, pull(controller) { // we don't really need a pull in this example }, cancel() { // this is called if the reader cancels, // so we should stop generating strings clearinterval(interval); } }); specifications specification status
comment streamsthe definition of 'readablestream()' in that specification.
ReadableStream.cancel() - Web APIs
does the response lack cors headers?"); throw err; }); specifications specification status
comment streamsthe definition of 'cancel()' in that specification.
ReadableStream.getReader() - Web APIs
current chunk = ' + chunk; list2.appendchild(listitem); result += chunk; // read some more, and call this function again return reader.read().then(processtext); }); } specifications specification status
comment streamsthe definition of 'getreader()' in that specification.
ReadableStream.locked - Web APIs
}); const reader = stream.getreader(); stream.locked // should return true, as the stream has been locked to a reader specifications specification status
comment streamsthe definition of 'locked' in that specification.
ReadableStream.pipeThrough() - Web APIs
fetch the original image fetch('png-logo.png') // retrieve its body as readablestream .then(response => response.body) .then(rs => logreadablestream('fetch response stream', rs)) // create a gray-scaled png stream out of the original .then(body => body.pipethrough(new pngtransformstream())) .then(rs => logreadablestream('png chunk stream', rs)) specifications specification status
comment streamsthe definition of 'pipethrough()' in that specification.
ReadableStream.pipeTo() - Web APIs
examples // fetch the original image fetch('png-logo.png') // retrieve its body as readablestream .then(response => response.body) .then(body => body.pipethrough(new pngtransformstream())) .then(rs => rs.pipeto(new finaldestinationstream())) specifications specification status
comment streamsthe definition of 'pipeto()' in that specification.
ReadableStream.tee() - Web APIs
current chunk = ' + chunk; list.appendchild(listitem); // read some more, and call this function again return reader.read().then(processtext); }); } specifications specification status
comment streamsthe definition of 'tee()' in that specification.
ReadableStream - Web APIs
finished sending data controller.close(); return; } // get the data and send it to the browser via the controller controller.enqueue(value); push(); }); }; push(); } }); return new response(stream, { headers: { "content-type": "text/html" } }); }); specifications specification status
comment streamsthe definition of 'readablestream' in that specification.
ReadableStreamDefaultController.close() - Web APIs
n.addeventlistener('click', function() { clearinterval(interval); fetchstream(); controller.close(); }) }, pull(controller) { // we don't really need a pull in this example }, cancel() { // this is called if the reader cancels, // so we should stop generating strings clearinterval(interval); } }); specifications specification status
comment streamsthe definition of 'close()' in that specification.
ReadableStreamDefaultController.enqueue() - Web APIs
n.addeventlistener('click', function() { clearinterval(interval); fetchstream(); controller.close(); }) }, pull(controller) { // we don't really need a pull in this example }, cancel() { // this is called if the reader cancels, // so we should stop generating strings clearinterval(interval); } }); specifications specification status
comment streamsthe definition of 'enqueue()' in that specification.
ReadableStreamDefaultController - Web APIs
n.addeventlistener('click', function() { clearinterval(interval); fetchstream(); controller.close(); }) }, pull(controller) { // we don't really need a pull in this example }, cancel() { // this is called if the reader cancels, // so we should stop generating strings clearinterval(interval); } }); specifications specification status
comment streamsthe definition of 'readablestreamdefaultcontroller' in that specification.
ReadableStreamDefaultReader.ReadableStreamDefaultReader() - Web APIs
current chunk = ' + chunk; list2.appendchild(listitem); result += chunk; // read some more, and call this function again return reader.read().then(processtext); }); } specifications specification status
comment streamsthe definition of 'readablestreamdefaultreader()' in that specification.
ReadableStreamDefaultReader.cancel() - Web APIs
current chunk = ' + chunk; list2.appendchild(listitem); result += chunk; // read some more, and call this function again return reader.read().then(processtext); }); } specifications specification status
comment streamsthe definition of 'cancel()' in that specification.
ReadableStreamDefaultReader.read() - Web APIs
rtindex = re.lastindex = 0; continue; } yield chunk.substring(startindex, result.index); startindex = re.lastindex; } if (startindex < chunk.length) { // last line didn't end in a newline char yield chunk.substr(startindex); } } for await (let line of maketextfilelineiterator(urloffile)) { processline(line); } specifications specification status
comment streamsthe definition of 'read()' in that specification.
ReadableStreamDefaultReader - Web APIs
finished sending data controller.close(); return; } // get the data and send it to the browser via the controller controller.enqueue(value); push(); }); }; push(); } }); return new response(stream, { headers: { "content-type": "text/html" } }); }); specifications specification status
comment streamsthe definition of 'readablestreamdefaultreader' in that specification.
RelativeOrientationSensor - Web APIs
} else { console.log("no permissions to use relativeorientationsensor."); } }); specifications specification status
comment orientation sensorthe definition of 'relativeorientationsensor' in that specification.
RenderingContext - Web APIs
specifications specification status
comment html living standardthe definition of 'renderingcontext' in that specification.
Report.body - Web APIs
a deprecationreportbody object console.log(firstreport.body); }, options); specifications specification status
comment reporting apithe definition of 'report.body' in that specification.
Report.type - Web APIs
"deprecation" console.log(firstreport.type); }, options); specifications specification status
comment reporting apithe definition of 'report.body' in that specification.
Report.url - Web APIs
"https://www.example.com/cats.html" console.log(firstreport.url); }, options); specifications specification status
comment reporting apithe definition of 'report.url' in that specification.
Report - Web APIs
specifications specification status
comment reporting apithe definition of 'report' in that specification.
ReportingObserver() - Web APIs
examples let options = { types: ['deprecation'], buffered: true } let observer = new reportingobserver(function(reports, observer) { reportbtn.onclick = () => displayreports(reports); }, options); specifications specification status
comment reporting apithe definition of 'reportingobserver()' in that specification.
ReportingObserver.observe() - Web APIs
syntax reportingobserverinstance.observe() examples let options = { types: ['deprecation'], buffered: true } let observer = new reportingobserver(function(reports, observer) { reportbtn.onclick = () => displayreports(reports); }, options); observer.observe() specifications specification status
comment reporting apithe definition of 'reportingobserver.observe()' in that specification.
ReportingObserver.takeRecords() - Web APIs
let records = observer.takerecords(); console.log(records); specifications specification status
comment reporting apithe definition of 'reportingobserver.takerecords()' in that specification.
ReportingObserver - Web APIs
specifications specification status
comment reporting apithe definition of 'reportingobserver' in that specification.
ReportingObserverOptions - Web APIs
examples let options = { types: ['deprecation'], buffered: true } let observer = new reportingobserver(function(reports, observer) { reportbtn.onclick = () => displayreports(reports); }, options); specifications specification status
comment reporting apithe definition of 'reportingobserveroptions' in that specification.
Request() - Web APIs
specifications specification status
comment fetchthe definition of 'request()' in that specification.
Request.cache - Web APIs
return res }) .then(function(response) { /* consume the (possibly stale) response */ }) .catch(error => { /* can be an aborterror/domerror or a typeerror */ }); specifications specification status
comment fetchthe definition of 'cache' in that specification.
Request.clone() - Web APIs
var myrequest = new request('flowers.jpg'); var newrequest = myrequest.clone(); // a copy of the request is now stored in newrequest specifications specification status
comment fetchthe definition of 'clone' in that specification.
Request.credentials - Web APIs
example in the following snippet, we create a new request using the request.request() constructor (for an image file in the same directory as the script), then save the request credentials in a variable: var myrequest = new request('flowers.jpg'); var mycred = myrequest.credentials; // returns "same-origin" by default specifications specification status
comment fetchthe definition of 'credentials' in that specification.
Request.destination - Web APIs
example in the following snippet, we create a new request using the request() constructor (for an image file in the same directory as the script), then save the request's destination: var myrequest = new request('flowers.jpg'); var mydestination = myrequest.destination; // returns the empty string by default specifications specification status
comment fetchthe definition of 'destination' in that specification.
Request.headers - Web APIs
r, passing headers in as an init option: var myheaders = new headers(); myheaders.append('content-type', 'image/jpeg'); var myinit = { method: 'get', headers: myheaders, mode: 'cors', cache: 'default' }; var myrequest = new request('flowers.jpg', myinit); mycontenttype = myrequest.headers.get('content-type'); // returns 'image/jpeg' specifications specification status
comment fetchthe definition of 'headers' in that specification.
Request.integrity - Web APIs
example in the following snippet, we create a new request using the request.request() constructor (for an image file in the same directory as the script), then save the request integrity value in a variable: var myrequest = new request('flowers.jpg'); var myintegrity = myrequest.integrity; specifications specification status
comment fetchthe definition of 'integrity' in that specification.
Request.method - Web APIs
example in the following snippet, we create a new request using the request.request() constructor (for an image file in the same directory as the script), then save the method of the request in a variable: var myrequest = new request('flowers.jpg'); var mymethod = myrequest.method; // get specifications specification status
comment fetchthe definition of 'method' in that specification.
Request.mode - Web APIs
example in the following snippet, we create a new request using the request.request() constructor (for an image file in the same directory as the script), then save the request mode in a variable: var myrequest = new request('flowers.jpg'); var mymode = myrequest.mode; // returns "cors" by default specifications specification status
comment fetchthe definition of 'mode' in that specification.
Request.redirect - Web APIs
example in the following snippet, we create a new request using the request.request() constructor (for an image file in the same directory as the script), then save the request redirect value in a variable: var myrequest = new request('flowers.jpg'); var mycred = myrequest.redirect; specifications specification status
comment fetchthe definition of 'redirect' in that specification.
Request.referrer - Web APIs
example in the following snippet, we create a new request using the request.request() constructor (for an image file in the same directory as the script), then save the request referrer in a variable: var myrequest = new request('flowers.jpg'); var myreferrer = myrequest.referrer; // returns "about:client" by default specifications specification status
comment fetchthe definition of 'referrer' in that specification.
Request.referrerPolicy - Web APIs
example in the following snippet, we create a new request using the request.request() constructor (for an image file in the same directory as the script), then save the request referrer policy in a variable: var myrequest = new request('flowers.jpg'); var myreferrer = myrequest.referrerpolicy; // returns "" by default specifications specification status
comment fetchthe definition of 'referrerpolicy' in that specification.
Request.url - Web APIs
example in the following snippet, we create a new request using the request.request() constructor (for an image file in the same directory as the script), then save the url of the request in a variable: var myrequest = new request('flowers.jpg'); var myurl = myrequest.url; // "http://mdn.github.io/fetch-examples/fetch-request/flowers.jpg" specifications specification status
comment fetchthe definition of 'url' in that specification.
Request - Web APIs
}).catch(error => { console.error(error); }); specifications specification status
comment fetchthe definition of 'request' in that specification.
ResizeObserver() - Web APIs
ntentboxsize.inlinesize/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentboxsize.inlinesize/600) + 'rem'; } else { h1elem.style.fontsize = math.max(1.5, entry.contentrect.width/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentrect.width/600) + 'rem'; } } }); resizeobserver.observe(divelem); specifications specification status
comment resize observerthe definition of 'resizeobserver' in that specification.
ResizeObserver.disconnect() - Web APIs
examples btn.addeventlistener('click', () => { resizeobserver.disconnect(); }) specifications specification status
comment resize observerthe definition of 'disconnect()' in that specification.
ResizeObserver.observe() - Web APIs
em'; } else { h1elem.style.fontsize = math.max(1.5, entry.contentrect.width/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentrect.width/600) + 'rem'; } } }); resizeobserver.observe(divelem); an observe() call with an options object would look like so: resizeobserver.observe(divelem, { box : 'border-box' }); specifications specification status
comment resize observerthe definition of 'observe()' in that specification.
ResizeObserver.unobserve() - Web APIs
= math.max(1.5, entry.contentrect.width/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentrect.width/600) + 'rem'; } } }); resizeobserver.observe(divelem); checkbox.addeventlistener('change', () => { if(checkbox.checked) { resizeobserver.observe(divelem); } else { resizeobserver.unobserve(divelem); } }); specifications specification status
comment resize observerthe definition of 'unobserve()' in that specification.
ResizeObserver - Web APIs
h.max(1.5, entry.contentrect.width / 200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentrect.width / 600) + 'rem'; } } }); resizeobserver.observe(divelem); checkbox.addeventlistener('change', () => { if (checkbox.checked) { resizeobserver.observe(divelem); } else { resizeobserver.unobserve(divelem); } }); specifications specification status
comment resize observerthe definition of 'resizeobserver' in that specification.
ResizeObserverEntry.borderBoxSize - Web APIs
(entry.borderboxsize[0].blocksize/10)) + 'px'; } else { entry.target.style.borderradius = math.min(100, (entry.contentrect.width/10) + (entry.contentrect.height/10)) + 'px'; } } }); resizeobserver.observe(document.queryselector('div')); specifications specification status
comment resize observerthe definition of 'target' in that specification.
ResizeObserverEntry.contentBoxSize - Web APIs
(entry.contentboxsize.blocksize/10)) + 'px'; } else { entry.target.style.borderradius = math.min(100, (entry.contentrect.width/10) + (entry.contentrect.height/10)) + 'px'; } } }); resizeobserver.observe(document.queryselector('div')); specifications specification status
comment resize observerthe definition of 'target' in that specification.
ResizeObserverEntry.contentRect - Web APIs
ntentboxsize.inlinesize/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentboxsize.inlinesize/600) + 'rem'; } else { h1elem.style.fontsize = math.max(1.5, entry.contentrect.width/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentrect.width/600) + 'rem'; } } }); resizeobserver.observe(divelem); specifications specification status
comment resize observerthe definition of 'contentrect' in that specification.
ResizeObserverEntry.target - Web APIs
(entry.contentboxsize.blocksize/10)) + 'px'; } else { entry.target.style.borderradius = math.min(100, (entry.contentrect.width/10) + (entry.contentrect.height/10)) + 'px'; } } }); resizeobserver.observe(document.queryselector('div')); specifications specification status
comment resize observerthe definition of 'target' in that specification.
ResizeObserverEntry - Web APIs
ntentboxsize.inlinesize/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentboxsize.inlinesize/600) + 'rem'; } else { h1elem.style.fontsize = math.max(1.5, entry.contentrect.width/200) + 'rem'; pelem.style.fontsize = math.max(1, entry.contentrect.width/600) + 'rem'; } } }); resizeobserver.observe(divelem); specifications specification status
comment resize observerthe definition of 'resizeobserverentry' in that specification.
Resize Observer API - Web APIs
(entry.contentboxsize.blocksize/10)) + 'px'; } else { entry.target.style.borderradius = math.min(100, (entry.contentrect.width/10) + (entry.contentrect.height/10)) + 'px'; } } }); resizeobserver.observe(document.queryselector('div')); specifications specification status
comment resize observer editor's draft initial definition.
Response() - Web APIs
in our fetch response example (see fetch response live) we create a new response object using the constructor, passing it a new blob as a body, and an init object containing a custom status and statustext: var myblob = new blob(); var init = { "status" : 200 , "statustext" : "supersmashinggreat!" }; var myresponse = new response(myblob,init); specifications specification status
comment fetchthe definition of 'response()' in that specification.
Response.clone() - Web APIs
rs.jpg'); fetch(myrequest).then(function(response) { var response2 = response.clone(); response.blob().then(function(myblob) { var objecturl = url.createobjecturl(myblob); image1.src = objecturl; }); response2.blob().then(function(myblob) { var objecturl = url.createobjecturl(myblob); image2.src = objecturl; }); }); specifications specification status
comment fetchthe definition of 'clone()' in that specification.
Response.headers - Web APIs
var myimage = document.queryselector('img'); var myrequest = new request('flowers.jpg'); fetch(myrequest).then(function(response) { console.log(response.headers); // returns a headers{} object response.blob().then(function(myblob) { var objecturl = url.createobjecturl(myblob); myimage.src = objecturl; }); }); specifications specification status
comment fetchthe definition of 'headers' in that specification.
Response.ok - Web APIs
var myimage = document.queryselector('img'); var myrequest = new request('flowers.jpg'); fetch(myrequest).then(function(response) { console.log(response.ok); // returns true if the response returned successfully response.blob().then(function(myblob) { var objecturl = url.createobjecturl(myblob); myimage.src = objecturl; }); }); specifications specification status
comment fetchthe definition of 'ok' in that specification.
Response.redirect() - Web APIs
example responseobj.redirect('https://www.example.com', 302); specifications specification status
comment fetchthe definition of 'redirect()' in that specification.
Response.redirected - Web APIs
ad set the redirect mode to "error" in the init parameter when calling fetch(), like this: fetch("awesome-picture.jpg", { redirect: "error" }).then(function(response) { return response.blob(); }).then(function(imageblob) { let imgobjecturl = url.createobjecturl(imageblob); document.getelementbyid("img-element-id").src = imgobjecturl; }); specifications specification status
comment fetchthe definition of 'redirected' in that specification.
Response.status - Web APIs
var myimage = document.queryselector('img'); var myrequest = new request('flowers.jpg'); fetch(myrequest).then(function(response) { console.log(response.status); // returns 200 response.blob().then(function(myblob) { var objecturl = url.createobjecturl(myblob); myimage.src = objecturl; }); }); specifications specification status
comment fetchthe definition of 'status' in that specification.
Response.statusText - Web APIs
mage = document.queryselector('img'); var myrequest = new request('flowers.jpg'); fetch(myrequest).then(function(response) { console.log(response.statustext); // returns "ok" if the response returned successfully response.blob().then(function(myblob) { var objecturl = url.createobjecturl(myblob); myimage.src = objecturl; }); }); specifications specification status
comment fetchthe definition of 'statustext' in that specification.
Response.type - Web APIs
var myimage = document.queryselector('img'); var myrequest = new request('flowers.jpg'); fetch(myrequest).then(function(response) { console.log(response.type); // returns basic by default response.blob().then(function(myblob) { var objecturl = url.createobjecturl(myblob); myimage.src = objecturl; }); }); specifications specification status
comment fetchthe definition of 'type' in that specification.
Response.url - Web APIs
var myimage = document.queryselector('img'); var myrequest = new request('flowers.jpg'); fetch(myrequest).then(function(response) { console.log(response.url); // returns /docs/web/api/response/flowers.jpg response.blob().then(function(myblob) { var objecturl = url.createobjecturl(myblob); myimage.src = objecturl; }); }); specifications specification status
comment fetchthe definition of 'url' in that specification.
Response - Web APIs
ge = document.queryselector('.my-image'); fetch('flowers.jpg').then(function(response) { return response.blob(); }).then(function(blob) { const objecturl = url.createobjecturl(blob); image.src = objecturl; }); you can also use the response.response() constructor to create your own custom response object: const response = new response(); specifications specification status
comment fetchthe definition of 'response' in that specification.
RsaHashedImportParams - Web APIs
specifications specification status
comment web cryptography apithe definition of 'subtlecrypto.rsahashedimportparams' in that specification.
RsaHashedKeyGenParams - Web APIs
specifications specification status
comment web cryptography apithe definition of 'subtlecrypto.rsahashedkeygenparams' in that specification.
RsaOaepParams - Web APIs
specifications specification status
comment web cryptography apithe definition of 'subtlecrypto.rsaoaepparams' in that specification.
RsaPssParams - Web APIs
specifications specification status
comment web cryptography apithe definition of 'subtlecrypto.rsapssparams' in that specification.
SVGAElement.target - Web APIs
specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'target' in that specification.
SVGAElement - Web APIs
not _blank"); } } specifications specification status
comment scalable vector graphics (svg) 2 candidate recommendation replaced inheritance from svgelement by svggraphicselement and removed the interface implementations of svgtests, svglangspace, svgexternalresourcesrequired, svgstylable, and svgtransformable by htmlhyperlinkelementutils scalable vector graphics (svg) 1.1 (second edition) recommendation initial definition ...
SVGAltGlyphDefElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgaltglyphdefelement' in that specification.
format - Web APIs
entype .eot type-1 postscript™ type 1 .pfb, .pfa truetype truetype .ttf opentype opentype, including truetype open .ttf truetype-gx truetype with gx extensions - speedo speedo - intellifont intellifont - example myglyph.format = "truedoc-pfr"; specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'format' in that specification.
SVGAltGlyphElement.glyphRef - Web APIs
example myglyph.glypref = "#glyphid"; specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'glyphref' in that specification.
SVGAltGlyphElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgaltglyphelement' in that specification.
SVGAltGlyphItemElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgaltglyphitemelement' in that specification.
SVGAngle - Web APIs
specifications specification status
comment scalable vector graphics (svg) 2the definition of 'svgelement' in that specification.
SVGAnimateColorElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'svganimatecolorelement' in that specification.
SVGAnimateElement - Web APIs
specifications specification status
comment svg animations level 2the definition of 'svganimateelement' in that specification.
SVGAnimatedString.animVal - Web APIs
syntax var = object.animval specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition) recommendation scalable vector graphics (svg) 2 candidate recommendation browser compatibility the compatibility table on this page is generated from structured data.
SVGAnimatedString.baseVal - Web APIs
specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition) recommendation scalable vector graphics (svg) 2 candidate recommendation browser compatibility the compatibility table on this page is generated from structured data.
SVGAnimatedString - Web APIs
specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition) recommendation scalable vector graphics (svg) 2 candidate recommendation browser compatibility the compatibility table on this page is generated from structured data.
SVGAnimationElement: beginEvent event - Web APIs
'; if(e.detail) { msg += '; repeat number: ' + e.detail; } listitem.textcontent = msg; list.appendchild(listitem); }) event handler property equivalent note that you can also create an event listener for the begin event using the onbegin event handler property: animateelem.onbegin = () => { console.log('beginevent fired'); } specifications specification status
comment scalable vector graphics (svg) 2the definition of 'beginevent' in that specification.
SVGAnimationElement: endEvent event - Web APIs
appendchild(listitem); }) btn.addeventlistener('click', () => { btn.disabled = true; animateelem.setattribute('repeatcount', '1'); }) event handler property equivalent note that you can also create an event listener for the end event using the onend event handler property: animateelem.onend = () => { console.log('endevent fired'); } specifications specification status
comment scalable vector graphics (svg) 2the definition of 'endevent' in that specification.
SVGAnimationElement.onbegin - Web APIs
syntax var begineventhandler = someelement.onbegin; specifications specification status
comment svg animations level 2the definition of 'svganimationelement.onbegin' in that specification.
SVGAnimationElement.onend - Web APIs
syntax var endeventhandler = someelement.onend; specifications specification status
comment svg animations level 2the definition of 'svganimationelement.onend' in that specification.
SVGAnimationElement.onrepeat - Web APIs
syntax var repeateventhandler = someelement.onrepeat; specifications specification status
comment svg animations level 2the definition of 'svganimationelement.onrepeat' in that specification.
SVGAnimationElement: repeatEvent event - Web APIs
if(e.detail) { msg += '; repeat number: ' + e.detail; } listitem.textcontent = msg; list.appendchild(listitem); }) event handler property equivalent note that you can also create an event listener for the repeat event using the onrepeat event handler property: animateelem.onrepeat = () => { console.log('repeatevent fired'); } specifications specification status
comment scalable vector graphics (svg) 2the definition of 'repeatevent' in that specification.
targetElement - Web APIs
syntax var targetelement = someelement.targetelement; specifications specification status
comment svg animations level 2the definition of 'svganimationelement.targetelement' in that specification.
SVGAnimationElement - Web APIs
specifications specification status
comment svg animations level 2the definition of 'svganimationelement' in that specification.
cx - Web APIs
example svg <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" width="200" height="200"> <circle cx="50" cy="50" r="50" fill="gold" id="circle"/> </svg> javascript const circle = document.getelementbyid('circle'); console.log(circle.cx); specifications specification status
comment scalable vector graphics (svg) 2the definition of 'svgcircleelement.cx' in that specification.
cy - Web APIs
example svg <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" width="200" height="200"> <circle cy="50" cy="50" r="50" fill="gold" id="circle"/> </svg> javascript const circle = document.getelementbyid('circle'); console.log(circle.cy); specifications specification status
comment scalable vector graphics (svg) 2the definition of 'svgcircleelement.cy' in that specification.
r - Web APIs
example svg <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 100 100" width="200" height="200"> <circle r="50" r="50" r="50" fill="gold" id="circle"/> </svg> javascript const circle = document.getelementbyid('circle'); console.log(circle.r); specifications specification status
comment scalable vector graphics (svg) 2the definition of 'svgcircleelement.r' in that specification.
SVGCircleElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 2the definition of 'svgcircleelement' in that specification.
SVGClipPathElement - Web APIs
specifications specification status
comment css masking module level 1the definition of 'svgclippathelement' in that specification.
SVGColorProfileElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgcolorprofileelement' in that specification.
SVGCursorElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgcursorelement' in that specification.
SVGDefsElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 2the definition of 'svgdefselement' in that specification.
SVGDescElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 2the definition of 'svgdescelement' in that specification.
SVGElement: error event - Web APIs
bubbles yes cancelable no interface svgevent event handler property onerror examples svgelem.addeventlistener('error', () => { console.log('svg not loaded properly.'); }) specifications specification status
comment scalable vector graphics (svg) 2the definition of 'error' in that specification.
SVGElement: load event - Web APIs
bubbles no cancelable no interface svgevent event handler property onload examples svgelem.addeventlistener('load', () => { console.log('svg loaded.'); }) specifications specification status
comment scalable vector graphics (svg) 2the definition of 'load' in that specification.
SVGElement: resize event - Web APIs
bubbles no cancelable no interface svgevent event handler property onresize examples svgelem.addeventlistener('resize', () => { console.log('svg resized.'); }) specifications specification status
comment scalable vector graphics (svg) 2the definition of 'event changes in svg2' in that specification.
SVGElement: scroll event - Web APIs
bubbles no cancelable no interface svgevent event handler property onscroll examples svgelem.addeventlistener('scroll', () => { console.log('svg scrolled.'); }) specifications specification status
comment scalable vector graphics (svg) 2the definition of 'event changes in svg2' in that specification.
SVGElement: unload event - Web APIs
bubbles no cancelable no interface svgevent event handler property onunload examples svgelem.addeventlistener('unload', () => { console.log('svg unloaded.'); }) specifications specification status
comment scalable vector graphics (svg) 2the definition of 'unload' in that specification.
SVGElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 2the definition of 'svgelement' in that specification.
SVGEllipseElement - Web APIs
onclick="outputsize();"/> </svg> javascript content function outputsize() { var ellipse = document.getelementbyid("ellipse"); // outputs "horizontal radius: 100 vertical radius: 60" console.log( 'horizontal radius: ' + ellipse.rx.baseval.valueasstring, 'vertical radius: ' + ellipse.ry.baseval.valueasstring ) } result specifications specification status
comment scalable vector graphics (svg) 2the definition of 'svgellipseelement' in that specification.
SVGExternalResourcesRequired - Web APIs
specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgexternalresourcesrequired' in that specification.
SVGFEBlendElement - Web APIs
specifications specification status
comment filter effects module level 1the definition of 'svgfeblendelement' in that specification.
SVGFEColorMatrixElement - Web APIs
specifications specification status
comment filter effects module level 1the definition of 'svgfecolormatrixelement' in that specification.
SVGFECompositeElement - Web APIs
specifications specification status
comment filter effects module level 1the definition of 'svgfecompositeelement' in that specification.
SVGFEDistantLightElement - Web APIs
specifications specification status
comment filter effects module level 1the definition of 'svgfedistantlightelement' in that specification.
SVGFEDropShadowElement - Web APIs
specifications specification status
comment filter effects module level 1the definition of 'svgfedropshadowelement' in that specification.
SVGFEFloodElement - Web APIs
specifications specification status
comment filter effects module level 1the definition of 'svgfefloodelement' in that specification.
SVGFEFuncAElement - Web APIs
specifications specification status
comment filter effects module level 1the definition of 'svgfefuncaelement' in that specification.
SVGFEFuncBElement - Web APIs
specifications specification status
comment filter effects module level 1the definition of 'svgfefuncbelement' in that specification.
SVGFEFuncGElement - Web APIs
specifications specification status
comment filter effects module level 1the definition of 'svgfefuncgelement' in that specification.
SVGFEFuncRElement - Web APIs
specifications specification status
comment filter effects module level 1the definition of 'svgfefuncrelement' in that specification.
SVGFEGaussianBlurElement - Web APIs
specifications specification status
comment filter effects module level 1the definition of 'svgfegaussianblurelement' in that specification.
SVGFEImageElement - Web APIs
specifications specification status
comment filter effects module level 1the definition of 'svgfeimageelement' in that specification.
SVGFEMergeElement - Web APIs
specifications specification status
comment filter effects module level 1the definition of 'svgfemergeelement' in that specification.
SVGFEMergeNodeElement - Web APIs
specifications specification status
comment filter effects module level 1the definition of 'svgfemergenodeelement' in that specification.
SVGFEMorphologyElement - Web APIs
specifications specification status
comment filter effects module level 1the definition of 'svgfemorphologyelement' in that specification.
SVGFEOffsetElement - Web APIs
specifications specification status
comment filter effects module level 1the definition of 'svgfeoffsetelement' in that specification.
SVGFEPointLightElement - Web APIs
specifications specification status
comment filter effects module level 1the definition of 'svgfepointlightelement' in that specification.
SVGFESpotLightElement - Web APIs
specifications specification status
comment filter effects module level 1the definition of 'svgfespotlightelement' in that specification.
SVGFETileElement - Web APIs
specifications specification status
comment filter effects module level 1the definition of 'svgfetileelement' in that specification.
SVGFETurbulenceElement - Web APIs
specifications specification status
comment filter effects module level 1the definition of 'svgfeturbulenceelement' in that specification.
SVGFilterElement - Web APIs
specifications specification status
comment filter effects module level 1the definition of 'svgfilterelement' in that specification.
SVGFontElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgfontelement' in that specification.
SVGFontFaceElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgfontfaceelement' in that specification.
SVGFontFaceFormatElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgfontfaceformatelement' in that specification.
SVGFontFaceNameElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgfontfacenameelement' in that specification.
SVGFontFaceSrcElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgfontfacesrcelement' in that specification.
SVGFontFaceUriElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgfontfaceurielement' in that specification.
SVGForeignObjectElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 2the definition of 'svgforeignobjectelement' in that specification.
SVGGElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 2the definition of 'svggelement' in that specification.
SVGGeometryElement.isPointInFill() - Web APIs
="5" fill="seagreen"/> <circle cx="40" cy="30" r="5" fill="seagreen"/> </svg> javascript var circle = document.getelementbyid('circle'); // point not in circle console.log('point at 10,10:', circle.ispointinfill(new dompoint(10, 10))); // point in circle console.log('point at 40,30:', circle.ispointinfill(new dompoint(40, 30))); result specifications specification status
comment scalable vector graphics (svg) 2the definition of 'svggeometryelement.ispointinfill()' in that specification.
SVGGeometryElement.isPointInStroke() - Web APIs
tbyid('circle'); // point not in circle console.log('point at 10,10:', circle.ispointinstroke(new dompoint(10, 10))); // point in circle but not stroke console.log('point at 40,30:', circle.ispointinstroke(new dompoint(40, 30))); // point in circle stroke console.log('point at 83,17:', circle.ispointinstroke(new dompoint(83, 17))); result specifications specification status
comment scalable vector graphics (svg) 2the definition of 'svggeometryelement.ispointinstroke()' in that specification.
SVGGeometryElement.pathLength - Web APIs
syntax var pathlength = someelement.pathlength; specifications specification status
comment scalable vector graphics (svg) 2the definition of 'svggeometryelement.pathlength' in that specification.
SVGGeometryElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 2the definition of 'svggeometryelement' in that specification.
SVGGlyphElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgglyphelement' in that specification.
SVGGlyphRefElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgglyphrefelement' in that specification.
SVGGradientElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 2the definition of 'svggradientelement' in that specification.
SVGGraphicsElement: copy event - Web APIs
> </svg> css input { font-size: 10px; width: 100%; height: 90%; box-sizing: border-box; border: 1px solid black; } javascript document.getelementsbytagname("text")[0].addeventlistener("copy", evt => { evt.clipboarddata.setdata('text/plain', document.getselection().tostring().touppercase()); evt.preventdefault(); }); result specifications specification status
comment scalable vector graphics (svg) 2 candidate recommendation definition that the clipboard events apply to svg elements.
SVGGraphicsElement: cut event - Web APIs
specifications specification status
comment scalable vector graphics (svg) 2 candidate recommendation definition that the clipboard events apply to svg elements.
getBBox() - Web APIs
entrectgroup = groupelement.getboundingclientrect(); rectboundingclientrect.setattribute('x', boundingclientrectgroup.x); rectboundingclientrect.setattribute('y', boundingclientrectgroup.y); rectboundingclientrect.setattribute('width', boundingclientrectgroup.width); rectboundingclientrect.setattribute('height', boundingclientrectgroup.height); specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'getbbox' in that specification.
SVGGraphicsElement: paste event - Web APIs
ext> </svg> css input { font-size: 10px; width: 100%; height: 90%; box-sizing: border-box; border: 1px solid black; } javascript document.getelementbyid("element-to-paste-text").addeventlistener("paste", evt => { evt.target.textcontent = evt.clipboarddata.getdata("text/plain").touppercase(); evt.preventdefault(); }); result specifications specification status
comment scalable vector graphics (svg) 2 candidate recommendation definition that the clipboard events apply to svg elements.
SVGGraphicsElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 2the definition of 'svggraphicselement' in that specification.
SVGHKernElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'svghkernelement' in that specification.
SVGImageElement.decoding - Web APIs
examples var img = new image(); img.decoding = 'sync'; img.src = 'img/logo.svg'; specifications specification status
comment html living standardthe definition of 'decoding' in that specification.
SVGImageElement.x - Web APIs
specifications specification status
comment scalable vector graphics (svg) 2the definition of 'x' in that specification.
SVGImageElement.y - Web APIs
specifications specification status
comment scalable vector graphics (svg) 2the definition of 'y' in that specification.
SVGImageElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 2the definition of 'svgimageelement' in that specification.
SVGLineElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 2the definition of 'svglineelement' in that specification.
SVGLinearGradientElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 2the definition of 'svglineargradientelement' in that specification.
SVGMPathElement - Web APIs
specifications specification status
comment svg animations level 2the definition of 'svgmpathelement' in that specification.
SVGMaskElement - Web APIs
specifications specification status
comment css masking module level 1the definition of 'svgmaskelement' in that specification.
SVGMatrix - Web APIs
specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgmatrix' in that specification.
SVGMetadataElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 2the definition of 'svgmetadataelement' in that specification.
SVGMissingGlyphElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgmissingglyphelement' in that specification.
SVGNumber - Web APIs
specifications specification status
comment scalable vector graphics (svg) 2the definition of 'svgnumber' in that specification.
SVGPathElement.getTotalLength() - Web APIs
specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgpathelement.gettotallength()' in that specification.
SVGPathElement.pathLength - Web APIs
syntax var pathlength = someelement.pathlength; specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgpathelement.pathlength' in that specification.
SVGPathElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 2the definition of 'svgpathelement' in that specification.
SVGPatternElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 2the definition of 'svgpatternelement' in that specification.
SVGPolygonElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 2the definition of 'svgpolygonelement' in that specification.
SVGPolylineElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 2the definition of 'svgpolylineelement' in that specification.
SVGRadialGradientElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 2the definition of 'svgradialgradientelement' in that specification.
SVGRect - Web APIs
specifications specification status
comment geometry interfaces module level 1the definition of 'domrect' in that specification.
SVGRectElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 2the definition of 'svgrectelement' in that specification.
SVGRenderingIntent - Web APIs
specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgrenderingintent' in that specification.
SVGSVGElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 2the definition of 'svgsvgelement' in that specification.
SVGScriptElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 2the definition of 'svgscriptelement' in that specification.
SVGSetElement - Web APIs
specifications specification status
comment svg animations level 2the definition of 'svgsetelement' in that specification.
SVGStopElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 2the definition of 'svgstopelement' in that specification.
SVGStyleElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 2the definition of 'svgstyleelement' in that specification.
SVGSwitchElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 2the definition of 'svgswitchelement' in that specification.
SVGSymbolElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 2the definition of 'svgsymbolelement' in that specification.
SVGTRefElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgtrefelement' in that specification.
SVGTSpanElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 2the definition of 'svgtspanelement' in that specification.
SVGTests - Web APIs
specifications specification status
comment scalable vector graphics (svg) 2the definition of 'svgtests' in that specification.
SVGTextContentElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 2the definition of 'svgtextcontentelement' in that specification.
SVGTextElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 2the definition of 'svgtextelement' in that specification.
SVGTextPathElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 2the definition of 'svgtextpathelement' in that specification.
SVGTextPositioningElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 2the definition of 'svgtextpositioningelement' in that specification.
SVGTitleElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 2the definition of 'svgtitleelement' in that specification.
SVGTransformList - Web APIs
,115 40,225" onclick="transformme(evt)"/> <rect x="200" y="100" width="100" height="100" fill="yellow" stroke="black" stroke-width="5" onclick="transformme(evt)"/> <text x="40" y="250" font-family="verdana" font-size="16" fill="green" > click on a shape to transform it </text> </svg> live preview: specifications specification status
comment scalable vector graphics (svg) 2the definition of 'svgtransformlist' in that specification.
SVGURIReference - Web APIs
specifications specification status
comment scalable vector graphics (svg) 2the definition of 'svgurireference' in that specification.
SVGUnitTypes - Web APIs
specifications specification status
comment scalable vector graphics (svg) 2the definition of 'svgunittypes' in that specification.
SVGUseElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 2the definition of 'svguseelement' in that specification.
SVGVKernElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'svgvkernelement' in that specification.
SVGViewElement - Web APIs
specifications specification status
comment scalable vector graphics (svg) 2the definition of 'svgviewelement' in that specification.
Screen.availHeight - Web APIs
specifications specification status
comment css object model (cssom) view modulethe definition of 'screen.availheight' in that specification.
Screen.availWidth - Web APIs
syntax var width = window.screen.availwidth example var screenavailwidth = window.screen.availwidth; console.log(screenavailwidth); specifications specification status
comment css object model (cssom) view modulethe definition of 'screen.availwidth' in that specification.
Screen.colorDepth - Web APIs
syntax bitdepth = window.screen.colordepth; example // check the color depth of the screen if ( window.screen.colordepth < 8) { // use low-color version of page } else { // use regular, colorful page } specification specification status
comment css object model (cssom) view modulethe definition of 'screen.colordepth' in that specification.
Screen.height - Web APIs
specification specification status
comment css object model (cssom) view modulethe definition of 'screen.height' in that specification.
Screen.lockOrientation() - Web APIs
ocked } else { // orientation lock failed } usage with an array argument screen.lockorientationuniversal = screen.lockorientation || screen.mozlockorientation || screen.mslockorientation; if (screen.lockorientationuniversal(["landscape-primary", "landscape-secondary"])) { // orientation was locked } else { // orientation lock failed } specifications specification status
comment screen orientation apithe definition of 'lockorientation()' in that specification.
Screen.orientation - Web APIs
you should rotate your device to landscape"); } else if (orientation === undefined) { console.log("the orientation api isn't supported in this browser :("); } specifications specification status
comment screen orientation apithe definition of 'orientation' in that specification.
Screen.pixelDepth - Web APIs
syntax let depth = window.screen.pixeldepth example // if there is not adequate bit depth // choose a simpler color if ( window.screen.pixeldepth > 8 ) { document.style.color = "#faebd7"; } else { document.style.color = "#ffffff"; } specifications specification status
comment css object model (cssom) view modulethe definition of 'screen.pixeldepth' in that specification.
Screen.unlockOrientation() - Web APIs
example var unlockorientation = screen.unlockorientation || screen.mozunlockorientation || screen.msunlockorientation || (screen.orientation && screen.orientation.unlock); if (unlockorientation()) { // orientation was unlocked } else { // orientation unlock failed } specifications specification status
comment screen orientation apithe definition of 'lockorientation()' in that specification.
Screen.width - Web APIs
specification specification status
comment css object model (cssom) view modulethe definition of 'screen.width' in that specification.
Screen - Web APIs
void seteventhandler(domstring type, eventhandler handler) eventhandler geteventhandler(domstring type) example if (screen.pixeldepth < 8) { // use low-color version of page } else { // use regular, colorful page } specification specification status
comment css object model (cssom) view modulethe definition of 'screen' in that specification.
ScreenOrientation - Web APIs
specifications specification status
comment screen orientation apithe definition of 'screenorientation' in that specification.
ScriptProcessorNode.bufferSize - Web APIs
} } getdata(); // wire up play button playbutton.onclick = function() { source.connect(scriptnode); scriptnode.connect(audioctx.destination); source.start(); } // when the buffer source stops playing, disconnect everything source.onended = function() { source.disconnect(scriptnode); scriptnode.disconnect(audioctx.destination); } specifications specification status
comment web audio apithe definition of 'buffersize' in that specification.
ScriptProcessorNode.onaudioprocess - Web APIs
getdata(); // wire up play button playbutton.onclick = function() { source.connect(scriptnode); scriptnode.connect(audioctx.destination); source.start(); } // when the buffer source stops playing, disconnect everything source.onended = function() { source.disconnect(scriptnode); scriptnode.disconnect(audioctx.destination); } specifications specification status
comment web audio apithe definition of 'onaudioprocess' in that specification.
ScriptProcessorNode - Web APIs
} } getdata(); // wire up play button playbutton.onclick = function() { source.connect(scriptnode); scriptnode.connect(audioctx.destination); source.start(); } // when the buffer source stops playing, disconnect everything source.onended = function() { source.disconnect(scriptnode); scriptnode.disconnect(audioctx.destination); } specifications specification status
comment web audio apithe definition of 'scriptprocessornode' in that specification.
ScrollToOptions.behavior - Web APIs
'smooth' : 'auto' } window.scrollto(scrolloptions); }); specifications specification status
comment css object model (cssom) view modulethe definition of 'behavior' in that specification.
ScrollToOptions.left - Web APIs
'smooth' : 'auto' } window.scrollto(scrolloptions); }); specifications specification status
comment css object model (cssom) view modulethe definition of 'left' in that specification.
ScrollToOptions.top - Web APIs
'smooth' : 'auto' } window.scrollto(scrolloptions); }); specifications specification status
comment css object model (cssom) view modulethe definition of 'top' in that specification.
ScrollToOptions - Web APIs
'smooth' : 'auto' } window.scrollto(scrolloptions); }); specifications specification status
comment css object model (cssom) view modulethe definition of 'scrolltooptions' in that specification.
SecurityPolicyViolationEvent.blockedURI - Web APIs
example document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.blockeduri); }); specifications specification status
comment content security policy level 3the definition of 'blockeduri' in that specification.
SecurityPolicyViolationEvent.columnNumber - Web APIs
example document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.columnnumber); }); specifications specification status
comment content security policy level 3the definition of 'columnnumber' in that specification.
SecurityPolicyViolationEvent.disposition - Web APIs
possible values are "enforce" or "report" example document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.disposition); }); specifications specification status
comment content security policy level 3the definition of 'disposition' in that specification.
SecurityPolicyViolationEvent.documentURI - Web APIs
example document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.documenturi); }); specifications specification status
comment content security policy level 3the definition of 'documenturi' in that specification.
SecurityPolicyViolationEvent.effectiveDirective - Web APIs
example document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.effectivedirective); }); specifications specification status
comment content security policy level 3the definition of 'effectivedirective' in that specification.
SecurityPolicyViolationEvent.lineNumber - Web APIs
example document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.linenumber); }); specifications specification status
comment content security policy level 3the definition of 'linenumber' in that specification.
SecurityPolicyViolationEvent.originalPolicy - Web APIs
example document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.originalpolicy); }); specifications specification status
comment content security policy level 3the definition of 'originalpolicy' in that specification.
SecurityPolicyViolationEvent.referrer - Web APIs
example document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.referrer); }); specifications specification status
comment content security policy level 3the definition of 'referrer' in that specification.
SecurityPolicyViolationEvent.sample - Web APIs
example document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.sample); }); specifications specification status
comment content security policy level 3the definition of 'sample' in that specification.
SecurityPolicyViolationEvent.sourceFile - Web APIs
example document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.sourcefile); }); specifications specification status
comment content security policy level 3the definition of 'sourcefile' in that specification.
SecurityPolicyViolationEvent.statusCode - Web APIs
example document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.statuscode); }); specifications specification status
comment content security policy level 3the definition of 'statuscode' in that specification.
SecurityPolicyViolationEvent.violatedDirective - Web APIs
example document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.violateddirective); }); specifications specification status
comment content security policy level 3the definition of 'violateddirective' in that specification.
SecurityPolicyViolationEvent - Web APIs
examples document.addeventlistener("securitypolicyviolation", (e) => { console.log(e.blockeduri); console.log(e.violateddirective); console.log(e.originalpolicy); }); specifications specification status
comment content security policy level 2the definition of 'securitypolicyviolationevent' in that specification.
Selection.addRange() - Web APIs
on () { let selection = window.getselection(); let strongs = document.getelementsbytagname('strong'); if (selection.rangecount > 0) { selection.removeallranges(); } for (let i = 0; i < strongs.length; i++) { let range = document.createrange(); range.selectnode(strongs[i]); selection.addrange(range); } }); result specifications specification status
comment selection apithe definition of 'selection.addrange()' in that specification.
Selection.anchorNode - Web APIs
syntax node = sel.anchornode specifications specification status
comment selection apithe definition of 'selection.anchornode' in that specification.
Selection.anchorOffset - Web APIs
syntax number = sel.anchoroffset specifications specification status
comment selection apithe definition of 'selection.anchoroffset' in that specification.
Selection.collapse() - Web APIs
*/ var body = document.getelementsbytagname("body")[0]; window.getselection().collapse(body,0); specifications specification status
comment selection apithe definition of 'selection.collapse()' in that specification.
Selection.containsNode() - Web APIs
t!</p> javascript const secret = document.getelementbyid('secret'); const win = document.getelementbyid('win'); // listen for selection changes document.addeventlistener('selectionchange', () => { const selection = window.getselection(); const found = selection.containsnode(secret); win.toggleattribute('hidden', !found); }); result specifications specification status
comment selection apithe definition of 'selection.containsnode()' in that specification.
Selection.deleteFromDocument() - Web APIs
ce you do, you can remove the selected content by clicking the button below.</p> <button>delete selected text</button> javascript let button = document.queryselector('button'); button.addeventlistener('click', deleteselection); function deleteselection() { let selection = window.getselection(); selection.deletefromdocument(); } result specifications specification status
comment selection apithe definition of 'selection.deletefromdocument()' in that specification.
Selection.extend() - Web APIs
specifications specification status
comment selection apithe definition of 'selection.extend()' in that specification.
Selection.focusNode - Web APIs
syntax node = sel.focusnode specifications specification status
comment selection apithe definition of 'selection.focusnode' in that specification.
Selection.focusOffset - Web APIs
syntax offset = sel.focusoffset specifications specification status
comment selection apithe definition of 'selection.focusoffset' in that specification.
Selection.getRangeAt() - Web APIs
example let ranges = []; sel = window.getselection(); for(let i = 0; i < sel.rangecount; i++) { ranges[i] = sel.getrangeat(i); } /* each item in the ranges array is now * a range object representing one of the * ranges in the current selection */ specifications specification status
comment selection apithe definition of 'selection: getrangeat()' in that specification.
Selection.isCollapsed - Web APIs
syntax bool = sel.iscollapsed specifications specification status
comment selection apithe definition of 'selection.iscollapsed' in that specification.
Selection.removeRange() - Web APIs
*/ s = window.getselection(); if(s.rangecount > 1) { for(var i = 1; i < s.rangecount; i++) { s.removerange(s.getrangeat(i)); } } specifications specification status
comment selection apithe definition of 'selection.removerange()' in that specification.
Selection.selectAllChildren() - Web APIs
p> <p>i hope you enjoy your visit.</p> </main> <footer> <address>webmaster@example.com</address> <p>© 2019</p> </footer> javascript const button = document.queryselector('button'); const footer = document.queryselector('footer'); button.addeventlistener('click', (e) => { window.getselection().selectallchildren(footer); }); result specifications specification status
comment selection apithe definition of 'selection.selectallchildren()' in that specification.
Selection.setBaseAndExtent() - Web APIs
note: you can find this example on github (see it live also.) specifications specification status
comment selection apithe definition of 'selection.setbaseandextent()' in that specification.
Selection.type - Web APIs
var selection; document.onselectionchange = function() { console.log('new selection made'); selection = document.getselection(); console.log(selection.type); }; specifications specification status
comment selection apithe definition of 'selection.type' in that specification.
Selection - Web APIs
specifications specification status
comment selection apithe definition of 'selection' in that specification.
Selection API - Web APIs
specifications specification status
comment selection apithe definition of 'selection' in that specification.
Sensor.activated - Web APIs
specifications specification status
comment generic sensor apithe definition of 'activated' in that specification.
Sensor.hasReading - Web APIs
specifications specification status
comment generic sensor apithe definition of 'hasreading' in that specification.
Sensor.onactivate - Web APIs
specifications specification status
comment generic sensor apithe definition of 'onactivate' in that specification.
Sensor.onerror - Web APIs
specifications specification status
comment generic sensor apithe definition of 'onerror' in that specification.
Sensor.onreading - Web APIs
specifications specification status
comment generic sensor apithe definition of 'onreading' in that specification.
Sensor.start() - Web APIs
return value undefined specifications specification status
comment generic sensor apithe definition of 'start' in that specification.
Sensor.stop() - Web APIs
return value undefined example // tbd specifications specification status
comment generic sensor apithe definition of 'stop' in that specification.
Sensor.timestamp - Web APIs
specifications specification status
comment generic sensor apithe definition of 'timestamp' in that specification.
Sensor - Web APIs
specifications specification status
comment generic sensor apithe definition of 'sensor' in that specification.
SensorErrorEvent - Web APIs
specifications specification status
comment generic sensor apithe definition of 'sensorerrorevent' in that specification.
Sensor APIs - Web APIs
specifications specification status
comment generic sensor api candidate recommendation initial definition.
Server-sent events - Web APIs
examples simple sse demo using php specification specification status
comment html living standardthe definition of 'server-sent events' in that specification.
ServiceWorker.scriptURL - Web APIs
syntax someurl = serviceworker.scripturl value a usvstring (see the webidl definition of usvstring.) examples tbd specifications specification status
comment service workersthe definition of 'scripturl' in that specification.
ServiceWorker.state - Web APIs
; document.queryselector('#kind').textcontent = 'waiting'; } else if (registration.active) { serviceworker = registration.active; document.queryselector('#kind').textcontent = 'active'; } if (serviceworker) { logstate(serviceworker.state); serviceworker.addeventlistener('statechange', function(e) { logstate(e.target.state); }); } specifications specification status
comment service workersthe definition of 'state' in that specification.
ServiceWorker - Web APIs
} specifications specification status
comment service workersthe definition of 'serviceworker' in that specification.
ServiceWorkerContainer.controller - Web APIs
if (navigator.serviceworker.controller) { console.log(`this page is currently controlled by: ${navigator.serviceworker.controller}`); } else { console.log('this page is not currently controlled by a service worker.'); } } else { console.log('service workers are not supported.'); } specifications specification status
comment service workersthe definition of 'serviceworkerregistration.controller' in that specification.
ServiceWorkerContainer.getRegistration() - Web APIs
example navigator.serviceworker.getregistration('/app').then(function(registration) { if(registration){ document.queryselector('#status').textcontent = 'serviceworkerregistration found.'; } }); specifications specification status
comment service workersthe definition of 'serviceworkercontainer: getregistration' in that specification.
ServiceWorkerContainer.getRegistrations() - Web APIs
example navigator.serviceworker.getregistrations().then(function(registrations) { document.queryselector('#status').textcontent = 'serviceworkerregistrations found.'; }); specifications specification status
comment service workersthe definition of 'getregistrations()' in that specification.
ServiceWorkerContainer.onmessage - Web APIs
} example navigator.serviceworker.onmessage = function(messageevent) { console.log(`received data: ${messageevent.data}`); } specifications specification status
comment service workersthe definition of 'serviceworkercontainer: onmessage' in that specification.
ServiceWorkerContainer.ready - Web APIs
igator) { navigator.serviceworker.ready .then(function(registration) { console.log('a service worker is active:', registration.active); // at this point, you can call methods that require an active // service worker, like registration.pushmanager.subscribe() }); } else { console.log('service workers are not supported.'); } specifications specification status
comment service workersthe definition of 'serviceworkerregistration.ready' in that specification.
ServiceWorkerContainer - Web APIs
navigator.serviceworker.oncontrollerchange = function() { console.log('this page is now controlled by:', navigator.serviceworker.controller); }; } else { console.log('service workers are not supported.'); } specifications specification status
comment service workersthe definition of 'serviceworkercontainer' in that specification.
ServiceWorkerGlobalScope.onactivate - Web APIs
then.addeventlistener('activate', function(event) { var cachewhitelist = ['v2']; event.waituntil( caches.foreach(function(cache, cachename) { if (cachewhitelist.indexof(cachename) == -1) { return caches.delete(cachename); } }) ); }); specifications specification status
comment service workersthe definition of 'event handlers' in that specification.
ServiceWorkerGlobalScope.oncontentdelete - Web APIs
self.addeventlistener('contentdelete', event => { event.waituntil( caches.open('cache-name').then(cache => { return promise.all([ cache.delete(`/icon/${event.id}`), cache.delete(`/content/${event.id}`) ]) }) ); }); specifications specification status
comment unknownthe definition of 'contentdelete' in that specification.
ServiceWorkerGlobalScope.onfetch - Web APIs
about to fetch from network...'); return fetch(event.request).then(function(response) { console.log('response from network is:', response); return response; }).catch(function(error) { console.error('fetching failed:', error); throw error; }); }) ); }); specifications specification status
comment service workersthe definition of 'event handlers' in that specification.
ServiceWorkerGlobalScope.oninstall - Web APIs
'/sw-test/index.html', '/sw-test/style.css', '/sw-test/app.js', '/sw-test/image-list.js', '/sw-test/star-wars-logo.jpg', '/sw-test/gallery/', '/sw-test/gallery/bountyhunters.jpg', '/sw-test/gallery/mylittlevader.jpg', '/sw-test/gallery/snowtroopers.jpg' ); }) ); }); specifications specification status
comment service workersthe definition of 'event handlers' in that specification.
ServiceWorkerGlobalScope.onmessage - Web APIs
}; example self.addeventlistener('message', function(messageevent) { console.log('handling message event:', messageevent); }) specifications specification status
comment service workersthe definition of 'event handlers' in that specification.
ServiceWorkerGlobalScope.onnotificationclick - Web APIs
if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }; specifications specification status
comment notifications apithe definition of 'onnotificationclick' in that specification.
onnotificationclose - Web APIs
self.onnotificationclose = function(event) { console.log('on notification close: ', event.notification.tag); }; specifications specification status
comment notifications apithe definition of 'onnotificationclick' in that specification.
ServiceWorkerGlobalScope.onpush - Web APIs
"images/new-notification.png"; var notification = new notification(title, { body: message, tag: 'simple-push-demo-notification', icon: icon }); notification.addeventlistener('click', function() { if (clients.openwindow) { clients.openwindow('https://example.blog.com/2015/03/04/something-new.html'); } }); }); specifications specification status
comment push apithe definition of 'onpush' in that specification.
ServiceWorkerGlobalScope.onpushsubscriptionchange - Web APIs
}) example self.addeventlistener('pushsubscriptionchange', function() { // do something, usually resubscribe to push and // send the new subscription details back to the // server via xhr or fetch }); specifications specification status
comment push apithe definition of 'onpushsubscriptionchange' in that specification.
ServiceWorkerGlobalScope: push event - Web APIs
self.addeventlistener("push", event => { let message = event.data.json(); switch(message.type) { case "init": doinit(); break; case "shutdown": doshutdown(); break; } }, false); specifications specification status
comment push apithe definition of 'push' in that specification.
ServiceWorkerGlobalScope.skipWaiting() - Web APIs
self.skipwaiting(); // perform any other actions required for your // service worker to install, potentially inside // of event.waituntil(); }); specifications specification status
comment service workersthe definition of 'skipwaiting()' in that specification.
ServiceWorkerGlobalScope - Web APIs
about to fetch from network...'); return fetch(event.request).then(function(response) { console.log('response from network is:', response); return response; }, function(error) { console.error('fetching failed:', error); throw error; }); }) ); }); specifications specification status
comment service workersthe definition of 'serviceworkerglobalscope' in that specification.
ServiceWorkerRegistration.getNotifications() - Web APIs
example navigator.serviceworker.register('sw.js'); var options = { tag : 'user_alerts' }; navigator.serviceworker.ready.then(function(registration) { registration.getnotifications(options).then(function(notifications) { // do something with your notifications }) }); specifications specification status
comment notifications apithe definition of 'serviceworkerregistration.getnotifications()' in that specification.
ServiceWorkerRegistration.index - Web APIs
from the main script: // reference registration const registration = await navigator.serviceworker.ready; // feature detection if ('index' in registration) { // content index api functionality const contentindex = registration.index; } from the service worker: // service worker script const contentindex = self.registration.index; specifications specification status
comment unknownthe definition of 'index' in that specification.
ServiceWorkerRegistration.scope - Web APIs
syntax var swscope = serviceworkerregistration.scope; specifications specification status
comment service workersthe definition of 'serviceworkerregistration.scope' in that specification.
ServiceWorkerRegistration.unregister() - Web APIs
sw-test'}).then(function(registration) { // registration worked console.log('registration succeeded.'); registration.unregister().then(function(boolean) { // if boolean = true, unregister is successful }); }).catch(function(error) { // registration failed console.log('registration failed with ' + error); }); }; specifications specification status
comment service workersthe definition of 'serviceworkerregistration.unregister()' in that specification.
ServiceWorkerRegistration.update() - Web APIs
viceworker.register('/sw-test/sw.js', {scope: 'sw-test'}).then(function(registration) { // registration worked console.log('registration succeeded.'); button.onclick = function() { registration.update(); } }).catch(function(error) { // registration failed console.log('registration failed with ' + error); }); }; specifications specification status
comment service workersthe definition of 'serviceworkerregistration.update()' in that specification.
ServiceWorkerRegistration - Web APIs
er is being installed:', installingworker); // you can listen for changes to the installing service worker's // state via installingworker.onstatechange }); }) .catch(function(error) { console.log('service worker registration failed:', error); }); } else { console.log('service workers are not supported.'); } specifications specification status
comment service workersthe definition of 'serviceworkerregistration' in that specification.
ServiceWorkerState - Web APIs
specifications specification status
comment service workersthe definition of 'serviceworkerstate' in that specification.
ShadowRoot.host - Web APIs
// return the original host element some time later let hostelem = shadow.host; specifications specification status
comment domthe definition of 'shadowroot.host' in that specification.
ShadowRoot.mode - Web APIs
shadow.mode = 'closed'; } specifications specification status
comment domthe definition of 'shadowroot.mode' in that specification.
ShadowRoot - Web APIs
s; for(var i = 0; i < childnodes.length; i++) { if(childnodes[i].nodename === 'style') { childnodes[i].textcontent = 'div {' + 'width: ' + elem.getattribute('l') + 'px;' + 'height: ' + elem.getattribute('l') + 'px;' + 'background-color: ' + elem.getattribute('c') + ';' + '}'; } } } specifications specification status
comment domthe definition of 'interface shadowroot' in that specification.
SharedWorker() - Web APIs
worker'); } second.onchange = function() { myworker.port.postmessage([first.value,second.value]); console.log('message posted to worker'); } myworker.port.onmessage = function(e) { result1.textcontent = e.data; console.log('message received from worker'); } for a full example, see our basic shared worker example (run shared worker.) specifications specification status
comment html living standardthe definition of 'sharedworker()' in that specification.
SharedWorker.port - Web APIs
multiple scripts can then access the worker through a messageport object accessed using the sharedworker.port property — the port is started using its start() method: var myworker = new sharedworker('worker.js'); myworker.port.start(); for a full example, see our basic shared worker example (run shared worker.) specifications specification status
comment html living standardthe definition of 'abstractworker.onerror' in that specification.
SharedWorker - Web APIs
} specifications specification status
comment html living standardthe definition of 'sharedworker' in that specification.
Slottable: assignedSlot - Web APIs
let slottedspan = document.queryselector('my-paragraph span') console.log(slottedspan.assignedslot); // logs '<slot name="my-text">' specifications specification status
comment domthe definition of 'assignedslot' in that specification.
Slottable - Web APIs
specifications specification status
comment domthe definition of 'slottable' in that specification.
SourceBuffer.abort() - Web APIs
in lines 92-101, the seek() function is defined — note that abort() is called if mediasource.readystate is set to open, which means that it is ready to receive new source buffers — at this point it is worth aborting the current segment and just getting the one for the new seek position (see checkbuffer() and getcurrentsegment().) specifications specification status
comment media source extensionsthe definition of 'abort()' in that specification.
SourceBuffer.buffered - Web APIs
example tbd specifications specification status
comment media source extensionsthe definition of 'buffered' in that specification.
SourceBuffer.mode - Web APIs
var curmode = sourcebuffer.mode; if (curmode == 'segments') { sourcebuffer.mode = 'sequence'; } specifications specification status
comment media source extensionsthe definition of 'mode' in that specification.
SourceBuffer.updating - Web APIs
example tbd specifications specification status
comment media source extensionsthe definition of 'updating' in that specification.
SourceBuffer - Web APIs
eam(); video.play(); //console.log(mediasource.readystate); // ended }); sourcebuffer.appendbuffer(buf); }); } function fetchab (url, cb) { console.log(url); var xhr = new xmlhttprequest; xhr.open('get', url); xhr.responsetype = 'arraybuffer'; xhr.onload = function () { cb(xhr.response); }; xhr.send(); } specifications specification status
comment media source extensionsthe definition of 'sourcebuffer' in that specification.
SourceBufferList - Web APIs
specifications specification status
comment media source extensionsthe definition of 'sourcebufferlist' in that specification.
SpeechGrammar.SpeechGrammar() - Web APIs
nlist = new speechgrammarlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; var newgrammar = new speechgrammar(); newgrammar.src = '#jsgf v1.0; grammar names; public <name> = chris | kirsty | mike;' speechrecognitionlist[1] = newgrammar; // should add the new speechgrammar object to the list specifications specification status
comment web speech apithe definition of 'speechgrammar()' in that specification.
SpeechGrammar - Web APIs
specifications specification status
comment web speech apithe definition of 'speechgrammar' in that specification.
SpeechGrammarList.SpeechGrammarList() - Web APIs
ge | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; specifications specification status
comment web speech apithe definition of 'speechgrammarlist' in that specification.
SpeechGrammarList.addFromString() - Web APIs
ge | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; specifications specification status
comment web speech apithe definition of 'addfromstring()' in that specification.
SpeechGrammarList - Web APIs
ge | orchid | peru | pink | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; specifications specification status
comment web speech apithe definition of 'speechgrammarlist()' in that specification.
SpeechRecognition() - Web APIs
specifications specification status
comment web speech apithe definition of 'speechrecognition()' in that specification.
SpeechRecognition.abort() - Web APIs
tor('html'); document.body.onclick = function() { recognition.start(); console.log('ready to receive a color command.'); } abortbtn.onclick = function() { recognition.abort(); console.log('speech recognition aborted.'); } recognition.onspeechend = function() { recognition.stop(); console.log('speech recognition has stopped.'); } specifications specification status
comment web speech apithe definition of 'abort()' in that specification.
SpeechRecognition: audioend event - Web APIs
ioend event in an addeventlistener method: var recognition = new webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('audioend', function() { console.log('audio capturing ended'); }); or use the onaudioend event handler property: recognition.onaudioend = function() { console.log('audio capturing ended'); } specifications specification status
comment web speech apithe definition of 'speech recognition events' in that specification.
SpeechRecognition: audiostart event - Web APIs
event in an onaudiostart method: var recognition = new webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('audiostart', function() { console.log('audio capturing started'); }); or use the onaudiostart event handler property: recognition.onaudiostart = function() { console.log('audio capturing started'); } specifications specification status
comment web speech apithe definition of 'speech recognition events' in that specification.
SpeechRecognition: end event - Web APIs
eventlistener method: var recognition = new webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('end', function() { console.log('speech recognition service disconnected'); }); or use the onend event handler property: recognition.onend = function() { console.log('speech recognition service disconnected'); } specifications specification status
comment web speech apithe definition of 'speech recognition events' in that specification.
SpeechRecognition: error event - Web APIs
= new webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('error', function(event) { console.log('speech recognition error detected: ' + event.error'); }); or use the onerror event handler property: recognition.onerror = function(event) { console.log('speech recognition error detected: ' + event.error'); } specifications specification status
comment web speech apithe definition of 'speech recognition events' in that specification.
SpeechRecognition: nomatch event - Web APIs
nomatch event in an addeventlistener method: var recognition = new webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('nomatch', function() { console.log('speech not recognized'); }); or use the onnomatch event handler property: recognition.onnomatch = function() { console.log('speech not recognized'); } specifications specification status
comment web speech apithe definition of 'speech recognition events' in that specification.
SpeechRecognition.onaudioend - Web APIs
}; examples var recognition = new speechrecognition(); recognition.onaudioend = function() { console.log('audio capturing ended'); } specifications specification status
comment web speech apithe definition of 'onaudioend' in that specification.
SpeechRecognition.onaudiostart - Web APIs
}; examples var recognition = new speechrecognition(); recognition.onaudiostart = function() { console.log('audio capturing started'); } specifications specification status
comment web speech apithe definition of 'onaudiostart' in that specification.
SpeechRecognition.onend - Web APIs
}; examples var recognition = new speechrecognition(); recognition.onend = function() { console.log('speech recognition service disconnected'); } specifications specification status
comment web speech apithe definition of 'onend' in that specification.
SpeechRecognition.onerror - Web APIs
}; examples var recognition = new speechrecognition(); recognition.onerror = function(event) { console.log('speech recognition error detected: ' + event.error); } specifications specification status
comment web speech apithe definition of 'onerror' in that specification.
SpeechRecognition.onnomatch - Web APIs
}; examples var recognition = new speechrecognition(); recognition.onnomatch = function() { console.log('speech not recognised'); } specifications specification status
comment web speech apithe definition of 'onnomatch' in that specification.
SpeechRecognition.onresult - Web APIs
// we then return the transcript property of the speechrecognitionalternative object var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; } specifications specification status
comment web speech apithe definition of 'onresult' in that specification.
SpeechRecognition.onsoundend - Web APIs
}; examples recognition.onsoundend = function() { console.log('sound has stopped being received'); } specifications specification status
comment web speech apithe definition of 'onsoundend' in that specification.
SpeechRecognition.onsoundstart - Web APIs
}; examples recognition.onsoundstart = function() { console.log('some sound is being received'); } specifications specification status
comment web speech apithe definition of 'onsoundstart' in that specification.
SpeechRecognition.onspeechend - Web APIs
}; examples recognition.onspeechend = function() { console.log('speech has stopped being detected'); } specifications specification status
comment web speech apithe definition of 'onspeechend' in that specification.
SpeechRecognition.onspeechstart - Web APIs
}; examples recognition.onspeechstart = function() { console.log('speech has been detected'); } specifications specification status
comment web speech apithe definition of 'onspeechstart' in that specification.
SpeechRecognition.onstart - Web APIs
}; examples recognition.onstart = function() { console.log('speech recognition service has started'); } specifications specification status
comment web speech apithe definition of 'onstart' in that specification.
SpeechRecognition: result event - Web APIs
ranscript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; }); or use the onresult event handler property: recognition.onresult = function(event) { var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; } specifications specification status
comment web speech apithe definition of 'speech recognition events' in that specification.
SpeechRecognition: soundend event - Web APIs
er method: var recognition = new webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('soundend', function(event) { console.log('sound has stopped being received'); }); or use the onsoundend event handler property: recognition.onsoundend = function(event) { console.log('sound has stopped being received'); } specifications specification status
comment web speech apithe definition of 'speech recognition events' in that specification.
SpeechRecognition: soundstart event - Web APIs
deventlistener method: var recognition = new webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('soundstart', function() { console.log('some sound is being received'); }); or use the onsoundstart event handler property: recognition.onsoundstart = function() { console.log('some sound is being received'); } specifications specification status
comment web speech apithe definition of 'speech recognition events' in that specification.
SpeechRecognition: speechend event - Web APIs
istener method: var recognition = new webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('speechend', function() { console.log('speech has stopped being detected'); }); or use the onspeechend event handler property: recognition.onspeechend = function() { console.log('speech has stopped being detected'); } specifications specification status
comment web speech apithe definition of 'speech recognition events' in that specification.
SpeechRecognition: speechstart event - Web APIs
an addeventlistener method: var recognition = new webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('speechstart', function() { console.log('speech has been detected'); }); or use the onspeechstart event handler property: recognition.onspeechstart = function() { console.log('speech has been detected'); } specifications specification status
comment web speech apithe definition of 'speech recognition events' in that specification.
SpeechRecognition.start() - Web APIs
tor('html'); document.body.onclick = function() { recognition.start(); console.log('ready to receive a color command.'); } abortbtn.onclick = function() { recognition.abort(); console.log('speech recognition aborted.'); } recognition.onspeechend = function() { recognition.stop(); console.log('speech recognition has stopped.'); } specifications specification status
comment web speech apithe definition of 'start()' in that specification.
SpeechRecognition: start event - Web APIs
tlistener method: var recognition = new webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('start', function() { console.log('speech recognition service has started'); }); or use the onstart event handler property: recognition.onstart = function() { console.log('speech recognition service has started'); } specifications specification status
comment web speech apithe definition of 'speech recognition events' in that specification.
SpeechRecognition.stop() - Web APIs
tor('html'); document.body.onclick = function() { recognition.start(); console.log('ready to receive a color command.'); } abortbtn.onclick = function() { recognition.abort(); console.log('speech recognition aborted.'); } recognition.onspeechend = function() { recognition.stop(); console.log('speech recognition has stopped.'); } specifications specification status
comment web speech apithe definition of 'stop()' in that specification.
SpeechRecognition - Web APIs
utput'); var bg = document.queryselector('html'); document.body.onclick = function() { recognition.start(); console.log('ready to receive a color command.'); } recognition.onresult = function(event) { var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color; bg.style.backgroundcolor = color; } specifications specification status
comment web speech apithe definition of 'speechrecognition' in that specification.
SpeechRecognitionAlternative.confidence - Web APIs
// we then return the transcript property of the speechrecognitionalternative object var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; console.log('confidence: ' + event.results[0][0].confidence); } specifications specification status
comment web speech apithe definition of 'confidence' in that specification.
SpeechRecognitionAlternative.transcript - Web APIs
// we then return the transcript property of the speechrecognitionalternative object var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; } specifications specification status
comment web speech apithe definition of 'transcript' in that specification.
SpeechRecognitionAlternative - Web APIs
// we then return the transcript property of the speechrecognitionalternative object var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; } specifications specification status
comment web speech apithe definition of 'speechrecognitionalternative' in that specification.
SpeechRecognitionErrorEvent.error - Web APIs
examples var recognition = new speechrecognition(); recognition.onerror = function(event) { console.log('speech recognition error detected: ' + event.error); console.log('additional information: ' + event.message); } specifications specification status
comment web speech apithe definition of 'error' in that specification.
SpeechRecognitionErrorEvent.message - Web APIs
examples var recognition = new speechrecognition(); recognition.onerror = function(event) { console.log('speech recognition error detected: ' + event.error); console.log('additional information: ' + event.message); } specifications specification status
comment web speech apithe definition of 'message' in that specification.
SpeechRecognitionErrorEvent - Web APIs
examples var recognition = new speechrecognition(); recognition.onerror = function(event) { console.log('speech recognition error detected: ' + event.error); console.log('additional information: ' + event.message); } specifications specification status
comment web speech apithe definition of 'speechrecognitionerrorevent' in that specification.
SpeechRecognitionEvent.resultIndex - Web APIs
examples recognition.onresult = function(event) { var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; console.log(event.resultindex); // returns 0 if there is only one result } specifications specification status
comment web speech apithe definition of 'resultindex' in that specification.
SpeechRecognitionEvent.results - Web APIs
// we then return the transcript property of the speechrecognitionalternative object var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; } specifications specification status
comment web speech apithe definition of 'results' in that specification.
SpeechRecognitionEvent - Web APIs
// we then return the transcript property of the speechrecognitionalternative object var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; } specifications specification status
comment web speech apithe definition of 'speechrecognitionevent' in that specification.
SpeechRecognitionResult.isFinal - Web APIs
// we then return the transcript property of the speechrecognitionalternative object var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; console.log(event.results[0].isfinal); } specifications specification status
comment web speech apithe definition of 'isfinal' in that specification.
SpeechRecognitionResult.item() - Web APIs
// we then return the transcript property of the speechrecognitionalternative object var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; } specifications specification status
comment web speech apithe definition of 'item()' in that specification.
SpeechRecognitionResult.length - Web APIs
// we then return the transcript property of the speechrecognitionalternative object var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; console.log(event.results[0].length); } specifications specification status
comment web speech apithe definition of 'length' in that specification.
SpeechRecognitionResult - Web APIs
// we then return the transcript property of the speechrecognitionalternative object var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; } specifications specification status
comment web speech apithe definition of 'speechrecognitionresult' in that specification.
SpeechRecognitionResultList.item() - Web APIs
// we then return the transcript property of the speechrecognitionalternative object var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; } specifications specification status
comment web speech apithe definition of 'item()' in that specification.
SpeechRecognitionResultList.length - Web APIs
// we then return the transcript property of the speechrecognitionalternative object var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; console.log(event.results.length); } specifications specification status
comment web speech apithe definition of 'length' in that specification.
SpeechRecognitionResultList - Web APIs
// we then return the transcript property of the speechrecognitionalternative object var color = event.results[0][0].transcript; diagnostic.textcontent = 'result received: ' + color + '.'; bg.style.backgroundcolor = color; } specifications specification status
comment web speech apithe definition of 'speechrecognitionresultlist' in that specification.
SpeechSynthesis.cancel() - Web APIs
this is quite a long sentence to say.'); var utterance2 = new speechsynthesisutterance('we should say another sentence too, just to be on the safe side.'); synth.speak(utterance1); synth.speak(utterance2); synth.cancel(); // utterance1 stops being spoken immediately, and both are removed from the queue specifications specification status
comment web speech apithe definition of 'cancel()' in that specification.
SpeechSynthesis.getVoices() - Web APIs
g); option.setattribute('data-name', voices[i].name); document.getelementbyid("voiceselect").appendchild(option); } } populatevoicelist(); if (typeof speechsynthesis !== 'undefined' && speechsynthesis.onvoiceschanged !== undefined) { speechsynthesis.onvoiceschanged = populatevoicelist; } html <select id="voiceselect"></select> specifications specification status
comment web speech apithe definition of 'getvoices()' in that specification.
SpeechSynthesis.onvoiceschanged - Web APIs
i].default) { option.textcontent += ' -- default'; } option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.appendchild(option); } } populatevoicelist(); if (speechsynthesis.onvoiceschanged !== undefined) { speechsynthesis.onvoiceschanged = populatevoicelist; } specifications specification status
comment web speech apithe definition of 'onvoiceschanged' in that specification.
SpeechSynthesis.pause() - Web APIs
this is quite a long sentence to say.'); var utterance2 = new speechsynthesisutterance('we should say another sentence too, just to be on the safe side.'); synth.speak(utterance1); synth.speak(utterance2); synth.pause(); // pauses utterances being spoken specifications specification status
comment web speech apithe definition of 'pause()' in that specification.
SpeechSynthesis.paused - Web APIs
examples var synth = window.speechsynthesis; synth.pause(); var amipaused = synth.paused; // will return true specifications specification status
comment web speech apithe definition of 'paused' in that specification.
SpeechSynthesis.pending - Web APIs
this is quite a long sentence to say.'); var utterance2 = new speechsynthesisutterance('we should say another sentence too, just to be on the safe side.'); synth.speak(utterance1); synth.speak(utterance2); var amipending = synth.pending; // will return true if utterance 1 is still being spoken and utterance 2 is in the queue specifications specification status
comment web speech apithe definition of 'pending' in that specification.
SpeechSynthesis.resume() - Web APIs
this is quite a long sentence to say.'); var utterance2 = new speechsynthesisutterance('we should say another sentence too, just to be on the safe side.'); synth.speak(utterance1); synth.speak(utterance2); synth.pause(); // pauses utterances being spoken synth.resume() // resumes speaking specifications specification status
comment web speech apithe definition of 'resume()' in that specification.
SpeechSynthesis.speak() - Web APIs
event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); inputtxt.blur(); } specifications specification status
comment web speech apithe definition of 'speak()' in that specification.
SpeechSynthesis.speaking - Web APIs
this is quite a long sentence to say.'); var utterance2 = new speechsynthesisutterance('we should say another sentence too, just to be on the safe side.'); synth.speak(utterance1); synth.speak(utterance2); var amispeaking = synth.speaking; // will return true if utterance 1 or utterance 2 are currently being spoken specifications specification status
comment web speech apithe definition of 'speaking' in that specification.
SpeechSynthesis: voiceschanged event - Web APIs
var voices = synth.getvoices(); for(i = 0; i < voices.length ; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.appendchild(option); } } specifications specification status
comment web speech apithe definition of 'speech synthesis events' in that specification.
SpeechSynthesis - Web APIs
terance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.pitch = pitch.value; utterthis.rate = rate.value; synth.speak(utterthis); inputtxt.blur(); } specifications specification status
comment web speech apithe definition of 'speechsynthesis' in that specification.
SpeechSynthesisErrorEvent.error - Web APIs
options[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onerror = function(event) { console.error('an error has occurred with the speech synthesis: ' + event.error); } inputtxt.blur(); } specifications specification status
comment web speech apithe definition of 'error' in that specification.
SpeechSynthesisErrorEvent - Web APIs
edoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onerror = function(event) { console.log('an error has occurred with the speech synthesis: ' + event.error); } inputtxt.blur(); } specifications specification status
comment web speech apithe definition of 'speechsynthesiserrorevent' in that specification.
SpeechSynthesisEvent.charIndex - Web APIs
examples utterthis.onpause = function(event) { var char = event.utterance.text.charat(event.charindex); console.log('speech paused at character ' + event.charindex + ' of "' + event.utterance.text + '", which is "' + char + '".'); } specifications specification status
comment web speech apithe definition of 'charindex' in that specification.
SpeechSynthesisEvent.elapsedTime - Web APIs
examples utterthis.onboundary = function(event) { console.log(event.name + ' boundary reached after ' + event.elapsedtime + ' seconds.'); } specifications specification status
comment web speech apithe definition of 'elapsedtime' in that specification.
SpeechSynthesisEvent.name - Web APIs
examples utterthis.onboundary = function(event) { console.log(event.name + ' boundary reached after ' + event.elapsedtime + ' milliseconds.'); } specifications specification status
comment web speech apithe definition of 'name' in that specification.
SpeechSynthesisEvent.utterance - Web APIs
examples utterthis.onpause = function(event) { var char = event.utterance.text.charat(event.charindex); console.log('speech paused at character ' + event.charindex + ' of "' + event.utterance.text + '", which is "' + char + '".'); } specifications specification status
comment web speech apithe definition of 'utterance' in that specification.
SpeechSynthesisEvent - Web APIs
nction(event) { var char = event.utterance.text.charat(event.charindex); console.log('speech paused at character ' + event.charindex + ' of "' + event.utterance.text + '", which is "' + char + '".'); } utterthis.onboundary = function(event) { console.log(event.name + ' boundary reached after ' + event.elapsedtime + ' milliseconds.'); } specifications specification status
comment web speech apithe definition of 'speechsynthesisevent' in that specification.
SpeechSynthesisUtterance.SpeechSynthesisUtterance() - Web APIs
event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); inputtxt.blur(); } specifications specification status
comment web speech apithe definition of 'speechsynthesisutterance()' in that specification.
SpeechSynthesisUtterance: boundary event - Web APIs
od: utterthis.addeventlistener('boundary', function(event) { console.log(event.name + ' boundary reached after ' + event.elapsedtime + ' milliseconds.'); }); or use the onboundary event handler property: utterthis.onboundary = function(event) { console.log(event.name + ' boundary reached after ' + event.elapsedtime + ' milliseconds.'); } specifications specification status
comment web speech apithe definition of 'speech synthesis utterance events' in that specification.
SpeechSynthesisUtterance: end event - Web APIs
method: utterthis.addeventlistener('end', function(event) { console.log('utterance has finished being spoken after ' + event.elapsedtime + ' milliseconds.'); }); or use the onend event handler property: utterthis.onend = function(event) { console.log('utterance has finished being spoken after ' + event.elapsedtime + ' milliseconds.'); } specifications specification status
comment web speech apithe definition of 'speech synthesis utterance events' in that specification.
SpeechSynthesisUtterance: error event - Web APIs
event in an addeventlistener method: utterthis.addeventlistener('error', function(event) { console.log('an error has occurred with the speech synthesis: ' + event.error'); }); or use the onerror event handler property: utterthis.onerror = function(event) { console.log('an error has occurred with the speech synthesis: ' + event.error'); } specifications specification status
comment web speech apithe definition of 'speech synthesis utterance events' in that specification.
SpeechSynthesisUtterance.lang - Web APIs
var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.lang = 'en-us'; synth.speak(utterthis); inputtxt.blur(); } specifications specification status
comment web speech apithe definition of 'lang' in that specification.
SpeechSynthesisUtterance: mark event - Web APIs
handler property onmark examples you can use the mark event in an addeventlistener method: utterthis.addeventlistener('mark', function(event) { console.log('a mark was reached: ' + event.name); }); or use the onmark event handler property: utterthis.onmark = function(event) { console.log('a mark was reached: ' + event.name); } specifications specification status
comment web speech apithe definition of 'speech synthesis utterance events' in that specification.
SpeechSynthesisUtterance.onboundary - Web APIs
attribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onboundary = function(event) { console.log(event.name + ' boundary reached after ' + event.elapsedtime + ' milliseconds.'); } inputtxt.blur(); } specifications specification status
comment web speech apithe definition of 'onboundary' in that specification.
SpeechSynthesisUtterance.onend - Web APIs
attribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onend = function(event) { console.log('utterance has finished being spoken after ' + event.elapsedtime + ' milliseconds.'); } inputtxt.blur(); } specifications specification status
comment web speech apithe definition of 'onend' in that specification.
SpeechSynthesisUtterance.onerror - Web APIs
edoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onerror = function(event) { console.log('an error has occurred with the speech synthesis: ' + event.error); } inputtxt.blur(); } specifications specification status
comment web speech apithe definition of 'onerror' in that specification.
SpeechSynthesisUtterance.onmark - Web APIs
ctedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onmark = function(event) { console.log('a mark was reached: ' + event.name); } inputtxt.blur(); } specifications specification status
comment web speech apithe definition of 'onmark' in that specification.
SpeechSynthesisUtterance.onpause - Web APIs
lectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onpause = function(event) { console.log('speech paused after ' + event.elapsedtime + ' milliseconds.'); } inputtxt.blur(); } specifications specification status
comment web speech apithe definition of 'onpause' in that specification.
SpeechSynthesisUtterance.onresume - Web APIs
ctedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onresume = function(event) { console.log('speech resumed after ' + event.elapsedtime + ' milliseconds.'); } inputtxt.blur(); } specifications specification status
comment web speech apithe definition of 'onresume' in that specification.
SpeechSynthesisUtterance.onstart - Web APIs
ctedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); utterthis.onstart = function(event) { console.log('we have started uttering this speech: ' + event.utterance.text); } inputtxt.blur(); } specifications specification status
comment web speech apithe definition of 'onstart' in that specification.
SpeechSynthesisUtterance: pause event - Web APIs
the pause event in an addeventlistener method: utterthis.addeventlistener('pause', function(event) { console.log('speech paused after ' + event.elapsedtime + ' milliseconds.'); }); or use the onpause event handler property: utterthis.onpause = function(event) { console.log('speech paused after ' + event.elapsedtime + ' milliseconds.'); } specifications specification status
comment web speech apithe definition of 'speech synthesis utterance events' in that specification.
SpeechSynthesisUtterance.pitch - Web APIs
var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.pitch = 1.5; synth.speak(utterthis); inputtxt.blur(); } specifications specification status
comment web speech apithe definition of 'pitch' in that specification.
SpeechSynthesisUtterance.rate - Web APIs
var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.rate = 1.5; synth.speak(utterthis); inputtxt.blur(); } specifications specification status
comment web speech apithe definition of 'rate' in that specification.
SpeechSynthesisUtterance: resume event - Web APIs
sume event in an addeventlistener method: utterthis.addeventlistener('resume', function(event) { console.log('speech resumed after ' + event.elapsedtime + ' milliseconds.'); }); or use the onresume event handler property: utterthis.onresume = function(event) { console.log('speech resumed after ' + event.elapsedtime + ' milliseconds.'); } specifications specification status
comment web speech apithe definition of 'speech synthesis utterance events' in that specification.
SpeechSynthesisUtterance: start event - Web APIs
start event in an addeventlistener method: utterthis.addeventlistener('start', function(event) { console.log('we have started uttering this speech: ' + event.utterance.text); }); or use the onstart event handler property: utterthis.onstart = function(event) { console.log('we have started uttering this speech: ' + event.utterance.text); } specifications specification status
comment web speech apithe definition of 'speech synthesis utterance events' in that specification.
SpeechSynthesisUtterance.text - Web APIs
utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } console.log(utterthis.text); synth.speak(utterthis); inputtxt.blur(); } specifications specification status
comment web speech apithe definition of 'text' in that specification.
SpeechSynthesisUtterance.voice - Web APIs
event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); inputtxt.blur(); } specifications specification status
comment web speech apithe definition of 'voice' in that specification.
SpeechSynthesisUtterance.volume - Web APIs
var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } utterthis.volume = 0.5; synth.speak(utterthis); inputtxt.blur(); } specifications specification status
comment web speech apithe definition of 'volume' in that specification.
SpeechSynthesisUtterance - Web APIs
tion.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; option.value = i; voiceselect.appendchild(option); } inputform.onsubmit = function(event) { event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); utterthis.voice = voices[voiceselect.value]; synth.speak(utterthis); inputtxt.blur(); } specifications specification status
comment web speech apithe definition of 'speechsynthesisutterance' in that specification.
SpeechSynthesisVoice.default - Web APIs
ength ; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; if(voices[i].default) { option.textcontent += ' -- default'; } option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.appendchild(option); } specifications specification status
comment web speech apithe definition of 'default' in that specification.
SpeechSynthesisVoice.lang - Web APIs
ength ; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; if(voices[i].default) { option.textcontent += ' -- default'; } option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.appendchild(option); } specifications specification status
comment web speech apithe definition of 'lang' in that specification.
SpeechSynthesisVoice.localService - Web APIs
reateelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; if(voices[i].default) { option.textcontent += ' -- default'; } console.log(voices[i].localservice); option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.appendchild(option); } specifications specification status
comment web speech apithe definition of 'localservice' in that specification.
SpeechSynthesisVoice.name - Web APIs
ength ; i++) { var option = document.createelement('option'); option.textcontent = voices[i].name + ' (' + voices[i].lang + ')'; if(voices[i].default) { option.textcontent += ' -- default'; } option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.appendchild(option); } specifications specification status
comment web speech apithe definition of 'name' in that specification.
SpeechSynthesisVoice.voiceURI - Web APIs
(voices[i].default) { option.textcontent += ' -- default'; } console.log(voices[i].voiceuri); // on mac, this returns urns, for example 'urn:moz-tts:osx:com.apple.speech.synthesis.voice.daniel' option.setattribute('data-lang', voices[i].lang); option.setattribute('data-name', voices[i].name); voiceselect.appendchild(option); } specifications specification status
comment web speech apithe definition of 'voiceuri' in that specification.
SpeechSynthesisVoice - Web APIs
rthis.pitch = pitch.value; utterthis.rate = rate.value; synth.speak(utterthis); utterthis.onpause = function(event) { var char = event.utterance.text.charat(event.charindex); console.log('speech paused at character ' + event.charindex + ' of "' + event.utterance.text + '", which is "' + char + '".'); } inputtxt.blur(); } specifications specification status
comment web speech apithe definition of 'speechsynthesisvoice' in that specification.
StaticRange - Web APIs
specifications specification status
comment domthe definition of 'staticrange' in that specification.
StereoPannerNode.pan - Web APIs
{ pannode.pan.setvalueattime(pancontrol.value, audioctx.currenttime); panvalue.innerhtml = pancontrol.value; } // connect the mediaelementaudiosourcenode to the pannode // and the pannode to the destination, so we can play the // music and adjust the panning using the controls source.connect(pannode); pannode.connect(audioctx.destination); specifications specification status
comment web audio apithe definition of 'pan' in that specification.
StereoPannerNode - Web APIs
{ pannode.pan.setvalueattime(pancontrol.value, audioctx.currenttime); panvalue.innerhtml = pancontrol.value; } // connect the mediaelementaudiosourcenode to the pannode // and the pannode to the destination, so we can play the // music and adjust the panning using the controls source.connect(pannode); pannode.connect(audioctx.destination); specifications specification status
comment web audio apithe definition of 'stereopannernode' in that specification.
Storage.clear() - Web APIs
specifications specification status
comment html living standardthe definition of 'storage.clear' in that specification.
Storage.getItem() - Web APIs
specifications specification status
comment html living standardthe definition of 'storage.getitem' in that specification.
Storage.key() - Web APIs
specifications specification status
comment html living standardthe definition of 'storage.key' in that specification.
Storage.length - Web APIs
specifications specification status
comment html living standardthe definition of 'storage.length' in that specification.
Storage.removeItem() - Web APIs
specifications specification status
comment html living standardthe definition of 'storage.removeitem' in that specification.
Storage.setItem() - Web APIs
specifications specification status
comment html living standardthe definition of 'storage.setitem' in that specification.
Storage - Web APIs
specifications specification status
comment html living standardthe definition of 'storage' in that specification.
StorageEstimate.quota - Web APIs
</label> javascript content navigator.storage.estimate().then(function(estimate) { document.getelementbyid("percent").value = (estimate.usage / estimate.quota * 100).tofixed(2); }); result specifications specification status
comment storagethe definition of 'quota' in that specification.
StorageEstimate.usage - Web APIs
</label> javascript content navigator.storage.estimate().then(function(estimate) { document.getelementbyid("percent").value = (estimate.usage / estimate.quota * 100).tofixed(2); }); result specifications specification status
comment storagethe definition of 'usage' in that specification.
StorageEstimate - Web APIs
specifications specification status
comment storagethe definition of 'storageestimate' in that specification.
StorageEvent - Web APIs
specifications specification statuc
comment html living standardthe definition of 'the storageevent interface' in that specification.
StorageManager.estimate() - Web APIs
</label> javascript content navigator.storage.estimate().then(function(estimate) { document.getelementbyid("percent").value = (estimate.usage / estimate.quota * 100).tofixed(2); }); result specifications specification status
comment storagethe definition of 'estimate()' in that specification.
StorageManager.persist() - Web APIs
example if (navigator.storage && navigator.storage.persist) navigator.storage.persist().then(function(persistent) { if (persistent) console.log("storage will not be cleared except by explicit user action"); else console.log("storage may be cleared by the ua under storage pressure."); }); specifications specification status
comment storagethe definition of 'persist' in that specification.
StorageManager.persisted() - Web APIs
example if (navigator.storage && navigator.storage.persist) navigator.storage.persisted().then(function(persistent) { if (persistent) console.log("storage will not be cleared except by explicit user action"); else console.log("storage may be cleared by the ua under storage pressure."); }); specifications specification status
comment storagethe definition of 'persisted' in that specification.
StorageManager - Web APIs
specifications specification status
comment storagethe definition of 'storagemanger' in that specification.
StorageQuota - Web APIs
specifications specification status
comment quota management apithe definition of 'storagequota' in that specification.
Storage API - Web APIs
for example: navigator.storage.estimate().then(estimate => { // estimate.quota is the estimated quota // estimate.usage is the estimated number of bytes used }); specifications specification status
comment storage living standard initial definition.
Streams API - Web APIs
specifications specification status
comment streams living standard initial definition.
StylePropertyMap.clear() - Web APIs
return value undefined example // tbd specifications specification status
comment css typed om level 1the definition of 'clear()' in that specification.
StylePropertyMap.delete() - Web APIs
return value undefined example // tbd specifications specification status
comment css typed om level 1the definition of 'delete()' in that specification.
StylePropertyMap.set() - Web APIs
return value undefined example // tbd specifications specification status
comment css typed om level 1the definition of 'set()' in that specification.
StylePropertyMap - Web APIs
specifications specification status
comment css typed om level 1the definition of 'stylepropertymap' in that specification.
StylePropertyMapReadOnly.get() - Web APIs
erties const cssproperty = document.createelement('dt'); cssproperty.appendchild(document.createtextnode(ofinterest[i])); styleslist.appendchild(cssproperty); // values const cssvalue = document.createelement('dd'); cssvalue.appendchild(document.createtextnode( stylemap.get(ofinterest[i]))); styleslist.appendchild(cssvalue); } specifications specification status
comment css typed om level 1the definition of 'get()' in that specification.
StylePropertyMapReadOnly - Web APIs
prop, val] of stylepropertymap) { // properties const cssproperty = document.createelement('dt'); cssproperty.appendchild(document.createtextnode(prop)); styleslist.appendchild(cssproperty); // values const cssvalue = document.createelement('dd'); cssvalue.appendchild(document.createtextnode(val)); styleslist.appendchild(cssvalue); } specifications specification status
comment css typed om level 1the definition of 'stylepropertymapreadonly' in that specification.
StyleSheet.disabled - Web APIs
} specification specification status
comment css object model (cssom)the definition of 'stylesheet.disabled' in that specification.
Stylesheet.href - Web APIs
specifications specification status
comment css object model (cssom)the definition of 'stylesheet: href' in that specification.
StyleSheet.media - Web APIs
sheetindex) + '].media: ' + json.stringify(document.stylesheets[isheetindex].media)); } /* will log: document.stylesheets[0].media: {"0":"screen"} document.stylesheets[0].media: {"0":"screen","1":"handheld"} document.stylesheets[1].media: {"0":"screen","1":"print"} document.stylesheets[1].media: {"0":"screen"} */ </script> </body> </html> specifications specification status
comment css object model (cssom)the definition of 'stylesheet: media' in that specification.
StyleSheet.ownerNode - Web APIs
specifications specification status
comment css object model (cssom)the definition of 'stylesheet: ownernode' in that specification.
StyleSheet.title - Web APIs
specifications specification status
comment css object model (cssom)the definition of 'stylesheet: title' in that specification.
StyleSheet.type - Web APIs
syntax string = stylesheet.type example mystylesheet.type = 'text/css'; specifications specification status
comment css object model (cssom)the definition of 'stylesheet: type' in that specification.
StyleSheet - Web APIs
specifications specification status
comment css object model (cssom)the definition of 'stylesheet' in that specification.
StyleSheetList - Web APIs
ignoring...', stylesheet.href); } }) .filter(boolean) .join('\n'); specifications specification status
comment css object model (cssom)the definition of 'cssstylesheetlist' in that specification.
SubmitEvent() - Web APIs
specifications specification status
comment html living standardthe definition of 'submitevent()' in that specification.
SubmitEvent.submitter - Web APIs
specifications specification status
comment html living standardthe definition of 'submitevent.submitter' in that specification.
SubmitEvent - Web APIs
specifications specification status
comment html living standardthe definition of 'submitevent' in that specification.
SubtleCrypto.decrypt() - Web APIs
function decryptmessage(key, ciphertext) { return window.crypto.subtle.decrypt( { name: "aes-gcm", iv: iv }, key, ciphertext ); } specifications specification status
comment web cryptography apithe definition of 'subtlecrypto.decrypt()' in that specification.
SubtleCrypto.deriveBits() - Web APIs
lue.addeventlistener("animationend", () => { derivedbitsvalue.classlist.remove("fade-in"); }); derivedbitsvalue.textcontent = `${buffer}...[${derivedbits.bytelength} bytes total]`; } const derivebitsbutton = document.queryselector(".pbkdf2 .derive-bits-button"); derivebitsbutton.addeventlistener("click", () => { getderivedbits(); }); specifications specification status
comment web cryptography apithe definition of 'subtlecrypto.derivebits()' in that specification.
SubtleCrypto.deriveKey() - Web APIs
subtle.derivekey( { "name": "pbkdf2", salt: salt, "iterations": 100000, "hash": "sha-256" }, keymaterial, { "name": "aes-gcm", "length": 256}, true, [ "encrypt", "decrypt" ] ); return window.crypto.subtle.encrypt( { name: "aes-gcm", iv: iv }, key, plaintext ); } specifications specification status
comment web cryptography apithe definition of 'subtlecrypto.derivekey()' in that specification.
SubtleCrypto.digest() - Web APIs
); // hash the message const hasharray = array.from(new uint8array(hashbuffer)); // convert buffer to byte array const hashhex = hasharray.map(b => b.tostring(16).padstart(2, '0')).join(''); // convert bytes to hex string return hashhex; } const digesthex = await digestmessage(text); console.log(digesthex); specifications specification status
comment web cryptography apithe definition of 'subtlecrypto.digest()' in that specification.
SubtleCrypto.encrypt() - Web APIs
; let enc = new textencoder(); return enc.encode(message); } function encryptmessage(key) { let encoded = getmessageencoding(); // iv will be needed for decryption iv = window.crypto.getrandomvalues(new uint8array(12)); return window.crypto.subtle.encrypt( { name: "aes-gcm", iv: iv }, key, encoded ); } specifications specification status
comment web cryptography apithe definition of 'subtlecrypto.encrypt()' in that specification.
SubtleCrypto.exportKey() - Web APIs
*/ window.crypto.subtle.generatekey( { name: "ecdsa", namedcurve: "p-384" }, true, ["sign", "verify"] ).then((keypair) => { const exportbutton = document.queryselector(".jwk"); exportbutton.addeventlistener("click", () => { exportcryptokey(keypair.privatekey); }); }); specifications specification status
comment web cryptography apithe definition of 'subtlecrypto.exportkey()' in that specification.
SubtleCrypto.generateKey() - Web APIs
let key = window.crypto.subtle.generatekey( { name: "aes-gcm", length: 256 }, true, ["encrypt", "decrypt"] ); specifications specification status
comment web cryptography apithe definition of 'subtlecrypto.generatekey()' in that specification.
SubtleCrypto.importKey() - Web APIs
*/ function importprivatekey(jwk) { return window.crypto.subtle.importkey( "jwk", jwk, { name: "ecdsa", namedcurve: "p-384" }, true, ["sign"] ); } specifications specification status
comment web cryptography apithe definition of 'subtlecrypto.importkey()' in that specification.
SubtleCrypto.sign() - Web APIs
*/ function getmessageencoding() { const messagebox = document.queryselector(".hmac #message"); let message = messagebox.value; let enc = new textencoder(); return enc.encode(message); } let encoded = getmessageencoding(); let signature = await window.crypto.subtle.sign( "hmac", key, encoded ); specifications specification status
comment web cryptography apithe definition of 'subtlecrypto.sign()' in that specification.
SubtleCrypto.unwrapKey() - Web APIs
// algorithm params for key encryption key name: "aes-gcm", iv: ivbuffer }, { // algorithm params for key to unwrap name: "rsa-pss", hash: "sha-256" }, true, // extractability of key to unwrap ["sign"] // key usages for key to unwrap ); } specifications specification status
comment web cryptography apithe definition of 'subtlecrypto.unwrapkey()' in that specification.
SubtleCrypto.verify() - Web APIs
"valid" : "invalid"); } specifications specification status
comment web cryptography apithe definition of 'subtlecrypto.verify()' in that specification.
SubtleCrypto.wrapKey() - Web APIs
: "aes-gcm", iv: iv } ); } /* generate a sign/verify key pair, then wrap the private key */ window.crypto.subtle.generatekey( { name: "ecdsa", namedcurve: "p-384" }, true, ["sign", "verify"] ) .then((keypair) => { return wrapcryptokey(keypair.privatekey); }) .then((wrappedkey) => { console.log(wrappedkey); }); specifications specification status
comment web cryptography apithe definition of 'subtlecrypto.wrapkey()' in that specification.
SubtleCrypto - Web APIs
-gcm ✓ ✓ sha-1 ✓ sha-256 ✓ sha-384 ✓ sha-512 ✓ ecdh ✓ hkdf ✓ pbkdf2 ✓ aes-kw ✓ specifications specification status
comment web cryptography apithe definition of 'subtlecrypto' in that specification.
SyncEvent.tag - Web APIs
specifications specification status
comment web background synchronizationthe definition of 'tag' in that specification.
SyncManager - Web APIs
specifications specification status
comment web background synchronizationthe definition of 'syncmanager' in that specification.
Text() - Web APIs
syntax text1 = new text(); // create an empty text node text2 = new text("this is a text node"); example let text = new text("test"); specifications specification status
comment domthe definition of 'text()' in that specification.
Text.replaceWholeText() - Web APIs
specifications specification status
comment document object model (dom) level 3 core specificationthe definition of 'text' in that specification.
Text.splitText() - Web APIs
nodes, 'foo' and 'bar', // and save 'bar' as a const const bar = foobar.splittext(3); // create a <u> element containing ' new content ' const u = document.createelement('u'); u.appendchild(document.createtextnode(' new content ')); // add <u> before 'bar' p.insertbefore(u, bar); // the result is: <p>foo<u> new content </u>bar</p> result specifications specification status
comment domthe definition of 'text.splittext' in that specification.
Text.wholeText - Web APIs
specifications specification status
comment domthe definition of 'text.wholetext' in that specification.
Text - Web APIs
specifications specification status
comment domthe definition of 'text' in that specification.
TextDecoder() - Web APIs
specifications specification status
comment encodingthe definition of 'textdecoder()' in that specification.
TextDecoder.prototype.decode() - Web APIs
span></p> javascript const encoder = new textencoder(); const array = encoder.encode('€'); // uint8array(3) [226, 130, 172] document.getelementbyid('encoded-value').textcontent = array; const decoder = new textdecoder(); const str = decoder.decode(array); // string "€" document.getelementbyid('decoded-value').textcontent = str; result specifications specification status
comment encodingthe definition of 'textdecoder.decode()' in that specification.
TextDecoder - Web APIs
specifications specification status
comment encodingthe definition of 'textdecoder' in that specification.
TextEncoder() - Web APIs
specifications specification status
comment encodingthe definition of 'textencoder()' in that specification.
TextEncoder.prototype.encode() - Web APIs
source">this is a sample paragraph.</p> <p class="result">encoded result: </p> const sourcepara = document.queryselector('.source'); const resultpara = document.queryselector('.result'); const string = sourcepara.textcontent; const textencoder = new textencoder(); let encoded = textencoder.encode(string); resultpara.textcontent += encoded; specifications specification status
comment encodingthe definition of 'textencoder.prototype.encode()' in that specification.
TextEncoder.prototype.encodeInto() - Web APIs
this : self : global); source: https://github.com/anonyco/fastestsmallesttextencoderdecoder specifications specification status
comment encodingthe definition of 'textencoder.encode()' in that specification.
TextEncoder.encoding - Web APIs
syntax b = encoder.encoding; specifications specification status
comment encodingthe definition of 'textencoder.encoding' in that specification.
TextEncoder - Web APIs
)) return"utf-8"; else throw typeerror("illegal invocation");} }); } catch(e) { /*ie6-8 fallback*/ textencoder.prototype.encoding = "utf-8"; } if(typeof symbol!=="undefined")textencoder.prototype[symbol.tostringtag]="textencoder"; } source: https://github.com/anonyco/fastestsmallesttextencoderdecoder specifications specification status
comment encodingthe definition of 'textencoder' in that specification.
TextTrack.mode - Web APIs
window.addeventlistener("load", event => { let trackelem = document.queryselector("track"); let track = trackelem.track; track.mode = "showing"; for (let index=0; index < track.cues.length; index++) { let cue = track.cues[index]; cue.pauseonexit = true; }; }); specifications specification status
comment html living standardthe definition of 'mode' in that specification.
TextTrack - Web APIs
example tbd specifications specification status
comment html living standardthe definition of 'texttrack' in that specification.
TextTrackCue - Web APIs
specifications specification status
comment html living standardthe definition of 'texttrackcue' in that specification.
getTrackById() - Web APIs
specifications specification status
comment html living standardthe definition of 'texttracklist.gettrackbyid()' in that specification.
TextTrackList.length - Web APIs
specifications specification status
comment html living standardthe definition of 'texttracklist: length' in that specification.
TextTrackList.onaddtrack - Web APIs
document.queryselector("video").texttracks.onaddtrack = function(event) { addtotracklist(event.track); }; specifications specification status
comment html living standardthe definition of 'texttracklist: onaddtrack' in that specification.
TextTrackList.onchange - Web APIs
/* do something */ }; specifications specification status
comment html living standardthe definition of 'texttracklist: onchange' in that specification.
TextTrackList - Web APIs
texttracks.onaddtrack = updatetrackcount; texttracks.onremovetrack = updatetrackcount; function updatetrackcount(event) { trackcount = texttracks.length; drawtrackcountindicator(trackcount); } specifications specification status
comment html living standardthe definition of 'textracklist' in that specification.
TimeRanges.end() - Web APIs
specifications specification status
comment html living standardthe definition of 'timeranges.end()' in that specification.
TimeRanges.length - Web APIs
specifications specification status
comment html living standardthe definition of 'timeranges.length()' in that specification.
TimeRanges.start() - Web APIs
specifications specification status
comment html living standardthe definition of 'timeranges.start()' in that specification.
TimeRanges - Web APIs
specifications specification status
comment html living standardthe definition of 'timeranges' in that specification.
Touch() - Web APIs
specifications specification status
comment touch events – level 2the definition of 'touchevent' in that specification.
Touch.clientX - Web APIs
}, false); specifications specification status
comment touch events – level 2 draft non-stable version.
Touch.clientY - Web APIs
}, false); specifications specification status
comment touch events – level 2 draft no changes since last version.
Touch.force - Web APIs
console.log("targettouches[" + i + "].force = " + e.targettouches[i].force); } }, false); specifications specification status
comment touch events – level 2 draft initial definition.
Touch.identifier - Web APIs
for (var i=0; i < e.changedtouches.length; i++) { console.log("changedtouches[" + i + "].identifier = " + e.changedtouches[i].identifier); } }, false); specifications specification status
comment touch events – level 2 draft no change.
Touch.pageX - Web APIs
var i; for (i=0; i < e.changedtouches.length; i++) { console.log("touchpoint[" + i + "].pagex = " + e.changedtouches[i].pagex); console.log("touchpoint[" + i + "].pagey = " + e.changedtouches[i].pagey); } }, false); specifications specification status
comment touch events – level 2 draft no change from the previous version.
Touch.pageY - Web APIs
var i; for (i=0; i < e.changedtouches.length; i++) { console.log("touchpoint[" + i + "].pagex = " + e.changedtouches[i].pagex); console.log("touchpoint[" + i + "].pagey = " + e.changedtouches[i].pagey); } }, false); specifications specification status
comment touch events – level 2 draft no change from last version.
Touch.radiusX - Web APIs
src.style.width = touch.radiusx * 2 + 'px'; src.style.height = touch.radiusy * 2 + 'px'; src.style.transform = "rotate(" + touch.rotationangle + "deg)"; }; specifications specification status
comment touch events – level 2 draft non-stable version.
Touch.screenX - Web APIs
var i; for (i=0; i < e.touches.length; i++) { console.log("touchpoint[" + i + "].screenx = " + e.touches[i].screenx); console.log("touchpoint[" + i + "].screeny = " + e.touches[i].screeny); } }, false); specifications specification status
comment touch events – level 2 draft non-stable version.
Touch.target - Web APIs
for (var i=0; i < e.targettouches.length; i++) { console.log("touchpoint[" + i + "].target = " + e.targettouches[i].target); } }, false); specifications specification status
comment touch events – level 2 draft non-stable version.
Touch - Web APIs
specifications specification status
comment touch events – level 2the definition of 'touch' in that specification.
TouchEvent.altKey - Web APIs
someelement.addeventlistener('touchstart', function(e) { // log the state of this event's modifier keys console.log("altkey = " + e.altkey); console.log("ctrlkey = " + e.ctrlkey); console.log("metakey = " + e.metakey); console.log("shiftkey = " + e.shiftkey); }, false); specifications specification status
comment touch events – level 2 draft non-stable version.
TouchEvent.changedTouches - Web APIs
for (var i=0; i < e.changedtouches.length; i++) { console.log("changedtouches[" + i + "].identifier = " + e.changedtouches[i].identifier); } }, false); specifications specification status
comment touch events – level 2 draft non-stable version.
TouchEvent.touches - Web APIs
switch (e.touches.length) { case 1: handle_one_touch(e); break; case 2: handle_two_touches(e); break; case 3: handle_three_touches(e); break; default: console.log("not supported"); break; } }, false); specifications specification status
comment touch events – level 2 draft non-stable version.
TouchEvent - Web APIs
specifications specification status
comment touch events – level 2the definition of 'touchevent' in that specification.
TouchList.item() - Web APIs
hstart', function(ev) { // if this touchstart event started on element target, // set touch to the first item in the targettouches list; // otherwise set touch to the first item in the touches list var touch; if (ev.targettouches.length >= 1) touch = ev.targettouches.item(0); else touch = ev.touches.item(0); }, false); specifications specification status
comment touch events – level 2 draft non-stable version.
TouchList.length - Web APIs
chstart', function(ev) { // if this touchstart event started on element target, // set touch to the first item in the targettouches list; // otherwise set touch to the first item in the touches list var touch; if (ev.targettouches.length >= 1) touch = ev.targettouches.item(0); else touch = ev.touches.item(0); }, false); specifications specification status
comment touch events – level 2 draft non-stable version.
TouchList - Web APIs
specifications specification status
comment touch events – level 2 draft non-stable version.
Touch events - Web APIs
specifications specification status
comment touch events – level 2the definition of 'touch' in that specification.
TrackEvent() - Web APIs
specifications specification status
comment html living standardthe definition of 'trackevent()' in that specification.
TrackEvent.track - Web APIs
specifications specification status
comment html living standardthe definition of 'trackevent.track' in that specification.
TrackEvent - Web APIs
specifications specification status
comment html living standardthe definition of 'trackevent' in that specification.
Transferable - Web APIs
specifications specification status
comment html living standardthe definition of 'transferable' in that specification.
TransformStream - Web APIs
specifications specification status
comment streamsthe definition of 'transformstream' in that specification.
TransitionEvent() - Web APIs
specifications specification status
comment css transitionsthe definition of 'transitionevent()' in that specification.
TransitionEvent.transitionName - Web APIs
syntax name = transitionevent.transitionname specifications specification status
comment css transitionsthe definition of 'transitionevent.transitionname' in that specification.
TransitionEvent.elapsedTime - Web APIs
syntax name = transitionevent.elapsedtime specifications specification status
comment css transitionsthe definition of 'transitionevent.elapsedtime' in that specification.
TransitionEvent.pseudoElement - Web APIs
syntax name = transitionevent.pseudoelement specifications specification status
comment css transitionsthe definition of 'transitionevent.pseudoelement' in that specification.
TransitionEvent - Web APIs
specifications specification status
comment css transitionsthe definition of 'transitionevent' in that specification.
TreeWalker.filter - Web APIs
syntax nodefilter = treewalker.filter; example var treewalker = document.createtreewalker( document.body, nodefilter.show_element, { acceptnode: function(node) { return nodefilter.filter_accept; } }, false ); nodefilter = treewalker.filter; // document.body in this case specifications specification status
comment domthe definition of 'treewalker.filter' in that specification.
TreeWalker.firstChild() - Web APIs
syntax node = treewalker.firstchild; example var treewalker = document.createtreewalker( document.body, nodefilter.show_element, { acceptnode: function(node) { return nodefilter.filter_accept; } }, false ); var node = treewalker.firstchild(); // returns the first child of the root element, or null if none specifications specification status
comment domthe definition of 'treewalker.firstchild' in that specification.
TreeWalker.lastChild() - Web APIs
syntax node = treewalker.lastchild(); example var treewalker = document.createtreewalker( document.body, nodefilter.show_element, { acceptnode: function(node) { return nodefilter.filter_accept; } }, false ); var node = treewalker.lastchild(); // returns the last visible child of the root element specifications specification status
comment domthe definition of 'treewalker.lastchild' in that specification.
TreeWalker.nextNode() - Web APIs
syntax node = treewalker.nextnode(); example var treewalker = document.createtreewalker( document.body, nodefilter.show_element, { acceptnode: function(node) { return nodefilter.filter_accept; } }, false ); var node = treewalker.nextnode(); // returns the first child of root, as it is the next node in document order specifications specification status
comment domthe definition of 'treewalker.nextnode' in that specification.
TreeWalker.nextSibling() - Web APIs
eewalker.nextsibling(); example var treewalker = document.createtreewalker( document.body, nodefilter.show_element, { acceptnode: function(node) { return nodefilter.filter_accept; } }, false ); treewalker.firstchild(); var node = treewalker.nextsibling(); // returns null if the first child of the root element has no sibling specifications specification status
comment domthe definition of 'treewalker.nextsibling' in that specification.
TreeWalker.parentNode() - Web APIs
syntax node = treewalker.parentnode(); example var treewalker = document.createtreewalker( document.body, nodefilter.show_element, { acceptnode: function(node) { return nodefilter.filter_accept; } }, false ); var node = treewalker.parentnode(); // returns null as there is no parent specifications specification status
comment domthe definition of 'treewalker.parentnode' in that specification.
TreeWalker.previousNode() - Web APIs
syntax node = treewalker.previousnode(); example var treewalker = document.createtreewalker( document.body, nodefilter.show_element, { acceptnode: function(node) { return nodefilter.filter_accept; } }, false ); var node = treewalker.previousnode(); // returns null as there is no parent specifications specification status
comment domthe definition of 'treewalker.previousnode' in that specification.
TreeWalker.previousSibling() - Web APIs
syntax node = treewalker.previoussibling(); example var treewalker = document.createtreewalker( document.body, nodefilter.show_element, { acceptnode: function(node) { return nodefilter.filter_accept; } }, false ); var node = treewalker.previoussibling(); // returns null as there is no previous sibiling specifications specification status
comment domthe definition of 'treewalker.previoussibling' in that specification.
TreeWalker.root - Web APIs
syntax root = treewalker.root; example var treewalker = document.createtreewalker( document.body, nodefilter.show_element, { acceptnode: function(node) { return nodefilter.filter_accept; } }, false ); root = treewalker.root; // document.body in this case specifications specification status
comment domthe definition of 'treewalker.root' in that specification.
TypeInfo - Web APIs
constants constant value derivation_restriction 1 derivation_extension 2 derivation_union 4 derivation_list 8 specifications specification status
comment document object model (dom) level 3 core specificationthe definition of 'typeinfo' in that specification.
UIEvent() - Web APIs
specifications specification status
comment inputdevicecapabilities draft added sourcecapabilities property.
UIEvent.detail - Web APIs
specifications specification status
comment document object model (dom) level 3 events specificationthe definition of 'uievent.detail' in that specification.
UIEvent.initUIEvent() - Web APIs
example var e = document.createevent("uievent"); // creates a click event that bubbles, can be cancelled, // and with its view and detail property initialized to window and 1, // respectively e.inituievent("click", true, true, window, 1); specifications specification status
comment document object model (dom) level 3 events specificationthe definition of 'uievent.inituievent()' in that specification.
sourceCapabilities - Web APIs
specifications specification status
comment inputdevicecapabilitiesthe definition of 'sourcecapabilities' in that specification.
UIEvent.view - Web APIs
specifications specification status
comment document object model (dom) level 3 events specificationthe definition of 'uievent' in that specification.
UIEvent - Web APIs
specifications specification status
comment inputdevicecapabilities draft added sourcecapabilities property.
ULongRange - Web APIs
specifications specification status
comment media capture and streamsthe definition of 'ulongrange' in that specification.
URL() - Web APIs
// raises a typeerror exception as '/docs' is not a valid url new url('http://www.example.com', ); // => 'http://www.example.com/' new url('http://www.example.com', b); // => 'http://www.example.com/' new url("//foo.com", "https://example.com") // => 'https://foo.com' (see relative urls) specification specification status
comment urlthe definition of 'url.url()' in that specification.
URL.hash - Web APIs
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.
URL.host - Web APIs
.mozilla.org" url = new url('https://developer.mozilla.org:443/docs/web/api/url/host'); console.log(url.host); // "developer.mozilla.org" // the port number is not included because 443 is the scheme's default port url = new url('https://developer.mozilla.org:4097/docs/web/api/url/host'); console.log(url.host); // "developer.mozilla.org:4097" specifications specification status
comment urlthe definition of 'url.host' in that specification.
URL.hostname - Web APIs
examples const url = new url('/docs/web/api/url/hostname'); console.log(url.hostname); // logs: 'developer.mozilla.org' specifications specification status
comment urlthe definition of 'url.hostname' in that specification.
URL.href - Web APIs
examples const url = new url('/docs/web/api/url/href'); console.log(url.href); // logs: '/docs/web/api/url/href' specifications specification status
comment urlthe definition of 'url.href' in that specification.
URL.origin - Web APIs
examples const url = new url("blob:https://mozilla.org:443/") console.log(url.origin); // logs 'https://mozilla.org' specifications specification status
comment urlthe definition of 'url.origin' in that specification.
URL.password - Web APIs
examples const url = new url('https://anonymous:flabada@developer.mozilla.org/docs/web/api/url/password'); console.log(url.password) // logs "flabada" specifications specification status
comment urlthe definition of 'url.password' in that specification.
URL.pathname - Web APIs
examples const url = new url('/docs/web/api/url/pathname?q=value'); console.log(url.pathname); // logs "/docs/web/api/url/pathname" specifications specification status
comment urlthe definition of 'url.pathname' in that specification.
URL.pathname - Web APIs
examples const url = new url('/docs/web/api/url/pathname?q=value'); console.log(url.pathname); // logs "/docs/web/api/url/pathname" specifications specification status
comment urlthe definition of 'url.pathname' in that specification.
URL.port - Web APIs
examples const url = new url('https://mydomain.com:80/svn/repos/'); console.log(url.port); // logs '80' specifications specification status
comment urlthe definition of 'url.port' in that specification.
URL.protocol - Web APIs
examples const url = new url('/docs/web/api/url/protocol'); console.log(url.protocol); // logs "https:" specifications specification status
comment urlthe definition of 'protocol' in that specification.
URL.search - Web APIs
examples const url = new url('/docs/web/api/url/search?q=123'); console.log(url.search); // logs "?q=123" specifications specification status
comment urlthe definition of 'url.search' in that specification.
URL.search - Web APIs
examples const url = new url('/docs/web/api/url/search?q=123'); console.log(url.search); // logs "?q=123" specifications specification status
comment urlthe definition of 'url.search' in that specification.
URL.searchParams - Web APIs
let age = parseint(params.get('age')); // is the number 18 specifications specification status
comment urlthe definition of 'searchparams' in that specification.
URL.toJSON() - Web APIs
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.
URL.toString() - Web APIs
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.
URL.username - Web APIs
examples const url = new url('https://anonymous:flabada@developer.mozilla.org/docs/web/api/url/username'); console.log(url.username) // logs "anonymous" specifications specification status
comment urlthe definition of 'username' in that specification.
URL - Web APIs
const response = await fetch(new url('http://www.example.com/démonstration.html')); specifications specification status
comment file apithe definition of 'url' in that specification.
URLSearchParams() - Web APIs
= new urlsearchparams(url.search); // pass in a string literal var params2 = new urlsearchparams("foo=1&bar=2"); var params2a = new urlsearchparams("?foo=1&bar=2"); // pass in a sequence of pairs var params3 = new urlsearchparams([["foo", "1"], ["bar", "2"]]); // pass in a record var params4 = new urlsearchparams({"foo": "1", "bar": "2"}); specifications specification status
comment urlthe definition of 'urlsearchparams()' in that specification.
URLSearchParams.append() - Web APIs
params.append('foo', 4); //query string is now: 'foo=1&bar=2&foo=4' specifications specification status
comment urlthe definition of 'append()' in that specification.
URLSearchParams.delete() - Web APIs
params.delete('foo'); //query string is now: 'bar=2' specifications specification status
comment urlthe definition of 'delete()' in that specification.
URLSearchParams.entries() - Web APIs
examples // create a test urlsearchparams object var searchparams = new urlsearchparams("key1=value1&key2=value2"); // display the key/value pairs for(var pair of searchparams.entries()) { console.log(pair[0]+ ', '+ pair[1]); } the result is: key1, value1 key2, value2 specifications specification status
comment urlthe definition of 'entries() (see "iterable")' in that specification.
URLSearchParams.forEach() - Web APIs
examples // create a test urlsearchparams object var searchparams = new urlsearchparams("key1=value1&key2=value2"); // log the values searchparams.foreach(function(value, key) { console.log(value, key); }); the result is: value1 key1 value2 key2 specifications specification status
comment urlthe definition of 'foreach() (see "iterable")' in that specification.
URLSearchParams.get() - Web APIs
age' parameters using: let params = new urlsearchparams(document.location.search.substring(1)); let name = params.get("name"); // is the string "jonathan" let age = parseint(params.get("age"), 10); // is the number 18 requesting a parameter that isn't present in the query string will return null: let address = params.get("address"); // null specifications specification status
comment urlthe definition of 'get()' in that specification.
URLSearchParams.has() - Web APIs
examples let url = new url('https://example.com?foo=1&bar=2'); let params = new urlsearchparams(url.search.slice(1)); params.has('bar') === true; //true specifications specification status
comment urlthe definition of 'has()' in that specification.
URLSearchParams.keys() - Web APIs
examples // create a test urlsearchparams object var searchparams = new urlsearchparams("key1=value1&key2=value2"); // display the keys for(var key of searchparams.keys()) { console.log(key); } the result is: key1 key2 specifications specification status
comment urlthe definition of 'keys() (see "iterable")' in that specification.
URLSearchParams.sort() - Web APIs
examples // create a test urlsearchparams object var searchparams = new urlsearchparams("c=4&a=2&b=3&a=1"); // sort the key/value pairs searchparams.sort(); // display the sorted query string console.log(searchparams.tostring()); the result is: a=2&a=1&b=3&c=4 specifications specification status
comment urlthe definition of 'sort()' in that specification.
URLSearchParams.toString() - Web APIs
params.append('foo', 4); console.log(params.tostring()); //prints 'foo=1&bar=2&foo=4' // note: params can also be directly created let url = new url('https://example.com?foo=1&bar=2'); let params = url.searchparams; // or even simpler let params = new urlsearchparams('foo=1&bar=2'); specifications specification status
comment urlthe definition of 'tostring() (see "stringifier")' in that specification.
URLSearchParams.values() - Web APIs
examples // create a test urlsearchparams object var searchparams = new urlsearchparams("key1=value1&key2=value2"); // display the values for(var value of searchparams.values()) { console.log(value); } the result is: value1 value2 specifications specification status
comment urlthe definition of 'values() (see "iterable")' in that specification.
URLSearchParams - Web APIs
.com/search?query"); // "@" (equivalent to decodeuricomponent('%40')) var paramsstring2 = "?query=value"; var searchparams2 = new urlsearchparams(paramsstring2); searchparams2.has("query"); // true var url = new url("http://example.com/search?query=%40"); var searchparams3 = new urlsearchparams(url.search); searchparams3.has("query") // true specifications specification status
comment urlthe definition of 'urlsearchparams' in that specification.
URLUtilsReadOnly.hash - Web APIs
syntax string = object.hash; examples // in a web worker, on the page https://developer.mozilla.org/docs/urlutilsreadonly.hash#example var result = window.self.hash; // returns:'#hash' specifications specification status
comment urlthe definition of 'urlutilsreadonly.hash' in that specification.
URLUtilsReadOnly.host - Web APIs
syntax string = object.host; examples // in a web worker, on the page https://developer.mozilla.org/urlutilsreadonly.host var result = window.self.host; // returns:'developer.mozilla.org:80' specifications specification status
comment urlthe definition of 'urlutilsreadonly.host' in that specification.
URLUtilsReadOnly.hostname - Web APIs
syntax string = object.hostname; examples // in a web worker, on the page https://developer.mozilla.org/urlutilsreadonly.hostname var result = window.self.hostname; // returns:'developer.mozilla.org' specifications specification status
comment urlthe definition of 'urlutilsreadonly.hostname' in that specification.
URLUtilsReadOnly.href - Web APIs
syntax string = object.href; examples // in a web worker, on the page https://developer.mozilla.org/urlutilsreadonly.href var result = window.self.href; // returns:'https://developer.mozilla.org/urlutilsreadonly.href' specifications specification status
comment urlthe definition of 'urlutilsreadonly.href' in that specification.
URLUtilsReadOnly.origin - Web APIs
syntax string = object.origin; examples // on this page, returns the origin var result = self.location.origin; // returns:'https://developer.mozilla.org:443' specifications specification status
comment urlthe definition of 'urlutilsreadonly.origin' in that specification.
URLUtilsReadOnly.pathname - Web APIs
syntax string = object.pathname; examples // in a web worker, on the page https://developer.mozilla.org/urlutilsreadonly.pathname var result = window.self.pathname; // returns:'/urlutilsreadonly.pathname' specifications specification status
comment urlthe definition of 'urlutilsreadonly.pathname' in that specification.
URLUtilsReadOnly.port - Web APIs
syntax string = object.port; examples // in a web worker, on the page https://developer.mozilla.org/urlutilsreadonly.port var result = window.self.port; // returns:'80' specifications specification status
comment urlthe definition of 'urlutilsreadonly.port' in that specification.
URLUtilsReadOnly.protocol - Web APIs
syntax string = object.protocol; examples // in a web worker, on the page https://developer.mozilla.org/urlutilsreadonly.href var result = window.self.protocol; // returns:'https:' specifications specification status
comment urlthe definition of 'urlutilsreadonly.protocol' in that specification.
URLUtilsReadOnly.search - Web APIs
syntax string = object.search; examples // in a web worker, on the page https://developer.mozilla.org/docs/urlutilsreadonly.href?t=67 var result = window.self.search; // returns:'?t=67' specifications specification status
comment urlthe definition of 'urlutilsreadonly.search' in that specification.
URL API - Web APIs
specifications specification status
comment url living standard whatwg specification ...
USB.getDevices() - Web APIs
navigator.usb.getdevices() .then(devices => { console.log("total devices: " + devices.length); devices.foreach(device => { console.log("product name: " + device.productname + ", serial number " + device.serialnumber); }); }); specifications specification status
comment webusbthe definition of 'getdevices' in that specification.
USB.onconnect - Web APIs
syntax usb.onconnect = connectfunction specifications specification status
comment webusbthe definition of 'onconnect' in that specification.
USB.ondisconnect - Web APIs
syntax usb.ondisconnect = disconnectfunction specifications specification status
comment webusbthe definition of 'ondisconnect' in that specification.
USB - Web APIs
specifications specification status
comment webusbthe definition of 'usb' in that specification.
USBConfiguration - Web APIs
specifications specification status
comment webusbthe definition of 'usbconfiguration' in that specification.
USBDevice.claimInterface() - Web APIs
async function connectdevice(usbdevice) { await usbdevice.open(); if (usbdevice.configuration === null) await usbdevice.selectconfiguration(1); await usbdevice.claiminterface(0); } specifications specification status
comment webusbthe definition of 'claiminterface()' in that specification.
USBDevice.clearHalt() - Web APIs
clearing.'); await device.clearhalt('in', 1); } } specifications specification status
comment webusbthe definition of 'clearhalt()' in that specification.
USBDevice.configuration - Web APIs
async function connectdevice(usbdevice) { await usbdevice.open(); if (usbdevice.configuration === null) await usbdevice.selectconfiguration(1); await usbdevice.claiminterface(0); } specifications specification status
comment webusbthe definition of 'configuration' in that specification.
USBDevice.isochronousTransferIn() - Web APIs
return value a promise that resolves with a usbisochronousintransferresult specifications specification status
comment webusbthe definition of 'isochronoustransferin()' in that specification.
USBDevice.opened - Web APIs
let payload = new uint8array([r, g, b]); await usbdevice.controltransferout({ requesttype: 'vendor', recipient: 'device', request: 1, value: 0, index: 0, }, payload); } } specifications specification status
comment webusbthe definition of 'opened' in that specification.
USBDevice.serialNumber - Web APIs
syntax var serialnumber = usbdevice.serialnumber value the serial number for the specified usb device specifications specification status
comment webusbthe definition of 'serialnumber' in that specification.
USBDevice - Web APIs
specifications specification status
comment webusbthe definition of 'usbdevice' in that specification.
USBEndpoint - Web APIs
if (endpoint.type != "bulk") { continue; } if (endpoint.direction == "in") { inendpoint = endpoint.endpointnumber; } else if (endpoint.direction == "out") { outendpoint = endpoint.endpointnumber; } } } specifications specification status
comment webusbthe definition of 'usbendpoint' in that specification.
USBInterface - Web APIs
specifications specification status
comment webusbthe definition of 'usbinterface' in that specification.
USVString - Web APIs
specifications specification status
comment web idlthe definition of 'usvstring' in that specification.
VRStageParameters - Web APIs
pport room-scale experiences.' } else { info.innerhtml = '<strong>display stage parameters</strong>' + '<br>sitting to standing transform: ' + stageparams.sittingtostandingtransform + '<br>play area width (m): ' + stageparams.sizex + '<br>play area depth (m): ' + stageparams.sizey } }); specifications specification status
comment webvr 1.1the definition of 'vrstageparameters' in that specification.
VTTCue() - Web APIs
var cue = new vttcue(2, 3, 'cool text to be displayed'); specifications specification status
comment webvtt: the web video text tracks formatthe definition of 'vttcue()' in that specification.
VTTCue - Web APIs
specifications specification status
comment webvtt: the web video text tracks format candidate recommendation ...
VTTRegion - Web APIs
specifications specification status
comment webvtt: the web video text tracks format candidate recommendation ...
validityState.badInput - Web APIs
example <input type="number" id="age"> var input = document.getelementbyid("age"); if (input.validity.badinput) { console.log("bad input detected…"); } else { console.log("content of input ok."); } specifications specification status
comment html living standardthe definition of 'validitystate.badinput' in that specification.
validityState.tooLong - Web APIs
specifications specification status
comment html living standardthe definition of 'validitystate.toolong' in that specification.
ValidityState - Web APIs
specifications specification status
comment html living standardthe definition of 'validitystate' in that specification.
Vibration API - Web APIs
specifications specification status
comment vibration api recommendation linked to spec is the latest editor's draft; w3c version is a rec.
VideoConfiguration - Web APIs
} }; specifications specification status
comment media capabilitiesthe definition of 'videoconfiguration' in that specification.
VideoPlaybackQuality.corruptedVideoFrames - Web APIs
var videoelem = document.getelementbyid("my_vid"); var quality = videoelem.getvideoplaybackquality(); if (quality.corruptedvideoframes/quality.totalvideoframes > 0.05) { downgradevideo(videoelem); } specifications specification status
comment media playback qualitythe definition of 'videoplaybackquality: corruptedvideoframes' in that specification.
VideoPlaybackQuality.creationTime - Web APIs
var videoelem = document.getelementbyid("my_vid"); var quality = videoelem.getvideoplaybackquality(); if ((quality.corruptedvideoframes + quality.droppedvideoframes)/quality.totalvideoframes > 0.1) { lostframesthresholdexceeded(); } specifications specification status
comment media playback qualitythe definition of 'videoplaybackquality.corruptedvideoframes' in that specification.
VideoPlaybackQuality.droppedVideoFrames - Web APIs
var videoelem = document.getelementbyid("my_vid"); var percentelem = document.getelementbyid("percent"); var quality = videoelem.getvideoplaybackquality(); var droppercent = (quality.droppedvideoframes/quality.totalvideoframes)*100; percentelem.innertext = math.trunc(droppercent).tostring(10); specifications specification status
comment media playback qualitythe definition of 'videoplaybackquality.droppedvideoframes' in that specification.
VideoPlaybackQuality - Web APIs
specifications specification status
comment media playback qualitythe definition of 'videoplaybackquality' in that specification.
VideoTrack.id - Web APIs
specifications specification status
comment html living standardthe definition of 'videotrack: id' in that specification.
Videotrack.language - Web APIs
specifications specification status
comment html living standardthe definition of 'videotrack: language' in that specification.
VideoTrack.selected - Web APIs
specifications specification status
comment html living standardthe definition of 'videotrack: selected' in that specification.
VideoTrack - Web APIs
specifications specification status
comment html living standardthe definition of 'videotrack' in that specification.
getTrackById - Web APIs
specifications specification status
comment html living standardthe definition of 'videotracklist.gettrackbyid()' in that specification.
VideoTrackList.length - Web APIs
specifications specification status
comment html living standardthe definition of 'videotracklist: length' in that specification.
VideoTrackList.onaddtrack - Web APIs
document.queryselector("video").videotracks.onaddtrack = function(event) { addtotracklist(event.track); }; specifications specification status
comment html living standardthe definition of 'videotracklist: onaddtrack' in that specification.
VideoTrackList - Web APIs
videotracks.onaddtrack = updatetrackcount; videotracks.onremovetrack = updatetrackcount; function updatetrackcount(event) { trackcount = videotracks.length; drawtrackcountindicator(trackcount); } specifications specification status
comment html living standardthe definition of 'videotracklist' in that specification.
VisualViewport - Web APIs
specifications specification status
comment visual viewport apithe definition of 'visualviewport' in that specification.
Visual Viewport API - Web APIs
yle.transform = 'translate(' + offsetleft + 'px,' + offsettop + 'px) ' + 'scale(' + 1/viewport.scale + ')' }) } window.visualviewport.addeventlistener('scroll', viewporthandler); window.visualviewport.addeventlistener('resize', viewporthandler); specifications specification status
comment visual viewport apithe definition of 'visualviewport' in that specification.
WEBGL_color_buffer_float - Web APIs
examples var ext = gl.getextension('webgl_color_buffer_float'); gl.renderbufferstorage(gl.renderbuffer, ext.rbga32f_ext, 256, 256); specifications specification status
comment webgl_color_buffer_floatthe definition of 'webgl_color_buffer_float' in that specification.
WEBGL_compressed_texture_astc.getSupportedProfiles() - Web APIs
examples var ext = gl.getextension('webgl_compressed_texture_astc'); ext.getsupportedprofiles(); // ["ldr"] specifications specification status
comment webgl_compressed_texture_astcthe definition of 'webgl_compressed_texture_astc' in that specification.
WEBGL_compressed_texture_astc - Web APIs
12x12 0.89 floor((width + 11) / 12) * floor((height + 11) / 12) * 16 29584 examples var ext = gl.getextension('webgl_compressed_texture_astc'); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.compressedteximage2d(gl.texture_2d, 0, ext.compressed_rgba_astc_12x12_khr, 512, 512, 0, texturedata); specifications specification status
comment webgl_compressed_texture_astcthe definition of 'webgl_compressed_texture_astc' in that specification.
WEBGL_compressed_texture_atc - Web APIs
examples var ext = gl.getextension('webgl_compressed_texture_atc'); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.compressedteximage2d(gl.texture_2d, 0, ext.compressed_rgb_atc_webgl, 512, 512, 0, texturedata); specifications specification status
comment webgl_compressed_texture_atcthe definition of 'webgl_compressed_texture_atc' in that specification.
WEBGL_compressed_texture_etc - Web APIs
examples var ext = gl.getextension('webgl_compressed_texture_etc'); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.compressedteximage2d(gl.texture_2d, 0, ext.compressed_rgba8_etc2_eac, 512, 512, 0, texturedata); specifications specification status
comment webgl_compressed_texture_etcthe definition of 'webgl_compressed_texture_etc' in that specification.
WEBGL_compressed_texture_etc1 - Web APIs
examples var ext = gl.getextension('webgl_compressed_texture_etc1'); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.compressedteximage2d(gl.texture_2d, 0, ext.compressed_rgb_etc1_webgl, 512, 512, 0, texturedata); specifications specification status
comment webgl_compressed_texture_etc1the definition of 'webgl_compressed_texture_etc1' in that specification.
WEBGL_compressed_texture_pvrtc - Web APIs
examples var ext = gl.getextension('webgl_compressed_texture_pvrtc'); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.compressedteximage2d(gl.texture_2d, 0, ext.compressed_rgb_pvrtc_4bppv1_img, 512, 512, 0, texturedata); specifications specification status
comment webgl_compressed_texture_pvrtcthe definition of 'webgl_compressed_texture_pvrtc' in that specification.
WEBGL_compressed_texture_s3tc - Web APIs
gl_compressed_texture_s3tc') ); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.compressedteximage2d(gl.texture_2d, 0, ext.compressed_rgba_s3tc_dxt5_ext, 512, 512, 0, texturedata); gl.texparameteri(gl.texture_2d, gl.texture_mag_filter, gl.linear); gl.texparameteri(gl.texture_2d, gl.texture_min_filter, gl.linear); specifications specification status
comment webgl_compressed_texture_s3tcthe definition of 'webgl_compressed_texture_s3tc' in that specification.
WEBGL_compressed_texture_s3tc_srgb - Web APIs
compressed_texture_s3tc_srgb'); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.compressedteximage2d(gl.texture_2d, 0, ext.compressed_srgb_s3tc_dxt1_ext, 512, 512, 0, texturedata); gl.texparameteri(gl.texture_2d, gl.texture_mag_filter, gl.linear); gl.texparameteri(gl.texture_2d, gl.texture_min_filter, gl.linear); specifications specification status
comment webgl_compressed_texture_s3tc_srgbthe definition of 'webgl_compressed_texture_s3tc_srgb' in that specification.
WEBGL_debug_renderer_info - Web APIs
ser's graphic driver: var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var debuginfo = gl.getextension('webgl_debug_renderer_info'); var vendor = gl.getparameter(debuginfo.unmasked_vendor_webgl); var renderer = gl.getparameter(debuginfo.unmasked_renderer_webgl); console.log(vendor); console.log(renderer); specifications specification status
comment webgl_debug_renderer_infothe definition of 'webgl_debug_renderer_info' in that specification.
WEBGL_debug_shaders.getTranslatedShaderSource() - Web APIs
r = gl.createshader(gl.fragment_shader); gl.shadersource(shader, 'void main() { gl_fragcolor = vec4(gl_fragcoord.x, 0.0, 0.0, 1.0); }'); gl.compileshader(shader); var src = gl.getextension('webgl_debug_shaders').gettranslatedshadersource(shader); console.log(src); // "void main(){ // (gl_fragcolor = vec4(gl_fragcoord.x, 0.0, 0.0, 1.0)); // }" specifications specification status
comment webgl_debug_shadersthe definition of 'webgl_debug_shaders.gettranslatedshadersource' in that specification.
WEBGL_debug_shaders - Web APIs
specifications specification status
comment webgl_debug_shadersthe definition of 'webgl_debug_shaders' in that specification.
WEBGL_depth_texture - Web APIs
examples var ext = gl.getextension('webgl_depth_texture'); gl.teximage2d(gl.texture_2d, 0, gl.depth_component, 512, 512, 0, gl.depth_component, gl.unsigned_short, null); specifications specification status
comment webgl_depth_texturethe definition of 'webgl_depth_texture' in that specification.
WEBGL_draw_buffers.drawBuffersWEBGL() - Web APIs
ext.drawbufferswebgl([ ext.color_attachment0_webgl, // gl_fragdata[0] ext.color_attachment1_webgl, // gl_fragdata[1] ext.color_attachment2_webgl, // gl_fragdata[2] ext.color_attachment3_webgl // gl_fragdata[3] ]); specifications specification status
comment webgl_draw_buffersthe definition of 'webgl_draw_buffers' in that specification.
WEBGL_draw_buffers - Web APIs
lor_attachment3_webgl // gl_fragdata[3] ]); shader code that writes to multiple textures: <script type="x-shader/x-fragment"> #extension gl_ext_draw_buffers : require precision highp float; void main(void) { gl_fragdata[0] = vec4(0.25); gl_fragdata[1] = vec4(0.5); gl_fragdata[2] = vec4(0.75); gl_fragdata[3] = vec4(1.0); } </script> specifications specification status
comment webgl_draw_buffersthe definition of 'webgl_draw_buffers' in that specification.
WEBGL_lose_context.restoreContext() - Web APIs
examples with this method, you can simulate the webglcontextrestored event: var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); canvas.addeventlistener('webglcontextrestored', function(e) { console.log(e); }, false); gl.getextension('webgl_lose_context').restorecontext(); specifications specification status
comment webgl_lose_contextthe definition of 'webgl_lose_context.losecontext' in that specification.
WEBGL_lose_context - Web APIs
specifications specification status
comment webgl_lose_contextthe definition of 'webgl_lose_context' in that specification.
WakeLock.request() - Web APIs
const requestwakelock = async () => { try { const wakelock = await navigator.wakelock.request('screen'); } catch (err) { // the wake lock request fails - usually system related, such low as battery console.log(`${err.name}, ${err.message}`); } } requestwakelock(); specifications specification status
comment screen wake lock apithe definition of 'request()' in that specification.
WakeLock - Web APIs
const requestwakelock = async () => { try { const wakelock = await navigator.wakelock.request('screen'); } catch (err) { // the wake lock request fails - usually system related, such low as battery console.log(`${err.name}, ${err.message}`); } } requestwakelock(); specifications specification status
comment screen wake lock apithe definition of 'wakelock' in that specification.
WakeLockSentinel.release() - Web APIs
wakelockoffbutton.addeventlistener('click', () => { wakelocksentinel.release(); }) specifications specification status
comment screen wake lock apithe definition of 'release()' in that specification.
WakeLockSentinel.type - Web APIs
const requestwakelock = async () => { wakelock = await navigator.wakelock.request('screen'); console.log(wakelock.type); // logs 'screen' }; requestwakelock(); specifications specification status
comment screen wake lock apithe definition of 'wakelocktype' in that specification.
WakeLockSentinel - Web APIs
}); } catch (err) { // if wake lock request fails - usually system related, such as battery } } wakelockonbutton.addeventlistener('click', () => { requestwakelock(); }) wakelockoffbutton.addeventlistener('click', () => { if (wakelock !== null) { wakelock.release() .then(() => { wakelock = null; }) } }) specifications specification status
comment screen wake lock apithe definition of 'wakelocksentinel' in that specification.
WaveShaperNode.curve - Web APIs
distortion.curve = makedistortioncurve(400); distortion.oversample = '4x'; specifications specification status
comment web audio apithe definition of 'curve' in that specification.
WaveShaperNode.oversample - Web APIs
distortion.curve = makedistortioncurve(400); distortion.oversample = '4x'; specifications specification status
comment web audio apithe definition of 'oversample' in that specification.
WaveShaperNode - Web APIs
distortion.curve = makedistortioncurve(400); distortion.oversample = '4x'; specifications specification status
comment web audio apithe definition of 'waveshapernode' in that specification.
WebGL2RenderingContext.beginTransformFeedback() - Web APIs
examples var transformfeedback = gl.createtransformfeedback(); gl.bindtransformfeedback(gl.transform_feedback, transformfeedback); gl.begintransformfeedback(gl.triangles); gl.drawarrays(gl.triangles, 0, 3); specifications specification status
comment webgl 2.0the definition of 'begintransformfeedback' in that specification.
WebGL2RenderingContext.bindTransformFeedback() - Web APIs
examples var transformfeedback = gl.createtransformfeedback(); gl.bindtransformfeedback(gl.transform_feedback, transformfeedback); specifications specification status
comment webgl 2.0the definition of 'bindtransformfeedback' in that specification.
WebGL2RenderingContext.blitFramebuffer() - Web APIs
examples gl.blitframebuffer(0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height, gl.color_buffer_bit, gl.nearest); specifications specification status
comment webgl 2.0the definition of 'blitframebuffer' in that specification.
WebGL2RenderingContext.clearBuffer[fiuv]() - Web APIs
examples gl.clearbufferiv(gl.color, 0, new int32array([r, g, b, a])); gl.clearbufferuiv(gl.color, 0, new uint32array([r, g, b, a])); gl.clearbufferfv(gl.color, 0, new float32array([r, g, b, a])); gl.clearbufferfv(gl.color, 0, [0.0, 0.0, 0.0, 0.0]); gl.clearbufferfi(gl.depth_stencil, 0, 1.0, 0); specifications specification status
comment webgl 2.0the definition of 'clearbuffer[fiuv]()' in that specification.
WebGL2RenderingContext.clientWaitSync() - Web APIs
examples var sync = gl.fencesync(gl.sync_gpu_commands_complete, 0); var status = gl.clientwaitsync(sync, 0, 0); specifications specification status
comment webgl 2.0the definition of 'clientwaitsync' in that specification.
WebGL2RenderingContext.copyBufferSubData() - Web APIs
th * 4; gl.bindbuffer(gl.array_buffer, srcbuffer); gl.bufferdata(gl.array_buffer, data, gl.static_draw); gl.bindbuffer(gl.copy_read_buffer, srcbuffer); gl.bindbuffer(gl.array_buffer, dstbuffer); gl.bufferdata(gl.array_buffer, new float32array(length), gl.static_draw); gl.copybuffersubdata(gl.copy_read_buffer, gl.array_buffer, 0, 0, length); specifications specification status
comment webgl 2.0the definition of 'copybuffersubdata' in that specification.
WebGL2RenderingContext.endTransformFeedback() - Web APIs
examples var transformfeedback = gl.createtransformfeedback(); gl.bindtransformfeedback(gl.transform_feedback, transformfeedback); gl.begintransformfeedback(gl.triangles); gl.drawarrays(gl.triangles, 0, 3); gl.endtransformfeedback(); specifications specification status
comment webgl 2.0the definition of 'endtransformfeedback' in that specification.
WebGL2RenderingContext.getActiveUniforms() - Web APIs
examples var uniformindices = gl.getuniformindices(program, ['ubored', 'ubogreen', 'uboblue']); var uniformoffsets = gl.getactiveuniforms(program, uniformindices, gl.uniform_offset); specifications specification status
comment webgl 2.0the definition of 'getactiveuniforms' in that specification.
WebGL2RenderingContext.getBufferSubData() - Web APIs
examples var buffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, buffer); gl.bufferdata(gl.array_buffer, new float32array(vertices), gl.static_draw); var arrbuffer = new arraybuffer(vertices.length * float32array.bytes_per_element); gl.getbuffersubdata(gl.array_buffer, 0, arrbuffer); specifications specification status
comment webgl 2.0the definition of 'getbuffersubdata' in that specification.
WebGL2RenderingContext.getQuery() - Web APIs
examples var currentquery = gl.getquery(gl.any_samples_passed, gl.current_query); specifications specification status
comment webgl 2.0the definition of 'getquery' in that specification.
WebGL2RenderingContext.getQueryParameter() - Web APIs
examples var query = gl.createquery(); gl.beginquery(gl.any_samples_passed, query); var result = gl.getqueryparameter(query, gl.query_result); specifications specification status
comment webgl 2.0the definition of 'getqueryparameter' in that specification.
WebGL2RenderingContext.getSyncParameter() - Web APIs
examples var sync = gl.fencesync(gl.sync_gpu_commands_complete, 0); gl.getsyncparameter(sync, gl.sync_status); specifications specification status
comment webgl 2.0the definition of 'getsyncparameter' in that specification.
WebGL2RenderingContext.getUniformBlockIndex() - Web APIs
examples // assuming a shader with the following declaration: // uniform ubodata { // mat4 foo; // } instancename; // use the block name, not the instance name: var blockindex = gl.getuniformblockindex(program, 'ubodata'); specifications specification status
comment webgl 2.0the definition of 'getuniformblockindex' in that specification.
WebGL2RenderingContext.invalidateSubFramebuffer() - Web APIs
examples gl.invalidatesubframebuffer(gl.read_framebuffer, [gl.color_attachment0, gl.color_attachment1], 0, 0, 256, 256); specifications specification status
comment webgl 2.0the definition of 'invalidatesubframebuffer' in that specification.
WebGL2RenderingContext.texImage3D() - Web APIs
// height 1, // depth 0, // border gl.rgba, // format gl.unsigned_byte, // type new uint8array([0xff, 0x00, 0x00, 0x00])); // data specifications specification status
comment webgl 2.0the definition of 'teximage3d' in that specification.
WebGL2RenderingContext.texSubImage3D() - Web APIs
examples gl.texsubimage3d(gl.texture_3d, 0, 0, 0, 0, image.width, image.height, 1, gl.rgba, gl.unsigned_byte, image); specifications specification status
comment webgl 2.0the definition of 'texsubimage3d' in that specification.
WebGL2RenderingContext.transformFeedbackVaryings() - Web APIs
xamples var transformfeedback = gl.createtransformfeedback(); gl.bindtransformfeedback(gl.transform_feedback, transformfeedback); var transformfeedbackoutputs = ['gl_position', 'anotheroutput']; gl.transformfeedbackvaryings(shaderprog, transformfeedbackoutputs, gl.interleaved_attribs); gl.linkprogram(shaderprog); specifications specification status
comment webgl 2.0the definition of 'transformfeedbackvaryings' in that specification.
WebGL2RenderingContext.vertexAttribIPointer() - Web APIs
edposition = bones[boneindices.s] * vec4(position, 1.0) * boneweights.s + bones[boneindices.t] * vec4(position, 1.0) * boneweights.t + bones[boneindices.p] * vec4(position, 1.0) * boneweights.p + bones[boneindices.q] * vec4(position, 1.0) * boneweights.q; gl_position = mvmatrix * skinnedposition; } </script> specifications specification status
comment webgl 2.0the definition of 'vertexattribipointer' in that specification.
WebGL2RenderingContext.waitSync() - Web APIs
examples var sync = gl.fencesync(gl.sync_gpu_commands_complete, 0); gl.waitsync(sync, 0, gl.timeout_ignored); specifications specification status
comment webgl 2.0the definition of 'waitsync' in that specification.
WebGLActiveInfo.name - Web APIs
examples var activeattrib = gl.getactiveattrib(program, index); activeattrib.name; var activeuniform = gl.getactiveuniform(program, index); activeuniform.name; specifications specification status
comment webgl 1.0the definition of 'webglactiveinfo.name' in that specification.
WebGLActiveInfo.size - Web APIs
examples var activeattrib = gl.getactiveattrib(program, index); activeattrib.size; var activeuniform = gl.getactiveuniform(program, index); activeuniform.size; specifications specification status
comment webgl 1.0the definition of 'webglactiveinfo.size' in that specification.
WebGLActiveInfo.type - Web APIs
examples var activeattrib = gl.getactiveattrib(program, index); activeattrib.type; var activeuniform = gl.getactiveuniform(program, index); activeuniform.type; specifications specification status
comment webgl 1.0the definition of 'webglactiveinfo.type' in that specification.
WebGLActiveInfo - Web APIs
program, gluint index) specifications specification status
comment webgl 1.0the definition of 'webglactiveinfo' in that specification.
WebGLBuffer - Web APIs
methods of the webglrenderingcontext are useful: webglrenderingcontext.bindbuffer() webglrenderingcontext.createbuffer() webglrenderingcontext.deletebuffer() webglrenderingcontext.isbuffer() examples creating a buffer var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var buffer = gl.createbuffer(); specifications specification status
comment webgl 1.0the definition of 'webglbuffer' in that specification.
WebGLContextEvent.statusMessage - Web APIs
var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); canvas.addeventlistener('webglcontextcreationerror', function(e) { console.log('webgl context creation failed:' + e.statusmessage || 'unknown error'); }, false); specifications specification status
comment webgl 1.0the definition of 'webglcontextevent.statusmessage' in that specification.
WebGLContextEvent - Web APIs
specifications specification status
comment webgl 1.0the definition of 'webglcontextevent' in that specification.
WebGLFramebuffer - Web APIs
ontext are useful: webglrenderingcontext.bindframebuffer() webglrenderingcontext.createframebuffer() webglrenderingcontext.deleteframebuffer() webglrenderingcontext.isframebuffer() examples creating a frame buffer var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var buffer = gl.createframebuffer(); specifications specification status
comment webgl 1.0the definition of 'webglframebuffer' in that specification.
WebGLProgram - Web APIs
gl.deleteprogram(program); specifications specification status
comment webgl 1.0the definition of 'webglprogram' in that specification.
WebGLQuery - Web APIs
var query = gl.createquery(); specifications specification status
comment webgl 2.0the definition of 'webglquery' in that specification.
WebGLRenderbuffer - Web APIs
are useful: webglrenderingcontext.bindrenderbuffer() webglrenderingcontext.createrenderbuffer() webglrenderingcontext.deleterenderbuffer() webglrenderingcontext.isrenderbuffer() examples creating a render buffer var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var buffer = gl.createrenderbuffer(); specifications specification status
comment webgl 1.0the definition of 'webglrenderbuffer' in that specification.
WebGLRenderingContext.activeTexture() - Web APIs
gl.activetexture(gl.texture0); gl.getparameter(gl.active_texture); // returns "33984" (0x84c0, gl.texture0 enum value) specifications specification status
comment webgl 1.0the definition of 'activetexture' in that specification.
WebGLRenderingContext.bindBuffer() - Web APIs
gl.getparameter(gl.array_buffer_binding); gl.getparameter(gl.element_array_buffer_binding); specifications specification status
comment webgl 1.0the definition of 'bindbuffer' in that specification.
WebGLRenderingContext.blendEquation() - Web APIs
gl.getparameter(gl.blend_equation_rgb) === gl.func_add; // true gl.getparameter(gl.blend_equation_alpha) === gl.func_add; // true specifications specification status
comment webgl 1.0the definition of 'blendequation' in that specification.
WebGLRenderingContext.blendEquationSeparate() - Web APIs
gl.getparameter(gl.blend_equation_rgb) === gl.func_add; // true gl.getparameter(gl.blend_equation_alpha) === gl.func_add; // true specifications specification status
comment webgl 1.0the definition of 'blendequationseparate' in that specification.
WebGLRenderingContext.blendFunc() - Web APIs
gl.enable(gl.blend); gl.blendfunc(gl.src_color, gl.dst_color); gl.getparameter(gl.blend_src_rgb) == gl.src_color; // true specifications specification status
comment webgl 1.0the definition of 'blendfunc' in that specification.
WebGLRenderingContext.blendFuncSeparate() - Web APIs
gl.enable(gl.blend); gl.blendfuncseparate(gl.src_color, gl.dst_color, gl.one, gl.zero); gl.getparameter(gl.blend_src_rgb) == gl.src_color; // true specifications specification status
comment webgl 1.0the definition of 'blendfunc' in that specification.
WebGLRenderingContext.bufferData() - Web APIs
var dataarray = new float32array([1, 2, 3, 4]); var sizeinbytes = dataarray.length * dataarray.bytes_per_element; specifications specification status
comment webgl 1.0the definition of 'bufferdata' in that specification.
WebGLRenderingContext.bufferSubData() - Web APIs
examples using buffersubdata var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var buffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, buffer); gl.bufferdata(gl.array_buffer, 1024, gl.static_draw); gl.buffersubdata(gl.array_buffer, 512, data); specifications specification status
comment webgl 1.0the definition of 'buffersubdata' in that specification.
WebGLRenderingContext.canvas - Web APIs
var offscreen = new offscreencanvas(256, 256); var gl = offscreen.getcontext('webgl'); gl.canvas; // offscreencanvas specifications specification status
comment webgl 1.0the definition of 'webglrenderingcontext.canvas' in that specification.
WebGLRenderingContext.clear() - Web APIs
gl.getparameter(gl.color_clear_value); gl.getparameter(gl.depth_clear_value); gl.getparameter(gl.stencil_clear_value); specifications specification status
comment webgl 1.0the definition of 'clear' in that specification.
WebGLRenderingContext.commit() - Web APIs
// push frames back to the original htmlcanvaselement gl.commit(); specifications specification status
comment html living standardthe definition of 'the commit() method of the offscreencanvas object's rendering context' in that specification.
WebGLRenderingContext.compileShader() - Web APIs
examples var shader = gl.createshader(gl.vertex_shader); gl.shadersource(shader, shadersource); gl.compileshader(shader); specifications specification status
comment webgl 1.0the definition of 'compileshader' in that specification.
WebGLRenderingContext.compressedTexImage[23]D() - Web APIs
bgl_compressed_texture_s3tc') ); var texture = gl.createtexture(); gl.bindtexture(gl.texture_2d, texture); gl.compressedteximage2d(gl.texture_2d, 0, ext.compressed_rgba_s3tc_dxt5_ext, 512, 512, 0, texturedata); gl.texparameteri(gl.texture_2d, gl.texture_mag_filter, gl.linear); gl.texparameteri(gl.texture_2d, gl.texture_min_filter, gl.linear); specifications specification status
comment webgl 1.0the definition of 'compressedteximage2d' in that specification.
WebGLRenderingContext.compressedTexSubImage2D() - Web APIs
examples var ext = ( gl.getextension('webgl_compressed_texture_s3tc') || gl.getextension('moz_webgl_compressed_texture_s3tc') || gl.getextension('webkit_webgl_compressed_texture_s3tc') ); gl.compressedtexsubimage2d(gl.texture_2d, 0, 256, 256, 512, 512, ext.compressed_rgba_s3tc_dxt5_ext, texturedata); specifications specification status
comment webgl 1.0the definition of 'compressedtexsubimage2d' in that specification.
WebGLRenderingContext.createBuffer() - Web APIs
examples creating a buffer var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var buffer = gl.createbuffer(); specifications specification status
comment webgl 1.0the definition of 'createbuffer' in that specification.
WebGLRenderingContext.createFramebuffer() - Web APIs
examples creating a frame buffer var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var framebuffer = gl.createframebuffer(); specifications specification status
comment webgl 1.0the definition of 'createframebuffer' in that specification.
WebGLRenderingContext.createRenderbuffer() - Web APIs
examples creating a render buffer var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var renderbuffer = gl.createrenderbuffer(); specifications specification status
comment webgl 1.0the definition of 'createrenderbuffer' in that specification.
WebGLRenderingContext.createTexture() - Web APIs
creating a texture var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var texture = gl.createtexture(); specifications specification status
comment webgl 1.0the definition of 'createtexture' in that specification.
WebGLRenderingContext.depthRange() - Web APIs
examples gl.depthrange(0.2, 0.6); to check the current depth range, query the depth_range constant which returns a float32array gl.getparameter(gl.depth_range); // float32array[0.2, 0.6] specifications specification status
comment webgl 1.0the definition of 'depthrange' in that specification.
WebGLRenderingContext.disable() - Web APIs
examples gl.disable(gl.dither); to check if a capability is disabled, use the webglrenderingcontext.isenabled() method: gl.isenabled(gl.dither); // false specifications specification status
comment webgl 1.0the definition of 'disable' in that specification.
WebGLRenderingContext.drawingBufferHeight - Web APIs
syntax gl.drawingbufferheight; examples given this <canvas> element: <canvas id="canvas"></canvas> you can get the height of the drawing buffer with the following lines: var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); gl.drawingbufferheight; // 150 specifications specification status
comment webgl 1.0the definition of 'webglrenderingcontext.drawingbufferheight' in that specification.
WebGLRenderingContext.drawingBufferWidth - Web APIs
syntax gl.drawingbufferwidth; examples given this <canvas> element: <canvas id="canvas"></canvas> you can get the width of the drawing buffer with the following lines: var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); gl.drawingbufferwidth; // 300 specifications specification status
comment webgl 1.0the definition of 'webglrenderingcontext.drawingbufferwidth' in that specification.
WebGLRenderingContext.enable() - Web APIs
examples gl.enable(gl.dither); to check if a capability is enabled, use the webglrenderingcontext.isenabled() method: gl.isenabled(gl.dither); // true specifications specification status
comment webgl 1.0the definition of 'enable' in that specification.
WebGLRenderingContext.getActiveAttrib() - Web APIs
examples const numattribs = gl.getprogramparameter(program, gl.active_attributes); for (let i = 0; i < numattribs; ++i) { const info = gl.getactiveattrib(program, i); console.log('name:', info.name, 'type:', info.type, 'size:', info.size); } specifications specification status
comment webgl 1.0the definition of 'getactiveattrib' in that specification.
WebGLRenderingContext.getActiveUniform() - Web APIs
examples const numuniforms = gl.getprogramparameter(program, gl.active_uniforms); for (let i = 0; i < numuniforms; ++i) { const info = gl.getactiveuniform(program, i); console.log('name:', info.name, 'type:', info.type, 'size:', info.size); } specifications specification status
comment webgl 1.0the definition of 'getactiveuniform' in that specification.
WebGLRenderingContext.getAttachedShaders() - Web APIs
examples var program = gl.createprogram(); // attach pre-existing shaders gl.attachshader(program, vertexshader); gl.attachshader(program, fragmentshader); gl.linkprogram(program); gl.getattachedshaders(program); specifications specification status
comment webgl 1.0the definition of 'getattachedshaders' in that specification.
WebGLRenderingContext.getError() - Web APIs
examples gl.geterror(); // gl.no_error (0) gl.enable(gl.foobar); gl.geterror(); // gl.invalid_enum; specifications specification status
comment webgl 1.0the definition of 'geterror' in that specification.
WebGLRenderingContext.getExtension() - Web APIs
r_buffer_float webgl_compressed_texture_astc webgl_compressed_texture_atc webgl_compressed_texture_etc webgl_compressed_texture_etc1 webgl_compressed_texture_pvrtc webgl_compressed_texture_s3tc webgl_compressed_texture_s3tc_srgb webgl_debug_renderer_info webgl_debug_shaders webgl_depth_texture webgl_draw_buffers webgl_lose_context specifications specification status
comment webgl 1.0the definition of 'webglrenderingcontext.getextension' in that specification.
WebGLRenderingContext.getParameter() - Web APIs
examples gl.getparameter(gl.dither); gl.getparameter(gl.version); gl.getparameter(gl.viewport); specifications specification status
comment webgl 1.0the definition of 'getparameter' in that specification.
WebGLRenderingContext.getProgramInfoLog() - Web APIs
examples checking program errors var program = gl.createprogram(); // attach pre-existing shaders gl.attachshader(program, vertexshader); gl.attachshader(program, fragmentshader); gl.linkprogram(program); gl.getprograminfolog(program); specifications specification status
comment webgl 1.0the definition of 'getprograminfolog' in that specification.
WebGLRenderingContext.getShaderInfoLog() - Web APIs
*/ gl.compileshader(shader); var message = gl.getshaderinfolog(shader); if (message.length > 0) { /* message may be an error or a warning */ throw message; } specifications specification status
comment webgl 1.0the definition of 'getshaderinfolog' in that specification.
WebGLRenderingContext.getShaderPrecisionFormat() - Web APIs
var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); gl.getshaderprecisionformat(gl.vertex_shader, gl.medium_float); // webglshaderprecisionformat { rangemin: 127, rangemax: 127, precision: 23 } specifications specification status
comment webgl 1.0the definition of 'getshaderprecisionformat' in that specification.
WebGLRenderingContext.getShaderSource() - Web APIs
examples var shader = gl.createshader(gl.vertex_shader); gl.shadersource(shader, originalsource); var source = gl.getshadersource(shader); specifications specification status
comment webgl 1.0the definition of 'getshadersource' in that specification.
WebGLRenderingContext.getSupportedExtensions() - Web APIs
r_buffer_float webgl_compressed_texture_astc webgl_compressed_texture_atc webgl_compressed_texture_etc webgl_compressed_texture_etc1 webgl_compressed_texture_pvrtc webgl_compressed_texture_s3tc webgl_compressed_texture_s3tc_srgb webgl_debug_renderer_info webgl_debug_shaders webgl_depth_texture webgl_draw_buffers webgl_lose_context specifications specification status
comment webgl 1.0the definition of 'webglrenderingcontext.getsupportedextensions' in that specification.
WebGLRenderingContext.getUniform() - Web APIs
lements) mat3x2 float32array (with 6 elements) mat3x4 float32array (with 12 elements) mat4x2 float32array (with 8 elements) mat4x3 float32array (with 12 elements) any sampler type glint examples var loc = gl.getuniformlocation(program, 'u_foobar'); gl.getuniform(program, loc); specifications specification status
comment webgl 1.0the definition of 'getuniform' in that specification.
WebGLRenderingContext.isBuffer() - Web APIs
examples creating a buffer var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var buffer = gl.createbuffer(); gl.isbuffer(buffer); specifications specification status
comment webgl 1.0the definition of 'isbuffer' in that specification.
WebGLRenderingContext.isContextLost() - Web APIs
examples for example, when checking for program linking success, you could also check if the context is not lost: gl.linkprogram(program); if (!gl.getprogramparameter(program, gl.link_status) && !gl.iscontextlost()) { var info = gl.getprograminfolog(program); console.log('error linking program:\n' + info); } specifications specification status
comment webgl 1.0the definition of 'webglrenderingcontext.iscontextlost' in that specification.
WebGLRenderingContext.isEnabled() - Web APIs
examples gl.isenabled(gl.stencil_test); // false to activate or deactivate a specific capability, use the webglrenderingcontext.enable() and webglrenderingcontext.disable() methods: gl.enable(gl.stencil_test); gl.disable(gl.stencil_test); specifications specification status
comment webgl 1.0the definition of 'isenabled' in that specification.
WebGLRenderingContext.isFramebuffer() - Web APIs
examples checking a frame buffer var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var framebuffer = gl.createframebuffer(); gl.isframebuffer(framebuffer); specifications specification status
comment webgl 1.0the definition of 'isframebuffer' in that specification.
WebGLRenderingContext.isRenderbuffer() - Web APIs
examples checking a renderbuffer var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var renderbuffer = gl.createrenderbuffer(); gl.isrenderbuffer(renderbuffer); specifications specification status
comment webgl 1.0the definition of 'isrenderbuffer' in that specification.
WebGLRenderingContext.isTexture() - Web APIs
examples checking a texture var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var texture = gl.createtexture(); gl.istexture(texture); specifications specification status
comment webgl 1.0the definition of 'istexture' in that specification.
WebGLRenderingContext.polygonOffset() - Web APIs
gl.getparameter(gl.polygon_offset_factor); // 2 gl.getparameter(gl.polygon_offset_units); // 3 specifications specification status
comment webgl 1.0the definition of 'polygonoffset' in that specification.
WebGLRenderingContext.readPixels() - Web APIs
examples var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var pixels = new uint8array(gl.drawingbufferwidth * gl.drawingbufferheight * 4); gl.readpixels(0, 0, gl.drawingbufferwidth, gl.drawingbufferheight, gl.rgba, gl.unsigned_byte, pixels); console.log(pixels); // uint8array specifications specification status
comment webgl 1.0the definition of 'readpixels' in that specification.
WebGLRenderingContext.sampleCoverage() - Web APIs
gl.getparameter(gl.sample_coverage_value); // 0.5 gl.getparameter(gl.sample_coverage_invert); // false specifications specification status
comment webgl 1.0the definition of 'samplecoverage' in that specification.
WebGLRenderingContext.scissor() - Web APIs
gl.scissor(0, 0, 200, 200); gl.getparameter(gl.scissor_box); // int32array[0, 0, 200, 200] specifications specification status
comment webgl 1.0the definition of 'scissor' in that specification.
WebGLRenderingContext.shaderSource() - Web APIs
examples var shader = gl.createshader(gl.vertex_shader); gl.shadersource(shader, originalsource); var source = gl.getshadersource(shader); specifications specification status
comment webgl 1.0the definition of 'shadersource' in that specification.
WebGLRenderingContext.stencilFunc() - Web APIs
gl.getparameter(gl.stencil_func); gl.getparameter(gl.stencil_value_mask); gl.getparameter(gl.stencil_ref); gl.getparameter(gl.stencil_back_func); gl.getparameter(gl.stencil_back_value_mask); gl.getparameter(gl.stencil_back_ref); gl.getparameter(gl.stencil_bits); specifications specification status
comment webgl 1.0the definition of 'stencilfunc' in that specification.
WebGLRenderingContext.stencilFuncSeparate() - Web APIs
gl.getparameter(gl.stencil_func); gl.getparameter(gl.stencil_value_mask); gl.getparameter(gl.stencil_ref); gl.getparameter(gl.stencil_back_func); gl.getparameter(gl.stencil_back_value_mask); gl.getparameter(gl.stencil_back_ref); gl.getparameter(gl.stencil_bits); specifications specification status
comment webgl 1.0the definition of 'stencilfuncseparate' in that specification.
WebGLRenderingContext.stencilMask() - Web APIs
gl.getparameter(gl.stencil_writemask); // 110101 gl.getparameter(gl.stencil_back_writemask); // 110101 gl.getparameter(gl.stencil_bits); // 0 specifications specification status
comment webgl 1.0the definition of 'stencilmask' in that specification.
WebGLRenderingContext.stencilMaskSeparate() - Web APIs
gl.getparameter(gl.stencil_writemask); // 110101 gl.getparameter(gl.stencil_back_writemask); // 110101 gl.getparameter(gl.stencil_bits); // 0 specifications specification status
comment webgl 1.0the definition of 'stencilmaskseparate' in that specification.
WebGLRenderingContext.stencilOp() - Web APIs
gl.getparameter(gl.stencil_fail); gl.getparameter(gl.stencil_pass_depth_pass); gl.getparameter(gl.stencil_pass_depth_fail); gl.getparameter(gl.stencil_back_fail); gl.getparameter(gl.stencil_back_pass_depth_pass); gl.getparameter(gl.stencil_back_pass_depth_fail); gl.getparameter(gl.stencil_bits); specifications specification status
comment webgl 1.0the definition of 'stencilop' in that specification.
WebGLRenderingContext.stencilOpSeparate() - Web APIs
gl.getparameter(gl.stencil_fail); gl.getparameter(gl.stencil_pass_depth_pass); gl.getparameter(gl.stencil_pass_depth_fail); gl.getparameter(gl.stencil_back_fail); gl.getparameter(gl.stencil_back_pass_depth_pass); gl.getparameter(gl.stencil_back_pass_depth_fail); gl.getparameter(gl.stencil_bits); specifications specification status
comment webgl 1.0the definition of 'stencilopseparate' in that specification.
WebGLRenderingContext.texImage2D() - Web APIs
examples gl.teximage2d(gl.texture_2d, 0, gl.rgba, gl.rgba, gl.unsigned_byte, image); specifications specification status
comment webgl 1.0the definition of 'teximage2d' in that specification.
WebGLRenderingContext.texParameter[fi]() - Web APIs
examples gl.texparameterf(gl.texture_2d, gl.texture_mag_filter, gl.linear); gl.texparameteri(gl.texture_2d, gl.texture_min_filter, gl.linear_mipmap_nearest); specifications specification status
comment webgl 1.0the definition of 'texparameter[fi]' in that specification.
WebGLRenderingContext.texSubImage2D() - Web APIs
examples gl.texsubimage2d(gl.texture_2d, 0, 0, 0, gl.rgba, gl.unsigned_byte, image); specifications specification status
comment webgl 1.0the definition of 'texsubimage2d' in that specification.
WebGLRenderingContext.useProgram() - Web APIs
examples var program = gl.createprogram(); // attach pre-existing shaders gl.attachshader(program, vertexshader); gl.attachshader(program, fragmentshader); gl.linkprogram(program); gl.useprogram(program); specifications specification status
comment webgl 1.0the definition of 'useprogram' in that specification.
WebGLRenderingContext.vertexAttrib[1234]f[v]() - Web APIs
atarray); // we want to load the following 3x3 matrix into attribute named "matrix3x3" // 0 1 2 // 3 4 5 // 6 7 8 const matrix3x3location = gl.getattriblocation(shaderprogram, 'matrix3x3'); gl.vertexattrib3f(matrix3x3location, 0, 3, 6); gl.vertexattrib3f(matrix3x3location + 1, 1, 4, 7); gl.vertexattrib3f(matrix3x3location + 2, 2, 5, 8); specifications specification status
comment webgl 1.0the definition of 'vertexattrib' in that specification.
WebGLRenderingContext.vertexAttribPointer() - Web APIs
ition); const locnormal = gl.getattriblocation(shaderprogram, 'normal'); gl.vertexattribpointer(locnormal, 4, gl.byte, true, 20, 12); gl.enablevertexattribarray(locnormal); const loctexuv = gl.getattriblocation(shaderprogram, 'texuv'); gl.vertexattribpointer(loctexuv, 2, gl.unsigned_short, true, 20, 16); gl.enablevertexattribarray(loctexuv); specifications specification status
comment webgl 1.0the definition of 'vertexattribpointer' in that specification.
WebGLSampler - Web APIs
var sampler = gl.createsampler(); specifications specification status
comment webgl 2.0the definition of 'webglsample' in that specification.
WebGLShader - Web APIs
vertexshader = createshader(gl, vertexshadersource, gl.vertex_shader) creating a fragment shader var fragmentshadersource = 'void main() {\n' + ' gl_fragcolor = vec4(1.0, 1.0, 1.0, 1.0);\n' + '}\n'; //use the createshader function from the example above var fragmentshader = createshader(gl, fragmentshadersource, gl.fragment_shader) specifications specification status
comment webgl 1.0the definition of 'webglshader' in that specification.
WebGLShaderPrecisionFormat.precision - Web APIs
examples var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); gl.getshaderprecisionformat(gl.vertex_shader, gl.medium_float).precision; // 23 gl.getshaderprecisionformat(gl.fragment_shader, gl.low_int).precision; // 0 specifications specification status
comment webgl 1.0the definition of 'webglshaderprecisionformat.precision' in that specification.
WebGLShaderPrecisionFormat.rangeMax - Web APIs
examples var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); gl.getshaderprecisionformat(gl.vertex_shader, gl.medium_float).rangemax; // 127 gl.getshaderprecisionformat(gl.fragment_shader, gl.low_int).rangemax; // 24 specifications specification status
comment webgl 1.0the definition of 'webglshaderprecisionformat.rangemax' in that specification.
WebGLShaderPrecisionFormat.rangeMin - Web APIs
examples var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); gl.getshaderprecisionformat(gl.vertex_shader, gl.medium_float).rangemin; // 127 gl.getshaderprecisionformat(gl.fragment_shader, gl.low_int).rangemin; // 24 specifications specification status
comment webgl 1.0the definition of 'webglshaderprecisionformat.rangemin' in that specification.
WebGLShaderPrecisionFormat - Web APIs
var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); gl.getshaderprecisionformat(gl.vertex_shader, gl.medium_float); // webglshaderprecisionformat { rangemin: 127, rangemax: 127, precision: 23 } specifications specification status
comment webgl 1.0the definition of 'webglshaderprecisionformat' in that specification.
WebGLSync - Web APIs
var sync = gl.fencesync(gl.sync_gpu_commands_complete, 0); specifications specification status
comment webgl 2.0the definition of 'webglsync' in that specification.
WebGLTexture - Web APIs
s of the webglrenderingcontext are useful: webglrenderingcontext.bindtexture() webglrenderingcontext.createtexture() webglrenderingcontext.deletetexture() webglrenderingcontext.istexture() examples creating a texture var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var texture = gl.createtexture(); specifications specification status
comment webgl 1.0the definition of 'webgltexture' in that specification.
WebGLTransformFeedback - Web APIs
var transformfeedback = gl.createtransformfeedback(); specifications specification status
comment webgl 2.0the definition of 'webgltransformfeedback' in that specification.
WebGLUniformLocation - Web APIs
n objects, the following methods of the webglrenderingcontext are useful: webglrenderingcontext.getuniformlocation() webglrenderingcontext.uniform() examples getting an uniform location var canvas = document.getelementbyid('canvas'); var gl = canvas.getcontext('webgl'); var location = gl.getuniformlocation(webglprogram, 'uniformname'); specifications specification status
comment webgl 1.0the definition of 'webgluniformlocation' in that specification.
WebGL constants - Web APIs
specifications specification status
comment webgl 1.0the definition of 'webglrenderingcontext' in that specification.
WebGL types - Web APIs
specifications specification status
comment webgl 1.0the definition of 'types' in that specification.
WebKitCSSMatrix - Web APIs
specifications specification status
comment geometry interfaces module level 1the definition of 'webkitcssmatrix' in that specification.
WebRTC API - Web APIs
nat (stun) uri scheme for the session traversal utilities for nat (stun) protocol traversal using relays around nat (turn) uniform resource identifiers an offer/answer model with session description protocol (sdp) session traversal utilities for nat (stun) extension for third party authorization webrtc statistics webrtc statistics api specifications specification status
comment webrtc 1.0: real-time communication between browsers candidate recommendation the initial definition of the api of webrtc.
WebRTC Statistics API - Web APIs
rtctransportstats rtcstats specifications specification status
comment identifiers for webrtc's statistics apithe definition of 'webrtc statistics types' in that specification.
WebSocket() - Web APIs
specifications specification status
comment html living standardthe definition of 'the websocket constructor' in that specification.
WebSocket.binaryType - Web APIs
specifications specification status
comment html living standardthe definition of 'websocket: binarytype' in that specification.
WebSocket.close() - Web APIs
specifications specification status
comment html living standard the definition of 'websocket.close()' in that specification.
WebSocket.extensions - Web APIs
specifications specification status
comment html living standardthe definition of 'websocket: extensions' in that specification.
WebSocket.onclose - Web APIs
specifications specification status
comment html living standardthe definition of 'websocket: onclose' in that specification.
WebSocket.onerror - Web APIs
example websocket.onerror = function(event) { console.error("websocket error observed:", event); }; specifications specification status
comment html living standardthe definition of 'websocket: onerror' in that specification.
WebSocket.onmessage - Web APIs
specifications specification status
comment html living standardthe definition of 'websocket: onmessage' in that specification.
WebSocket.onopen - Web APIs
specifications specification status
comment html living standardthe definition of 'websocket: onopen' in that specification.
WebSocket.protocol - Web APIs
specifications specification status
comment html living standardthe definition of 'websocket: protocol' in that specification.
WebSocket.readyState - Web APIs
specifications specification status
comment html living standardthe definition of 'websocket: readystate' in that specification.
WebSocket.send() - Web APIs
specifications specification status
comment html living standardthe definition of 'websocket: send' in that specification.
WebSocket.url - Web APIs
specifications specification status
comment html living standardthe definition of 'websocket: url' in that specification.
Keyframe Formats - Web APIs
specifications specification status
comment web animationsthe definition of 'keyframe object formats' in that specification.
Web Authentication API - Web APIs
webauthn.org and its client source code and server source code specifications specification status
comment web authentication: an api for accessing public key credentials level 1 recommendation initial definition.
Web Crypto API - Web APIs
specifications specification status
comment web cryptography api recommendation initial definition ...
Using Web Workers - Web APIs
specifications specification status
comment html living standardthe definition of 'web workers' in that specification.
Web Workers API - Web APIs
specifications specification status
comment html living standardthe definition of 'web workers' in that specification.
WheelEvent() - Web APIs
specifications specification status
comment document object model (dom) level 3 events specificationthe definition of 'wheelevent()' in that specification.
WheelEvent.deltaMode - Web APIs
syntax var unit = event.deltamode; example var syntheticevent = new wheelevent("syntheticwheel", {"deltax": 4, "deltamode": 0}); console.log(syntheticevent.deltamode); specifications specification status
comment document object model (dom) level 3 events specificationthe definition of 'wheelevent.deltamode' in that specification.
WheelEvent.deltaX - Web APIs
syntax var dx = event.deltax; example var syntheticevent = new wheelevent("syntheticwheel", {"deltax": 4, "deltamode": 0}); console.log(syntheticevent.deltax); specifications specification status
comment document object model (dom) level 3 events specificationthe definition of 'wheelevent.deltax' in that specification.
WheelEvent.deltaY - Web APIs
syntax var dy = event.deltay; example var syntheticevent = new wheelevent("syntheticwheel", {"deltay": 4, "deltamode": 0}); console.log(syntheticevent.deltay); specifications specification status
comment document object model (dom) level 3 events specificationthe definition of 'wheelevent.deltay' in that specification.
WheelEvent.deltaZ - Web APIs
syntax var dz = event.deltaz; example var syntheticevent = new wheelevent("syntheticwheel", {"deltaz": 4, "deltamode": 0}); console.log(syntheticevent.deltaz); specifications specification status
comment document object model (dom) level 3 events specificationthe definition of 'wheelevent.deltaz' in that specification.
WheelEvent - Web APIs
specifications specification status
comment ui eventsthe definition of 'the wheelevent interface' in that specification.
Window.alert() - Web APIs
specification specification status
comment html living standardthe definition of 'alert()' in that specification.
Window: beforeunload event - Web APIs
event.returnvalue = ''; }); specifications specification status
comment html living standardthe definition of 'beforeunload' in that specification.
Window.blur() - Web APIs
specification specification status
comment html living standardthe definition of 'window.blur()' in that specification.
Window: blur event - Web APIs
click outside the document to lose focus.'; } const log = document.getelementbyid('log'); window.addeventlistener('blur', pause); window.addeventlistener('focus', play); result specifications specification status
comment ui events working draft added info that this event is composed.
window.cancelAnimationFrame() - Web APIs
imestamp - start; d.style.left = math.min(progress / 10, 200) + 'px'; if (progress < 2000) { // it's important to update the requestid each time you're calling requestanimationframe myreq = requestanimationframe(step); } } myreq = requestanimationframe(step); // the cancelation uses the last requestid cancelanimationframe(myreq); specifications specification status
comment html living standardthe definition of 'cancelanimationframe()' in that specification.
Window.clearImmediate() - Web APIs
examples let immediateid = setimmediate(() => { // run some code } document.getelementbyid("button") .addeventlistener(() => { clearimmediate(immediateid); }); specifications specification status
comment efficient script yielding the definition of 'setimmediate' in that specification.
Window.close() - Web APIs
(firefox 46.0.1: scripts can not close windows, they had not opened) function closecurrentwindow() { window.close(); } specification specification status
comment html living standardthe definition of 'window.close()' in that specification.
Window.closed - Web APIs
const popupwindow = null; function refreshpopupwindow() { if (popupwindow && !popupwindow.closed) { // popupwindow is open, refresh it popupwindow.location.reload(true); } else { // open a new popup window popupwindow = window.open('popup.html', 'datawindow'); } } specification specification status
comment html living standardthe definition of 'window.closed' in that specification.
Window.confirm() - Web APIs
specification specification status
comment html living standardthe definition of 'confirm()' in that specification.
Window.crypto - Web APIs
var randtext = document.getelementbyid("myrandtext"); randtext.innerhtml = "the random numbers are: " for (var i = 0; i < array.length; i++) { randtext.innerhtml += array[i] + " "; } } html <p id="myrandtext">the random numbers are: </p> <button type="button" onclick='genrandomnumbers()'>generate 10 random numbers</button> result specifications specification status
comment web cryptography apithe definition of 'window.crypto' in that specification.
Window.customElements - Web APIs
specification specification status
comment html living standardthe definition of 'window.customelements' in that specification.
Window.devicePixelRatio - Web APIs
2em; height: 14em; border: 2px solid #22d; margin: 0 auto; padding: 0; background-color: #a9f; } .inner-container { padding: 1em 2em; text-align: justify; text-justify: auto; } .pixel-ratio { position: relative; margin: auto; height: 1.2em; text-align: right; bottom: 0; right: 1em; font-weight: bold; } result specifications specification status
comment css object model (cssom) view modulethe definition of 'window.devicepixelratio' in that specification.
Window.document - Web APIs
example console.log(window.document.title); specifications specification status
comment html living standardthe definition of 'window.document' in that specification.
Window.event - Web APIs
specifications specification status
comment domthe definition of 'window.event' in that specification.
Window.focus() - Web APIs
syntax window.focus() example if (clicked) { window.focus(); } specification specification status
comment html living standardthe definition of 'window.focus()' in that specification.
Window: focus event - Web APIs
click outside the document to lose focus.'; } const log = document.getelementbyid('log'); window.addeventlistener('blur', pause); window.addeventlistener('focus', play); result specifications specification status
comment ui events working draft added info that this event is composed.
Window.frameElement - Web APIs
example const frameel = window.frameelement; // if we're embedded, change the containing element's url to 'http://mozilla.org/' if (frameel) { frameel.src = 'http://mozilla.org/'; } specifications specification status
comment html living standardthe definition of 'window.frameelement' in that specification.
Window.frames - Web APIs
example var frames = window.frames; // or // var frames = window.parent.frames; for (var i = 0; i < frames.length; i++) { // do something with each subframe as frames[i] frames[i].document.body.style.background = "red"; } specifications specification status
comment html living standardthe definition of 'window.frames' in that specification.
Window: hashchange event - Web APIs
listener method: window.addeventlistener('hashchange', function() { console.log('the hash has changed!') }, false); or use the onhashchange event handler property: function locationhashchanged() { if (location.hash === '#cool-feature') { console.log("you're visiting a cool feature!"); } } window.onhashchange = locationhashchanged; specifications specification status
comment html living standardthe definition of 'hashchange' in that specification.
Window.history - Web APIs
specifications specification status
comment html living standardthe definition of 'the history interface' in that specification.
Window.innerHeight - Web APIs
specification specification status
comment css object model (cssom) view modulethe definition of 'window.innerheight' in that specification.
Window.innerWidth - Web APIs
nerwidth; // this will return the width of the frame viewport within a frameset var intframewidth = self.innerwidth; // this will return the width of the viewport of the closest frameset var intframesetwidth = parent.innerwidth; // this will return the width of the viewport of the outermost frameset var intouterframesetwidth = top.innerwidth; specification specification status
comment css object model (cssom) view modulethe definition of 'window.innerwidth' in that specification.
Window.length - Web APIs
example if (window.length) { // this is a document with subframes } specifications specification status
comment html living standardthe definition of 'window.length' in that specification.
Window: load event - Web APIs
vent) => { log.textcontent = log.textcontent + 'load\n'; }); document.addeventlistener('readystatechange', (event) => { log.textcontent = log.textcontent + `readystate: ${document.readystate}\n`; }); document.addeventlistener('domcontentloaded', (event) => { log.textcontent = log.textcontent + `domcontentloaded\n`; }); result specifications specification status
comment ui eventsthe definition of 'load' in that specification.
Window.localStorage - Web APIs
specifications specification status
comment html living standardthe definition of 'localstorage' in that specification.
window.location - Web APIs
okmark); _scrolly = document.documentelement.scrolltop; _scrollx = document.documentelement.scrollleft; _bookmark = sbookmark; _usehash = busehash === true; _nodex = onode.offsetleft; _nodey = onode.offsettop; _itframe = 1; if (_scrollid === -1) { _scrollid = setinterval(_next, math.round(nduration / nframes)); } }; })(); specifications specification status
comment html living standardthe definition of 'window.location' in that specification.
Window.locationbar - Web APIs
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>various dom tests</title> <script> var visible = window.locationbar.visible; </script> </head> <body> <p>various dom tests</p> </body> </html> specifications specification status
comment html living standardthe definition of 'window.locationbar' in that specification.
Window.matchMedia() - Web APIs
specifications specification status
comment css object model (cssom) view modulethe definition of 'window.matchmedia()' in that specification.
Window.menubar - Web APIs
<html> <head> <title>various dom tests</title> <script> var visible = window.menubar.visible; </script> </head> <body> <p>various dom tests</p> </body> </html> specifications specification status
comment html living standardthe definition of 'window.menubar' in that specification.
Window.moveBy() - Web APIs
function budge() { moveby(10, -10); } specification specification status
comment css object model (cssom) view modulethe definition of 'window.moveby()' in that specification.
Window.moveTo() - Web APIs
function origin() { window.moveto(0, 0); } specification specification status
comment css object model (cssom) view modulethe definition of 'window.moveto()' in that specification.
Window.name - Web APIs
specifications specification status
comment html living standardthe definition of 'window.name' in that specification.
Window.navigator - Web APIs
.0.3359.181 chrome/66.0.3359.181 safari/537.36" } else if (susrag.indexof("safari") > -1) { sbrowser = "apple safari"; // "mozilla/5.0 (iphone; cpu iphone os 11_4 like mac os x) applewebkit/605.1.15 (khtml, like gecko) version/11.0 mobile/15e148 safari/604.1 980x1306" } else { sbrowser = "unknown"; } alert("you are using: " + sbrowser); specifications specification status
comment html living standardthe definition of 'window: navigator' in that specification.
Window.ongamepadconnected - Web APIs
}; examples window.ongamepadconnected = function(event) { // all buttons and axes values can be accessed through event.gamepad; }; specifications specification status
comment gamepadthe definition of 'gamepadconnected event' in that specification.
Window.ongamepaddisconnected - Web APIs
}; examples window.ongamepaddisconnected = function() { // a gamepad has been disconnected }; specifications specification status
comment gamepadthe definition of 'gamepaddisconnected event' in that specification.
Window.open() - Web APIs
specification specification status
comment html living standardthe definition of 'window.open()' in that specification.
Window.opener - Web APIs
specifications specification status
comment html living standardthe definition of 'window.opener' in that specification.
Window.orientation - Web APIs
specifications specification status
comment compatibility standardthe definition of 'window.orientation' in that specification.
Window.outerHeight - Web APIs
specification specification status
comment css object model (cssom) view modulethe definition of 'window.outerheight' in that specification.
Window.outerWidth - Web APIs
specification specification status
comment css object model (cssom) view modulethe definition of 'window.outerwidth' in that specification.
Window.pageXOffset - Web APIs
specification specification status
comment css object model (cssom) view modulethe definition of 'window.pagexoffset' in that specification.
Window.pageYOffset - Web APIs
specification specification status
comment css object model (cssom) view modulethe definition of 'window.pageyoffset' in that specification.
Window: pagehide event - Web APIs
agehide", event => { if (event.persisted) { /* the page isn't being discarded, so it can be reused later */ } }, false); this can also be written using the onpagehide event handler property on the window: window.onpagehide = event => { if (event.persisted) { /* the page isn't being discarded, so it can be reused later */ } } specifications specification status
comment html living standardthe definition of 'pagehide' in that specification.
Window: pageshow event - Web APIs
try loading new pages into this tab, then navigating forward and backward through history, noting the events’ output to the log.</p> results specifications specification status
comment html living standardthe definition of 'pageshow' in that specification.
Window.parent - Web APIs
syntax var parentwindow = window.parent; example if (window.parent != window.top) { // we're deeper than one down } specifications specification status
comment html living standardthe definition of 'window.parent' in that specification.
Window.performance - Web APIs
specifications specification status
comment high resolution timethe definition of 'window.performance' in that specification.
Window.personalbar - Web APIs
specifications specification status
comment html living standardthe definition of 'window.personalbar' in that specification.
Window.print() - Web APIs
syntax window.print() specification specification status
comment html living standardthe definition of 'print()' in that specification.
Window.prompt() - Web APIs
const anumber = number(window.prompt("type a number", "")); specification specification status
comment html living standardthe definition of 'prompt()' in that specification.
Window: rejectionhandled event - Web APIs
jectionevent event handler property onrejectionhandled example you can use the rejectionhandled event to log promises that get rejected to the console, along with the reasons why they were rejected: window.addeventlistener("rejectionhandled", event => { console.log("promise rejected; reason: " + event.reason); }, false); specifications specification status
comment html living standardthe definition of 'rejectionhandled' in that specification.
Window.requestFileSystem() - Web APIs
return value undefined example specifications specification status
comment file and directory entries api draft draft of proposed api this api has no official w3c or whatwg specification.
Window.resizeBy() - Web APIs
specifications specification status
comment css object model (cssom) view modulethe definition of 'window.resizeby()' in that specification.
Window.resizeTo() - Web APIs
function quarter() { window.resizeto( window.screen.availwidth / 2, window.screen.availheight / 2 ); } specification specification status
comment css object model (cssom) view modulethe definition of 'window.resizeto()' in that specification.
Window.screen - Web APIs
syntax let screenobj = window.screen; example if (screen.pixeldepth < 8) { // use low-color version of page } else { // use regular, colorful page } specifications specification status
comment css object model (cssom) view modulethe definition of 'window.screen' in that specification.
Window.screenLeft - Web APIs
if(!window.screenleft) { window.screenleft = window.screenx; window.screentop = window.screeny; } specifications specification status
comment css object model (cssom) view modulethe definition of 'window.screenleft' in that specification.
Window.screenTop - Web APIs
if(!window.screenleft) { window.screenleft = window.screenx; window.screentop = window.screeny; } specifications specification status
comment css object model (cssom) view modulethe definition of 'window.screentop' in that specification.
Window.screenX - Web APIs
if(!window.screenleft) { window.screenleft = window.screenx; window.screentop = window.screeny; } specifications specification status
comment css object model (cssom) view modulethe definition of 'window.screenx' in that specification.
Window.screenY - Web APIs
if(!window.screenleft) { window.screenleft = window.screenx; window.screentop = window.screeny; } specifications specification status
comment css object model (cssom) view modulethe definition of 'window.screeny' in that specification.
Window.scroll() - Web APIs
specification specification status
comment css object model (cssom) view modulethe definition of 'window.scroll()' in that specification.
Window.scrollBy() - Web APIs
specification specification status
comment css object model (cssom) view modulethe definition of 'window.scrollby()' in that specification.
Window.scrollTo() - Web APIs
specifications specification status
comment css object model (cssom) view modulethe definition of 'window.scroll()' in that specification.
Window.scrollX - Web APIs
window.pageyoffset : (document.documentelement || document.body.parentnode || document.body).scrolltop; specification specification status
comment css object model (cssom) view modulethe definition of 'window.scrollx' in that specification.
Window.scrollY - Web APIs
document.documentelement.scrolltop : document.body.scrolltop; specification specification status
comment css object model (cssom) view modulethe definition of 'window.scrolly' in that specification.
Window.scrollbars - Web APIs
<!doctype html> <html> <head> <title>various dom tests</title> <script> let visiblescrollbars = window.scrollbars.visible; </script> </head> <body> <p>various dom tests</p> </body> </html> specifications specification status
comment html living standardthe definition of 'window.scrollbars' in that specification.
Window.self - Web APIs
rame in the list } furthermore, when executing in the active document of a browsing context, window is a reference to the current global object and thus all of the following are equivalent: var w1 = window; var w2 = self; var w3 = window.window; var w4 = window.self; // w1, w2, w3, w4 all strictly equal, but only w2 will function in workers specifications specification status
comment html living standardthe definition of 'window.self' in that specification.
Window.speechSynthesis - Web APIs
event.preventdefault(); var utterthis = new speechsynthesisutterance(inputtxt.value); var selectedoption = voiceselect.selectedoptions[0].getattribute('data-name'); for(i = 0; i < voices.length ; i++) { if(voices[i].name === selectedoption) { utterthis.voice = voices[i]; } } synth.speak(utterthis); inputtxt.blur(); } specifications specification status
comment web speech apithe definition of 'speechsynthesis' in that specification.
Window.status - Web APIs
syntax window.status = string; var value = window.status; specifications specification status
comment html living standardthe definition of 'window.status' in that specification.
Window.statusbar - Web APIs
specifications specification status
comment html living standardthe definition of 'window.statusbar' in that specification.
Window.stop() - Web APIs
syntax window.stop() example window.stop(); specification specification status
comment html living standardthe definition of 'window.stop()' in that specification.
Window.toolbar - Web APIs
see also: window.locationbar, window.menubar, window.personalbar, window.scrollbars, window.statusbar specifications specification status
comment html living standardthe definition of 'window.toolbar' in that specification.
Window.top - Web APIs
specifications specification status
comment html living standardthe definition of 'window.top' in that specification.
Window: unhandledrejection event - Web APIs
// prevent the default handling (such as outputting the // error to the console) event.preventdefault(); }); specifications specification status
comment html living standardthe definition of 'unhandledrejection' in that specification.
Window.window - Web APIs
specifications specification status
comment html living standardthe definition of 'window.window' in that specification.
WindowClient.focus() - Web APIs
if it is event.waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) return client.focus(); } if (clients.openwindow) return clients.openwindow('/'); })); }); specifications specification status
comment service workersthe definition of 'focus()' in that specification.
WindowClient.focused - Web APIs
type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) { if(!client.focused) return client.focus(); } } } if (clients.openwindow) return clients.openwindow('/'); })); }); specifications specification status
comment service workersthe definition of 'windowclient: focused' in that specification.
WindowClient.visibilityState - Web APIs
tion(clientlist) { for (let i = 0; i < clientlist.length; i++) { let client = clientlist[i]; if (client.url == '/' && 'focus' in client) { if (client.visibilitystate === 'hidden') return client.focus(); } } } if (clients.openwindow) { return clients.openwindow('/'); } })); }); specifications specification status
comment service workersthe definition of 'visibilitystate' in that specification.
WindowClient - Web APIs
waituntil(clients.matchall({ type: "window" }).then(function(clientlist) { for (var i = 0; i < clientlist.length; i++) { var client = clientlist[i]; if (client.url == '/' && 'focus' in client) { client.focus(); break; } } if (clients.openwindow) return clients.openwindow('/'); })); }); specifications specification status
comment service workersthe definition of 'windowclient' in that specification.
WindowEventHandlers.onbeforeprint - Web APIs
var mediaquerylist = window.matchmedia('print'); mediaquerylist.addlistener(function(mql) { if(mql.matches) { console.log('webkit equivalent of onbeforeprint'); } }); specification specification status
comment html living standardthe definition of 'onbeforeprint' in that specification.
WindowEventHandlers.onhashchange - Web APIs
hangeevent)(function(){ var lasturl = document.url; window.addeventlistener("hashchange", function(event){ object.defineproperty(event, "oldurl", {enumerable:true,configurable:true,value:lasturl}); object.defineproperty(event, "newurl", {enumerable:true,configurable:true,value:document.url}); lasturl = document.url; }); }()); specifications specification status
comment html living standardthe definition of 'onhashchange' in that specification.
WindowEventHandlers.onlanguagechange - Web APIs
example window.onlanguagechange = function(event) { console.log('languagechange event detected!'); }; specifications specification status
comment html living standardthe definition of 'windoweventhandler.onlanguagechange' in that specification.
WindowEventHandlers.onrejectionhandled - Web APIs
}); window.onrejectionhandled = function(event) { ...}; example window.onrejectionhandled = function(e) { console.log(e.reason); } specifications specification status
comment html living standardthe definition of 'onrejectionhandled' in that specification.
WindowEventHandlers.onstorage - Web APIs
window.onstorage = function(e) { console.log('the ' + e.key + ' key has been changed from ' + e.oldvalue + ' to ' + e.newvalue + '.'); }; specifications specification status
comment html living standardthe definition of 'onstorage' in that specification.
WindowEventHandlers - Web APIs
specifications specification status
comment html living standardthe definition of 'windoweventhandlers' in that specification.
WindowOrWorkerGlobalScope.caches - Web APIs
'/sw-test/index.html', '/sw-test/style.css', '/sw-test/app.js', '/sw-test/image-list.js', '/sw-test/star-wars-logo.jpg', '/sw-test/gallery/', '/sw-test/gallery/bountyhunters.jpg', '/sw-test/gallery/mylittlevader.jpg', '/sw-test/gallery/snowtroopers.jpg' ]); }) ); }); specifications specification status
comment service workersthe definition of 'caches' in that specification.
self.createImageBitmap() - Web APIs
o sprites from the sprite sheet createimagebitmap(image, 0, 0, 32, 32), createimagebitmap(image, 32, 0, 32, 32) ]).then(function(sprites) { // draw each sprite onto the canvas ctx.drawimage(sprites[0], 0, 0); ctx.drawimage(sprites[1], 32, 32); }); } // load the sprite sheet from an image file image.src = 'sprites.png'; specifications specification status
comment html living standardthe definition of 'createimagebitmap' in that specification.
WindowOrWorkerGlobalScope.crossOriginIsolated - Web APIs
syntax var mycrossoriginisolated = self.crossoriginisolated; // or just crossoriginisolated value a boolean value examples if(crossoriginisolated) { // post sharedarraybuffer } else { // do something else } specifications specification status
comment html living standardthe definition of 'crossoriginisolated' in that specification.
WindowOrWorkerGlobalScope.fetch() - Web APIs
const myinit = { method: 'get', headers: { 'content-type': 'image/jpeg' }, mode: 'cors', cache: 'default' }; let myrequest = new request('flowers.jpg', myinit); specifications specification status
comment fetchthe definition of 'fetch()' in that specification.
WindowOrWorkerGlobalScope.indexedDB - Web APIs
example the following code creates a request for a database to be opened asychronously, after which the database is opened when the request's onsuccess handler is fired: var db; function opendb() { var dbopenrequest = window.indexeddb.open('todolist'); dbopenrequest.onsuccess = function(e) { db = dbopenrequest.result; } } specifications specification status
comment indexed database api draftthe definition of 'indexeddb' in that specification.
WindowOrWorkerGlobalScope.queueMicrotask() - Web APIs
if (typeof window.queuemicrotask !== "function") { window.queuemicrotask = function (callback) { promise.resolve() .then(callback) .catch(e => settimeout(() => { throw e; })); // report exceptions }; } specifications specification status
comment html living standardthe definition of 'self.queuemicrotask()' in that specification.
WindowProxy - Web APIs
specifications specification status
comment html living standardthe definition of 'windowproxy' in that specification.
Worker() - Web APIs
specifications specification status
comment html living standardthe definition of 'worker()' in that specification.
Worker.onmessage - Web APIs
specifications specification status
comment html living standardthe definition of 'worker.onmessage' in that specification.
Worker.prototype.postMessage() - Web APIs
to see a full working example of this firefox demo add-on see here: github :: chromeworker - demo-transfer-arraybuffer specifications specification status
comment html living standardthe definition of 'worker.postmessage()' in that specification.
Worker.terminate() - Web APIs
var myworker = new worker('worker.js'); myworker.terminate(); specifications specification status
comment html living standardthe definition of 'worker.terminate()' in that specification.
Worker - Web APIs
specifications specification status
comment html living standardthe definition of 'worker' in that specification.
WorkerGlobalScope.onerror - Web APIs
}; example the following code snippet shows an onerror handler set inside a worker: self.onerror = function() { console.log('there is an error inside your worker!'); } specifications specification status
comment html living standardthe definition of 'workerglobalscope.onerror' in that specification.
WorkerGlobalScope.onlanguagechange - Web APIs
}; example the following code snippet shows an onlanguagechange handler set inside a worker: self.onlanguagechange = function() { console.log('your preferred language settings have been changed'); } specifications specification status
comment html living standardthe definition of 'workerglobalscope.onlanguagechange' in that specification.
WorkerGlobalScope.onoffline - Web APIs
}; example the following code snippet shows an onoffline handler set inside a worker: self.onoffline = function() { console.log('your worker is now offline'); } specifications specification status
comment html living standardthe definition of 'workerglobalscope.onoffline' in that specification.
WorkerGlobalScope.ononline - Web APIs
}; example the following code snippet shows an ononline handler set inside a worker: self.ononline = function() { console.log('your worker is now online'); } specifications specification status
comment html living standardthe definition of 'workerglobalscope.ononline' in that specification.
WorkerGlobalScope - Web APIs
specifications specification status
comment html living standardthe definition of 'workerglobalscope' in that specification.
WorkerLocation - Web APIs
specifications specification status
comment html living standardthe definition of 'workerlocation' in that specification.
WorkerNavigator.connection - Web APIs
syntax connectioninfo = self.navigator.connection specifications specification status
comment network information apithe definition of 'navigator.connection' in that specification.
WorkerNavigator.permissions - Web APIs
examples self.navigator.permissions.query({name:'notifications'}).then(function(result) { if (result.state === 'granted') { shownotification(); } else if (result.state === 'prompt') { requestnotificationpermission() } }); specification specification status
comment permissions working draft initial definition.
WorkerNavigator - Web APIs
specifications specification status
comment html living standardthe definition of 'workernavigator' in that specification.
Worklet.addModule() - Web APIs
example css.paintworklet.addmodule('https://mdn.github.io/houdini-examples/csspaint/intro/worklets/hilite.js'); once a paintworklet is included, the css paint() function can be used to include the image created by the worklet: @supports (background-image: paint(id)) { h1 { background-image: paint(hollowhighlights, filled, 3px); } } specifications specification status
comment worklets level 1the definition of 'addmodule()' in that specification.
Worklet - Web APIs
specifications specification status
comment worklets level 1the definition of 'worklet' in that specification.
WritableStream.abort() - Web APIs
// abort the stream later on, when required writablestream.abort(); specifications specification status
comment streamsthe definition of 'abort()' in that specification.
WritableStream.locked - Web APIs
const writer = writablestream.getwriter(); writablestream.locked // should return true, as the stream has been locked to a writer specifications specification status
comment streamsthe definition of 'locked' in that specification.
WritableStream - Web APIs
specifications specification status
comment streamsthe definition of 'writablestream' in that specification.
WritableStreamDefaultWriter.abort() - Web APIs
// abort the stream when desired writer.abort.then((reason) => { console.log(reason); }) specifications specification status
comment streamsthe definition of 'abort()' in that specification.
WritableStreamDefaultWriter.closed - Web APIs
// check if the stream is closed writer.closed.then(() => { console.log('writer closed'); }) specifications specification status
comment streamsthe definition of 'closed' in that specification.
WritableStreamDefaultWriter.ready - Web APIs
defaultwriter.ready .then(function() { defaultwriter.close() .then(function() { console.log("all chunks written"); }) .catch(function(err) { console.log("stream error: " + err); }); }); }); } specifications specification status
comment streamsthe definition of 'ready' in that specification.
XMLDocument - Web APIs
specifications specification status
comment domthe definition of 'xmldocument' in that specification.
XMLHttpRequest.abort() - Web APIs
var xhr = new xmlhttprequest(), method = "get", url = "https://developer.mozilla.org/"; xhr.open(method, url, true); xhr.send(); if (oh_noes_we_need_to_cancel_right_now_or_else) { xhr.abort(); } specifications specification status
comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequest: abort event - Web APIs
lick', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status
comment xmlhttprequest living standard ...
XMLHttpRequest: error event - Web APIs
lick', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status
comment xmlhttprequest living standard ...
XMLHttpRequest.getResponseHeader() - Web APIs
var client = new xmlhttprequest(); client.open("get", "unicorns-are-teh-awesome.txt", true); client.send(); client.onreadystatechange = function() { if(this.readystate == this.headers_received) { var contenttype = client.getresponseheader("content-type"); if (contenttype != my_expected_type) { client.abort(); } } } specifications specification status
comment xmlhttprequestthe definition of 'getresponseheader()' in that specification.
XMLHttpRequest: load event - Web APIs
lick', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status
comment xmlhttprequest living standard ...
XMLHttpRequest: loadend event - Web APIs
lick', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status
comment xmlhttprequest living standard ...
XMLHttpRequest: loadstart event - Web APIs
lick', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status
comment xmlhttprequest living standard ...
XMLHttpRequest.overrideMimeType() - Web APIs
// interpret the received data as plain text req = new xmlhttprequest(); req.overridemimetype("text/plain"); req.addeventlistener("load", callback, false); req.open("get", url); req.send(); specifications specification status
comment xmlhttprequestthe definition of 'overridemimetype()' in that specification.
XMLHttpRequest: progress event - Web APIs
lick', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); }); result specifications specification status
comment xmlhttprequest living standard ...
XMLHttpRequest.readyState - Web APIs
adystate); // readystate will be 0 xhr.open('get', '/api', true); console.log('opened', xhr.readystate); // readystate will be 1 xhr.onprogress = function () { console.log('loading', xhr.readystate); // readystate will be 3 }; xhr.onload = function () { console.log('done', xhr.readystate); // readystate will be 4 }; xhr.send(null); specifications specification status
comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequest.response - Web APIs
var url = 'somepage.html'; //a local page function load(url, callback) { var xhr = new xmlhttprequest(); xhr.onreadystatechange = function() { if (xhr.readystate === 4) { callback(xhr.response); } } xhr.open('get', url, true); xhr.send(''); } specifications specification status
comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequest.responseText - Web APIs
t(); xhr.open('get', '/server', true); // if specified, responsetype must be empty string or "text" xhr.responsetype = 'text'; xhr.onload = function () { if (xhr.readystate === xhr.done) { if (xhr.status === 200) { console.log(xhr.response); console.log(xhr.responsetext); } } }; xhr.send(null); specifications specification status
comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequest.responseURL - Web APIs
example var xhr = new xmlhttprequest(); xhr.open('get', 'http://example.com/test', true); xhr.onload = function () { console.log(xhr.responseurl); // http://example.com/test }; xhr.send(null); specifications specification status
comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequest.responseXML - Web APIs
get', '/server'); // if specified, responsetype must be empty string or "document" xhr.responsetype = 'document'; // force the response to be parsed as xml xhr.overridemimetype('text/xml'); xhr.onload = function () { if (xhr.readystate === xhr.done && xhr.status === 200) { console.log(xhr.response, xhr.responsexml); } }; xhr.send(); specifications specification status
comment xmlhttprequestthe definition of 'responsexml' in that specification.
XMLHttpRequest.send() - Web APIs
} } xhr.send("foo=bar&lorem=ipsum"); // xhr.send(new int8array()); // xhr.send(document); specifications specification status
comment xmlhttprequestthe definition of 'send()' in that specification.
XMLHttpRequest.sendAsBinary() - Web APIs
uint8array(nbytes); for (var nidx = 0; nidx < nbytes; nidx++) { ui8data[nidx] = sdata.charcodeat(nidx) & 0xff; } /* send as arraybufferview...: */ this.send(ui8data); /* ...or as arraybuffer (legacy)...: this.send(ui8data.buffer); */ }; } note: it's possible to build this polyfill putting two types of data as argument for send(): an arraybuffer (ui8data.buffer – the
commented code) or an arraybufferview (ui8data, which is a typed array of 8-bit unsigned integers – un
commented code).
XMLHttpRequest.status - Web APIs
e.log('unsent: ', xhr.status); xhr.open('get', '/server'); console.log('opened: ', xhr.status); xhr.onprogress = function () { console.log('loading: ', xhr.status); }; xhr.onload = function () { console.log('done: ', xhr.status); }; xhr.send(); /** * outputs the following: * * unsent: 0 * opened: 0 * loading: 200 * done: 200 */ specifications specification status
comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequest.statusText - Web APIs
atustext); xhr.open('get', '/server', true); console.log('1 opened', xhr.statustext); xhr.onprogress = function () { console.log('3 loading', xhr.statustext); }; xhr.onload = function () { console.log('4 done', xhr.statustext); }; xhr.send(null); /** * outputs the following: * * 0 unsent * 1 opened * 3 loading ok * 4 done ok */ specifications specification status
comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequest: timeout event - Web APIs
examples const client = new xmlhttprequest(); client.open('get', 'http://www.example.org/example.txt'); client.ontimeout = () => { console.error('timeout!!') }; client.send(); you could also set up the event handler using the addeventlistener() method: client.addeventlistener('timeout', () => { console.error("timeout!!"); }); specifications specification status
comment xmlhttprequestthe definition of 'timeout event' in that specification.
XMLHttpRequest.withCredentials - Web APIs
example var xhr = new xmlhttprequest(); xhr.open('get', 'http://example.com/', true); xhr.withcredentials = true; xhr.send(null); specifications specification status
comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequest - Web APIs
specifications specification status
comment xmlhttprequest living standard live standard, latest version ...
XMLHttpRequestEventTarget.onerror - Web APIs
example var xmlhttp = new xmlhttprequest(), method = 'get', url = 'https://developer.mozilla.org/'; xmlhttp.open(method, url, true); xmlhttp.onerror = function () { console.log("** an error occurred during the transaction"); }; xmlhttp.send(); specifications specification status
comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequestEventTarget.onload - Web APIs
example var xmlhttp = new xmlhttprequest(), method = 'get', url = 'https://developer.mozilla.org/'; xmlhttp.open(method, url, true); xmlhttp.onload = function () { // do something with the retrieved data ( found in xmlhttp.response ) }; xmlhttp.send(); specifications specification status
comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequestEventTarget.onloadstart - Web APIs
example var xmlhttp = new xmlhttprequest(), method = 'get', url = 'https://developer.mozilla.org/'; xmlhttp.open(method, url, true); xmlhttp.onloadstart = function () { console.log("download underway"); }; xmlhttp.send(); specifications specification status
comment xmlhttprequest living standard whatwg living standard ...
XMLHttpRequestEventTarget.onprogress - Web APIs
xmlhttprequest.onprogress = function (event) { event.loaded; event.total; }; example var xmlhttp = new xmlhttprequest(), method = 'get', url = 'https://developer.mozilla.org/'; xmlhttp.open(method, url, true); xmlhttp.onprogress = function () { //do something }; xmlhttp.send(); specifications specification status
comment xmlhttprequest living standard whatwg living standard ...
XMLSerializer - Web APIs
specifications specification status
comment dom parsing and serializationthe definition of 'xmlserializer' in that specification.
XPathEvaluator.createExpression() - Web APIs
> <div>number of <div>s: <output></output></div> javascript var xpath = "//div"; var evaluator = new xpathevaluator(); var expression = evaluator.createexpression("//div"); var result = expression.evaluate(document, xpathresult.ordered_node_snapshot_type); document.queryselector("output").textcontent = result.snapshotlength; result specifications specification status
comment document object model (dom) level 3 xpath specificationthe definition of 'xpathevaluator.createexpression()' in that specification.
XPathEvaluator.createNSResolver() - Web APIs
specifications specification status
comment document object model (dom) level 3 xpath specificationthe definition of 'xpathevaluator.creatensresolver()' in that specification.
XPathEvaluator.evaluate() - Web APIs
html <div>xpath example</div> <div>number of <div>s: <output></output></div> javascript var evaluator = new xpathevaluator(); var result = evaluator.evaluate("//div", document, null, xpathresult.ordered_node_snapshot_type); document.queryselector("output").textcontent = result.snapshotlength; result specifications specification status
comment document object model (dom) level 3 xpath specificationthe definition of 'xpathevaluator.evaluate()' in that specification.
XPathEvaluator - Web APIs
> <div>number of <div>s: <output></output></div> javascript var xpath = "//div"; var evaluator = new xpathevaluator(); var expression = evaluator.createexpression("//div"); var result = expression.evaluate(document, xpathresult.ordered_node_snapshot_type); document.queryselector("output").textcontent = result.snapshotlength; result specifications specification status
comment document object model (dom) level 3 xpath specificationthe definition of 'xpathevaluator' in that specification.
XPathException.code - Web APIs
specifications specification status
comment document object model (dom) level 3 xpath specificationthe definition of 'xpathexception' in that specification.
XPathException - Web APIs
specifications specification status
comment document object model (dom) level 3 xpath specificationthe definition of 'xpathexception' in that specification.
XPathExpression.evaluate() - Web APIs
> <div>number of <div>s: <output></output></div> javascript var xpath = "//div"; var evaluator = new xpathevaluator(); var expression = evaluator.createexpression("//div"); var result = expression.evaluate(document, xpathresult.ordered_node_snapshot_type); document.queryselector("output").textcontent = result.snapshotlength; result specifications specification status
comment document object model (dom) level 3 xpath specificationthe definition of 'xpathexpression.evaluate()' in that specification.
XPathExpression - Web APIs
iv> <div>number of <div>s: <output></output></div> javascript var xpath = "//div"; var evaluator = new xpathevaluator(); var expression = evaluator.createexpression(xpath); var result = expression.evaluate(document, xpathresult.ordered_node_snapshot_type); document.queryselector("output").textcontent = result.snapshotlength; result specifications specification status
comment document object model (dom) level 3 xpath specificationthe definition of 'xpathexpression' in that specification.
XPathNSResolver - Web APIs
specifications specification status
comment document object model (dom) level 3 xpath specificationthe definition of 'xpathnsresolver' in that specification.
XPathResult.booleanValue - Web APIs
html <div>xpath example</div> <p>text is 'xpath example': <output></output></p> javascript var xpath = "//div/text() = 'xpath example'"; var result = document.evaluate(xpath, document, null, xpathresult.boolean_type, null); document.queryselector("output").textcontent = result.booleanvalue; result specifications specification status
comment document object model (dom) level 3 xpath specificationthe definition of 'xpathresult.booleanvalue' in that specification.
XPathResult.invalidIteratorState - Web APIs
"invalid" : "valid"; result specifications specification status
comment document object model (dom) level 3 xpath specificationthe definition of 'xpathresult.invaliditeratorstate' in that specification.
XPathResult.iterateNext() - Web APIs
he matched nodes: <output></output></div> javascript var xpath = "//div"; var result = document.evaluate(xpath, document, null, xpathresult.any_type, null); var node = null; var tagnames = []; while(node = result.iteratenext()) { tagnames.push(node.localname); } document.queryselector("output").textcontent = tagnames.join(", "); result specifications specification status
comment document object model (dom) level 3 xpath specificationthe definition of 'xpathresult.iteratenext()' in that specification.
XPathResult.numberValue - Web APIs
html <div>xpath example</div> <div>number of <div>s: <output></output></div> javascript var xpath = "count(//div)"; var result = document.evaluate(xpath, document, null, xpathresult.number_type, null); document.queryselector("output").textcontent = result.numbervalue; result specifications specification status
comment document object model (dom) level 3 xpath specificationthe definition of 'xpathresult.numbervalue' in that specification.
XPathResult.resultType - Web APIs
result a node set: <output></output></div> javascript var xpath = "//div"; var result = document.evaluate(xpath, document, null, xpathresult.any_type, null); document.queryselector("output").textcontent = result.resulttype >= xpathresult.unordered_node_iterator_type && result.resulttype <= xpathresult.first_ordered_node_type; result specifications specification status
comment document object model (dom) level 3 xpath specificationthe definition of 'xpathresult.resulttype' in that specification.
XPathResult.singleNodeValue - Web APIs
/div> <div>tag name of the element having the text content 'xpath example': <output></output></div> javascript var xpath = "//*[text()='xpath example']"; var result = document.evaluate(xpath, document, null, xpathresult.first_ordered_node_type, null); document.queryselector("output").textcontent = result.singlenodevalue.localname; result specifications specification status
comment document object model (dom) level 3 xpath specificationthe definition of 'xpathresult.singlenodevalue' in that specification.
XPathResult.snapshotItem() - Web APIs
"//div"; var result = document.evaluate(xpath, document, null, xpathresult.ordered_node_snapshot_type, null); var node = null; var tagnames = []; for(var i = 0; i < result.snapshotlength; i++) { var node = result.snapshotitem(i); tagnames.push(node.localname); } document.queryselector("output").textcontent = tagnames.join(", "); result specifications specification status
comment document object model (dom) level 3 xpath specificationthe definition of 'xpathresult.snapshotitem()' in that specification.
XPathResult.snapshotLength - Web APIs
html <div>xpath example</div> <div>number of matched nodes: <output></output></div> javascript var xpath = "//div"; var result = document.evaluate(xpath, document, null, xpathresult.ordered_node_snapshot_type, null); document.queryselector("output").textcontent = result.snapshotlength; result specifications specification status
comment document object model (dom) level 3 xpath specificationthe definition of 'xpathresult.snapshotlength' in that specification.
XPathResult.stringValue - Web APIs
html <div>xpath example</div> <div>text content of the <div> above: <output></output></div> javascript var xpath = "//div/text()"; var result = document.evaluate(xpath, document, null, xpathresult.string_type, null); document.queryselector("output").textcontent = result.stringvalue; result specifications specification status
comment document object model (dom) level 3 xpath specificationthe definition of 'xpathresult.stringvalue' in that specification.
XPathResult - Web APIs
specifications specification status
comment document object model (dom) level 3 xpath specificationthe definition of 'xpathresult' in that specification.
XREnvironmentBlendMode - Web APIs
specifications specification status
comment webxr augmented reality modulethe definition of 'xrenvironmentblendmode' in that specification.
XREye - Web APIs
specifications specification status
comment webxr device apithe definition of 'xreye' in that specification.
XRFrame.getPose() - Web APIs
specifications specification status
comment webxr device apithe definition of 'xrframe.getpose()' in that specification.
XRFrame.session - Web APIs
specifications specification status
comment webxr device apithe definition of 'xrframe.session' in that specification.
XRFrame - Web APIs
specifications specification status
comment webxr device apithe definition of 'xrframe' in that specification.
XRHandedness - Web APIs
specifications specification status
comment webxr device apithe definition of 'xrhandedness' in that specification.
XRInputSource - Web APIs
specifications specification status
comment webxr device apithe definition of 'xrinputsource' in that specification.
XRInputSourceArray.entries() - Web APIs
specifications specification status
comment webxr device apithe definition of 'xrinputsourcearray' in that specification.1 working draft xrinputsourcearray interface [1] see iterator-like methods in information contained in a webidl file for information on how an iterable declaration in an interface definition causes entries(), foreach(), keys(), and values() methods to be exposed from objects that implement the i...
XRInputSourceArray.forEach() - Web APIs
specifications specification status
comment webxr device apithe definition of 'xrinputsourcearray' in that specification.1 working draft xrinputsourcearray interface [1] see iterator-like methods in information contained in a webidl file for information on how an iterable declaration in an interface definition causes entries(), foreach(), keys(), and values() methods to be exposed from objects that implement the i...
XRInputSourceArray.keys() - Web APIs
specifications specification status
comment webxr device apithe definition of 'xrinputsourcearray' in that specification.1 working draft xrinputsourcearray interface [1] see iterator-like methods in information contained in a webidl file for information on how an iterable declaration in an interface definition causes entries(), foreach(), keys(), and values() methods to be exposed from objects that implement the i...
XRInputSourceArray.values() - Web APIs
specifications specification status
comment webxr device apithe definition of 'xrinputsourcearray' in that specification.1 working draft xrinputsourcearray interface [1] see iterator-like methods in information contained in a webidl file for information on how an iterable declaration in an interface definition causes entries(), foreach(), keys(), and values() methods to be exposed from objects that implement the i...
XRInputSourceArray - Web APIs
let sources = xrsession.inputsources; if (sources.length > 0) { handleinput(sources[0]); } examples specifications specification status
comment webxr device apithe definition of 'xrinputsourcearray' in that specification.
XRInputSourceEvent() - Web APIs
xrsession.addeventlistener("select", event => { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (targetraypose) { let hit = myhittest(targetraypose.transform); if (hit) { /* handle the hit */ } } }); specifications specification status
comment webxr device apithe definition of 'xrinputsourceevent' in that specification.
XRInputSourceEvent.frame - Web APIs
xrsession.onselectstart = event => { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (targetraypose) { checkandhandlehit(targetraypose.transform); } }; specifications specification status
comment webxr device apithe definition of 'xrinputsourceevent.frame' in that specification.
XRInputSourceEvent.inputSource - Web APIs
xrsession.onselect = event => { let source = event.inputsource; if (source.targetraymode == "gaze") { /* handle selection using a gaze input */ } }; specifications specification status
comment webxr device apithe definition of 'xrinputsourceevent.inputsource' in that specification.
XRInputSourceEvent - Web APIs
xrsession.addeventlistener("select", event => { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (targetraypose) { let hit = myhittest(targetraypose.transform); if (hit) { /* handle the hit */ } } }); specifications specification status
comment webxr device apithe definition of 'xrinputsourceevent' in that specification.
XRInputSourceEventInit.frame - Web APIs
let event = new xrinputsourceevent("select", { frame: eventframe, inputsource: source }; if (event) { xrsession.dispatchevent(event); } specifications specification status
comment webxr device apithe definition of 'xrinputsourceeventinit.frame' in that specification.
XRInputSourceEventInit.inputSource - Web APIs
let event = new xrinputsourceevent("select", { frame: eventframe, inputsource: source }; if (event) { xrsession.dispatchevent(event); } specifications specification status
comment webxr device apithe definition of 'xrinputsourceeventinit.inputsource' in that specification.
XRInputSourcesChangeEvent() - Web APIs
let iscevent = new xrinputsourceschangeevent("inputsourceschange", { session: xrsession, added: [newinputsource], removed: [] }); specifications specification status
comment webxr device apithe definition of 'xrinputsourceschangeevent()' in that specification.
XRInputSourcesChangeEvent.added - Web APIs
xrsession.oninputsourcescchange = event => { for (let input of event.added) { if (input.targetraymode == "tracked-pointer") { addedpointerdevice(input); } } for (let input of event.removed) { if (input.targetraymode == "tracked-pointer") { removedpointerdevice(input); } } }; specifications specification status
comment webxr device apithe definition of 'xrinputsourceschangeevent.added' in that specification.
XRInputSourcesChangeEvent.removed - Web APIs
xrsession.oninputsourcescchange = event => { for (let input of event.added) { if (input.targetraymode == "tracked-pointer") { addedpointerdevice(input); } } for (let input of event.removed) { if (input.targetraymode == "tracked-pointer") { removedpointerdevice(input); } } }; specifications specification status
comment webxr device apithe definition of 'xrinputsourceschangeevent.removed' in that specification.
XRInputSourcesChangeEvent - Web APIs
change); function oninputsourceschange(event) { for (let input of event.added) { if (input.targetraymode == "tracked-pointer") { loadcontrollermesh(input); } } } you can also add a handler for inputsourceschange events by setting the oninputsourceschange event handler: xrsession.oninputsourceschange = oninputsourceschange; specifications specification status
comment webxr device apithe definition of 'xrinputsourceschangeevent' in that specification.
XRPermissionDescriptor.mode - Web APIs
) { navigator.permissions.query(xrpermissiondesc).then(({state}) => { switch(state) { case "granted": setupxr(); break; case "prompt": promptandsetupxr(); break; default: /* do nothing otherwise */ break; } .catch(err) { console.log(err); } } else { setupxr(); } specifications specification status
comment webxr device apithe definition of 'xrpermissiondescriptor.mode' in that specification.
XRPermissionDescriptor.optionalFeatures - Web APIs
) { navigator.permissions.query(xrpermissiondesc).then(({state}) => { switch(state) { case "granted": setupxr(); break; case "prompt": promptandsetupxr(); break; default: /* do nothing otherwise */ break; } .catch(err) { console.log(err); } } else { setupxr(); } specifications specification status
comment webxr device apithe definition of 'xrpermissiondescriptor.optionalfeatures' in that specification.
XRPermissionDescriptor.requiredFeatures - Web APIs
) { navigator.permissions.query(xrpermissiondesc).then(({state}) => { switch(state) { case "granted": setupxr(); break; case "prompt": promptandsetupxr(); break; default: /* do nothing otherwise */ break; } .catch(err) { console.log(err); } } else { setupxr(); } specifications specification status
comment webxr device apithe definition of 'xrpermissiondescriptor.requiredfeatures' in that specification.
XRPermissionDescriptor - Web APIs
) { navigator.permissions.query(xrpermissiondesc).then(({state}) => { switch(state) { case "granted": setupxr(); break; case "prompt": promptandsetupxr(); break; default: /* do nothing otherwise */ break; } .catch(err) { console.log(err); } } else { setupxr(); } specifications specification status
comment webxr device apithe definition of 'xrpermissiondescriptor' in that specification.
XRPermissionStatus.granted - Web APIs
xrreferencespace usage notes examples specifications specification status
comment webxr device apithe definition of 'xrpermissionstatus.granted' in that specification.
XRPermissionStatus - Web APIs
usage notes examples specifications specification status
comment webxr device apithe definition of 'xrpermissionstatus' in that specification.
XRPose.transform - Web APIs
frame; let targetraypose = frame.getpose(source.targetrayspace, myrefspace); let targetobject = findtargetusingray(targetray.transform.matrix); if (source.targetraymode == "tracked-pointer") { if (source.handedness == user.handedness) { targetobject.primaryaction(); } else { targetobject.offhandaction(); } } }); specifications specification status
comment webxr device apithe definition of 'xrpose.transform' in that specification.
XRPose - Web APIs
example <<<--- todo: needs example --->>> specifications specification status
comment webxr device apithe definition of 'xrpose' in that specification.
XRReferenceSpace: reset event - Web APIs
first, you can use the addeventlistener() method: viewerrefspace.addeventlistener("reset", (event) => { /* perform reset related tasks */ }); the second option is to set the xrreferencespace object's onreset event handler property: viewerrefspace.onreset = (event) => { /* perform reset related tasks */ }; specifications specification status
comment webxr device apithe definition of 'reset event' in that specification.
XRReferenceSpace - Web APIs
specifications specification status
comment webxr device apithe definition of 'xrreferencespace' in that specification.
XRReferenceSpaceEvent.transform - Web APIs
xrreferencespace.addeventlistener("reset", event => { for (let obj of scene.objects) { mat4.multiply(obj.transform, obj.transform, event.transform); } }); specifications specification status
comment webxr device apithe definition of 'xrreferencespaceevent.transform' in that specification.
XRReferenceSpaceEventInit.referenceSpace - Web APIs
let refspaceevent = new xrreferencespaceevent("reset", { referencespace: myrefspace, transform: mytransform }); specifications specification status
comment webxr device apithe definition of 'xrreferencespaceeventinit.referencespace' in that specification.
XRReferenceSpaceEventInit.transform - Web APIs
let refspaceevent = new xrreferencespaceevent("reset", { referencespace: myrefspace, transform: mytransform }); specifications specification status
comment webxr device apithe definition of 'xrreferencespaceeventinit.transform' in that specification.
XRReferenceSpaceEventInit - Web APIs
let refspaceevent = new xrreferencespaceevent("reset", { referencespace: myrefspace, transform: mytransform }); specifications specification status
comment webxr device apithe definition of 'xrreferencespaceeventinit' in that specification.
XRReferenceSpaceType - Web APIs
xrreferencespace specifications specification status
comment webxr device apithe definition of 'xrreferencespacetype' in that specification.
XRRenderState - Web APIs
specifications specification status
comment webxr device apithe definition of 'xrrenderstate' in that specification.
XRRenderStateInit - Web APIs
specifications specification status
comment webxr device apithe definition of 'xrrenderstateinit' in that specification.
XRRigidTransform() - Web APIs
specifications specification status
comment webxr device apithe definition of 'xrrigidtransform()' in that specification.
XRRigidTransform.matrix - Web APIs
let transform = new xrrigidtransform( {x: 0, y: 0.5, z: 0.5}, {x: 0, y: -0.5, z: -0.5, w: 1}); drawglobject("magic-lamp", transform.matrix); specifications specification status
comment webxr device apithe definition of 'xrrigidtransform.matrix' in that specification.
XRRigidTransform - Web APIs
xrsession.requestreferencespace(refspacetype) .then((refspace) => { xrreferencespace = refspace; xrreferencespace = xrreferencespace.getoffsetreferencespace( new xrrigidtransform(viewerstartposition, cubeorientation)); animationframerequestid = xrsession.requestanimationframe(drawframe); specifications specification status
comment webxr device apithe definition of 'xrrigidtransform' in that specification.
XRSession.cancelAnimationFrame() - Web APIs
async function startxr() { xrsession = xr.requestsession("immersive-vr"); if (xrsession) { stopbutton.onclick = stopxr; requesthandle = xrsession.requestanimationframe(framecallback); } } function pausexr() { if (xrsession && requesthandle) { xrsession.cancelanimationframe(requesthandle); requesthandle = null; } } specifications specification status
comment webxr device apithe definition of 'xrsession.cancelanimationframe' in that specification.
XRSession.end() - Web APIs
example specifications specification status
comment webxr device apithe definition of 'xrsession.end' in that specification.
XRSession: end event - Web APIs
ndler to your xrsession instance using addeventlistener(), like this: xrsession.addeventlistener("end", function(event) { /* the session has shut down */ }); alternatively, you can use the xrsession.onend event handler property to establish a handler for the end event: xrsession.onend = function(event) { /* the session has shut down */ } specifications specification status
comment webxr device apithe definition of 'end event' in that specification.
XRSession.onend - Web APIs
}; example xrsession.onend = function(event) { console.log("the xr session has ended") } specifications specification status
comment webxr device apithe definition of 'xrsession.onend' in that specification.
XRSession.oninputsourceschange - Web APIs
} example xrsession.oninputsourceschange = function(event) { console.log("the list of active xr input sources has changed.") } specifications specification status
comment webxr device apithe definition of 'xrsession.oninputsourceschange' in that specification.
XRSession.onselect - Web APIs
xrsession.onselect = event => { let source = event.inputsource; if (source.handedness == user.handedness) { if (source.targetraymode == "tracked-pointer") { let targetraypose = event.frame.getpose(source.targetrayspace, myrefspace); if (targetraypose) { myhandleselectwithray(targetraypose); } } } }; specifications specification status
comment webxr device apithe definition of 'xrsession.onselect' in that specification.
XRSession.onselectend - Web APIs
} example xrsession.onselectend = function(event) { console.log("the user has completed a primary action.") } specifications specification status
comment webxr device apithe definition of 'xrsession.onselectend' in that specification.
XRSession.onselectstart - Web APIs
} example xrsession.onselectstart = function(event) { console.log("the user has started a primary action, but might not have completed it.") } specifications specification status
comment webxr device apithe definition of 'xrsession.onselectstart' in that specification.
XRSession.onsqueeze - Web APIs
specifications specification status
comment webxr device apithe definition of 'xrsession.onsqueeze' in that specification.
XRSession.onsqueezestart - Web APIs
xrsession.onsqueezestart = event => { if (event.inputsource.handedness == user.handedness) { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace; if (targetraypose) { user.heldobject = findobjectusingray(targetraypose.transform); } } }; specifications specification status
comment webxr device apithe definition of 'xrsession.onsqueezestart' in that specification.
XRSession.onvisibilitychange - Web APIs
} example xrsession.onvisibilitychange = function(event) { console.log("the visibility the xr session changed.") } specifications specification status
comment webxr device apithe definition of 'xrsession.onvisibilitychange' in that specification.
XRSession.requestAnimationFrame() - Web APIs
xrsession.requestanimationframe(onxranimationframe) }) } function onxrsessionended() { xrsession = null } specifications specification status
comment webxr device apithe definition of 'xrsession.requestanimationframe' in that specification.
XRSession: select event - Web APIs
to a function that handles the event: xrsession.onselect = event => { if (event.inputsource.targetraymode == "tracked-pointer") { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (targetraypose) { myhandleselectwithray(targetraypose.transform); } } }; specifications specification status
comment webxr device apithe definition of 'select event' in that specification.
XRSession: selectend event - Web APIs
rgetobj, targetraypose.matrix); break; } } you can of course also set up a handler for selectend events by setting the xrsession object's onselectend event handler property to a function that handles the event: xrsession.onselectstart = onselectionevent; xrsession.onselect = onselectionevent; xrsession.onselectend = onselectionevent; specifications specification status
comment webxr device apithe definition of 'selectend event' in that specification.
XRSession: selectstart event - Web APIs
rgetobj, targetraypose.matrix); break; } } you can of course also set up a handler for selectend events by setting the xrsession object's onselectend event handler property to a function that handles the event: xrsession.onselectstart = onselectionevent; xrsession.onselect = onselectionevent; xrsession.onselectend = onselectionevent; specifications specification status
comment webxr device apithe definition of 'selectstart event' in that specification.
XRSession: squeeze event - Web APIs
o a function that handles the event: xrsession.onsqueeze = event => { if (event.inputsource.targetraymode == "tracked-pointer") { let targetraypose = event.frame.getpose(event.inputsource.targetrayspace, myrefspace); if (targetraypose) { myhandlesqueezewithray(targetraypose.transform); } } }; specifications specification status
comment webxr device apithe definition of 'squeeze event' in that specification.
XRSession: squeezeend event - Web APIs
racking(targetobj, targetraypose.matrix); break; } } you can of course also set up a handler these events by setting the xrsession object's onsqueezeend event handler property to a function that handles the event: xrsession.onsqueezestart = onsqueezeevent; xrsession.onsqueeze = onsqueezeevent; xrsession.onsqueezeend = onsqueezeevent; specifications specification status
comment webxr device apithe definition of 'squeezeend event' in that specification.
XRSession: squeezestart event - Web APIs
racking(targetobj, targetraypose.matrix); break; } } you can of course also set up a handler these events by setting the xrsession object's onsqueezeend event handler property to a function that handles the event: xrsession.onsqueezestart = onsqueezeevent; xrsession.onsqueeze = onsqueezeevent; xrsession.onsqueezeend = onsqueezeevent; specifications specification status
comment webxr device apithe definition of 'squeezestart event' in that specification.
XRSession.updateRenderState() - Web APIs
function onxrsessionstarted(xrsession) { let glcanvas = document.createelement("canvas"); let gl = glcanvas.getcontext("webgl", { xrcompatible: true }); loadwebglresources(); xrsession.updaterenderstate({ baselayer: new xrwebgllayer(xrsession, gl) }); } specifications specification status
comment webxr device apithe definition of 'xrsession.updaterenderstate()' in that specification.
XRSession: visibilitychange event - Web APIs
you can also create the event handler by assigning it to the xrsession's onvisibilitychange event handler property, like this: xrsession.onvisibilitychange = (e) => { /* event handled here */ }; specifications specification status
comment webxr device apithe definition of 'visibilitychange event' in that specification.
XRSession - Web APIs
e); gl.bindframebuffer(xrwebgllayer.framebuffer); for (xrview of viewer.views) { let xrviewport = xrwebgllayer.getviewport(xrview); gl.viewport(xrviewport.x, xrviewport.y, xrviewport.width, xrviewport.height); } }); }); }); } else { /* webxr is not available */ } specifications specification status
comment webxr device apithe definition of 'xrsession' in that specification.
XRSessionEvent() - Web APIs
xrsession.addeventlistener("visibilitystate", e => { switch(e.session.visibilitystate) { case "visible": case "visible-blurred": mysessionvisible(true); break; case "hidden": mysessionvisible(false); break; } }); specifications specification status
comment webxr device apithe definition of 'xrsessionevent() constructor' in that specification.
XRSessionEvent - Web APIs
xrsession.addeventlistener("visibilitystate", e => { switch(e.session.visibilitystate) { case "visible": case "visible-blurred": mysessionvisible(true); break; case "hidden": mysessionvisible(false); break; } }); specifications specification status
comment webxr device apithe definition of 'xrsessionevent' in that specification.
XRSessionEventInit - Web APIs
examples <tbd> specifications specification status
comment webxr device apithe definition of 'xrsessioneventinit' in that specification.
XRSessionMode - Web APIs
specifications specification status
comment webxr device apithe definition of 'xrsessionmode' in that specification.
XRSpace - Web APIs
specifications specification status
comment webxr device apithe definition of 'xrspace' in that specification.
XRSystem: ondevicechange - Web APIs
}; value undefined example navigator.xr.ondevicechange = function(ev) { console.log("the availability of immersive xr devices has changed.") }; specifications specification status
comment webxr device apithe definition of 'ondevicechange ' in that specification.
XRSystem: requestSession() - Web APIs
xrsession.end().then(() => xrsession = null); } } specifications specification status
comment webxr device apithe definition of 'requestsession()' in that specification.
XRSystem - Web APIs
specifications specification status
comment webxr device apithe definition of 'xr' in that specification.
XRTargetRayMode - Web APIs
specifications specification status
comment webxr device apithe definition of 'xrtargetraymode' in that specification.
XRView.eye - Web APIs
specifications specification status
comment webxr device apithe definition of 'xrview.eye' in that specification.
XRView.projectionMatrix - Web APIs
examples specifications specification status
comment webxr device apithe definition of 'xrview.projectionmatrix' in that specification.
XRView.transform - Web APIs
<<<--- finish and add link --->>> specifications specification status
comment webxr device apithe definition of 'xrview.transform' in that specification.
XRView - Web APIs
specifications specification status
comment webxr device apithe definition of 'xrview' in that specification.
XRViewerPose.views - Web APIs
specifications specification status
comment webxr device apithe definition of 'xrviewerpose.views' in that specification.
XRViewerPose - Web APIs
specifications specification status
comment webxr device apithe definition of 'xrviewerpose' in that specification.
XRViewport.height - Web APIs
specifications specification status
comment webxr device apithe definition of 'xrviewport.height' in that specification.
XRViewport.width - Web APIs
specifications specification status
comment webxr device apithe definition of 'xrviewport.width' in that specification.
XRViewport.x - Web APIs
specifications specification status
comment webxr device apithe definition of 'xrviewport.x' in that specification.
XRViewport.y - Web APIs
specifications specification status
comment webxr device apithe definition of 'xrviewport.y' in that specification.
XRViewport - Web APIs
ewerpose(xrreferencespace); gl.bindframebuffer(xrwebgllayer.framebuffer); for (xrview of viewerpose.views) { let xrviewport = xrwebgllayer.getviewport(xrview); gl.viewport(xrviewport.x, xrviewport.y, xrviewport.width, xrviewport.height); // now we can use webgl to draw into a viewport matching // the viewer's needs } }); specifications specification status
comment webxr device apithe definition of 'xrviewport' in that specification.
XRVisibilityState - Web APIs
specifications specification status
comment webxr device apithe definition of 'xrvisibilitystate' in that specification.
XRWebGLLayer() - Web APIs
specifications specification status
comment webxr device apithe definition of 'xrwebgllayer()' in that specification.
XRWebGLLayer.antialias - Web APIs
*/ if (!gllayer.antialias) { /* compensate for lack of antialiasing */ } specifications specification status
comment webxr device apithe definition of 'xrwebgllayer.antialias' in that specification.
XRWebGLLayer.framebuffer - Web APIs
let gllayer = xrsession.renderstate.baselayer; gl.bindframebuffer(gl.framebuffer, gllayer.framebuffer); specifications specification status
comment webxr device apithe definition of 'xrwebgllayer.framebuffer' in that specification.
XRWebGLLayer.framebufferHeight - Web APIs
let gllayer = xrsession.renderstate.baselayer; gl.bindframebuffer(gl.framebuffer, gllayer.framebuffer); framewidth = gllayer.framebufferheight; frameheight = gllayer.framebufferheight; specifications specification status
comment webxr device apithe definition of 'xrwebgllayer.framebufferheight' in that specification.
XRWebGLLayer.framebufferWidth - Web APIs
let gllayer = xrsession.renderstate.baselayer; gl.bindframebuffer(gl.framebuffer, gllayer.framebuffer); framewidth = gllayer.framebufferwidth; frameheight = gllayer.framebufferheight; specifications specification status
comment webxr device apithe definition of 'xrwebgllayer.framebufferwidth' in that specification.
XRWebGLLayer.getViewport() - Web APIs
amebuffer, gllayer.framebuffer); gl.clearcolor(0, 0, 0, 1.0); gl.cleardepth(1.0); gl.clear(gl.color_buffer_bit, gl.depth_color_bit); for (let view of pose.views) { let viewport = gllayer.getviewport(view); gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height); /* render the scene now */ } } specifications specification status
comment webxr device apithe definition of 'xrwebgllayer.getviewport()' in that specification.
XRWebGLLayer.ignoreDepthValues - Web APIs
this is demonstrated in the snippet of code below: const gllayeroptions = { ignoredepthvalues: true }; let gllayer = new xrwebgllayer(xrsession, gl, gllayeroptions); specifications specification status
comment webxr device apithe definition of 'xrwebgllayer.ignoredepthvalues' in that specification.
XRWebGLLayer - Web APIs
frame.getviewerpose(xrreferencespace); if (pose) { let gllayer = xrsession.renderstate.baselayer; gl.bindframebuffer(gl.framebuffer, gllayer.framebffer); for (let view of pose.views) { let viewport = gllayer.getviewport(view); gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height); /* render the view */ } } specifications specification status
comment webxr device apithe definition of 'xrwebgllayer' in that specification.
XRWebGLLayerInit.alpha - Web APIs
xrsession.updaterenderstate({ baselayer: new xrwebgllayer(xrsession, gl, { alpha: false }); }); specifications specification status
comment webxr device apithe definition of 'xrwebgllayerinit.alpha' in that specification.
XRWebGLLayerInit.depth - Web APIs
xrsession.updaterenderstate({ baselayer: new xrwebgllayer(xrsession, gl, { depth: false }); }); specifications specification status
comment webxr device apithe definition of 'xrwebgllayerinit.depth' in that specification.
XRWebGLLayerInit.framebufferScaleFactor - Web APIs
xrsession.updaterenderstate({ baselayer: new xrwebgllayer(xrsession, gl, { framebufferscalefactor: 0.5 }); }); specifications specification status
comment webxr device apithe definition of 'xrwebgllayerinit.framebufferscalefactor' in that specification.
XRWebGLLayerInit.ignoreDepthValues - Web APIs
xrsession.updaterenderstate({ baselayer: new xrwebgllayer(xrsession, gl, { alpha: false, ignoredepthvalues: true }); }); specifications specification status
comment webxr device apithe definition of 'xrwebgllayerinit.ignoredepthvalues' in that specification.
XRWebGLLayerInit.stencil - Web APIs
xrsession.updaterenderstate({ baselayer: new xrwebgllayer(xrsession, gl, { stencil: false }); }); specifications specification status
comment webxr device apithe definition of 'xrwebgllayerinit.stencil' in that specification.
XRWebGLLayerInit - Web APIs
const layeroptions = { ignoredepthvalues: true }; xrsession.updaterenderstate({ baselayer: new xrwebgllayer(xrsession, gl, layeroptions); }); specifications specification status
comment webxr device apithe definition of 'xrwebgllayerinit' in that specification.
XSL Transformations in Mozilla FAQ - Web APIs
a known workaround is to add a sufficiently long xml
comment to the beginning of your xml file in order to "push" the <feed> or <rss> tag out of the first 512 bytes, which is analyzed by firefox to determine if it's a feed or not.
Web APIs
t cssstylevalue csssupportsrule cssunitvalue cssunparsedvalue cssvalue cssvaluelist cssvariablereferencevalue cache cachestorage canvascapturemediastreamtrack canvasgradient canvasimagesource canvaspattern canvasrenderingcontext2d caretposition channelmergernode channelsplitternode characterdata childnode client clients clipboard clipboardevent clipboarditem closeevent
comment compositionevent constantsourcenode constrainboolean constraindomstring constraindouble constrainulong contentindex contentindexevent convolvernode countqueuingstrategy crashreportbody credential credentialscontainer crypto cryptokey cryptokeypair customelementregistry customevent d domconfiguration domerror domexception domhighrestimestamp domimplementation domimplementationlist ...
How to file ARIA-related bugs - Accessibility
tbd: add proper accessibility markup to table genre software where to file notes screen readers freedom scientific jaws jaws technical support form gw micro window eyes window-eyes
comments, questions, and feedback (email) non visual desktop access (nvda) file nvda bugs discuss nvda issues browsers apple safari file webkit.org bugs google chrome file chromium bugs microsoft internet explorer file ie bugs microsoft edge file ms edge bugs view existing ms edge aria bugs ...
ARIA: feed role - Accessibility
if a feed is nested within a feed, such as a
comments feed within a feed of blog posts, the convention is to tab into the nested feed with the tab key and to provide another key, such as alt + page down, to navigate from an 'outer' article to the first item in that article's nested feed.
ARIA: switch role - Accessibility
result the result looks like this: specifications specification status
comment accessible rich internet applications (wai-aria) 1.1 recommendation defines aria in general along with all roles, properties, and so forth.
Web accessibility for seizures and physical reactions - Accessibility
@media screen and (prefers-reduced-motion: reduce), (update: slow) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; /* hat tip nick/cssremedy (https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/#
comment-1700170) */ transition-duration: 0.001ms !important; } } from w3.org's page on media queries 4: the update media feature is used to query the ability of the output device to modify the appearance of content once it has been rendered.
Custom properties (--*): CSS variables - CSS: Cascading Style Sheets
-color: #ffff8c; } #firstparagraph { background-color: var(--first-color); color: var(--second-color); } #secondparagraph { background-color: var(--second-color); color: var(--first-color); } #container { --first-color: #48ff32; } #thirdparagraph { background-color: var(--first-color); color: var(--second-color); } result specifications specification status
comment css custom properties for cascading variables module level 1the definition of '--*' in that specification.
-webkit-line-clamp - CSS: Cascading Style Sheets
</p> css p { width: 300px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } result specifications specification status
comment css overflow module level 3the definition of '-webkit-line-clamp' in that specification.
-webkit-text-fill-color - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples changing the fill color css p { margin: 0; font-size: 3em; -webkit-text-fill-color: green; } html <p>this text is green.</p> results specifications specification status
comment compatibility standardthe definition of '-webkit-text-fill-color' in that specification.
-webkit-text-stroke-color - CSS: Cascading Style Sheets
font-size: 4em; -webkit-text-stroke-width: 3px; -webkit-text-stroke-color: #ff0000; /* can be changed in the live sample */ } javascript var colorpicker = document.queryselector("input"); colorpicker.addeventlistener("change", function(evt) { document.queryselector("p").style.webkittextstrokecolor = evt.target.value; }); results specifications specification status
comment compatibility standardthe definition of '-webkit-text-stroke-color' in that specification.
-webkit-text-stroke-width - CSS: Cascading Style Sheets
g stroke widths css p { margin: 0; font-size: 4em; -webkit-text-stroke-color: red; } #thin { -webkit-text-stroke-width: thin; } #medium { -webkit-text-stroke-width: 3px; } #thick { -webkit-text-stroke-width: 1.5mm; } html <p id="thin">thin stroke</p> <p id="medium">medium stroke</p> <p id="thick">thick stroke</p> results specifications specification status
comment compatibility standardthe definition of '-webkit-text-stroke-width' in that specification.
-webkit-text-stroke - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples adding a red text stroke html <p id="example">the stroke of this text is red.</p> css #example { font-size: 3em; margin: 0; -webkit-text-stroke: 2px red; } result specifications specification status
comment compatibility standardthe definition of '-webkit-text-stroke' in that specification.
::after (:after) - CSS: Cascading Style Sheets
r: #00f; cursor: help; } span[data-descr]:hover::after, span[data-descr]:focus::after { content: attr(data-descr); position: absolute; left: 0; top: 24px; min-width: 200px; border: 1px #aaaaaa solid; border-radius: 10px; background-color: #ffffcc; padding: 12px; color: #000000; font-size: 14px; z-index: 1; } result specifications specification status
comment css pseudo-elements level 4the definition of '::after' in that specification.
::before (:before) - CSS: Cascading Style Sheets
ses its gloss</li> <li>flip it over and fry for a couple more minutes</li> <li>serve with your favorite topping</li> </ol> css li { padding:0.5em; } li[aria-current='step'] { font-weight:bold; } li[aria-current='step']::after { content: " \21e6"; /* hexadecimal for unicode leftwards white arrow*/ display: inline; } result specifications specification status
comment css pseudo-elements level 4the definition of '::before' in that specification.
::cue-region - CSS: Cascading Style Sheets
font font-family font-size font-stretch font-style font-variant font-weight line-height opacity outline outline-color outline-style outline-width ruby-position text-combine-upright text-decoration text-decoration-color text-decoration-line text-decoration-style text-decoration-thickness text-shadow visibility white-space specifications specification status
comment webvtt: the web video text tracks formatthe definition of 'the ::cue-region pseudo-element' in that specification.
::cue - CSS: Cascading Style Sheets
::cue { color: #fff; background-color: rgba(0, 0, 0, 0.6); } specifications specification status
comment webvtt: the web video text tracks formatthe definition of '::cue' in that specification.
::first-letter (:first-letter) - CSS: Cascading Style Sheets
special punctuation mark.</p> <p>*the beginning of a special punctuation mark.</p> <p>#the beginning of a special punctuation mark.</p> <p>「特殊的汉字标点符号开头。</p> <p>《特殊的汉字标点符号开头。</p> <p>“特殊的汉字标点符号开头。</p> css p::first-letter { color: red; font-size: 150%; } result specifications specification status
comment css pseudo-elements level 4the definition of '::first-letter' in that specification.
::first-line (:first-line) - CSS: Cascading Style Sheets
an?</p> <span>the first line of this text will not receive special styling because it is not a block-level element.</span> css ::first-line { color: blue; text-transform: uppercase; /* warning: do not use these */ /* many properties are invalid in ::first-line pseudo-elements */ margin-left: 20px; text-indent: 20px; } result specifications specification status
comment css pseudo-elements level 4the definition of '::first-line' in that specification.
::grammar-error - CSS: Cascading Style Sheets
html <p>my friends is coming to the party tonight.</p> css ::grammar-error { text-decoration: underline red; color: red; } result specifications specification status
comment css pseudo-elements level 4the definition of '::grammar-error' in that specification.
::marker - CSS: Cascading Style Sheets
syntax ::marker examples html <ul> <li>peaches</li> <li>apples</li> <li>plums</li> </ul> css ul li::marker { color: red; font-size: 1.5em; } result specifications specification status
comment css pseudo-elements level 4the definition of '::marker' in that specification.
::part() - CSS: Cascading Style Sheets
lor: #0060df; border-color: #0a84ff !important; } javascript let template = document.queryselector("#tabbed-custom-element"); globalthis.customelements.define(template.id, class extends htmlelement { constructor() { super(); this.attachshadow({ mode: "open" }); this.shadowroot.appendchild(template.content); } }); result specifications specification status
comment shadow partsthe definition of '::part' in that specification.
::placeholder - CSS: Cascading Style Sheets
holders in form fields are harmful — nielsen norman group examples red text html <input placeholder="type something here!"> css input::placeholder { color: red; font-size: 1.2em; font-style: italic; } result green text html <input placeholder="type something here..."> css input::placeholder { color: green; } result specifications specification status
comment css pseudo-elements level 4the definition of '::placeholder' in that specification.
::selection - CSS: Cascading Style Sheets
(wcag defines large text as between 18.66px and 24px and bold, or 24px or larger.) webaim: color contrast checker mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.3 | w3c understanding wcag 2.0 specifications specification status
comment css pseudo-elements level 4the definition of '::selection' in that specification.
::slotted() - CSS: Cascading Style Sheets
shazaam</p> <span slot="person-age">immortal</span> <span slot="person-occupation">superhero</span> </person-details> specifications specification status
comment css scoping module level 1the definition of '::slotted' in that specification.
::spelling-error - CSS: Cascading Style Sheets
html <p contenteditable spellcheck="true">my friends are coegdfgfddffbgning to the party tonight.</p> css ::spelling-error { text-decoration: wavy red; } result specifications specification status
comment css pseudo-elements level 4the definition of '::spelling-error' in that specification.
:active - CSS: Cascading Style Sheets
/* active links */ p:active { background: #eee; } /* active paragraphs */ result active form elements html <form> <label for="my-button">my button: </label> <button id="my-button" type="button">try clicking me or my label!</button> </form> css form :active { color: red; } form button { background: white; } result specifications specification status
comment html living standardthe definition of ':active' in that specification.
:any-link - CSS: Cascading Style Sheets
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.
:blank - CSS: Cascading Style Sheets
html <textarea></textarea> css textarea:blank { border: 3px solid red; } result specifications specification status
comment selectors level 4the definition of ':blank' in that specification.
:default - CSS: Cascading Style Sheets
"summer" checked> <label for="summer">summer</label> <input type="radio" name="season" id="fall"> <label for="fall">fall</label> <input type="radio" name="season" id="winter"> <label for="winter">winter</label> </fieldset> css input:default { box-shadow: 0 0 2px 1px coral; } input:default + label { color: coral; } result specifications specification status
comment html living standardthe definition of ':default' in that specification.
:defined - CSS: Cascading Style Sheets
simple-custom:not(:defined) { display: none; } simple-custom:defined { display: block; } this is useful if you have a complex custom element that takes a while to load into the page — you might want to hide instances of the element until definition is complete, so that you don't end up with flashes of ugly unstyled elements on the page specifications specification status
comment html living standardthe definition of ':defined' in that specification.
:dir() - CSS: Cascading Style Sheets
formal syntax :dir( ltr | rtl ) examples html <div dir="rtl"> <span>test1</span> <div dir="ltr">test2 <div dir="auto">עִבְרִית</div> </div> </div> css :dir(ltr) { background-color: yellow; } :dir(rtl) { background-color: powderblue; } result specifications specification status
comment html living standardthe definition of ':dir(ltr)' in that specification.
:disabled - CSS: Cascading Style Sheets
ox').onchange = togglebilling; }, false); function togglebilling() { // select the billing text fields var billingitems = document.queryselectorall('#billing input[type="text"]'); // toggle the billing text fields for (var i = 0; i < billingitems.length; i++) { billingitems[i].disabled = !billingitems[i].disabled; } } result specifications specification status
comment html living standardthe definition of ':disabled' in that specification.
:enabled - CSS: Cascading Style Sheets
(enabled):</label> <input type="text" id="firstfield" value="lorem"><br> <label for="secondfield">second field (disabled):</label> <input type="text" id="secondfield" value="ipsum" disabled="disabled"><br> <input type="button" value="submit"> </form> css input:enabled { color: #2b2; } input:disabled { color: #aaa; } result specifications specification status
comment html living standardthe definition of ':enabled' in that specification.
:first-child - CSS: Cascading Style Sheets
or: lime; background-color: black; padding: 5px; } result styling a list html <ul> <li>item 1</li> <li>item 2</li> <li>item 3 <ul> <li>item 3.1</li> <li>item 3.2</li> <li>item 3.3</li> </ul> </li> </ul> css ul li { color: blue; } ul li:first-child { color: red; font-weight: bold; } result specifications specification status
comment selectors level 4the definition of ':first-child' in that specification.
:first-of-type - CSS: Cascading Style Sheets
<div>this <span>nested `span` is first</span>!</div> <div>this <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!</div> <div>this <span>nested `span` gets styled</span>!</div> <b>this `b` qualifies!</b> <div>this is the final `div`.</div> </article> css article :first-of-type { background-color: pink; } result specifications specification status
comment selectors level 4the definition of ':first-of-type' in that specification.
:focus-within - CSS: Cascading Style Sheets
<label for="given_name">given name:</label> <input id="given_name" type="text"> <br> <label for="family_name">family name:</label> <input id="family_name" type="text"> </form> css form { border: 1px solid; color: gray; padding: 4px; } form:focus-within { background: #ff8; color: black; } input { margin: 4px; } result specifications specification status
comment selectors level 4the definition of ':focus-within' in that specification.
:focus - CSS: Cascading Style Sheets
quick tip: never remove css outlines specifications specification status
comment html living standardthe definition of ':focus' in that specification.
:has() - CSS: Cascading Style Sheets
examples matching <a> elements that directly contain an <img> the following selector matches only <a> elements that directly contain an <img> child: a:has(> img) matching <h1> elements that are followed by a <p> the following selector matches <h1> elements only if they have a <p> element directly following them: h1:has(+ p) specifications specification status
comment selectors level 4the definition of ':has()' in that specification.
:in-range - CSS: Cascading Style Sheets
argin-bottom: 1em; } input { border: 1px solid black; } input:in-range { background-color: rgba(0, 255, 0, 0.25); } input:out-of-range { background-color: rgba(255, 0, 0, 0.25); border: 2px solid red; } input:in-range + label::after { content: 'okay.'; } input:out-of-range + label::after { content: 'out of range!'; } result specifications specification status
comment html living standardthe definition of ':in-range' in that specification.
:indeterminate - CSS: Cascading Style Sheets
ound: lime; } javascript var inputs = document.getelementsbytagname("input"); for (var i = 0; i < inputs.length; i++) { inputs[i].indeterminate = true; } progress bar html <progress> css progress { margin: 4px; } progress:indeterminate { opacity: 0.5; background-color: lightgray; box-shadow: 0 0 2px 1px red; } result specifications specification status
comment html living standardthe definition of ':indeterminate' in that specification.
:lang() - CSS: Cascading Style Sheets
inside.</q></div> <div lang="fr"><q>this french quote has a <q>nested</q> quote inside.</q></div> <div lang="de"><q>this german quote has a <q>nested</q> quote inside.</q></div> css :lang(en) > q { quotes: '\201c' '\201d' '\2018' '\2019'; } :lang(fr) > q { quotes: '« ' ' »'; } :lang(de) > q { quotes: '»' '«' '\2039' '\203a'; } result specifications specification status
comment selectors level 4the definition of ':lang()' in that specification.
:last-child - CSS: Cascading Style Sheets
lime; background-color: black; padding: 5px; } result styling a list html <ul> <li>item 1</li> <li>item 2</li> <li>item 3 <ul> <li>item 3.1</li> <li>item 3.2</li> <li>item 3.3</li> </ul> </li> </ul> css ul li { color: blue; } ul li:last-child { border: 1px solid red; color: red; } result specifications specification status
comment selectors level 4the definition of ':last-child' in that specification.
:last-of-type - CSS: Cascading Style Sheets
html <article> <div>this `div` is first.</div> <div>this <span>nested `span` is last</span>!</div> <div>this <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!</div> <b>this `b` qualifies!</b> <div>this is the final `div`!</div> </article> css article :last-of-type { background-color: pink; } result specifications specification status
comment selectors level 4the definition of ':last-of-type' in that specification.
:left - CSS: Cascading Style Sheets
syntax :left examples setting a margin for left-hand pages @page :left { margin: 2in 3in; } specifications specification status
comment css paged media module level 3the definition of ':left' in that specification.
:link - CSS: Cascading Style Sheets
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.
:not() - CSS: Cascading Style Sheets
*/ body :not(.crazy, .fancy) { font-family: sans-serif; } result specifications specification status
comment selectors level 4the definition of ':not()' in that specification.
:nth-child() - CSS: Cascading Style Sheets
span>span!</span> <span>span</span> <span>span!</span> </div> css html { font-family: sans-serif; } span, div em { padding: 5px; border: 1px solid green; display: inline-block; margin-bottom: 3px; } .first span:nth-child(2n+1), .second span:nth-child(2n+1), .third span:nth-of-type(2n+1) { background-color: lime; } result specifications specification status
comment selectors level 4the definition of ':nth-child' in that specification.
:nth-last-child() - CSS: Cascading Style Sheets
<h4>a list of four items (styled):</h4> <ol> <li>one</li> <li>two</li> <li>three</li> <li>four</li> </ol> <h4>a list of two items (unstyled):</h4> <ol> <li>one</li> <li>two</li> </ol> css /* if there are at least three list items, style them all */ li:nth-last-child(n+3), li:nth-last-child(n+3) ~ li { color: red; } result specifications specification status
comment selectors level 4the definition of ':nth-last-child' in that specification.
:nth-last-of-type() - CSS: Cascading Style Sheets
plus-b> | even | odd examples html <div> <span>this is a span.</span> <span>this is another span.</span> <em>this is emphasized.</em> <span>wow, this span gets limed!!!</span> <strike>this is struck through.</strike> <span>here is one last span.</span> </div> css span:nth-last-of-type(2) { background-color: lime; } result specifications specification status
comment selectors level 4the definition of ':nth-last-of-type' in that specification.
:nth-of-type() - CSS: Cascading Style Sheets
css /* odd paragraphs */ p:nth-of-type(2n+1) { color: red; } /* even paragraphs */ p:nth-of-type(2n) { color: blue; } /* first paragraph */ p:nth-of-type(1) { font-weight: bold; } /* this has no effect, as the .fancy class is only on the 4th p element, not the 1st */ p.fancy:nth-of-type(1) { text-decoration: underline; } result specifications specification status
comment selectors level 4the definition of ':nth-of-type' in that specification.
:only-child - CSS: Cascading Style Sheets
his list has just one element.</li> </ul> </li> <li>second <ul> <li>this list has three elements.</li> <li>this list has three elements.</li> <li>this list has three elements.</li> </ul> </li> </ol> css li li { list-style-type: disc; } li:only-child { color: red; list-style-type: square; } result specifications specification status
comment selectors level 4the definition of ':only-child' in that specification.
:only-of-type - CSS: Cascading Style Sheets
<i>i am the only `i` child.</i> <em>i am `em` #1.</em> <em>i am `em` #2.</em> </div> </main> css main :only-of-type { color: red; } result specifications specification status
comment selectors level 4the definition of ':only-of-type' in that specification.
:optional - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 3.3 explanations understanding success criterion 3.3.2 | w3c understanding wcag 2.0 specifications specification status
comment html living standardthe definition of ':optional' in that specification.
:out-of-range - CSS: Cascading Style Sheets
argin-bottom: 1em; } input { border: 1px solid black; } input:in-range { background-color: rgba(0, 255, 0, 0.25); } input:out-of-range { background-color: rgba(255, 0, 0, 0.25); border: 2px solid red; } input:in-range + label::after { content: 'okay.'; } input:out-of-range + label::after { content: 'out of range!'; } result specifications specification status
comment html living standardthe definition of ':out-of-range' in that specification.
:placeholder-shown - CSS: Cascading Style Sheets
ent id:</label> <input type="number" pattern="[0-9]{8}" title="8 digit id" id="sid" class="studentid" placeholder="8 digit id"/> </p> <input type="submit"/> </form> css input { background-color: #e8e8e8; color: black; } input.studentid:placeholder-shown { background-color: yellow; color: red; font-style: italic; } result specifications specification status
comment selectors level 4the definition of ':placeholder-shown' in that specification.
:read-only - CSS: Cascading Style Sheets
<p contenteditable>this paragraph is editable; it is read-write.</p> <p>this paragraph is not editable; it is read-only.</p> p { font-size: 150%; padding: 5px; border-radius: 5px; } p:read-only { background-color: red; color: white; } p:read-write { background-color: lime; } specifications specification status
comment html living standardthe definition of ':read-only' in that specification.
:read-write - CSS: Cascading Style Sheets
<p contenteditable>this paragraph is editable; it is read-write.</p> <p>this paragraph is not editable; it is read-only.</p> p { font-size: 150%; padding: 5px; border-radius: 5px; } p:read-only { background-color: red; color: white; } p:read-write { background-color: lime; } specifications specification status
comment html living standardthe definition of ':read-write' in that specification.
:required - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 3.3 explanations understanding success criterion 3.3.2 | w3c understanding wcag 2.0 specifications specification status
comment html living standardthe definition of ':required' in that specification.
:right - CSS: Cascading Style Sheets
syntax :right examples setting margins for right-hand pages @page :right { margin: 2in 3in; } specifications specification status
comment css paged media module level 3the definition of ':right' in that specification.
:root - CSS: Cascading Style Sheets
/* selects the root element of the document: <html> in the case of html */ :root { background: yellow; } syntax :root examples declaring global css variables :root can be useful for declaring global css variables: :root { --main-color: hotpink; --pane-padding: 5px 42px; } specifications specification status
comment selectors level 4the definition of ':root' in that specification.
:scope - CSS: Cascading Style Sheets
urn '#' + element.getattribute('id'); }).join(', '); html <div id="context"> <div id="element-1"> <div id="element-1.1"></div> <div id="element-1.2"></div> </div> <div id="element-2"> <div id="element-2.1"></div> </div> </div> <p> selected elements ids : <span id="results"></span> </p> result specifications specification status
comment selectors level 4the definition of ':scope' in that specification.
:state() - CSS: Cascading Style Sheets
my code block and/or include a list of links to useful code samples that live elsewhere: x y z specifications specification status
comment unknownthe definition of 'the :state() selector' in that specification.
:target - CSS: Cascading Style Sheets
ems: center; justify-content: center; background-color: black; border-radius: 50%; color: white; content: "×"; cursor: pointer; } /* lightbox overlay */ .lightbox .close::before { left: 0; top: 0; width: 100%; height: 100%; position: fixed; background-color: rgba(0,0,0,.7); content: ""; cursor: default; } result specifications specification status
comment html living standardthe definition of ':target' in that specification.
:valid - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.1 | w3c understanding wcag 2.0 specifications specification status
comment html living standardthe definition of ':valid' in that specification.
:visited - CSS: Cascading Style Sheets
nk yet?</a><br> <a href="">you've already visited this link.</a> css a { /* specify non-transparent defaults to certain properties, allowing them to be styled with the :visited state */ background-color: white; border: 1px solid white; } a:visited { background-color: yellow; border-color: hotpink; color: hotpink; } result specifications specification status
comment html living standardthe definition of ':visited' in that specification.
@charset - CSS: Cascading Style Sheets
oding of the style sheet to unicode utf-8 */ @charset 'iso-8859-15'; /* invalid, wrong quoting style used */ @charset "utf-8"; /* invalid, more than one space */ @charset "utf-8"; /* invalid, there is a character (a space) before the at-rule */ @charset utf-8; /* invalid, without ' or ", the charset is not a css <string> */ specifications specification status
comment css level 2 (revision 1)the definition of '@charset' in that specification.
additive-symbols - CSS: Cascading Style Sheets
ntage> = <angle> | <percentage> examples specifying additive symbols html <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> css @counter-style additive-symbols-example { system: additive; additive-symbols: v 5, iv 4, i 1; } .list { list-style: additive-symbols-example; } result specifications specification status
comment css counter styles level 3the definition of 'additive-symbols' in that specification.
fallback - CSS: Cascading Style Sheets
= <custom-ident> examples specifying a fallback counter style html <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> css @counter-style fallback-example { system: fixed; symbols: "\24b6" "\24b7" "\24b8"; fallback: upper-alpha; } .list { list-style: fallback-example; } result specifications specification status
comment css counter styles level 3the definition of 'fallback' in that specification.
negative - CSS: Cascading Style Sheets
= <angle> | <percentage> examples rendering negative counters html <ul class="list" start="-3"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> css @counter-style neg { system: numeric; symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9"; negative: "(-" ")"; } .list { list-style: neg; } result specifications specification status
comment css counter styles level 3the definition of 'system' in that specification.
pad - CSS: Cascading Style Sheets
tage>{1,2}<angle-percentage> = <angle> | <percentage> examples padding a counter html <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> css @counter-style pad-example { system: numeric; symbols: "0" "1" "2" "3" "4" "5"; pad: 2 "0"; } .list { list-style: pad-example; } result specifications specification status
comment css counter styles level 3the definition of 'pad' in that specification.
prefix - CSS: Cascading Style Sheets
he boy who lived</li> <li>the vanishing glass</li> <li>the letters from no one</li> <li>the keeper of the keys</li> <li>diagon alley</li> </ul> css @counter-style chapters { system: numeric; symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9"; prefix: 'chapter '; } .index { list-style: chapters; padding-left: 15ch; } result specifications specification status
comment css counter styles level 3the definition of 'prefix' in that specification.
speak-as - CSS: Cascading Style Sheets
dent> examples setting the spoken form for a counter html <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> css @counter-style speak-as-example { system: fixed; symbols: ; suffix: " "; speak-as: numbers; } .list { list-style: speak-as-example; } result specifications specification status
comment css counter styles level 3the definition of 'speak-as' in that specification.
suffix - CSS: Cascading Style Sheets
e-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples setting a suffix for a counter html <ul class="choices"> <li>one</li> <li>two</li> <li>three</li> <li>none of the above</li> </ul> css @counter-style options { system: fixed; symbols: a b c d; suffix: ") "; } .choices { list-style: options; } result specifications specification status
comment css counter styles level 3the definition of 'suffix' in that specification.
symbols - CSS: Cascading Style Sheets
e-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples setting counter symbols html <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> css @counter-style symbols-example { system: fixed; symbols: a "1" "\24b7" d e; } .list { list-style: symbols-example; } result specifications specification status
comment css counter styles level 3the definition of 'symbols' in that specification.
system - CSS: Cascading Style Sheets
html <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> css @counter-style alpha-modified { system: extends lower-alpha; prefix: "("; suffix: ") "; } ul { list-style: alpha-modified; } result specifications specification status
comment css counter styles level 3the definition of 'system' in that specification.
font-display - CSS: Cascading Style Sheets
s specified formal syntax [ auto | block | swap | fallback | optional ] examples specifying fallback font-display @font-face { font-family: examplefont; src: url(/path/to/fonts/examplefont.woff) format('woff'), url(/path/to/fonts/examplefont.eot) format('eot'); font-weight: 400; font-style: normal; font-display: fallback; } specifications specification status
comment css fonts module level 4the definition of 'font-display' in that specification.
font-family - CSS: Cascading Style Sheets
formal definition related at-rule@font-faceinitial valuen/a (required)computed valueas specified formal syntax <family-name>where <family-name> = <string> | <custom-ident>+ examples setting the font family name @font-face { font-family: examplefont; src: url('examplefont.ttf'); } specifications specification status
comment css fonts module level 3the definition of 'font-family' in that specification.
font-stretch - CSS: Cascading Style Sheets
@font-face { font-family: "open sans"; src: local("open sans") format("woff2"), url("/fonts/opensans-regular-webfont.woff") format("woff"); font-stretch: 87.5% 112.5%; } specifications specification status
comment css fonts module level 4the definition of 'font-stretch' in that specification.
font-style - CSS: Cascading Style Sheets
@font-face { font-family: garamond; src: url('garamond-italic.ttf'); font-style: italic; } specifications specification status
comment css fonts module level 4the definition of 'font-style' in that specification.
font-variation-settings - CSS: Cascading Style Sheets
l valuenormalcomputed valueas specified formal syntax normal | [ <string> <number> ]# examples setting font weight and stretch in a @font-face rule @font-face { font-family: 'opentypefont'; src: url('open_type_font.woff2') format('woff2'); font-weight: normal; font-style: normal; font-variation-settings: 'wght' 400, 'wdth' 300; } specifications specification status
comment css fonts module level 4the definition of 'font-variation-settings' in that specification.
font-weight - CSS: Cascading Style Sheets
@font-face { font-family: "open sans"; src: local("open sans") format("woff2"), url("/fonts/opensans-regular-webfont.woff") format("woff"); font-weight: 400; } specifications specification status
comment css fonts module level 4the definition of 'font-weight' in that specification.
src - CSS: Cascading Style Sheets
| local( <family-name> ) ]#where <family-name> = <string> | <custom-ident>+ examples specifying font resources using url() and local() @font-face { font-family: examplefont; src: local(example font), url('examplefont.woff') format("woff"), url('examplefont.otf') format("opentype"); } specifications specification status
comment css fonts module level 3the definition of 'src' in that specification.
unicode-range - CSS: Cascading Style Sheets
html <div>me & you = us</div> css @font-face { font-family: 'ampersand'; src: local('times new roman'); unicode-range: u+26; } div { font-size: 4em; font-family: ampersand, helvetica, sans-serif; } result specifications specification status
comment css fonts module level 3the definition of 'unicode-range' in that specification.
@font-face - CSS: Cascading Style Sheets
neue bold" is used; if the user does not have that font installed (two different names are tried), then the downloadable font named "mgopenmodernabold.ttf" is used instead: @font-face { font-family: myhelvetica; src: local("helvetica neue bold"), local("helveticaneue-bold"), url(mgopenmodernabold.ttf); font-weight: bold; } specifications specification status
comment woff file format 2.0the definition of 'woff2 font format' in that specification.
@font-feature-values - CSS: Cascading Style Sheets
-rule for "nice-style" in font one */ @font-feature-values font one { @styleset { nice-style: 12; } } /* at-rule for "nice-style" in font two */ @font-feature-values font two { @styleset { nice-style: 4; } } … /* apply the at-rules with a single declaration */ .nice-look { font-variant-alternates: styleset(nice-style); } specifications specification status
comment css fonts module level 4the definition of '@font-feature-values' in that specification.
@import - CSS: Cascading Style Sheets
ue> = <number> | <dimension> | <ident> | <ratio> examples importing css rules @import 'custom.css'; @import url("chrome://communicator/skin/"); importing css rules conditionally @import url("fineprint.css") print; @import url("bluish.css") speech; @import "common.css" screen; @import url('landscape.css') screen and (orientation:landscape); specifications specification status
comment css cascading and inheritance level 4the definition of 'the @import rule' in that specification.
-webkit-device-pixel-ratio - CSS: Cascading Style Sheets
ce's pixel density.</p> css /* exact resolution */ @media (-webkit-device-pixel-ratio: 1) { p { color: red; } } /* minimum resolution */ @media (-webkit-min-device-pixel-ratio: 1.1) { p { font-size: 1.5em; } } /* maximum resolution */ @media (-webkit-max-device-pixel-ratio: 3) { p { background: yellow; } } result specifications specification status
comment compatibility standardthe definition of '-webkit-device-pixel-ratio' in that specification.
-webkit-transform-3d - CSS: Cascading Style Sheets
examples @media (-webkit-transform-3d) { .foo { transform-style: preserve-3d; } } @media (-webkit-transform-3d: 1) { .foo { transform-style: preserve-3d; } } specifications specification status
comment compatibility standardthe definition of '-webkit-transform-3d' in that specification.
any-hover - CSS: Cascading Style Sheets
examples testing whether input methods can hover html <a href="#">try hovering over me!</a> css @media (any-hover: hover) { a:hover { background: yellow; } } result specifications specification status
comment media queries level 4the definition of 'any-hover' in that specification.
any-pointer - CSS: Cascading Style Sheets
e: none; -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border: 1px solid blue; } } @media (any-pointer: coarse) { input[type="checkbox"] { -moz-appearance: none; -webkit-appearance: none; appearance: none; width: 30px; height: 30px; border: 2px solid red; } } result specifications specification status
comment media queries level 4the definition of 'any-pointer' in that specification.
aspect-ratio - CSS: Cascading Style Sheets
dth and height.</div>"> </iframe> css iframe{ display:block; } javascript outer.style.width=outer.style.height="165px" w.onchange=w.oninput=function(){ outer.style.width=w.value+"px" wf.textcontent="width:"+w.value } h.onchange=h.oninput=function(){ outer.style.height=h.value+"px" hf.textcontent="height:"+h.value } result specifications specification status
comment media queries level 4the definition of 'aspect-ratio' in that specification.
aural - CSS: Cascading Style Sheets
examples basic example @media aural { body { voice-family: paul } } specifications specification status
comment css level 2 (revision 2)the definition of 'aural' in that specification.
color-gamut - CSS: Cascading Style Sheets
examples html <p>this is a test.</p> css @media (color-gamut: srgb) { p { background: #f4ae8a; } } result specifications specification status
comment media queries level 4the definition of 'color-gamut' in that specification.
color-index - CSS: Cascading Style Sheets
<link rel="stylesheet" href="http://foo.bar.com/base.css" /> <link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/color-stylesheet.css" /> specifications specification status
comment media queries level 4the definition of 'color-index' in that specification.
color - CSS: Cascading Style Sheets
-color devices, red on devices with a low number of colors, and greenish on devices with a high number of colors.</p> css p { color: black; } /* any color device */ @media (color) { p { color: red; } } /* any color device with at least 8 bits per color component */ @media (min-color: 8) { p { color: #24ba13; } } result specifications specification status
comment media queries level 4the definition of 'color' in that specification.
device-aspect-ratio - CSS: Cascading Style Sheets
examples article { padding: 1rem; } @media screen and (min-device-aspect-ratio: 16/9) { article { padding: 1rem 5vw; } } specifications specification status
comment media queries level 4the definition of 'device-aspect-ratio' in that specification.
device-height - CSS: Cascading Style Sheets
<link rel="stylesheet" media="screen and (max-device-height: 799px)" href="http://foo.bar.com/short-styles.css" /> specifications specification status
comment media queries level 4the definition of 'device-height' in that specification.
device-width - CSS: Cascading Style Sheets
<link rel="stylesheet" media="screen and (max-device-width: 799px)" href="http://foo.bar.com/narrow-styles.css" /> specifications specification status
comment media queries level 4the definition of 'device-width' in that specification.
display-mode - CSS: Cascading Style Sheets
(none) examples @media all and (display-mode: fullscreen) { body { margin: 0; border: 5px solid black; } } specifications specification status
comment web app manifestthe definition of 'display-mode' in that specification.
forced-colors - CSS: Cascading Style Sheets
html <div class="colors">weird color box</div> css .colors { background-color: red; color: grey; } @media (forced-colors: active) { .colors { background-color: white; color: black; } } result specifications specification status
comment media queries level 5the definition of 'forced-colors' in that specification.
grid - CSS: Cascading Style Sheets
neato!</p> css :not(.unknown) { color: lightgray; } @media (grid: 0) { .unknown { color: lightgray; } .bitmap { color: red; text-transform: uppercase; } } @media (grid: 1) { .unknown { color: lightgray; } .grid { color: black; text-transform: uppercase; } } result specifications specification status
comment media queries level 4the definition of 'grid' in that specification.
height - CSS: Cascading Style Sheets
html <div>watch this element as you resize your viewport's height.</div> css /* exact height */ @media (height: 360px) { div { color: red; } } /* minimum height */ @media (min-height: 25rem) { div { background: yellow; } } /* maximum height */ @media (max-height: 40rem) { div { border: 2px solid blue; } } result specifications specification status
comment media queries level 4the definition of 'height' in that specification.
hover - CSS: Cascading Style Sheets
examples html <a href="#">try hovering over me!</a> css @media (hover: hover) { a:hover { background: yellow; } } result specifications specification status
comment media queries level 4the definition of 'hover' in that specification.
inverted-colors - CSS: Cascading Style Sheets
ot, it should be red on light gray.</p> <p>if the text is gray, your browser doesn't support the `inverted-colors` media feature.</p> css p { color: gray; } @media (inverted-colors: inverted) { p { background: black; color: yellow; } } @media (inverted-colors: none) { p { background: #eee; color: red; } } result specifications specification status
comment media queries level 5the definition of 'inverted-colors' in that specification.
light-level - CSS: Cascading Style Sheets
@media (light-level: normal) { p { background: url("texture.jpg"); color: #333; } } @media (light-level: dim) { p { background: #222; color: #ccc; } } @media (light-level: washed) { p { background: white; color: black; font-size: 2em; } } specifications specification status
comment media queries level 5the definition of 'light-level' in that specification.
monochrome - CSS: Cascading Style Sheets
me pixels!</p> <p class="no-mono">your device doesn't support monochrome pixels.</p> css p { display: none; } /* any monochrome device */ @media (monochrome) { p.mono { display: block; color: #333; } } /* any non-monochrome device */ @media (monochrome: 0) { p.no-mono { display: block; color: #ee3636; } } result specifications specification status
comment media queries level 4the definition of 'monochrome' in that specification.
orientation - CSS: Cascading Style Sheets
examples html <div>box 1</div> <div>box 2</div> <div>box 3</div> css body { display: flex; } div { background: yellow; } @media (orientation: landscape) { body { flex-direction: row; } } @media (orientation: portrait) { body { flex-direction: column; } } result specifications specification status
comment media queries level 4the definition of 'orientation' in that specification.
overflow-block - CSS: Cascading Style Sheets
sed nec augue congue eros accumsan tincidunt sed eget ex.</p> css @media (overflow-block: scroll) { p { color: red; } } result specifications specification status
comment media queries level 4the definition of 'overflow-block' in that specification.
overflow-inline - CSS: Cascading Style Sheets
sed nec augue congue eros accumsan tincidunt sed eget ex.</p> css p { white-space: nowrap; } @media (overflow-inline: scroll) { p { color: red; } } result specifications specification status
comment media queries level 4the definition of 'overflow-inline' in that specification.
pointer - CSS: Cascading Style Sheets
nput[type="checkbox"]:checked { background: gray; } @media (pointer: fine) { input[type="checkbox"] { width: 15px; height: 15px; border-width: 1px; border-color: blue; } } @media (pointer: coarse) { input[type="checkbox"] { width: 30px; height: 30px; border-width: 2px; border-color: red; } } result specifications specification status
comment media queries level 4the definition of 'pointer' in that specification.
prefers-color-scheme - CSS: Cascading Style Sheets
} .night.dark-scheme { background: black; color: #ddd; } } @media (prefers-color-scheme: light) { .day.light-scheme { background: white; color: #555; } .night.light-scheme { background: #eee; color: black; } } .day, .night { display: inline-block; padding: 1em; width: 7em; height: 2em; vertical-align: middle; } result specifications specification status
comment media queries level 5the definition of 'prefers-color-scheme' in that specification.
prefers-contrast - CSS: Cascading Style Sheets
html <div class="contrast">low contrast box</div> css .contrast { width: 100px; height: 100px; outline: 2px dashed black; } @media (prefers-contrast: high) { .contrast { outline: 2px solid black; } } result specifications specification status
comment media queries level 5the definition of 'prefers-contrast' in that specification.
prefers-reduced-data - CSS: Cascading Style Sheets
-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+2000-206f, u+2074, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd; } } body { font-family: montserrat, -apple-system, blinkmacsystemfont, "segoe ui", roboto, helvetica, arial, "microsoft yahei", sans-serif, "apple color emoji", "segoe ui emoji", "segoe ui symbol"; } result specifications specification status
comment media queries level 5the definition of 'reduced-data' in that specification.
prefers-reduced-motion - CSS: Cascading Style Sheets
padding: 1em; border-radius: 1em; text-align: center; } @keyframes pulse { 0% { transform: scale(1); } 25% { transform: scale(.9); } 50% { transform: scale(1); } 75% { transform: scale(1.1); } 100% { transform: scale(1); } } @keyframes dissolve { 0% { opacity: 1; } 50% { opacity: 0.8; } 100% { opacity: 1; } } result specifications specification status
comment media queries level 5the definition of 'prefers-reduced-motion' in that specification.
prefers-reduced-transparency - CSS: Cascading Style Sheets
html <div class="transparency">transparent box</div> css .transparency { opacity: 0.5; } @media (prefers-reduced-transparency: reduce) { .transparency { opacity: 1; } } result specifications specification status
comment media queries level 5the definition of 'prefers-reduced-transparency' in that specification.
resolution - CSS: Cascading Style Sheets
his is a test of your device's pixel density.</p> css /* exact resolution */ @media (resolution: 150dpi) { p { color: red; } } /* minimum resolution */ @media (min-resolution: 72dpi) { p { text-decoration: underline; } } /* maximum resolution */ @media (max-resolution: 300dpi) { p { background: yellow; } } result specifications specification status
comment media queriesthe definition of 'resolution' in that specification.
scan - CSS: Cascading Style Sheets
if your screen uses progressive scanning, you should see a serif font.</p> css p { font-family: cursive; } @media (scan: interlace) { p { font-family: sans-serif; } } @media (scan: progressive) { p { font-family: serif; } } result specifications specification status
comment media queries level 4the definition of 'scan' in that specification.
scripting - CSS: Cascading Style Sheets
:-)</p> css p { color: lightgray; } @media (scripting: none) { .script-none { color: red; } } @media (scripting: initial-only) { .script-initial-only { color: red; } } @media (scripting: enabled) { .script-enabled { color: red; } } result specifications specification status
comment media queries level 5the definition of 'scripting' in that specification.
update - CSS: Cascading Style Sheets
examples html <p>if this text animates for you, you are using a fast-updating device.</p> css @keyframes jiggle { from { transform: translatey(0); } to { transform: translatey(25px); } } @media (update: fast) { p { animation: 1s jiggle linear alternate infinite; } } result specifications specification status
comment media queries level 4the definition of 'update' in that specification.
width - CSS: Cascading Style Sheets
mples html <div>watch this element as you resize your viewport's width.</div> css /* exact width */ @media (width: 360px) { div { color: red; } } /* minimum width */ @media (min-width: 35rem) { div { background: yellow; } } /* maximum width */ @media (max-width: 50rem) { div { border: 2px solid blue; } } result specifications specification status
comment media queries level 4the definition of 'width' in that specification.
@namespace - CSS: Cascading Style Sheets
ples specifying default and prefixed namespaces @namespace url(http://www.w3.org/1999/xhtml); @namespace svg url(http://www.w3.org/2000/svg); /* this matches all xhtml <a> elements, as xhtml is the default unprefixed namespace */ a {} /* this matches all svg <a> elements */ svg|a {} /* this matches both xhtml and svg <a> elements */ *|a {} specifications specification status
comment css namespaces modulethe definition of '@namespace' in that specification.
bleed - CSS: Cascading Style Sheets
formal definition related at-rule@pageinitial valueautocomputed valueas specified formal syntax auto | <length> examples setting a page bleed of 1cm @page { bleed: 1cm; } specifications specification status
comment css paged media module level 3the definition of 'bleed' in that specification.
marks - CSS: Cascading Style Sheets
formal definition related at-rule@pageinitial valuenonecomputed valueas specified formal syntax none | [ crop | cross ] examples adding crop and cross marks @page { marks: crop cross; } specifications specification status
comment css paged media module level 3the definition of 'marks' in that specification.
size - CSS: Cascading Style Sheets
al valueautocomputed valueas specified, but with relative lengths converted into absolute lengths formal syntax <length>{1,2} | auto | [ <page-size> | [ portrait | landscape ] ] examples specifying size and orientation @page { size: 4in 6in landscape; } nesting inside a @media rule @media print { @page { size: 50mm 150mm; } } specifications specification status
comment css paged media module level 3the definition of 'size' in that specification.
@page - CSS: Cascading Style Sheets
:blank :first :left :right :recto :verso specifications specification status
comment css logical properties and values level 1the definition of ':recto and :verso' in that specification.
@supports - CSS: Cascading Style Sheets
nside the @supports block, otherwise it will be partially applied in browsers which don't support the `of` argument of :nth-child(…) is supported */ :is(:nth-child(1n of ul, ol) a, details > summary) { … /* css applied when the :is(…) selector and the `of` argument of :nth-child(…) are both supported */ } } specifications specification status
comment css conditional rules module level 4the definition of '@supports' in that specification.
height - CSS: Cascading Style Sheets
ight: the percentage as specified or the absolute lengthmax-height: the percentage as specified or the absolute length or none formal syntax <viewport-length>{1,2}where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting minimum and maximum height @viewport { height: 500px; } specifications specification status
comment css device adaptationthe definition of '"height" descriptor' in that specification.
max-height - CSS: Cascading Style Sheets
specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto formal syntax <viewport-length>where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting viewport max height in pixels @viewport { max-height: 600px; } specifications specification status
comment css device adaptationthe definition of '"max-height" descriptor' in that specification.
max-width - CSS: Cascading Style Sheets
specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto formal syntax <viewport-length>where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting viewport max width in pixels @viewport { max-width: 600px; } specifications specification status
comment css device adaptationthe definition of '"max-width" descriptor' in that specification.
max-zoom - CSS: Cascading Style Sheets
formal definition related at-rule@viewportinitial valueautopercentagesthe zoom factor itselfcomputed valueauto, or a non-negative number or percentage as specified formal syntax auto | <number> | <percentage> examples setting max-zoom @viewport { max-zoom: 1.5; } specifications specification status
comment css device adaptationthe definition of '"max-zoom" descriptor' in that specification.
min-height - CSS: Cascading Style Sheets
specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto formal syntax <viewport-length>where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting viewport min height in pixels @viewport { min-height: 200px; } specifications specification status
comment css device adaptationthe definition of '"min-height" descriptor' in that specification.
min-width - CSS: Cascading Style Sheets
f specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, auto formal syntax <viewport-length>where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting viewport min width in pixels @viewport { min-width: 200px; } specifications specification status
comment css device adaptationthe definition of '"min-width" descriptor' in that specification.
min-zoom - CSS: Cascading Style Sheets
formal definition related at-rule@viewportinitial valueautopercentagesthe zoom factor itselfcomputed valueauto, or a non-negative number or percentage as specified formal syntax auto | <number> | <percentage> examples setting min zoom factor @viewport { min-zoom: 2.0; } specifications specification status
comment css device adaptationthe definition of '"min-zoom" descriptor' in that specification.
orientation - CSS: Cascading Style Sheets
formal definition related at-rule@viewportinitial valueautopercentagesrefer to the size of bounding boxcomputed valueas specified formal syntax auto | portrait | landscape examples setting viewport orientation @viewport { orientation: landscape; } specifications specification status
comment css device adaptationthe definition of '"orientation" descriptor' in that specification.
user-zoom - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | understanding wcag 2.0 formal definition related at-rule@viewportinitial valuezoompercentagesrefer to the size of bounding boxcomputed valueas specified formal syntax zoom | fixed examples disabling user zoom @viewport { user-zoom: fixed; } specifications specification status
comment css device adaptationthe definition of '"user-zoom" descriptor' in that specification.
viewport-fit - CSS: Cascading Style Sheets
formal definition related at-rule@viewportinitial valueautocomputed valueas specified formal syntax auto | contain | cover examples scaling viewport to fit device display @viewport { viewport-fit: cover; } specifications specification status
comment css round display level 1the definition of '"viewport-fit" descriptor' in that specification.
width - CSS: Cascading Style Sheets
n-width: the percentage as specified or the absolute lengthmax-width: the percentage as specified or the absolute length or none formal syntax <viewport-length>{1,2}where <viewport-length> = auto | <length-percentage>where <length-percentage> = <length> | <percentage> examples setting minimum and maximum width @viewport { width: 500px; } specifications specification status
comment css device adaptationthe definition of '"min-width" descriptor' in that specification.
zoom - CSS: Cascading Style Sheets
formal definition related at-rule@viewportinitial valueautopercentagesthe zoom factor itselfcomputed valueauto, or a non-negative number or percentage as specified formal syntax auto | <number> | <percentage> examples setting viewport zoom factor @viewport { zoom: 2.0; } specifications specification status
comment css device adaptationthe definition of '"zoom" descriptor' in that specification.
@viewport - CSS: Cascading Style Sheets
formal syntax @viewport { <group-rule-body> } examples setting viewport size, zoom, and orientation @viewport { min-width: 640px; max-width: 800px; } @viewport { zoom: 0.75; min-zoom: 0.5; max-zoom: 0.9; } @viewport { orientation: landscape; } specifications specification status
comment css round display level 1the definition of '@viewport' in that specification.
Adjacent sibling combinator - CSS: Cascading Style Sheets
/* paragraphs that come immediately after any image */ img + p { font-weight: bold; } syntax former_element + target_element { style properties } examples css li:first-of-type + li { color: red; } html <ul> <li>one</li> <li>two!</li> <li>three</li> </ul> result specifications specification status
comment selectors level 4the definition of 'next-sibling combinator' in that specification.
At-rules - CSS: Cascading Style Sheets
specifications specification status
comment css conditional rules module level 3 candidate recommendation initial definition compatibility standardthe definition of 'css at-rules' in that specification.
Attribute selectors - CSS: Cascading Style Sheets
*/ ol[type="a"] { list-style-type: lower-alpha; background: red; } ol[type="a" s] { list-style-type: lower-alpha; background: lime; } ol[type="a" s] { list-style-type: upper-alpha; background: lime; } html <ol type="a"> <li>example list</li> </ol> result specifications specification status
comment selectors level 4the definition of 'attribute selectors' in that specification.
Mastering margin collapsing - CSS: Cascading Style Sheets
<code>.4rem</code> margin between it and the text above.</p> <p>my bottom margin collapses with my parent, yielding a bottom margin of <code>2rem</code>.</p> </div> <p>i am <code>2rem</code> below the element above.</p> css div { margin: 2rem 0; background: lavender; } p { margin: .4rem 0 1.2rem 0; background: yellow; } result specifications specification status
comment css level 2 (revision 1)the definition of 'margin collapsing' in that specification.
CSS Color - CSS: Cascading Style Sheets
specifications specification status
comment css color module level 4 working draft css color module level 3 recommendation css level 2 (revision 1) recommendation css level 1 recommendation initial definition ...
CSS Display - CSS: Cascading Style Sheets
f grid layout relationship to other layout methods line-based placement grid template areas layout using named grid lines auto-placement in grid layout box alignment in grid layout grids, logical values and writing modes css grid layout and accessibility css grid layout and progressive enhancement realizing common layouts using grids specifications specification status
comment css display module level 3the definition of 'display' in that specification.
CSS Flexible Box Layout - CSS: Cascading Style Sheets
backwards compatibility of flexbox browser status of flexbox, interoperability issues and supporting older browsers and versions of the spec specifications specification status
comment css flexible box layout module candidate recommendation initial definition.
CSS Fonts - CSS: Cascading Style Sheets
specifications specification status
comment css fonts module level 4 working draft adds font-variation-settings (and related higher-level properties) and font-optical-sizing.
CSS Fragmentation - CSS: Cascading Style Sheets
reference box-decoration-break break-after break-before break-inside orphans widows specifications specification status
comment css fragmentation module level 3 candidate recommendation initial definition.
CSS Grid Layout - CSS: Cascading Style Sheets
essive enhancement realising common layouts using css grid subgrid external resources css grid and ie11 (polyfill) examples from jen simmons grid by example - a collection of usage examples and video tutorials codrops grid reference firefox devtools css grid inspector css grid playground grid garden - a game for learning css grid specifications specification status
comment css grid layout module level 2 working draft added subgrids.
CSS Images - CSS: Cascading Style Sheets
specifications specification status
comment css images module level 4 working draft added image-resolution, conic-gradient(), and image() css images module level 3 candidate recommendation added image-orientation, image-rendering, object-fit and object-position compatibility standardthe definition of 'css gradients' in that specification.
Using CSS counters - CSS: Cascading Style Sheets
<li>item</li> <!-- 2.3.2 --> <li>item</li> <!-- 2.3.3 --> </ol> </li> <li>item</li> <!-- 2.4 --> </ol> </li> <li>item</li> <!-- 3 --> <li>item</li> <!-- 4 --> </ol> <ol> <li>item</li> <!-- 1 --> <li>item</li> <!-- 2 --> </ol> result specifications specification status
comment css lists module level 3the definition of 'css counters' in that specification.
CSS Logical Properties and Values - CSS: Cascading Style Sheets
) offset-block-start (now inset-block-start ) offset-inline-end (now inset-inline-end ) offset-inline-start (now inset-inline-start ) guides basic concepts of logical properties and values logical properties for sizing logical properties for margins, borders and padding logical properties for floating and positioning specifications specification status
comment css logical properties and values level 1 editor's draft initial definition.
CSS Masking - CSS: Cascading Style Sheets
reference properties clip clip-path clip-rule mask mask-border mask-border-mode mask-border-outset mask-border-repeat mask-border-slice mask-border-source mask-border-width mask-clip mask-composite mask-image mask-mode mask-origin mask-position mask-repeat mask-size mask-type specifications specification status
comment css masking module level 1 candidate recommendation scalable vector graphics (svg) 1.1 (second edition)the definition of 'mask' in that specification.
CSS Motion Path - CSS: Cascading Style Sheets
c20,100 200,0 200,100'); animation: move 3000ms infinite alternate ease-in-out; width: 40px; height: 40px; background: cyan; } @keyframes move { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } } reference properties offset offset-anchor offset-distance offset-path offset-position offset-rotate specifications specification status
comment motion path module level 1 working draft initial definition.
CSS Overflow - CSS: Cascading Style Sheets
reference css properties overflow overflow-block overflow-inline overflow-x overflow-y text-overflow block-overflow line-clamp max-lines continue non-standard properties -webkit-line-clamp specifications specification status
comment css overflow module level 3the definition of 'overflow' in that specification.
CSS Paged Media - CSS: Cascading Style Sheets
reference css properties page-break-after page-break-before page-break-inside at-rules @page pseudo-classes :blank :first :left :right specifications specification status
comment css paged media module level 3 working draft css fragmentation module level 3 candidate recommendation css level 2 (revision 1) recommendation ...
CSS Scroll Snap - CSS: Cascading Style Sheets
roll-snap-align scroll-margin scroll-margin-top scroll-margin-right scroll-margin-bottom scroll-margin-left scroll-margin-inline scroll-margin-inline-start scroll-margin-inline-end scroll-margin-block scroll-margin-block-start scroll-margin-block-end guides basic concepts of css scroll snap browser compatibility and scroll snap specification specification status
comment css scroll snap module level 1 candidate recommendation initial definition ...
CSS selectors - CSS: Cascading Style Sheets
specifications specification status
comment selectors level 4 working draft added the || column combinator, grid structural selectors, logical combinators, location, time-demensional, resource state, linguistic and ui pseudo-classes, modifier for ascii case-sensitive and case-insensitive attribute value selection.
CSS Shapes - CSS: Cascading Style Sheets
svg: shapes and arbitrarily-shaped ui components specifications specification status
comment css shapes module level 1 candidate recommendation initial definition ...
CSS Table - CSS: Cascading Style Sheets
reference properties border-collapse border-spacing caption-side empty-cells table-layout vertical-align specifications specification status
comment css level 2 (revision 1) recommendation initial definition ...
CSS Text - CSS: Cascading Style Sheets
reference properties hanging-punctuation hyphens letter-spacing line-break overflow-wrap tab-size text-align text-align-last text-indent text-justify text-size-adjust text-transform white-space word-break word-spacing specifications specification status
comment css logical properties and values level 1 editor's draft updates some properties to be independent of the directionality of the text.
CSS Text Decoration - CSS: Cascading Style Sheets
ation on anchors since users often depend on the underline to denote hyperlinks.</p> <p class="underover">this text has lines above <em>and</em> below it.</p> <p class="thick">this text has a really thick purple underline in supporting browsers.</p> <p class="blink">this text might blink for you, depending on the browser you use.</p> specifications specification status
comment css text decoration module level 4 working draft css text decoration module level 3 candidate recommendation css level 2 (revision 1) recommendation css level 1 recommendation initial definition ...
CSS data types - CSS: Cascading Style Sheets
y-percentage> <gradient> <ident> <image> <integer> <length> <length-percentage> <number> <number-percentage> <percentage> <position> <quote> <ratio> <resolution> <shape-box> <shape-radius> <string> <time> <time-percentage> <timing-function> <toggle-value> <transform-function> <type-or-unit> <url> <url-modifier> <zero> specifications specification status
comment css values and units module level 4 editor's draft css values and units module level 3 candidate recommendation initial definition.
CSS Writing Modes - CSS: Cascading Style Sheets
reference properties direction glyph-orientation-horizontal text-combine-upright text-orientation unicode-bidi writing-mode specifications specification status
comment css writing modes module level 3 proposed recommendation css level 2 (revision 1) recommendation css level 1 recommendation initial definition ...
Child combinator - CSS: Cascading Style Sheets
<span>span #2, in the span that's in the div.</span> </span> </div> <span>span #3, not in the div at all.</span> result specifications specification status
comment selectors level 4the definition of 'child combinator' in that specification.
Class selectors - CSS: Cascading Style Sheets
kground: #ffa; } .fancy { font-weight: bold; text-shadow: 4px 4px 3px #77f; } html <p class="red">this paragraph has red text.</p> <p class="red yellow-bg">this paragraph has red text and a yellow background.</p> <p class="red fancy">this paragraph has red text and "fancy" styling.</p> <p>this is just a regular paragraph.</p> result specifications specification status
comment selectors level 4the definition of 'class selectors' in that specification.
Column combinator - CSS: Cascading Style Sheets
ol class="selected"/> </colgroup> <tbody> <tr> <td>a <td>b <td>c </tr> <tr> <td colspan="2">d</td> <td>e</td> </tr> <tr> <td>f</td> <td colspan="2">g</td> </tr> </tbody> </table> css col.selected || td { background: gray; color: white; font-weight: bold; } result specifications specification status
comment selectors level 4the definition of 'column combinator' in that specification.
Compositing and Blending - CSS: Cascading Style Sheets
reference properties background-blend-mode isolation mix-blend-mode data types <blend-mode> specifications specification status
comment compositing and blending level 1 candidate recommendation initial definition ...
Filter Effects - CSS: Cascading Style Sheets
reference properties backdrop-filter filter data types <filter-function> specifications specification status
comment filter effects module level 1the definition of 'filter' in that specification.
General sibling combinator - CSS: Cascading Style Sheets
age */ img ~ p { color: red; } syntax former_element ~ target_element { style properties } examples css p ~ span { color: red; } html <span>this is not red.</span> <p>here is a paragraph.</p> <code>here is some code.</code> <span>and here is a red span!</span> <code>more code...</code> <span>and this is a red span!</span> result specifications specification status
comment selectors level 4the definition of 'subsequent-sibling combinator' in that specification.
ID selectors - CSS: Cascading Style Sheets
e { style properties } note that syntactically (but not specificity-wise), this is equivalent to the following attribute selector: [id=id_value] { style properties } examples css #identified { background-color: skyblue; } html <div id="identified">this div has a special id on it!</div> <div>this is just a regular div.</div> result specifications specification status
comment selectors level 4the definition of 'id selectors' in that specification.
Media queries - CSS: Cascading Style Sheets
specifications specification status
comment media queries level 5 editor's draft css conditional rules module level 3 candidate recommendation media queries level 4 candidate recommendation media queries recommendation css level 2 (revision 1) recommendation initial definition ...
Pseudo-classes - CSS: Cascading Style Sheets
k :not() :nth-child() :nth-col() :nth-last-child() :nth-last-col() :nth-last-of-type() :nth-of-type() :only-child :only-of-type :optional :out-of-range :past :placeholder-shown :read-only :read-write :required :right :root :scope :state() :target :target-within :user-invalid :valid :visited :where() specifications specification status
comment fullscreen api living standard defined :fullscreen.
Pseudo-elements - CSS: Cascading Style Sheets
:pseudo-element 9.0 :pseudo-element ::pseudo-element firefox (gecko) 1.0 (1.0) :pseudo-element 1.0 (1.5) :pseudo-element ::pseudo-element opera 4.0 :pseudo-element 7.0 :pseudo-element ::pseudo-element safari (webkit) 1.0 (85) :pseudo-element ::pseudo-element specifications specification status
comment css level 1 recommendation defined pseudo-classes and pseudo-elements.
CSS reference - CSS: Cascading Style Sheets
concepts syntax and semantics css syntax at-rules cascade
comments descriptor inheritance shorthand properties specificity value definition syntax css unit and value types values actual value computed value initial value resolved value specified value used value layout block formatting context box model containing block layout mode margin collapsing replaced elements stacking context visual formatting model dom-css / cssom major o...
Selector list - CSS: Cascading Style Sheets
h1 { font-family: sans-serif } h2:maybe-unsupported { font-family: sans-serif } h3 { font-family: sans-serif } :is(h1, h2:maybe-unsupported, h3) { font-family: sans-serif } specifications specification status
comment selectors level 4the definition of 'selector lists' in that specification.
Shorthand properties - CSS: Cascading Style Sheets
see also css key concepts: css syntax, at-rule,
comments, specificity and inheritance, the box, layout modes and visual formatting models, and margin collapsing, or the initial, computed, resolved, specified, used, and actual values.
Type selectors - CSS: Cascading Style Sheets
*/ a { color: red; } syntax element { style properties } examples css span { background-color: skyblue; } html <span>here's a span with some text.</span> <p>here's a p with some text.</p> <span>here's a span with more text.</span> result specifications specification status
comment selectors level 4the definition of 'type (tag name) selector' in that specification.
align-content - CSS: Cascading Style Sheets
etelementbyid('values'); var display = document.getelementbyid('display'); var container = document.getelementbyid('container'); values.addeventlistener('change', function (evt) { container.style.aligncontent = evt.target.value; }); display.addeventlistener('change', function (evt) { container.classname = evt.target.value; }); result specifications specification status
comment css box alignment module level 3the definition of 'align-content' in that specification.
align-items - CSS: Cascading Style Sheets
.getelementbyid('values'); var display = document.getelementbyid('display'); var container = document.getelementbyid('container'); values.addeventlistener('change', function (evt) { container.style.alignitems = evt.target.value; }); display.addeventlistener('change', function (evt) { container.classname = evt.target.value; }); result specifications specification status
comment css box alignment module level 3the definition of 'align-items' in that specification.
align-self - CSS: Cascading Style Sheets
rt | flex-end examples html <section> <div>item #1</div> <div>item #2</div> <div>item #3</div> </section> css section { display: flex; align-items: center; height: 120px; background: beige; } div { height: 60px; background: cyan; margin: 5px; } div:nth-child(3) { align-self: flex-end; background: pink; } result specifications specification status
comment css box alignment module level 3the definition of 'align-self' in that specification.
<alpha-value> - CSS: Cascading Style Sheets
alpha value is used to set partially transparent text: /* <rgba()> */ color: rgba(34, 12, 64, 0.6); color: rgba(34.0 12 64 / 60%); setting shape image threshold here an alpha value is used to determine which parts of an image are considered part of a shape: /* shape-image-threshold */ shape-image-threshold: 70%; shape-image-threshold: 0.7; specifications specification status
comment css color module level 4the definition of '<alpha-value>' in that specification.
<angle> - CSS: Cascading Style Sheets
a clockwise right angle 90deg = 100grad = 0.25turn ≈ 1.5708rad setting a flat angle 180deg = 200grad = 0.5turn ≈ 3.1416rad setting a counterclockwise right angle -90deg = -100grad = -0.25turn ≈ -1.5708rad setting a null angle 0 = 0deg = 0grad = 0turn = 0rad specifications specification status
comment css values and units module level 4the definition of '<angle>' in that specification.
animation-timing-function - CSS: Cascading Style Sheets
animation-timing-function: steps(5, jump-none); } .jump-both { animation-timing-function: steps(5, jump-both); } .start { animation-timing-function: steps(5, start); } .end { animation-timing-function: steps(5, end); } .step-start { animation-timing-function: step-start; } .step-end { animation-timing-function: step-end; } specifications specification status
comment css animationsthe definition of 'animation-timing-function' in that specification.
aspect-ratio - CSS: Cascading Style Sheets
in firefox, the internal stylesheet rule looks like this: img, input[type="image"], video, embed, iframe, marquee, object, table { aspect-ratio: attr(width) / attr(height); } specifications specification status
comment css box sizing module level 4the definition of 'aspect-ratio' in that specification.
backdrop-filter - CSS: Cascading Style Sheets
rgb(0, 0, 172)); background-position: center center; background-repeat: no-repeat; background-size: cover; } .container { align-items: center; display: flex; justify-content: center; height: 100%; width: 100%; } html <div class="container"> <div class="box"> <p>backdrop-filter: blur(10px)</p> </div> </div> result specifications specification status
comment filter effects module level 2the definition of 'backdrop-filter' in that specification.
backface-visibility - CSS: Cascading Style Sheets
kground: rgba(196, 196, 0, 0.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(196, 0, 196, 0.7); transform: rotatex(-90deg) translatez(50px); } /* make the table a little nicer */ th, p, td { background-color: #eeeeee; margin: 0px; padding: 6px; font-family: sans-serif; text-align: left; } result specifications specification status
comment css transforms level 2the definition of 'backface-visibility' in that specification.
background-attachment - CSS: Cascading Style Sheets
</p> css p { background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"), url("https://mdn.mozillademos.org/files/12059/startransparent.gif"); background-attachment: fixed, scroll; background-repeat: no-repeat, repeat-y; } result specifications specification status
comment css backgrounds and borders module level 3the definition of 'background-attachment' in that specification.
background-blend-mode - CSS: Cascading Style Sheets
/8543/br.png'),url('https://mdn.mozillademos.org/files/8545/tr.png'); background-blend-mode: screen; } document.getelementbyid("select").onchange = function(event) { document.getelementbyid("div").style.backgroundblendmode = document.getelementbyid("select").selectedoptions[0].innerhtml; } console.log(document.getelementbyid('div')); specifications specification status
comment compositing and blending level 1the definition of 'background-blend-mode' in that specification.
background-clip - CSS: Cascading Style Sheets
t(60deg, red, yellow, red, yellow, red); font: 900 1.2em sans-serif; text-decoration: underline; } .border-box { background-clip: border-box; } .padding-box { background-clip: padding-box; } .content-box { background-clip: content-box; } .text { background-clip: text; -webkit-background-clip: text; color: rgba(0,0,0,.2); } result specifications specification status
comment css backgrounds and borders module level 3the definition of 'background-clip' in that specification.
background-color - CSS: Cascading Style Sheets
"> lorem ipsum dolor sit amet, consectetuer </div> <div class="examplethree"> lorem ipsum dolor sit amet, consectetuer </div> css .exampleone { background-color: teal; color: white; } .exampletwo { background-color: rgb(153,102,153); color: rgb(255,255,204); } .examplethree { background-color: #777799; color: #ffffff; } result specifications specification
comment feedback css backgrounds and borders module level 3the definition of 'background-color' in that specification.
background-image - CSS: Cascading Style Sheets
transparent; } div { background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png"); } .catsandstars { background-image: url("https://mdn.mozillademos.org/files/11991/startransparent.gif"), url("https://mdn.mozillademos.org/files/7693/catfront.png"); background-color: transparent; } result specifications specification status
comment css backgrounds and borders module level 3the definition of 'background-image' in that specification.
background-origin - CSS: Cascading Style Sheets
{ border: 4px solid black; padding: 10px; background: url('image.gif'); background-repeat: no-repeat; background-origin: border-box; } div { background-image: url('logo.jpg'), url('mainback.png'); /* applies two images to the background */ background-position: top right, 0px 0px; background-origin: content-box, padding-box; } specifications specification status
comment css backgrounds and borders module level 3the definition of 'background-origin' in that specification.
background-position-x - CSS: Cascading Style Sheets
html <div></div> css div { width: 300px; height: 300px; background-color: skyblue; background-image: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png); background-repeat: no-repeat; background-position-x: center; background-position-y: bottom 10px; } result specifications specification status
comment css backgrounds and borders module level 4the definition of 'background-position-x' in that specification.
background-position-y - CSS: Cascading Style Sheets
html <div></div> css div { width: 300px; height: 300px; background-color: skyblue; background-image: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png); background-repeat: no-repeat; background-position-x: center; background-position-y: bottom 10px; } result specifications specification status
comment css backgrounds and borders module level 4the definition of 'background-position-y' in that specification.
background-position - CSS: Cascading Style Sheets
*/ .examplethree { background-image: url("https://mdn.mozillademos.org/files/11987/startransparent.gif"), url("https://mdn.mozillademos.org/files/7693/catfront.png"); background-position: 0px 0px, right 3em bottom 2em; } result specifications specification status
comment css backgrounds and borders module level 3the definition of 'background-position' in that specification.
background - CSS: Cascading Style Sheets
s setting backgrounds with color keywords and images html <p class="topbanner"> starry sky<br/> twinkle twinkle<br/> starry sky </p> <p class="warning">here is a paragraph<p> css .warning { background: pink; } .topbanner { background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed; } result specifications specification status
comment css backgrounds and borders module level 3the definition of 'background' in that specification.
<basic-shape> - CSS: Cascading Style Sheets
60%, 0% 50%, 40% 40%); animation: 4s poly infinite alternate ease-in-out; margin: 10px auto; } @keyframes poly { from { clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%); } to { clip-path: polygon(50% 30%, 100% 0%, 70% 50%, 100% 100%, 50% 70%, 0% 100%, 30% 50%, 0% 0%); } } result specifications specification status
comment css shapes module level 1the definition of '<basic-shape>' in that specification.
<blend-mode> - CSS: Cascading Style Sheets
/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png) no-repeat center, linear-gradient(to bottom, blue, orange); } javascript const selectelem = document.queryselector('select'); const divelem = document.queryselector('div'); selectelem.addeventlistener('change', () => { divelem.style.backgroundblendmode = selectelem.value; }); result specifications specification status
comment compositing and blending level 1the definition of '<blend-mode>' in that specification.
block-size - CSS: Cascading Style Sheets
entagesblock-size of containing blockcomputed valuesame as width and heightanimation typea length, percentage or calc(); formal syntax <'width'> examples block size with vertical text html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; block-size: 200px; } result specifications specification status
comment css logical properties and values level 1the definition of 'block-size' in that specification.
border-block-color - CSS: Cascading Style Sheets
tion typediscrete formal syntax <'border-top-color'>{1,2} examples border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px solid blue; border-block-color: red; } results specifications specification status
comment css logical properties and values level 1the definition of 'border-block-color' in that specification.
border-block-end-color - CSS: Cascading Style Sheets
typea color formal syntax <'border-top-color'> examples border color with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px solid blue; border-block-end-color: red; } results specifications specification status
comment css logical properties and values level 1the definition of 'border-block-end-color' in that specification.
border-block-end-style - CSS: Cascading Style Sheets
ediscrete formal syntax <'border-top-style'> examples dashed border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-block-end-style: dashed; } results specifications specification status
comment css logical properties and values level 1the definition of 'border-block-end-style' in that specification.
border-block-end-width - CSS: Cascading Style Sheets
typea length formal syntax <'border-top-width'> examples border width with veritcal text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-block-end-width: 5px; } results specifications specification status
comment css logical properties and values level 1the definition of 'border-block-end-width' in that specification.
border-block-end - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; border-block-end: 5px dashed blue; } results specifications specification status
comment css logical properties and values level 1the definition of 'border-block-end' in that specification.
border-block-start-color - CSS: Cascading Style Sheets
ypea color formal syntax <'border-top-color'> examples border color with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px solid blue; border-block-start-color: red; } results specifications specification status
comment css logical properties and values level 1the definition of 'border-block-start-color' in that specification.
border-block-start-style - CSS: Cascading Style Sheets
iscrete formal syntax <'border-top-style'> examples dashed border wtih vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-block-start-style: dashed; } results specifications specification status
comment css logical properties and values level 1the definition of 'border-block-start-style' in that specification.
border-block-start-width - CSS: Cascading Style Sheets
ypea length formal syntax <'border-top-width'> examples border width with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-block-start-width: 5px; } results specifications specification status
comment css logical properties and values level 1the definition of 'border-block-start-width' in that specification.
border-block-start - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; border-block-start: 5px dashed blue; } specifications specification status
comment css logical properties and values level 1the definition of 'border-block-start' in that specification.
border-block-style - CSS: Cascading Style Sheets
typediscrete formal syntax <'border-top-style'> examples dashed border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-block-style: dashed; } results specifications specification status
comment css logical properties and values level 1the definition of 'border-block-style' in that specification.
border-block-width - CSS: Cascading Style Sheets
tion typediscrete formal syntax <'border-top-width'> examples border width with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-block-width: 5px; } results specifications specification status
comment css logical properties and values level 1the definition of 'border-block-width' in that specification.
border-block - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; border-block: 5px dashed blue; } results specifications specification status
comment css logical properties and values level 1the definition of 'border-block' in that specification.
border-bottom-color - CSS: Cascading Style Sheets
note which side of the box is <span class="redtext">red</span>.</p> </div> css .mybox { border: solid 0.3em gold; border-bottom-color: red; width: auto; } .redtext { color: red; } result specifications specification status
comment css backgrounds and borders module level 3the definition of 'border-bottom-color' in that specification.
border-bottom-left-radius - CSS: Cascading Style Sheets
the background color is clipped at the border div { border-bottom-left-radius:40%; border-style: black 3px double; background-color: rgb(250,20,70); background-clip: content-box; } specifications specification status
comment css backgrounds and borders module level 3the definition of 'border-bottom-left-radius' in that specification.
border-bottom-right-radius - CSS: Cascading Style Sheets
the background color is clipped at the border div { border-bottom-right-radius:40%; border-style: black 3px double; background-color: rgb(250,20,70); background-clip: content-box; } specifications specification status
comment css backgrounds and borders module level 3the definition of 'border-bottom-right-radius' in that specification.
border-bottom-style - CSS: Cascading Style Sheets
er-bottom-style: none;} .b2 {border-bottom-style: hidden;} .b3 {border-bottom-style: dotted;} .b4 {border-bottom-style: dashed;} .b5 {border-bottom-style: solid;} .b6 {border-bottom-style: double;} .b7 {border-bottom-style: groove;} .b8 {border-bottom-style: ridge;} .b9 {border-bottom-style: inset;} .b10 {border-bottom-style: outset;} result specifications specification status
comment css backgrounds and borders module level 3the definition of 'border-bottom-style' in that specification.
border-bottom-width - CSS: Cascading Style Sheets
length formal syntax <line-width>where <line-width> = <length> | thin | medium | thick examples comparing bottom border widths html <div>element 1</div> <div>element 2</div> css div { border: 1px solid red; margin: 1em 0; } div:nth-child(1) { border-bottom-width: thick; } div:nth-child(2) { border-bottom-width: 2em; } result specifications specification status
comment css backgrounds and borders module level 3the definition of 'border-bottom-width' in that specification.
border-bottom - CSS: Cascading Style Sheets
</div> css div { border-bottom: 4px dashed blue; background-color: gold; height: 100px; width: 100px; font-weight: bold; text-align: center; } results specifications specification status
comment css backgrounds and borders module level 3the definition of 'border-bottom' in that specification.
border-collapse - CSS: Cascading Style Sheets
border: solid 3px; } .fx { border-color: orange blue; } .gk { border-color: black red; } .ed { border-color: blue gold; } .tr { border-color: aqua; } .sa { border-color: silver blue; } .wk { border-color: gold blue; } .ch { border-color: red yellow green blue; } .bk { border-color: navy blue teal aqua; } .op { border-color: red; } result specifications specification status
comment css level 2 (revision 1)the definition of 'border-collapse' in that specification.
border-color - CSS: Cascading Style Sheets
#justone { border-color: red; } #horzvert { border-color: gold red; } #topvertbott { border-color: red cyan gold; } #trbl { border-color: red cyan black gold; } /* set width and style for all divs */ div { border: solid 0.3em; width: auto; margin: 0.5em; padding: 0.5em; } ul { margin: 0; list-style: none; } result specifications specification status
comment css logical properties and values level 1 editor's draft added the logical keyword.
border-end-end-radius - CSS: Cascading Style Sheets
s border radius with vertical text html <div> <p class="exampletext">example</p> </div> css content div { background-color: rebeccapurple; width: 120px; height: 120px; border-end-end-radius: 10px; } .exampletext { writing-mode: vertical-rl; padding: 10px; background-color: #fff; border-end-end-radius: 10px; } results specifications specification status
comment css logical properties and values level 1the definition of 'border-end-end-radius' in that specification.
border-end-start-radius - CSS: Cascading Style Sheets
mples border radius with vertical text html <div> <p class="exampletext">example</p> </div> css div { background-color: rebeccapurple; width: 120px; height: 120px; border-end-start-radius: 10px; } .exampletext { writing-mode: vertical-rl; padding: 10px; background-color: #fff; border-end-start-radius: 10px; } results specifications specification status
comment css logical properties and values level 1the definition of 'border-end-start-radius' in that specification.
border-image-outset - CSS: Cascading Style Sheets
length> | <number> ]{1,4} examples outsetting a border image html <div id="outset">this element has an outset border image!</div> css #outset { width: 10rem; background: #cef; border: 1.4rem solid; border-image: radial-gradient(#ff2, #55f) 40; border-image-outset: 1.5; /* 1.5 × 1.4rem = 2.1rem */ margin: 2.1rem; } result specifications specification status
comment css backgrounds and borders module level 3the definition of 'border-image-outset' in that specification.
border-image-repeat - CSS: Cascading Style Sheets
ion> <option value="stretch repeat">stretch repeat</option> <option value="space round">space round</option> </select> javascript var repetition = document.getelementbyid("repetition"); repetition.addeventlistener("change", function (evt) { document.getelementbyid("bordered").style.borderimagerepeat = evt.target.value; }); results specifications specification status
comment css backgrounds and borders module level 3the definition of 'border-image-repeat' in that specification.
border-image-slice - CSS: Cascading Style Sheets
lider.addeventlistener('input', () => { const newvalue = widthslider.value + 'px'; divelem.style.borderwidth = newvalue; widthoutput.textcontent = newvalue; }) sliceslider.addeventlistener('input', () => { const newvalue = sliceslider.value; divelem.style.borderimageslice = newvalue; sliceoutput.textcontent = newvalue; }) result specifications specification status
comment css backgrounds and borders module level 3the definition of 'border-image-slice' in that specification.
border-image-width - CSS: Cascading Style Sheets
stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.</p> css p { border: 20px solid; border-image: url("/static/external/21/214842819586a8dd293c17b38d0fd0e26430146a86dd04294a53ecaeeea7d0e2.png") 30 round; border-image-width: 16px; padding: 40px; } result specifications specification status
comment css backgrounds and borders module level 3the definition of 'border-image-width' in that specification.
border-image - CSS: Cascading Style Sheets
x 4px /* outset */ round; /* repeat */ } result gradient html <div id="gradient">this element is surrounded by a gradient-based border image!</div> css #gradient { width: 200px; border: 30px solid; border-image: repeating-linear-gradient(45deg, #f33, #3bf, #f33 30px) 60; padding: 20px; } result specifications specification status
comment css backgrounds and borders module level 3the definition of 'border-image' in that specification.
border-inline-color - CSS: Cascading Style Sheets
pediscrete formal syntax <'border-top-color'>{1,2} examples border color with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px solid blue; border-inline-color: red; } results specifications specification status
comment css logical properties and values level 1the definition of 'border-inline-color' in that specification.
border-inline-end-color - CSS: Cascading Style Sheets
ednocomputed valuecomputed coloranimation typea color formal syntax <'border-top-color'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px solid blue; border-inline-end-color: red; } specifications specification status
comment css logical properties and values level 1the definition of 'border-inline-end-color' in that specification.
border-inline-end-style - CSS: Cascading Style Sheets
ed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-inline-end-style: dashed; } results specifications specification status
comment css logical properties and values level 1the definition of 'border-inline-end-style' in that specification.
border-inline-end-width - CSS: Cascading Style Sheets
length formal syntax <'border-top-width'> examples applying a border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-inline-end-width: 5px; } results specifications specification status
comment css logical properties and values level 1the definition of 'border-inline-end-width' in that specification.
border-inline-end - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; border-inline-end: 5px dashed blue; } specifications specification status
comment css logical properties and values level 1the definition of 'border-inline-end' in that specification.
border-inline-start-color - CSS: Cascading Style Sheets
nocomputed valuecomputed coloranimation typea color formal syntax <'border-top-color'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px solid blue; border-inline-start-color: red; } specifications specification status
comment css logical properties and values level 1the definition of 'border-inline-start-color' in that specification.
border-inline-start-style - CSS: Cascading Style Sheets
ocomputed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-inline-start-style: dashed; } specifications specification status
comment css logical properties and values level 1the definition of 'border-inline-start-style' in that specification.
border-inline-start-width - CSS: Cascading Style Sheets
border style is none or hiddenanimation typea length formal syntax <'border-top-width'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-inline-start-width: 5px; } specifications specification status
comment css logical properties and values level 1the definition of 'border-inline-start-width' in that specification.
border-inline-start - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; border-inline-start: 5px dashed blue; } specifications specification status
comment css logical properties and values level 1the definition of 'border-inline-start' in that specification.
border-inline-style - CSS: Cascading Style Sheets
valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples html content <div> <p class="exampletext">example text</p> </div> css content div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-inline-style: dashed; } specifications specification status
comment css logical properties and values level 1the definition of 'border-inline-style' in that specification.
border-inline-width - CSS: Cascading Style Sheets
border style is none or hiddenanimation typediscrete formal syntax <'border-top-width'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-inline-width: 5px 10px; } specifications specification status
comment css logical properties and values level 1the definition of 'border-inline-width' in that specification.
border-inline - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; border-inline: 5px dashed blue; } results specifications specification status
comment css logical properties and values level 1the definition of 'border-inline' in that specification.
border-left-color - CSS: Cascading Style Sheets
note which side of the box is <span class="redtext">red</span>.</p> </div> css .mybox { border: solid 0.3em gold; border-left-color: red; width: auto; } .redtext { color: red; } result specifications specification status
comment css backgrounds and borders module level 3the definition of 'border-left-color' in that specification.
border-left-style - CSS: Cascading Style Sheets
classes */ .b1 {border-left-style: none;} .b2 {border-left-style: hidden;} .b3 {border-left-style: dotted;} .b4 {border-left-style: dashed;} .b5 {border-left-style: solid;} .b6 {border-left-style: double;} .b7 {border-left-style: groove;} .b8 {border-left-style: ridge;} .b9 {border-left-style: inset;} .b10 {border-left-style: outset;} result specifications specification status
comment css backgrounds and borders module level 3the definition of 'border-left-style' in that specification.
border-left-width - CSS: Cascading Style Sheets
tion typea length formal syntax <line-width>where <line-width> = <length> | thin | medium | thick examples comparing border widths html <div>element 1</div> <div>element 2</div> css div { border: 1px solid red; margin: 1em 0; } div:nth-child(1) { border-left-width: thick; } div:nth-child(2) { border-left-width: 2em; } result specifications specification status
comment css backgrounds and borders module level 3the definition of 'border-left-width' in that specification.
border-left - CSS: Cascading Style Sheets
</div> css div { border-left: 4px dashed blue; background-color: gold; height: 100px; width: 100px; font-weight: bold; text-align: center; } results specifications specification status
comment css backgrounds and borders module level 3the definition of 'border-left' in that specification.
border-radius - CSS: Cascading Style Sheets
r-radius: 10px 40px; border: dashed; border-width: 2px 4px; border-radius: 40px; live samples sample 1 : http://jsfiddle.net/tripad/qngkj/2/ sample 2 : http://jsfiddle.net/tripad/qngkj/3/ sample 3 : http://jsfiddle.net/tripad/qngkj/4/ sample 4 : http://jsfiddle.net/tripad/qngkj/5/ sample 5 : http://jsfiddle.net/tripad/qngkj/6/ specifications specification status
comment css backgrounds and borders module level 3the definition of 'border-radius' in that specification.
border-right-color - CSS: Cascading Style Sheets
note which side of the box is <span class="redtext">red</span>.</p> </div> css .mybox { border: solid 0.3em gold; border-right-color: red; width: auto; } .redtext { color: red; } result specifications specification status
comment css backgrounds and borders module level 3the definition of 'border-right-color' in that specification.
border-right-style - CSS: Cascading Style Sheets
.b1 {border-right-style: none;} .b2 {border-right-style: hidden;} .b3 {border-right-style: dotted;} .b4 {border-right-style: dashed;} .b5 {border-right-style: solid;} .b6 {border-right-style: double;} .b7 {border-right-style: groove;} .b8 {border-right-style: ridge;} .b9 {border-right-style: inset;} .b10 {border-right-style: outset;} result specifications specification status
comment css backgrounds and borders module level 3the definition of 'border-right-style' in that specification.
border-right-width - CSS: Cascading Style Sheets
on typea length formal syntax <line-width>where <line-width> = <length> | thin | medium | thick examples comparing border widths html <div>element 1</div> <div>element 2</div> css div { border: 1px solid red; margin: 1em 0; } div:nth-child(1) { border-right-width: thick; } div:nth-child(2) { border-right-width: 2em; } result specifications specification status
comment css backgrounds and borders module level 3the definition of 'border-right-width' in that specification.
border-right - CSS: Cascading Style Sheets
</div> css div { border-right: 4px dashed blue; background-color: gold; height: 100px; width: 100px; font-weight: bold; text-align: center; } results specifications specification status
comment css backgrounds and borders module level 3the definition of 'border-right' in that specification.
border-spacing - CSS: Cascading Style Sheets
td>3</td> </tr> <tr> <td>4</td><td>5</td><td>6</td> </tr> <tr> <td>7</td><td>8</td><td>9</td> </tr> </table> css table { border-spacing: 1em .5em; padding: 0 2em 1em 0; border: 1px solid orange; } td { width: 1.5em; height: 1.5em; background: #d2d2d2; text-align: center; vertical-align: middle; } result specifications specification status
comment css level 2 (revision 1)the definition of 'border-spacing' in that specification.
border-start-end-radius - CSS: Cascading Style Sheets
mples border radius with vertical text html <div> <p class="exampletext">example</p> </div> css div { background-color: rebeccapurple; width: 120px; height: 120px; border-start-end-radius: 10px; } .exampletext { writing-mode: vertical-rl; padding: 10px; background-color: #fff; border-start-end-radius: 10px; } results specifications specification status
comment css logical properties and values level 1the definition of 'border-start-end-radius' in that specification.
border-start-start-radius - CSS: Cascading Style Sheets
s border radius with vertical text html <div> <p class="exampletext">example</p> </div> css div { background-color: rebeccapurple; width: 120px; height: 120px; border-start-start-radius: 10px; } .exampletext { writing-mode: vertical-rl; padding: 10px; background-color: #fff; border-start-start-radius: 10px; } results specifications specification status
comment css logical properties and values level 1the definition of 'border-start-start-radius' in that specification.
border-style - CSS: Cascading Style Sheets
e396; } tr, td { padding: 2px; } /* border-style example classes */ .b1 {border-style:none;} .b2 {border-style:hidden;} .b3 {border-style:dotted;} .b4 {border-style:dashed;} .b5 {border-style:solid;} .b6 {border-style:double;} .b7 {border-style:groove;} .b8 {border-style:ridge;} .b9 {border-style:inset;} .b10 {border-style:outset;} result specifications specification status
comment css backgrounds and borders module level 3the definition of 'border-style' in that specification.
border-top-color - CSS: Cascading Style Sheets
note which side of the box is <span class="redtext">red</span>.</p> </div> css .mybox { border: solid 0.3em gold; border-top-color: red; width: auto; } .redtext { color: red; } result specifications specification status
comment css backgrounds and borders module level 3the definition of 'border-top-color' in that specification.
border-top-left-radius - CSS: Cascading Style Sheets
the box is not a square: an arc of ellipse is used as the border div { border-top-left-radius: 40%; } the background color is clipped at the border div { border-top-left-radius:40%; border-style: black 3px double; background-color: rgb(250,20,70); background-clip: content-box; } specifications specification status
comment css backgrounds and borders module level 3the definition of 'border-top-left-radius' in that specification.
border-top-right-radius - CSS: Cascading Style Sheets
the box is not a square: an arc of ellipse is used as the border div { border-top-right-radius: 40%; } the background color is clipped at the border div { border-top-right-radius:40%; border-style: black 3px double; background-color: rgb(250,20,70); background-clip: content-box; } specifications specification status
comment css backgrounds and borders module level 3the definition of 'border-top-right-radius' in that specification.
border-top-style - CSS: Cascading Style Sheets
e example classes */ .b1 {border-top-style: none;} .b2 {border-top-style: hidden;} .b3 {border-top-style: dotted;} .b4 {border-top-style: dashed;} .b5 {border-top-style: solid;} .b6 {border-top-style: double;} .b7 {border-top-style: groove;} .b8 {border-top-style: ridge;} .b9 {border-top-style: inset;} .b10 {border-top-style: outset;} result specifications specification status
comment css backgrounds and borders module level 3the definition of 'border-top-style' in that specification.
border-top-width - CSS: Cascading Style Sheets
tyle is none or hiddenanimation typea length formal syntax <line-width>where <line-width> = <length> | thin | medium | thick examples html <div>element 1</div> <div>element 2</div> css div { border: 1px solid red; margin: 1em 0; } div:nth-child(1) { border-top-width: thick; } div:nth-child(2) { border-top-width: 2em; } result specifications specification status
comment css backgrounds and borders module level 3the definition of 'border-top-width' in that specification.
border-top - CSS: Cascading Style Sheets
</div> css div { border-top: 4px dashed blue; background-color: gold; height: 100px; width: 100px; font-weight: bold; text-align: center; } results specifications specification status
comment css backgrounds and borders module level 3the definition of 'border-top' in that specification.
border-width - CSS: Cascading Style Sheets
nd 1em left</p> css #sval { border: ridge #ccc; border-width: 6px; } #bival { border: solid red; border-width: 2px 10px; } #treval { border: dotted orange; border-width: 0.3em 0 9px; } #fourval { border: solid lightgreen; border-width: thin medium thick 1em; } p { width: auto; margin: 0.25em; padding: 0.25em; } result specifications specification status
comment css backgrounds and borders module level 3the definition of 'border-width' in that specification.
border - CSS: Cascading Style Sheets
amazing, isn't it?</div> css div { border: 0.5rem outset pink; outline: 0.5rem solid khaki; box-shadow: 0 0 0 2rem skyblue; border-radius: 12px; font: bold 1rem sans-serif; margin: 2rem; padding: 1rem; outline-offset: 0.5rem; } result specifications specification status
comment css backgrounds and borders module level 3the definition of 'border' in that specification.
bottom - CSS: Cascading Style Sheets
"><p>fixed</p></div> <div class="absolute"><p>absolute</p></div> css p { font-size: 30px; line-height: 2em; } div { width: 48%; text-align: center; background: rgba(55,55,55,.2); border: 1px solid blue; } .absolute { position: absolute; bottom: 0; left: 0; } .fixed { position: fixed; bottom: 0; right: 0; } result specifications specification status
comment css positioned layout module level 3the definition of 'bottom' in that specification.
box-shadow - CSS: Cascading Style Sheets
html <div><p>hello world</p></div> css p { box-shadow: 0 0 0 2em #f4aab9, 0 0 0 4em #66ccff; margin: 4em; padding:1em; } result specifications specification status
comment css backgrounds and borders module level 3the definition of 'box-shadow' in that specification.
box-sizing - CSS: Cascading Style Sheets
total height: 80px + (2 * 20px) + (2 * 8px) = 136px content box width: 160px content box height: 80px */ } .border-box { box-sizing: border-box; /* total width: 160px total height: 80px content box width: 160px - (2 * 20px) - (2 * 8px) = 104px content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */ } result specifications specification status
comment css basic user interface module level 3the definition of 'box-sizing' in that specification.
break-after - CSS: Cascading Style Sheets
aucibus dui sed ultricies.</p> </article> css html { font-family: helvetica, arial, sans-serif; } h1 { font-size: 3rem; letter-spacing: 2px; column-span: all; } h2 { font-size: 1.2rem; color: red; letter-spacing: 1px; } p { line-height: 1.5; break-after: column; } article { column-width: 200px; gap: 20px; } result specifications specification status
comment css fragmentation module level 3the definition of 'break-after' in that specification.
break-before - CSS: Cascading Style Sheets
ucibus dui sed ultricies.</p> </article> css html { font-family: helvetica, arial, sans-serif; } h1 { font-size: 3rem; letter-spacing: 2px; column-span: all; } h2 { font-size: 1.2rem; color: red; letter-spacing: 1px; break-before: column; } p { line-height: 1.5; } article { column-width: 200px; gap: 20px; } result specifications specification status
comment css fragmentation module level 3the definition of 'break-before' in that specification.
break-inside - CSS: Cascading Style Sheets
r-spacing: 2px; column-span: all; } h1 + p { margin-top: 0; } p { line-height: 1.5; break-after: column; } figure { break-inside: avoid; } img { max-width: 70%; display: block; margin: 0 auto; } figcaption { font-style: italic; font-size: 0.8rem; width: 70%; } article { column-width: 200px; gap: 20px; } result specifications specification status
comment css fragmentation module level 3the definition of 'break-inside' in that specification.
caption-side - CSS: Cascading Style Sheets
ata</td> </tr> </table> <br> <table class="bottom"> <caption>caption below the table</caption> <tr> <td>some data</td> <td>some more data</td> </tr> </table> css .top caption { caption-side: top; } .bottom caption { caption-side: bottom; } table { border: 1px solid red; } td { border: 1px solid blue; } result specifications specification status
comment css logical properties and values level 1the definition of 'caption-side' in that specification.
caret-color - CSS: Cascading Style Sheets
<input class="custom" value="i have a custom caret color!" size="64"/> <p contenteditable class="custom">this paragraph can be edited, and its caret has a custom color as well!</p> css input { caret-color: auto; display: block; margin-bottom: .5em; } input.custom { caret-color: red; } p.custom { caret-color: green; } result specifications specification status
comment css basic user interface module level 3the definition of 'caret-color' in that specification.
clamp() - CSS: Cascading Style Sheets
</p> css html { font-family: sans-serif; } body { margin: 0 auto; width: min(1000px, calc(70% + 100px)); } h1 { letter-spacing: 2px; font-size: clamp(1.8rem, 2.5vw, 2.8rem); } p { line-height: 1.5; font-size: max(1.2rem, 1.2vw); } specifications specification status
comment css values and units module level 4the definition of 'clamp()' in that specification.
clear - CSS: Cascading Style Sheets
">this paragraph clears both.</p> </div> css .wrapper{ border:1px solid black; padding:10px; } .both { border: 1px solid black; clear: both; } .black { float: left; margin: 0; background-color: black; color: #fff; width:20%; } .red { float: right; margin: 0; background-color: pink; width:20%; } p { width: 45%; } specifications specification status
comment css logical properties and values level 1the definition of 'float and clear' in that specification.
clip-path - CSS: Cascading Style Sheets
90 0,0,1 240,100 l 200 340 z')">path</option> </select> css #clipped { margin-bottom: 20px; clip-path: url(#cross); } javascript const clippathselect = document.getelementbyid("clippath"); clippathselect.addeventlistener("change", function (evt) { document.getelementbyid("clipped").style.clippath = evt.target.value; }); result specifications specification status
comment css masking module level 1the definition of 'clip-path' in that specification.
clip - CSS: Cascading Style Sheets
ealityripple.com/samples/8f/15174f3500.jpg" title="graphic clipped to upper left"> <img id="middle" src="https://udn.realityripple.com/samples/8f/15174f3500.jpg" title="graphic clipped towards middle"> <img id="bottom-right" src="https://udn.realityripple.com/samples/8f/15174f3500.jpg" title="graphic clipped to bottom right"> </p> result specifications specification status
comment css masking module level 1the definition of 'clip' in that specification.
color-adjust - CSS: Cascading Style Sheets
d-image: linear-gradient(rgba(0, 0, 180, 0.5), rgba(70, 140, 220, 0.5)); color: #900; width: 15rem; height: 6rem; text-align: center; font: 24px "helvetica", sans-serif; display: flex; align-items: center; justify-content: center; color-adjust: exact; } html <div class="my-box"> <p>need more contrast!</p> </div> result specifications specification status
comment css color adjustment module level 1the definition of 'color-adjust' in that specification.
color - CSS: Cascading Style Sheets
ng text red the following are all ways to make a paragraph's text red: p { color: red; } p { color: #f00; } p { color: #ff0000; } p { color: rgb(255,0,0); } p { color: rgb(100%, 0%, 0%); } p { color: hsl(0, 100%, 50%); } /* 50% translucent */ p { color: #ff000080; } p { color: rgba(255, 0, 0, 0.5); } p { color: hsla(0, 100%, 50%, 0.5); } specifications specification status
comment css color module level 4the definition of 'color' in that specification.
<color> - CSS: Cascading Style Sheets
% opaque blue */ hsla(240, 100%, 50%, .4) /* 40% opaque blue */ hsla(240, 100%, 50%, .7) /* 70% opaque blue */ hsla(240, 100%, 50%, 1) /* full opaque blue */ /* whitespace syntax */ hsla(240 100% 50% / .05) /* 5% opaque blue */ /* percentage value for alpha */ hsla(240 100% 50% / 5%) /* 5% opaque blue */ specifications specification status
comment css color module level 4 working draft adds rebeccapurple, four- (#rgba) and eight-digit (#rrggbbaa) hexadecimal notations, rgba() and hsla() as aliases of rgb() and hsl() (both with identical parameter syntax), space-separated function parameters as an alternative to commas, percentages for alpha values, and angles for the hue component in hsl() colors.
column-count - CSS: Cascading Style Sheets
</p> css .content-box { column-count: 3; } result specifications specification status
comment css multi-column layout modulethe definition of 'column-count' in that specification.
column-fill - CSS: Cascading Style Sheets
</p> css .content-box { column-count: 4; column-rule: 1px solid black; column-fill: balance; } result specifications specification status
comment css multi-column layout modulethe definition of 'column-fill' in that specification.
column-rule-color - CSS: Cascading Style Sheets
don't you think that's wonderful?</p> css p { column-count: 3; column-rule-style: solid; column-rule-color: blue; } result specifications specification status
comment css multi-column layout modulethe definition of 'column-rule-color' in that specification.
column-rule-style - CSS: Cascading Style Sheets
don't you think that's wonderful?</p> css p { column-count: 3; column-rule-style: dashed; } result specifications specification status
comment css multi-column layout modulethe definition of 'column-rule-style' in that specification.
column-rule-width - CSS: Cascading Style Sheets
don't you think that's wonderful?</p> css p { column-count: 3; column-rule-style: solid; column-rule-width: thick; } result specifications specification status
comment css multi-column layout modulethe definition of 'column-rule-width' in that specification.
column-rule - CSS: Cascading Style Sheets
</p> css .content-box { padding: 0.3em; background: #ff7; column-count: 3; column-rule: inset 2px #33f; } result specifications specification status
comment css multi-column layout modulethe definition of 'column-rule' in that specification.
column-span - CSS: Cascading Style Sheets
the text is equally distributed over the columns.</p> </article> css article { columns: 3; } h2 { column-span: all; } result specifications specification status
comment css multi-column layout modulethe definition of 'column-span' in that specification.
column-width - CSS: Cascading Style Sheets
</p> css .content-box { column-width: 100px; } result specifications specification status
comment css writing modes level 4the definition of 'column-width' in that specification.
columns - CSS: Cascading Style Sheets
</p> css .content-box { columns: 3 auto; } result specifications specification status
comment css multi-column layout modulethe definition of 'columns' in that specification.
contain - CSS: Cascading Style Sheets
article</h2> <img src="graphic.jpg" alt="photo"> <p>more content here.</p> </article> img { float: left; border: 3px solid black; } article { border: 1px solid black; contain: content; } this also means that the first image no longer floats down to the second article, and instead stays inside it's containing element's bounds: specifications specification status
comment css containment module level 1the definition of 'contain' in that specification.
content - CSS: Cascading Style Sheets
html <div id="replaced">mozilla</div> css #replaced { content: url("https://mdn.mozillademos.org/files/12668/mdn.svg"); } #replaced::after { /* will not show if element replacement is supported */ content: " (" attr(id) ")"; } result specifications specification status
comment css generated content module level 3the definition of 'content' in that specification.
counter-increment - CSS: Cascading Style Sheets
]+ | none examples incrementing named counters h1 { counter-increment: chapter section 2 page; /* increases the value of the chapter and page counters by 1, and the section counter by 2 */ } specifications specification status
comment css lists module level 3the definition of 'counter-increment' in that specification.
counter-reset - CSS: Cascading Style Sheets
]+ | none examples resetting named counters h1 { counter-reset: chapter section 1 page; /* sets the chapter and page counters to 0, and the section counter to 1 */ } specifications specification status
comment css lists module level 3the definition of 'counter-reset' in that specification.
counter-set - CSS: Cascading Style Sheets
]+ | none examples setting named counters h1 { counter-set: chapter section 1 page; /* sets the chapter and page counters to 0, and the section counter to 1 */ } specifications specification status
comment css lists module level 3the definition of 'counter-set' in that specification.
counter() - CSS: Cascading Style Sheets
istcounter, upper-roman) "]"; } result decimal-leading-zero compared to lower-alpha html <ol> <li></li> <li></li> <li></li> </ol> css ol { counter-reset: count; } li { counter-increment: count; } li::after { content: "[" counter(count, decimal-leading-zero) "] == [" counter(count, lower-alpha) "]"; } result specifications specification status
comment css lists module level 3the definition of 'css counters' in that specification.
counters() - CSS: Cascading Style Sheets
</li> <li></li> </ol> </li> </ol> </li> </ol> css ol { counter-reset: count; } li { counter-increment: count; } li::marker { content: counters(count, '.', upper-alpha) ') '; } li::before { content: counters(count, ".", decimal-leading-zero) " == " counters(count, ".", lower-alpha); } result specifications specification status
comment css lists module level 3the definition of 'css counters' in that specification.
cross-fade() - CSS: Cascading Style Sheets
-webkit-cross-fade( url('https://mdn.mozillademos.org/files/8543/br.png'), url('https://mdn.mozillademos.org/files/8545/tr.png'), 75%); background-image: cross-fade( url('https://mdn.mozillademos.org/files/8543/br.png'), url('https://mdn.mozillademos.org/files/8545/tr.png'), 75%); } result specifications specification status
comment css images module level 4the definition of 'cross-fade()' in that specification.
cursor - CSS: Cascading Style Sheets
size | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing ] ] examples setting cursor types .foo { cursor: crosshair; } .bar { cursor: zoom-in; } /* a fallback keyword value is required when using a url */ .baz { cursor: url("hyper.cur"), auto; } specifications specification status
comment css basic user interface module level 3the definition of 'cursor' in that specification.
direction - CSS: Cascading Style Sheets
formal definition initial valueltrapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax ltr | rtl examples setting right-to-left direction blockquote { direction: rtl; } specifications specification status
comment css writing modes module level 3the definition of 'direction' in that specification.
<easing-function> - CSS: Cascading Style Sheets
*/ steps(-3, start) /* there must be at least one step.*/ steps(0, jump-none) specifications specification status
comment css animationsthe definition of '<timing-function>' in that specification.
element() - CSS: Cascading Style Sheets
<div style="width:400px; height:100px; background:-moz-element(#mybackground2);"> </div> <div style="overflow:hidden; height:0;"> <button id="mybackground2" type="button">evil button!</button> </div> specifications specification status
comment css images module level 4the definition of 'using elements as images: the element() notation' in that specification.
empty-cells - CSS: Cascading Style Sheets
> </tr> <tr> <td>curly</td> <td></td> </tr> </table> <br> <table class="table_2"> <tr> <td>moe</td> <td>larry</td> </tr> <tr> <td>curly</td> <td></td> </tr> </table> css .table_1 { empty-cells: show; } .table_2 { empty-cells: hide; } td, th { border: 1px solid gray; padding: 0.5rem; } result specifications specification status
comment css level 2 (revision 1)the definition of 'empty-cells' in that specification.
filter - CSS: Cascading Style Sheets
.mydiv { filter: grayscale(50%); } /* gray all images by 50% and blur by 10px */ img { filter: grayscale(0.5) blur(10px); } applying svg filters examples of using the url function with an svg resource are as follows: .target { filter: url(#c1); } .mydiv { filter: url(commonfilters.xml#large-blur); } specifications specification status
comment filter effects module level 1the definition of 'filter' in that specification.
fit-content() - CSS: Cascading Style Sheets
</div> <div>flexible item</div> </div> css #container { display: grid; grid-template-columns: fit-content(300px) fit-content(300px) 1fr; grid-gap: 5px; box-sizing: border-box; height: 200px; width: 100%; background-color: #8cffa0; padding: 10px; } #container > div { background-color: #8ca0ff; padding: 5px; } result specifications specification status
comment css box sizing module level 3the definition of 'fit-content()' in that specification.
flex-basis - CSS: Cascading Style Sheets
ntent: 'max-content'; } .flex3 { flex-basis: min-content; } .flex3:after { content: 'min-content'; } .flex4 { flex-basis: fit-content; } .flex4:after { content: 'fit-content'; } .flex5 { flex-basis: content; } .flex5:after { content: 'content'; } .flex6 { flex-basis: fill; } .flex6:after { content: 'fill'; } results specifications specification status
comment css flexible box layout modulethe definition of 'flex-basis' in that specification.
flex-direction - CSS: Cascading Style Sheets
s #content { width: 200px; height: 200px; border: 1px solid #c3c3c3; display: flex; flex-direction: column-reverse; } .box { width: 50px; height: 50px; } #content1 { width: 200px; height: 200px; border: 1px solid #c3c3c3; display: flex; flex-direction: row-reverse; } .box1 { width: 50px; height: 50px; } result specifications specification status
comment css flexible box layout modulethe definition of 'flex-direction' in that specification.
flex-flow - CSS: Cascading Style Sheets
flex items are laid out in multiple lines */ flex-flow: column-reverse wrap; } specifications specification status
comment css flexible box layout modulethe definition of 'flex-flow' in that specification.
flex-grow - CSS: Cascading Style Sheets
olor:lightgreen;">e</div> <div class="box" style="background-color:brown;">f</div> </div> css #content { display: flex; justify-content: space-around; flex-flow: row wrap; align-items: stretch; } .box { flex-grow: 1; border: 3px solid rgba(0,0,0,.2); } .box1 { flex-grow: 2; border: 3px solid rgba(0,0,0,.2); } result specifications specification status
comment css flexible box layout modulethe definition of 'flex-grow' in that specification.
flex-shrink - CSS: Cascading Style Sheets
:yellow;">c</div> <div class="box1" style="background-color:brown;">d</div> <div class="box1" style="background-color:lightgreen;">e</div> </div> css #content { display: flex; width: 500px; } #content div { flex-basis: 120px; border: 3px solid rgba(0,0,0,.2); } .box { flex-shrink: 1; } .box1 { flex-shrink: 2; } result specifications specification status
comment css flexible box layout modulethe definition of 'flex-shrink' in that specification.
flex-wrap - CSS: Cascading Style Sheets
: 50%; width: 300px; } .red { background: orangered; } .green { background: yellowgreen; } .blue { background: steelblue; } /* flexbox styles */ .content { display: flex; flex-wrap: wrap; } .content1 { display: flex; flex-wrap: nowrap; } .content2 { display: flex; flex-wrap: wrap-reverse; } results specifications specification status
comment css flexible box layout modulethe definition of 'flex-wrap' in that specification.
flex - CSS: Cascading Style Sheets
"block" : "none"; }); #flex-container { width: 100%; font-family: consolas, arial, sans-serif; } #flex-container > div { border: 1px solid #f00; padding: 1rem; } #flex-container > .raw-item { border: 1px solid #000; } result specifications specification status
comment css flexible box layout modulethe definition of 'flex' in that specification.
<flex> - CSS: Cascading Style Sheets
examples 1fr /* using an integer value */ 2.5fr /* using a float value */ specifications specification status
comment css grid layoutthe definition of '<flex>' in that specification.
float - CSS: Cascading Style Sheets
specifications specification status
comment css logical properties and values level 1the definition of 'float and clear' in that specification.
font-feature-settings - CSS: Cascading Style Sheets
ature-settings: "tnum"; } /* enable automatic fractions */ .fractions { font-feature-settings: "frac"; } /* use the second available swash character */ .swash { font-feature-settings: "swsh" 2; } /* enable stylistic set 7 */ .fancystyle { font-family: gabriola; /* available on windows 7, and on mac os */ font-feature-settings: "ss07"; } specifications specification status
comment css fonts module level 3the definition of 'font-feature-settings' in that specification.
font-kerning - CSS: Cascading Style Sheets
ntbyid('input'); let kern = document.getelementbyid('kern'); let nokern = document.getelementbyid('nokern'); input.addeventlistener('keyup', function() { kern.textcontent = input.value; /* update content */ nokern.textcontent = input.value; }); kern.textcontent = input.value; /* initialize content */ nokern.textcontent = input.value; specifications specification status
comment css fonts module level 3the definition of 'font-kerning' in that specification.
font-language-override - CSS: Cascading Style Sheets
imation typediscrete formal syntax normal | <string> examples using danish glyphs html <p class="para1">default language setting.</p> <p class="para2">this is a string with the <code>font-language-override</code> set to danish.</p> css p.para1 { font-language-override: normal; } p.para2 { font-language-override: "dan"; } result specifications specification status
comment css fonts module level 4the definition of 'font-language-override' in that specification.
font-size-adjust - CSS: Cascading Style Sheets
.</p> <p class="adjtimes">this is the 10px times, but now adjusted to the same aspect ratio as the verdana.</p> css .times { font-family: times, serif; font-size: 10px; } .verdana { font-family: verdana, sans-serif; font-size: 10px; } .adjtimes { font-family: times, serif; font-size-adjust: 0.58; font-size: 10px; } results specifications specification status
comment css fonts module level 3the definition of 'font-size-adjust' in that specification.
font-size - CSS: Cascading Style Sheets
ge> = <length> | <percentage> examples setting font sizes css .small { font-size: xx-small; } .larger { font-size: larger; } .point { font-size: 24pt; } .percent { font-size: 200%; } html <h1 class="small">small h1</h1> <h1 class="larger">larger h1</h1> <h1 class="point">24 point h1</h1> <h1 class="percent">200% h1</h1> result specifications specification status
comment css fonts module level 4the definition of 'font-size' in that specification.
font-stretch - CSS: Cascading Style Sheets
; font-family:'leaguemonovariable'; font-style: normal; font-stretch: 1% 500%; /* required by chrome */ } .container { border: 10px solid #f5f9fa; padding: 0 1rem; font: 1.5rem 'leaguemonovariable', sans-serif; } .condensed { font-stretch: 50%; } .normal { font-stretch: 100%; } .expanded { font-stretch: 200%; } result specifications specification status
comment css fonts module level 4the definition of 'font-stretch' in that specification.
font-style - CSS: Cascading Style Sheets
examples font styles <p class="normal">this paragraph is normal.</p> <p class="italic">this paragraph is italic.</p> <p class="oblique">this paragraph is oblique.</p> .normal { font-style: normal; } .italic { font-style: italic; } .oblique { font-style: oblique; } specifications specification status
comment css fonts module level 4the definition of 'font-style' in that specification.
font-synthesis - CSS: Cascading Style Sheets
站直。</em> css em { font-weight: bold; } .syn { font-synthesis: style weight; } .no-syn { font-synthesis: none; } result specifications specification status
comment css fonts module level 3the definition of 'font-synthesis' in that specification.
font-variant-caps - CSS: Cascading Style Sheets
-petite-caps | unicase | titling-caps examples setting the small-caps font variant html <p class="small-caps">firefox rocks, small caps!</p> <p class="normal">firefox rocks, normal caps!</p> css .small-caps { font-variant-caps: small-caps; font-style: italic; } .normal { font-variant-caps: normal; font-style: italic; } result specifications specification status
comment css fonts module level 3the definition of 'font-variant-caps' in that specification.
font-variant-east-asian - CSS: Cascading Style Sheets
> <td>大学</td> <td class="traditional">大学</td> </tr> </tbody> </table> css td{ font-family:"yu gothic"; font-size:20px; } th{ color:grey; padding-right:10px; } .ruby { font-variant-east-asian: ruby; } .jis78 { font-variant-east-asian: jis78; } .traditional{ font-variant-east-asian: traditional; } result specifications specification status
comment css fonts module level 3the definition of 'font-variant-east-asian' in that specification.
font-variant-ligatures - CSS: Cascading Style Sheets
atures; } .historical-ligatures { font-variant-ligatures: historical-ligatures; } .no-historical-ligatures { font-variant-ligatures: no-historical-ligatures; } .contextual { font-variant-ligatures: contextual; } .no-contextual { font-variant-ligatures: no-contextual; } .contextual { font-variant-ligatures: contextual; } result specifications specification status
comment css fonts module level 3the definition of 'font-variant-ligatures' in that specification.
font-variant-numeric - CSS: Cascading Style Sheets
ttp://scripts.sil.org/cms/scripts/page.php?item_id=ofl_web */ @font-face { font-family: "source sans pro"; font-style: normal; font-weight: 400; src: url("https://mdn.mozillademos.org/files/15757/sourcesanspro-regular.otf") format("opentype"); } .ordinal { font-variant-numeric: ordinal; font-family: "source sans pro"; } result specifications specification status
comment css fonts module level 3the definition of 'font-variant-numeric' in that specification.
font-variant-position - CSS: Cascading Style Sheets
rmal syntax normal | sub | super examples setting superscript and subscript forms html <p class="normal">normal!</p> <p class="super">super!</p> <p class="sub">sub!</p> css p { display: inline; } .normal { font-variant-position: normal; } .super { font-variant-position: super; } .sub { font-variant-position: sub; } result specifications specification status
comment css fonts module level 3the definition of 'font-variant-position' in that specification.
font-variant - CSS: Cascading Style Sheets
[ jis78 | jis83 | jis90 | jis04 | simplified | traditional ]<east-asian-width-values> = [ full-width | proportional-width ] examples setting the small-caps font variant html <p class="normal">firefox rocks!</p> <p class="small">firefox rocks!</p> css p.normal { font-variant: normal; } p.small { font-variant: small-caps; } result specifications specification status
comment css fonts module level 3the definition of 'font-variant' in that specification.
font-weight - CSS: Cascading Style Sheets
*/ span { font-weight: lighter; } result specifications specification status
comment css fonts module level 4the definition of 'font-weight' in that specification.
font - CSS: Cascading Style Sheets
); injectcss(shorttext); } injectcss = function(cssfragment) { old = document.body.getelementsbytagname("style"); if (old.length > 1) { old[1].parentelement.removechild(old[1]); } css = document.createelement("style"); css.innerhtml = ".fontshorthand{font: " + cssfragment + "}"; document.body.appendchild(css); } setcss(); specifications specification status
comment css fonts module level 3the definition of 'font' in that specification.
gap (grid-gap) - CSS: Cascading Style Sheets
</p> css .content-box { column-count: 3; gap: 40px; } result specifications specification status
comment css box alignment module level 3the definition of 'gap' in that specification.
<gradient> - CSS: Cascading Style Sheets
<div class="conic-gradient">conic gradient</div> div { width: 200px; height: 200px; } .conic-gradient { background: conic-gradient(lightpink, white, powderblue); } specifications specification status
comment css images module level 4the definition of '<gradient>' in that specification.
grid-area - CSS: Cascading Style Sheets
rid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> </div> css #grid { display: grid; height: 100px; grid-template: repeat(4, 1fr) / 50px 100px; } #item1 { background-color: lime; grid-area: 2 / 2 / auto / span 3; } #item2 { background-color: yellow; } #item3 { background-color: blue; } result specifications specification status
comment css grid layoutthe definition of 'grid-area' in that specification.
grid-auto-columns - CSS: Cascading Style Sheets
= <length> | <percentage> examples setting grid column size html <div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> </div> css #grid { height: 100px; display: grid; grid-template-areas: "a a"; grid-gap: 10px; grid-auto-columns: 200px; } #grid > div { background-color: lime; } result specifications specification status
comment css grid layoutthe definition of 'grid-auto-columns' in that specification.
grid-auto-flow - CSS: Cascading Style Sheets
"row" : "column"; if (dense.checked) { gridautoflow += " dense"; } grid.style.gridautoflow = gridautoflow; } result specifications specification status
comment css grid layoutthe definition of 'grid-auto-flow' in that specification.
grid-auto-rows - CSS: Cascading Style Sheets
entage> = <length> | <percentage> examples setting grid row size html <div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> </div> css #grid { width: 200px; display: grid; grid-template-areas: "a a"; grid-gap: 10px; grid-auto-rows: 100px; } #grid > div { background-color: lime; } result specifications specification status
comment css grid layoutthe definition of 'grid-auto-rows' in that specification.
grid-column-end - CSS: Cascading Style Sheets
wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .nested { border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; } result specifications specification status
comment css grid layoutthe definition of 'grid-column-end' in that specification.
grid-column-start - CSS: Cascading Style Sheets
wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .nested { border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; } result specifications specification status
comment css grid layoutthe definition of 'grid-column-start' in that specification.
grid-column - CSS: Cascading Style Sheets
id="item2"></div> <div id="item3"></div> </div> css #grid { display: grid; height: 100px; grid-template-columns: repeat(6, 1fr); grid-template-rows: 100px; } #item1 { background-color: lime; } #item2 { background-color: yellow; grid-column: 2 / 4; } #item3 { background-color: blue; grid-column: span 2 / 7; } result specifications specification status
comment css grid layoutthe definition of 'grid-column' in that specification.
grid-row-end - CSS: Cascading Style Sheets
wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .nested { border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; } result specifications specification status
comment css grid layoutthe definition of 'grid-row-end' in that specification.
grid-row-start - CSS: Cascading Style Sheets
wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .nested { border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; } result specifications specification status
comment css grid layoutthe definition of 'grid-row-start' in that specification.
grid-row - CSS: Cascading Style Sheets
<div id="item2"></div> <div id="item3"></div> </div> css #grid { display: grid; height: 200px; grid-template-columns: 200px; grid-template-rows: repeat(6, 1fr); } #item1 { background-color: lime; } #item2 { background-color: yellow; grid-row: 2 / 4; } #item3 { background-color: blue; grid-row: span 2 / 7; } result specifications specification status
comment css grid layoutthe definition of 'grid-row' in that specification.
grid-template-areas - CSS: Cascading Style Sheets
d-template-rows: 50px 1fr 30px; grid-template-columns: 150px 1fr; } #page > header { grid-area: head; background-color: #8ca0ff; } #page > nav { grid-area: nav; background-color: #ffa08c; } #page > main { grid-area: main; background-color: #ffff64; } #page > footer { grid-area: foot; background-color: #8cffa0; } result specifications specification status
comment css grid layoutthe definition of 'grid-template-areas' in that specification.
grid-template-columns - CSS: Cascading Style Sheets
e>where <length-percentage> = <length> | <percentage> examples specifying grid column sizes html <div id="grid"> <div id="areaa">a</div> <div id="areab">b</div> </div> css #grid { display: grid; width: 100%; grid-template-columns: 50px 1fr; } #areaa { background-color: lime; } #areab { background-color: yellow; } result specifications specification status
comment css grid layoutthe definition of 'grid-template-columns' in that specification.
grid-template-rows - CSS: Cascading Style Sheets
ntage>where <length-percentage> = <length> | <percentage> examples specifying grid row sizes html <div id="grid"> <div id="areaa">a</div> <div id="areab">b</div> </div> css #grid { display: grid; height: 100px; grid-template-rows: 30px 1fr; } #areaa { background-color: lime; } #areab { background-color: yellow; } result specifications specification status
comment css grid layoutthe definition of 'grid-template-rows' in that specification.
grid-template - CSS: Cascading Style Sheets
lime; grid-area: head; } nav { background-color: lightblue; grid-area: nav; } main { background-color: yellow; grid-area: main; } footer { background-color: red; grid-area: foot; } html <section id="page"> <header>header</header> <nav>navigation</nav> <main>main area</main> <footer>footer</footer> </section> result specifications specification status
comment css grid layoutthe definition of 'grid-template' in that specification.
grid - CSS: Cascading Style Sheets
les creating a grid layout html <div id="container"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> css #container { display: grid; grid: repeat(2, 60px) / auto-flow 80px; } #container > div { background-color: #8ca0ff; width: 50px; height: 50px; } result specifications specification status
comment css grid layoutthe definition of 'grid' in that specification.
hanging-punctuation - CSS: Cascading Style Sheets
praesent laoreet tortor massa, sit amet vulputate nulla pharetra ut.”</p> css p { hanging-punctuation: first last; margin: .5rem; } result specifications specification status
comment css text module level 3the definition of 'hanging-punctuation' in that specification.
height - CSS: Cascading Style Sheets
</div> </div> css div { width: 250px; margin-bottom: 5px; border: 2px solid blue; } #taller { height: 50px; } #shorter { height: 25px; } #parent { height: 100px; } #child { height: 50%; width: 75%; } result specifications specification status
comment css box sizing module level 4the definition of 'height' in that specification.
hyphens - CSS: Cascading Style Sheets
extreme­ly long english word</dd> </dl> css dd { width: 55px; border: 1px solid black; } dd.none { -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; } dd.manual { -webkit-hyphens: manual; -ms-hyphens: manual; hyphens: manual; } dd.auto { -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } result specifications specification status
comment css text module level 3the definition of 'hyphens' in that specification.
image-orientation - CSS: Cascading Style Sheets
orientation"> <option value="from-image">from-image</option> <option value="none">none</option> </select> javascript var imageorientation = document.getelementbyid("imageorientation"); imageorientation.addeventlistener("change", function (evt) { document.getelementbyid("image").style.imageorientation = evt.target.value; }); result specifications specification status
comment css images module level 3the definition of 'image-orientation' in that specification.
image-rendering - CSS: Cascading Style Sheets
dges" src="https://udn.realityripple.com/samples/de/cedd397be3.jpg" /> </div> img { height: 200px; } css .auto { image-rendering: auto; } .pixelated { -ms-interpolation-mode: nearest-neighbor; image-rendering: pixelated; } .crisp-edges { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; } result specifications specification status
comment css images module level 3the definition of 'image-rendering' in that specification.
image-set() - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.1 explanations understanding success criterion 1.1.1 | w3c understanding wcag 2.0 specifications specification status
comment css images module level 4the definition of 'the image-set() notation' in that specification.
<image> - CSS: Cascading Style Sheets
*/ image(z.jpg#xy=0,0) /* the spatial fragment must be written in the format of xywh=#,#,#,# */ image-set('cat.jpg' 1x, 'dog.jpg' 1x) /* every image in an image set must have a different resolutions */ specifications specification status
comment css images module level 4the definition of '<image>' in that specification.
Inheritance - CSS: Cascading Style Sheets
see also css values for controlling inheritance: inherit, initial, unset, and revert introducing the css cascade cascade and inheritance css key concepts: css syntax, at-rule,
comments, specificity and inheritance, the box, layout modes and visual formatting models, and margin collapsing, or the initial, computed, resolved, specified, used, and actual values.
initial-letter-align - CSS: Cascading Style Sheets
letter-align: auto; initial-letter-align: auto; } .alphabetic { -webkit-initial-letter-align: alphabetic; initial-letter-align: alphabetic; } .hanging { -webkit-initial-letter-align: hanging; initial-letter-align: hanging; } .ideographic { -webkit-initial-letter-align: ideographic; initial-letter-align: ideographic; } result specifications specification status
comment css inline layoutthe definition of 'initial-letter-align' in that specification.
initial-letter - CSS: Cascading Style Sheets
is normal</p> <p class="onefive">initial letter occupies 1.5 lines</p> <p class="three">initial letter occupies 3 lines</p> css .normal { -webkit-initial-letter: normal; initial-letter: normal; } .onefive { -webkit-initial-letter: 1.5; initial-letter: 1.5; } .three { -webkit-initial-letter: 3.0; initial-letter: 3.0; } result specifications specification status
comment css inline layoutthe definition of 'initial-letter' in that specification.
initial - CSS: Cascading Style Sheets
examples using initial to reset color for an element html <p> <span>this text is red.</span> <em>this text is in the initial color (typically black).</em> <span>this is red again.</span> </p> css p { color: red; } em { color: initial; } result specifications specification status
comment css cascading and inheritance level 4the definition of 'initial' in that specification.
inline-size - CSS: Cascading Style Sheets
tagesinline-size of containing blockcomputed valuesame as width and heightanimation typea length, percentage or calc(); formal syntax <'width'> examples setting inline size in pixels html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; inline-size: 110px; } result specifications specification status
comment css logical properties and values level 1the definition of 'inline-size' in that specification.
inset-block-end - CSS: Cascading Style Sheets
tage or calc(); formal syntax <'top'> examples setting block end offset html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; position: relative; inset-block-end: 20px; background-color: #c8c800; } result specifications specification status
comment css logical properties and values level 1the definition of 'inset-block-end' in that specification.
inset-block-start - CSS: Cascading Style Sheets
rcentage or calc(); formal syntax <'top'> examples setting block start offset html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; position: relative; inset-block-start: 20px; background-color: #c8c800; } specifications specification status
comment css logical properties and values level 1the definition of 'inset-block-start' in that specification.
inset-block - CSS: Cascading Style Sheets
formal syntax <'top'>{1,2} examples setting block start and end offsets html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; position: relative; inset-block: 20px 50px; background-color: #c8c800; } result specifications specification status
comment css logical properties and values level 1the definition of 'inset-block' in that specification.
inset-inline-end - CSS: Cascading Style Sheets
age or calc(); formal syntax <'top'> examples setting inline end offset html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; position: relative; inset-inline-end: 20px; background-color: #c8c800; } result specifications specification status
comment css logical properties and values level 1the definition of 'inset-inline-end' in that specification.
inset-inline-start - CSS: Cascading Style Sheets
r calc(); formal syntax <'top'> examples setting inline start offset html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; position: relative; inset-inline-start: 20px; background-color: #c8c800; } result specifications specification status
comment css logical properties and values level 1the definition of 'inset-inline-start' in that specification.
inset-inline - CSS: Cascading Style Sheets
rmal syntax <'top'>{1,2} examples setting inline start and end offsets html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; position: relative; inset-inline: 20px 50px; background-color: #c8c800; } result specifications specification status
comment css logical properties and values level 1the definition of 'inset-inline' in that specification.
inset - CSS: Cascading Style Sheets
examples setting offsets for an element html <div> <span class="exampletext">example text</span> </div> css div { background-color: yellow; width: 150px; height: 120px; position: relative; } .exampletext { writing-mode: sideways-rl; position: absolute; inset: 20px 40px 30px 10px; background-color: #c8c800; } result specifications specification status
comment css logical properties and values level 1the definition of 'inset' in that specification.
isolation - CSS: Cascading Style Sheets
/div> </div> <div id="e"> <div class="a c">isolate</div> </div> </div> css .a { background-color: rgb(0,255,0); } #b { width: 200px; height: 210px; } .c { width: 100px; height: 100px; border: 1px solid black; padding: 2px; mix-blend-mode: difference; } #d { isolation: auto; } #e { isolation: isolate; } result specifications specification status
comment compositing and blending level 1the definition of 'isolation' in that specification.
justify-content - CSS: Cascading Style Sheets
n> <option value="space-evenly">space-evenly</option> <option value="stretch">stretch</option> </select> javascript var justifycontent = document.getelementbyid("justifycontent"); justifycontent.addeventlistener("change", function (evt) { document.getelementbyid("container").style.justifycontent = evt.target.value; }); result specifications specification status
comment css box alignment module level 3the definition of 'justify-content' in that specification.
justify-items - CSS: Cascading Style Sheets
r 1fr; grid-auto-rows: 40px; grid-gap: 10px; width: 300px; justify-items: stretch; } article:hover, article:focus { justify-items: center; } article span { background-color: black; color: white; margin: 1px; text-align: center; } article, span { padding: 10px; border-radius: 7px; } article { margin: 20px; } result specifications specification status
comment css box alignment module level 3the definition of 'justify-items' in that specification.
justify-self - CSS: Cascading Style Sheets
-items: stretch; } span:nth-child(2) { justify-self: start; } span:nth-child(3) { justify-self: center; } span:nth-child(4) { justify-self: end; } article span { background-color: black; color: white; margin: 1px; text-align: center; } article, span { padding: 10px; border-radius: 7px; } article { margin: 20px; } result specifications specification status
comment css box alignment module level 3the definition of 'justify-self' in that specification.
left - CSS: Cascading Style Sheets
dth: 600px; height: 400px; position: relative; top: 20px; left: 20px; background-color: #ffd7c2; } #example_4 { width:200px; height:200px; position:absolute; bottom:10px; right:20px; background-color:#ffc7e4; } #example_5 { position: absolute; right: 0; left: 0; top: 100px; background-color: #d7ffc2; } result specifications specification status
comment css positioned layout module level 3the definition of 'left' in that specification.
<length-percentage> - CSS: Cascading Style Sheets
therefore, all of the following values are acceptable for width: width: 200px; width: 20%; width: calc(100% - 200px); specifications specification status
comment css values and units module level 4the definition of '<length-percentage>' in that specification.
<length> - CSS: Cascading Style Sheets
ntlistener('change', () => { inputdiv.style.width = inputelem.value; const result = document.createelement('div'); result.classname = 'result'; result.style.width = inputelem.value; result.innerhtml = `<code>width: ${inputelem.value}</code>`; resultsdiv.appendchild(result); inputelem.value = ''; inputelem.focus(); }) result specifications specification status
comment css values and units module level 4the definition of '<length>' in that specification.
letter-spacing - CSS: Cascading Style Sheets
"em-wide">letter spacing</p> <p class="em-wider">letter spacing</p> <p class="em-tight">letter spacing</p> <p class="px-wide">letter spacing</p> css .normal { letter-spacing: normal; } .em-wide { letter-spacing: 0.4em; } .em-wider { letter-spacing: 1em; } .em-tight { letter-spacing: -0.05em; } .px-wide { letter-spacing: 6px; } result specifications specification status
comment css text module level 3the definition of 'letter-spacing' in that specification.
line-break - CSS: Cascading Style Sheets
��に、美しいなぁと思わずつぶやいた。</p> </div> css .wrapbox { width: 10em; margin: 0.5em; white-space: normal; vertical-align: top; display: inline-block; } .auto { line-break: auto; } .loose { line-break: loose; } .normal { line-break: normal; } .strict { line-break: strict; } .anywhere { line-break: anywhere; } result specifications specification status
comment css text module level 3the definition of 'line-break' in that specification.
line-height-step - CSS: Cascading Style Sheets
:root { font-size: 12pt; --my-grid: 18pt; line-height-step: var(--my-grid); } h1 { font-size: 20pt; margin-top: calc(2 * var(--my-grid)); } the result of these rules is shown below in the following screenshot: specifications specification status
comment css rhythmic sizingthe definition of 'line-height-step' in that specification.
line-height - CSS: Cascading Style Sheets
eight results from the red div's font-size (15px × 1.1) = 16.5px, probably not what you want --> css .green { line-height: 1.1; border: solid limegreen; } .red { line-height: 1.1em; border: solid red; } h1 { font-size: 30px; } .box { width: 18em; display: inline-block; vertical-align: top; font-size: 15px; } result specifications specification status
comment css level 2 (revision 1)the definition of 'line-height' in that specification.
list-style-image - CSS: Cascading Style Sheets
aluenoneapplies tolist itemsinheritedyescomputed valuenone or the image with its uri made absoluteanimation typediscrete formal syntax <url> | none examples setting list item images html <ul> <li>item 1</li> <li>item 2</li> </ul> css ul { list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif"); } result specifications specification status
comment css lists module level 3the definition of 'list-style-image' in that specification.
list-style-position - CSS: Cascading Style Sheets
<li>list item 3-3</li> <li>list item 3-4</li> </ul> css .inside { list-style-position: inside; list-style-type: square; } .outside { list-style-position: outside; list-style-type: circle; } .inside-img { list-style-position: inside; list-style-image: url("https://mdn.mozillademos.org/files/11979/starsolid.gif"); } result specifications specification status
comment css lists module level 3the definition of 'list-style-position' in that specification.
list-style-type - CSS: Cascading Style Sheets
ers html list 1 <ol class="normal"> <li>hello</li> <li>world</li> <li>what's up?</li> </ol> list 2 <ol class="shortcut"> <li>looks</li> <li>like</li> <li>the</li> <li>same</li> </ol> css ol.normal { list-style-type: upper-alpha; } /* or use the shortcut "list-style": */ ol.shortcut { list-style: upper-alpha; } result specifications specification status
comment css counter styles level 3the definition of 'list-style-type' in that specification.
list-style - CSS: Cascading Style Sheets
e-image'> examples setting list style type and position html list 1 <ul class="one"> <li>list item1</li> <li>list item2</li> <li>list item3</li> </ul> list 2 <ul class="two"> <li>list item a</li> <li>list item b</li> <li>list item c</li> </ul> css .one { list-style: circle; } .two { list-style: square inside; } result specifications specification status
comment css lists module level 3the definition of 'list-style' in that specification.
margin-block-end - CSS: Cascading Style Sheets
, autoanimation typea length formal syntax <'margin-left'> examples setting block end margin html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; margin-block-end: 20px; background-color: #c8c800; } result specifications specification status
comment css logical properties and values level 1the definition of 'margin-block-end' in that specification.
margin-block-start - CSS: Cascading Style Sheets
toanimation typea length formal syntax <'margin-left'> examples setting block start margin html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; margin-block-start: 20px; background-color: #c8c800; } result specifications specification status
comment css logical properties and values level 1the definition of 'margin-block-start' in that specification.
margin-block - CSS: Cascading Style Sheets
ypediscrete formal syntax <'margin-left'>{1,2} examples setting block start and end margins html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; margin-block: 20px 40px; background-color: #c8c800; } result specifications specification status
comment css logical properties and values level 1the definition of 'margin-block' in that specification.
margin-bottom - CSS: Cascading Style Sheets
m; height:4em; } .box2 { border:1px dashed black; border-width:1px 0; margin-bottom:2em; } some definitions for container and divs so margins' effects can be seen more clearly .container { background-color:orange; width:320px; border:1px solid black; } div { width:320px; background-color:gold; } result specifications specification status
comment css basic box modelthe definition of 'margin-bottom' in that specification.
margin-inline-end - CSS: Cascading Style Sheets
autoanimation typea length formal syntax <'margin-left'> examples setting inline end margin html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; margin-inline-end: 20px; background-color: #c8c800; } result specifications specification status
comment css logical properties and values level 1the definition of 'margin-inline-end' in that specification.
margin-inline-start - CSS: Cascading Style Sheets
animation typea length formal syntax <'margin-left'> examples setting inline start margin html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; margin-inline-start: 20px; background-color: #c8c800; } result specifications specification status
comment css logical properties and values level 1the definition of 'margin-inline-start' in that specification.
margin-inline - CSS: Cascading Style Sheets
ediscrete formal syntax <'margin-left'>{1,2} examples setting inline start and end margins html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; margin-inline: 20px 40px; background-color: #c8c800; } result specifications specification status
comment css logical properties and values level 1the definition of 'margin-inline' in that specification.
margin-top - CSS: Cascading Style Sheets
the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> | auto examples setting positive and negative top margins .content { margin-top: 5%; } .sidebox { margin-top: 10px; } .logo { margin-top: -5px; } #footer { margin-top: 1em; } specifications specification status
comment css basic box modelthe definition of 'margin-top' in that specification.
mask-border-mode - CSS: Cascading Style Sheets
when browsers support it, it will specify the type of blending mode used for the mask border — luminance or alpha: mask-border-mode: luminance; mask-border-mode: alpha; specifications specification status
comment css masking module level 1the definition of 'mask-border-mode' in that specification.
mask-border - CSS: Cascading Style Sheets
und; /* repeat */ /* updated standard shorthand property, not supported anywhere yet */ mask-border: url("https://udn.realityripple.com/samples/2d/fd08a3134c.png") /* source */ 30 fill / /* slice */ 20px / /* width */ 1px /* outset */ round; /* repeat */ } result specifications specification status
comment css masking module level 1the definition of 'mask-border' in that specification.
mask-clip - CSS: Cascading Style Sheets
option value="stroke-box">stroke-box</option> <option value="view-box">view-box</option> <option value="no-clip">no-clip</option> </select> javascript var clipbox = document.getelementbyid("clipbox"); clipbox.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskclip = evt.target.value; }); result specifications specification status
comment css masking module level 1the definition of 'mask-clip' in that specification.
mask-composite - CSS: Cascading Style Sheets
lue="subtract">subtract</option> <option value="intersect">intersect</option> <option value="exclude">exclude</option> </select> javascript var clipbox = document.getelementbyid("compositemode"); clipbox.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskcomposite = evt.target.value; }); result specifications specification status
comment css masking module level 1the definition of 'mask-composite' in that specification.
mask-image - CSS: Cascading Style Sheets
rcentage> = <angle> | <percentage> examples setting a mask image with a url html <div id="masked"></div> css #masked { width: 100px; height: 100px; background-color: #8cffa0; -webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); } result specifications specification status
comment css masking module level 1the definition of 'mask-image' in that specification.
mask-mode - CSS: Cascading Style Sheets
n value="alpha">alpha</option> <option value="luminance">luminance</option> <option value="match-source">match-source</option> </select> javascript var maskmode = document.getelementbyid("maskmode"); maskmode.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskmode = evt.target.value; }); result specifications specification status
comment css masking module level 1the definition of 'mask-mode' in that specification.
mask-origin - CSS: Cascading Style Sheets
ption value="fill-box">fill-box</option> <option value="stroke-box">stroke-box</option> <option value="view-box">view-box</option> </select> javascript var origin = document.getelementbyid("origin"); origin.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskorigin = evt.target.value; }); result specifications specification status
comment css masking module level 1the definition of 'mask-origin' in that specification.
mask-position - CSS: Cascading Style Sheets
ft">bottom left</option> <option value="10px 20px">10px 20px</option> <option value="60% 20%">60% 20%</option> </select> javascript var maskposition = document.getelementbyid("maskposition"); maskposition.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskposition = evt.target.value; }); result specifications specification status
comment css masking module level 1the definition of 'mask-position' in that specification.
mask-size - CSS: Cascading Style Sheets
<option value="200px 100px">200px 100px</option> <option value="cover">cover</option> <option value="contain">contain</option> </select> javascript var masksize = document.getelementbyid("masksize"); masksize.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.masksize = evt.target.value; }); result specifications specification status
comment css masking module level 1the definition of 'mask-size' in that specification.
mask-type - CSS: Cascading Style Sheets
objectboundingbox" style="mask-type:luminance"> <rect x=".1" y=".1" width=".8" height=".8" fill="red" fill-opacity="0.7"/> </mask> </defs> </svg> css .redsquare { height: 100px; width: 100px; background-color: rgb(128, 128, 128); border: solid 1px black; mask: url("#m"); mask-type:luminance; } result specifications specification status
comment css masking module level 1the definition of 'mask-type' in that specification.
mask - CSS: Cascading Style Sheets
-angle>?<angular-color-hint> = <angle-percentage>where <color-stop-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples masking an image .target { mask: url(#c1) luminance; } .anothertarget { mask: url(resources.svg#c1) 50px 30px/10px 10px repeat-x exclude; } specifications specification status
comment css masking module level 1the definition of 'mask' in that specification.
max-block-size - CSS: Cascading Style Sheets
.standard-box { padding: 4px; background-color: #abcdef; color: #000; font: 16px "open sans", "helvetica", "arial", sans-serif; max-block-size: 160px; min-block-size: 100px; } .horizontal { writing-mode: horizontal-tb; } .vertical { writing-mode: vertical-rl; } result specifications specification status
comment css logical properties and values level 1the definition of 'max-block-size' in that specification.
max-height - CSS: Cascading Style Sheets
e length or noneanimation typea length, percentage or calc(); formal syntax auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> examples setting max-height using percentage and keyword values table { max-height: 75%; } form { max-height: none; } specifications specification status
comment css box sizing module level 4the definition of 'max-height' in that specification.
max-inline-size - CSS: Cascading Style Sheets
uted valuesame as max-width and max-heightanimation typea length, percentage or calc(); formal syntax <'max-width'> examples setting max inline size in pixels html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; block-size: 100%; max-inline-size: 200px; } result specifications specification status
comment css logical properties and values level 1the definition of 'max-inline-size' in that specification.
max-width - CSS: Cascading Style Sheets
</div> </div> css #parent { background: lightblue; width: 300px; } #child { background: gold; width: 100%; max-width: 150px; } result specifications specification status
comment css box sizing module level 4the definition of 'max-width' in that specification.
max() - CSS: Cascading Style Sheets
mdn understanding wcag, guideline 1.4 explanations understanding success criterion 1.4.4 | w3c understanding wcag 2.0 specifications specification status
comment css values and units module level 4the definition of 'max()' in that specification.
min-block-size - CSS: Cascading Style Sheets
blockcomputed valuesame as min-width and min-heightanimation typea length, percentage or calc(); formal syntax <'min-width'> examples setting minimum block size for vertical text html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; min-block-size: 200px; } result specifications specification status
comment css logical properties and values level 1the definition of 'min-block-size' in that specification.
min-height - CSS: Cascading Style Sheets
valuethe percentage as specified or the absolute lengthanimation typea length, percentage or calc(); formal syntax auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> examples setting min-height table { min-height: 75%; } form { min-height: 0; } specifications specification status
comment css box sizing module level 4the definition of 'min-height' in that specification.
min-inline-size - CSS: Cascading Style Sheets
same as min-width and min-heightanimation typea length, percentage or calc(); formal syntax <'min-width'> examples setting minimum inline size for vertical text html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; block-size: 5%; min-inline-size: 200px; } result specifications specification status
comment css logical properties and values level 1the definition of 'min-inline-size' in that specification.
min-width - CSS: Cascading Style Sheets
percentage as specified or the absolute lengthanimation typea length, percentage or calc(); formal syntax auto | <length> | <percentage> | min-content | max-content | fit-content(<length-percentage>)where <length-percentage> = <length> | <percentage> examples setting minimum element width table { min-width: 75%; } form { min-width: 0; } specifications specification status
comment css box sizing module level 4the definition of 'min-width' in that specification.
min() - CSS: Cascading Style Sheets
<form> <label>type something:</label> <input type="text"> </form> specifications specification status
comment css values and units module level 4the definition of 'min()' in that specification.
mix-blend-mode - CSS: Cascading Style Sheets
<g class="isolate"> <circle cx="40" cy="40" r="40" fill="red"/> <circle cx="80" cy="40" r="40" fill="lightgreen"/> <circle cx="60" cy="80" r="40" fill="blue"/> </g> </svg> css circle { mix-blend-mode: screen; } .isolate { isolation: isolate; } /* without isolation, the background color will be taken into account */ result specifications specification status
comment compositing and blending level 1the definition of 'mix-blend-mode' in that specification.
object-fit - CSS: Cascading Style Sheets
-start; height: 940px; } img { width: 150px; height: 100px; border: 1px solid #000; } .narrow { width: 100px; height: 150px; margin-top: 10px; } .fill { object-fit: fill; } .contain { object-fit: contain; } .cover { object-fit: cover; } .none { object-fit: none; } .scale-down { object-fit: scale-down; } result specifications specification status
comment css images module level 4the definition of 'object-fit' in that specification.
offset-anchor - CSS: Cascading Style Sheets
#ccc; margin-bottom: 10px; } .offset-anchor1 { offset-anchor: auto; background: cyan; } .offset-anchor2 { offset-anchor: right top; background: purple; } .offset-anchor3 { offset-anchor: left bottom; background: magenta; } @keyframes move { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } } result specifications specification status
comment motion path module level 1the definition of 'offset-anchor' in that specification.
offset-distance - CSS: Cascading Style Sheets
html <div id="motion-demo"></div> css #motion-demo { offset-path: path('m20,20 c20,100 200,0 200,100'); animation: move 3000ms infinite alternate ease-in-out; width: 40px; height: 40px; background: cyan; } @keyframes move { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } } result specifications specification status
comment motion path module level 1the definition of 'offset-distance' in that specification.
offset-path - CSS: Cascading Style Sheets
1004,190 h1075 a11,11 0 0,1 1086,201 v300 l1294,423 h1216 a11,11 0 0,0 1205,434 v789 a11,11 0 0,1 1194,800 h606 a11,11 0 0,1 595,789 v434 a11,11 0 0,0 584,423 h506 l900,190'); animation: followpath 4s linear infinite; } @keyframes followpath { to { motion-offset: 100%; offset-distance: 100%; } } result specifications <body> specification status
comment motion path module level 1the definition of 'offset-path' in that specification.
offset-position - CSS: Cascading Style Sheets
t position <div id="motion-demo"></div> #motion-demo { offset-path: path('m20,20 c20,100 200,0 200,100'); offset-position: left top; animation: move 3000ms infinite alternate ease-in-out; width: 40px; height: 40px; background: cyan; } @keyframes move { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } } specifications specification status
comment motion path module level 1the definition of 'offset-position' in that specification.
offset-rotate - CSS: Cascading Style Sheets
00%, 0% 100%, 30% 50%); animation: move 5000ms infinite alternate ease-in-out; offset-path: path('m20,20 c20,50 180,-10 180,20'); } div:nth-child(1) { offset-rotate: auto; } div:nth-child(2) { offset-rotate: auto 90deg; } div:nth-child(3) { offset-rotate: 30deg; } @keyframes move { 100% { offset-distance: 100%; } } result specifications specification status
comment motion path module level 1the definition of 'offset-rotate' in that specification.
offset - CSS: Cascading Style Sheets
n element along a path html <div id="offsetelement"></div> css @keyframes move { from { offset-distance: 0%; } to { offset-distance: 100%; } } #offsetelement { width: 50px; height: 50px; background-color: blue; offset: path("m 100 100 l 300 100 l 200 300 z") auto; animation: move 3s linear infinite; } result specifications specification status
comment motion path module level 1the definition of 'offset' in that specification.
opacity - CSS: Cascading Style Sheets
developer.mozilla.org/static/img/opengraph-logo.png" alt="mdn logo" width="128" height="146" class="opacity"> css img.opacity { opacity: 1; filter: alpha(opacity=100); /* ie8 and lower */ zoom: 1; /* triggers "haslayout" in ie 7 and lower */ } img.opacity:hover { opacity: 0.5; filter: alpha(opacity=50); zoom: 1; } result specifications specification status
comment css color module level 4the definition of 'opacity' in that specification.
order - CSS: Cascading Style Sheets
html <header>...</header> <main> <article>article</article> <nav>nav</nav> <aside>aside</aside> </main> <footer>...</footer> css main { display: flex; text-align:center; } main > article { flex:1; order: 2; } main > nav { width: 200px; order: 1; } main > aside { width: 200px; order: 3; } result specifications specification status
comment css flexible box layout modulethe definition of 'order' in that specification.
orphans - CSS: Cascading Style Sheets
it has a little bit more text than the first one.</p> </div> css div { background-color: #8cffa0; height: 150px; columns: 3; orphans: 3; } p { background-color: #8ca0ff; } p:first-child { margin-top: 0; } result specifications specification status
comment css fragmentation module level 3the definition of 'orphans' in that specification.
outline-color - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples setting a solid blue outline html <p>my outline is blue, as you can see.</p> css p { outline: 2px solid; /* set the outline width and style */ outline-color: #0000ff; /* make the outline blue */ margin: 5px; } result specifications specification status
comment css basic user interface module level 3the definition of 'outline-color' in that specification.
outline-offset - CSS: Cascading Style Sheets
fied, but with relative lengths converted into absolute lengthsanimation typea length formal syntax <length> examples setting outline offset in pixels html <p>gallia est omnis divisa in partes tres.</p> css p { outline: 1px dashed red; outline-offset: 10px; background: yellow; border: 1px solid blue; margin: 15px; } result specifications specification status
comment css basic user interface module level 3the definition of 'outline-offset' in that specification.
outline-style - CSS: Cascading Style Sheets
* { outline-width: 10px; padding: 15px; } result setting outline style to inset and outset html <div> <div class="inset"> <p class="outset">outline demo</p> </div> </div> css .inset { outline-style: inset; } .outset { outline-style: outset; } /* to make the demo clearer */ * { outline-width: 10px; padding: 15px; } result specifications specification status
comment css basic user interface module level 3the definition of 'outline-style' in that specification.
outline-width - CSS: Cascading Style Sheets
x">1ex</span> <span id="em">1.2em</span> css span { outline-style: solid; display: inline-block; margin: 20px; } #thin { outline-width: thin; } #medium { outline-width: medium; } #thick { outline-width: thick; } #twopixels { outline-width: 2px; } #oneex { outline-width: 1ex; } #em { outline-width: 1.2em; } result specifications specification status
comment css basic user interface module level 3the definition of 'outline-width' in that specification.
outline - CSS: Cascading Style Sheets
ne-style'> | <'outline-width'> ] examples using outline to set a focus style html <a href="#">this link has a special focus style.</a> css a { border: 1px solid; border-radius: 3px; display: inline-block; margin: 10px; padding: 5px; } a:focus { outline: 4px dotted #e73; outline-offset: 4px; background: #ffa; } result specifications specification status
comment css basic user interface module level 3the definition of 'outline' in that specification.
overflow-block - CSS: Cascading Style Sheets
</li> </ul> css #div1, #div2, #div3, #div4 { border: 1px solid black; width: 250px; height: 100px; } #div1 { overflow-block: hidden; margin-bottom: 120px;} #div2 { overflow-block: scroll; margin-bottom: 120px;} #div3 { overflow-block: visible; margin-bottom: 120px;} #div4 { overflow-block: auto; margin-bottom: 120px;} result specifications specification status
comment css overflow module level 3the definition of 'overflow-block' in that specification.
overflow-inline - CSS: Cascading Style Sheets
id="div4"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </div> </li> </ul> css #div1, #div2, #div3, #div4 { border: 1px solid black; width: 250px; margin-bottom: 12px; } #div1 { overflow-inline: hidden;} #div2 { overflow-inline: scroll;} #div3 { overflow-inline: visible;} #div4 { overflow-inline: auto;} result specifications specification status
comment css overflow module level 3the definition of 'overflow-inline' in that specification.
overflow-wrap - CSS: Cascading Style Sheets
(<code>hyphens</code>, german rules)</p> css p { width: 13em; margin: 2px; background: gold; } .ow-anywhere { overflow-wrap: anywhere; } .ow-break-word { overflow-wrap: break-word; } .word-break { word-break: break-all; } .hyphens { hyphens: auto; } result specifications specification status
comment css text module level 3the definition of 'overflow-wrap' in that specification.
overflow-x - CSS: Cascading Style Sheets
oll</code> <div id="div4"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </div> </li> </ul> css #div1, #div2, #div3, #div4 { border: 1px solid black; width: 250px; margin-bottom: 12px; } #div1 { overflow-x: hidden;} #div2 { overflow-x: scroll;} #div3 { overflow-x: visible;} #div4 { overflow-x: auto;} result specifications specification status
comment css overflow module level 3the definition of 'overflow-x' in that specification.
overflow-y - CSS: Cascading Style Sheets
</div> </li> </ul> css #div1, #div2, #div3, #div4 { border: 1px solid black; width: 250px; height: 100px; } #div1 { overflow-y: hidden; margin-bottom: 12px;} #div2 { overflow-y: scroll; margin-bottom: 12px;} #div3 { overflow-y: visible; margin-bottom: 120px;} #div4 { overflow-y: auto; margin-bottom: 120px;} result specifications specification status
comment css overflow module level 3the definition of 'overflow-y' in that specification.
overscroll-behavior-block - CSS: Cascading Style Sheets
div > div { height: 1500px; width: 100%; background-color: yellow; background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px); } p { padding: 10px; background-color: rgba(255,0,0,0.5); margin: 0; width: 340px; position: relative; top: 10px; left: 10px; } result specifications specification status
comment css overscroll behavior module level 1the definition of 'overscroll-behavior-block' in that specification.
overscroll-behavior-inline - CSS: Cascading Style Sheets
} div > div { height: 100%; width: 1500px; background-color: yellow; background-image: repeating-linear-gradient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px); } p { padding: 10px; background-color: rgba(255,0,0,0.5); margin: 0; width: 360px; position: relative; top: 10px; left: 10px; } result specifications specification status
comment css overscroll behavior module level 1the definition of 'overscroll-behavior-inline' in that specification.
overscroll-behavior-x - CSS: Cascading Style Sheets
to avoid this, you can set overscroll-behavior-x: contain on the inner box: main > div { height: 300px; width: 500px; overflow: auto; position: relative; top: 100px; left: 100px; overscroll-behavior-x: contain; } specifications specification status
comment css overscroll behavior module level 1the definition of 'overscroll-behavior-x' in that specification.
overscroll-behavior - CSS: Cascading Style Sheets
this can be prevented by setting overscroll-behavior: none on the <body> element: body { margin: 0; overscroll-behavior: none; } specifications specification status
comment css overscroll behavior module level 1the definition of 'overscroll-behavior' in that specification.
padding-block-end - CSS: Cascading Style Sheets
ntax <'padding-left'> examples setting block end padding for vertical text html content <div> <p class="exampletext">example text</p> </div> css content div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; padding-block-end: 20px; background-color: #c8c800; } result specifications specification status
comment css logical properties and values level 1the definition of 'padding-block-end' in that specification.
padding-block-start - CSS: Cascading Style Sheets
gth formal syntax <'padding-left'> examples setting block start padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; padding-block-start: 20px; background-color: #c8c800; } result specifications specification status
comment css logical properties and values level 1the definition of 'padding-block-start' in that specification.
padding-block - CSS: Cascading Style Sheets
crete formal syntax <'padding-left'>{1,2} examples setting block padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; padding-block: 20px 40px; background-color: #c8c800; } result specifications specification status
comment css logical properties and values level 1the definition of 'padding-block' in that specification.
padding-bottom - CSS: Cascading Style Sheets
letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> examples setting padding bottom with pixels and percentages .content { padding-bottom: 5%; } .sidebox { padding-bottom: 10px; } specifications specification status
comment css basic box modelthe definition of 'padding-bottom' in that specification.
padding-inline-end - CSS: Cascading Style Sheets
typea length formal syntax <'padding-left'> examples setting inline end padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; padding-inline-end: 20px; background-color: #c8c800; } specifications specification status
comment css logical properties and values level 1the definition of 'padding-inline-end' in that specification.
padding-inline-start - CSS: Cascading Style Sheets
ea length formal syntax <'padding-left'> examples setting inline start padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; padding-inline-start: 20px; background-color: #c8c800; } specifications specification status
comment css logical properties and values level 1the definition of 'padding-inline-start' in that specification.
padding-inline - CSS: Cascading Style Sheets
ete formal syntax <'padding-left'>{1,2} examples setting inline padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; padding-inline: 20px 40px; background-color: #c8c800; } result specifications specification status
comment css logical properties and values level 1the definition of 'padding-inline' in that specification.
padding-left - CSS: Cascading Style Sheets
irst-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> examples setting left padding using pixels and percentages .content { padding-left: 5%; } .sidebox { padding-left: 10px; } specifications specification status
comment css basic box modelthe definition of 'padding-left' in that specification.
padding-right - CSS: Cascading Style Sheets
t-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> examples setting right padding using pixels and percentages .content { padding-right: 5%; } .sidebox { padding-right: 10px; } specifications specification status
comment css basic box modelthe definition of 'padding-right' in that specification.
padding-top - CSS: Cascading Style Sheets
::first-letter and ::first-line.inheritednopercentagesrefer to the width of the containing blockcomputed valuethe percentage as specified or the absolute lengthanimation typea length formal syntax <length> | <percentage> examples setting top padding using pixels and percentages .content { padding-top: 5%; } .sidebox { padding-top: 10px; } specifications specification status
comment css basic box modelthe definition of 'padding-top' in that specification.
padding - CSS: Cascading Style Sheets
/* left and right: 3% padding */ /* bottom: 20px padding */ padding: 1em 3px 30px 5px; /* top: 1em padding */ /* right: 3px padding */ /* bottom: 30px padding */ /* left: 5px padding */ specifications specification status
comment css basic box modelthe definition of 'padding' in that specification.
page-break-after - CSS: Cascading Style Sheets
user agents may also apply it to other elements like table-row elements.inheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | always | avoid | left | right | recto | verso examples setting a page break after footnotes /* move to a new page after footnotes */ div.footnotes { page-break-after: always; } specifications specification status
comment css logical properties and values level 1the definition of 'recto and verso' in that specification.
page-break-before - CSS: Cascading Style Sheets
user agents may also apply it to other elements like table-row elements.inheritednocomputed valueas specifiedanimation typediscrete formal syntax auto | always | avoid | left | right | recto | verso examples avoid a page break before the dic /* avoid page break before the div */ div.note { page-break-before: avoid; } specifications specification status
comment css logical properties and values level 1the definition of 'recto and verso' in that specification.
page-break-inside - CSS: Cascading Style Sheets
third one.</p> </div> css .page { background-color: #8cffa0; height: 90px; width: 200px; columns: 1; column-width: 100px; } .list, ol, ul, p { break-inside: avoid; } p { background-color: #8ca0ff; } ol, ul, .list { margin: 0.5em 0; display: block; background-color: orange; } p:first-child { margin-top: 0; } result specifications specification status
comment css paged media module level 3the definition of 'page-break-inside' in that specification.
paint-order - CSS: Cascading Style Sheets
g/2000/svg" width="400" height="200"> <text x="10" y="75">stroke in front</text> <text x="10" y="150" class="stroke-behind">stroke behind</text> </svg> css text { font-family: sans-serif; font-size: 50px; font-weight: bold; fill: black; stroke: red; stroke-width: 4px; } .stroke-behind { paint-order: stroke fill; } result specifications specification status
comment scalable vector graphics (svg) 2the definition of 'paint-order' in that specification.
<percentage> - CSS: Cascading Style Sheets
argin-left:60%; background-color:pink;"> width: 30%, left margin: 60% </div> </div> the above html will output: font-size <div style="font-size:18px;"> <p>full-size text (18px)</p> <p><span style="font-size:50%;">50% (9px)</span></p> <p><span style="font-size:200%;">200% (36px)</span></p> </div> the above html will output: specifications specification status
comment css values and units module level 4the definition of '<percentage>' in that specification.
perspective-origin - CSS: Cascading Style Sheets
sform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(196, 0, 196, 0.7); transform: rotatex(-90deg) translatez(50px); } /* make the layout a little nicer */ section { background-color: #eee; padding: 10px; font-family: sans-serif; text-align: left; display: grid; grid-template-columns: repeat(3, 1fr); } result specifications specification status
comment css transforms level 2the definition of 'perspective-origin' in that specification.
perspective - CSS: Cascading Style Sheets
.top { background: rgba(196, 196, 0, 0.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(196, 0, 196, 0.7); transform: rotatex(-90deg) translatez(50px); } /* make the table a little nicer */ th, p, td { background-color: #eeeeee; padding: 10px; font-family: sans-serif; text-align: left; } result specifications specification status
comment css transforms level 2the definition of 'perspective' in that specification.
place-content - CSS: Cascading Style Sheets
the live sample */ direction: ltr; /* can be changed in the live sample */ place-content: flex-end center; /* can be changed in the live sample */ } div > div { border: 2px solid #8c8c8c; width: 50px; background-color: #a0c8ff; } .small { font-size: 12px; height: 40px; } .large { font-size: 14px; height: 50px; } result specifications specification status
comment css box alignment module level 3the definition of 'place content' in that specification.
place-items - CSS: Cascading Style Sheets
assname = evt.target.value; }); css #container { height:200px; width: 240px; place-items: center; /* you can change this value by selecting another option in the list */ background-color: #8c8c8c; } .flex { display: flex; flex-wrap: wrap; } .grid { display: grid; grid-template-columns: repeat(auto-fill, 50px); } result specifications specification status
comment css box alignment module level 3the definition of 'place-items' in that specification.
place-self - CSS: Cascading Style Sheets
00px; } span:nth-child(2) { place-self: start center; } span:nth-child(3) { place-self: center start; } span:nth-child(4) { place-self: end; } article span { background-color: black; color: white; margin: 1px; text-align: center; } article, span { padding: 10px; border-radius: 7px; } article { margin: 20px; } result specifications specification status
comment css box alignment module level 3the definition of 'place-self' in that specification.
pointer-events - CSS: Cascading Style Sheets
html <ul> <li><a href="https://developer.mozilla.org">mdn</a></li> <li><a href="http://example.com">example.com</a></li> </ul> css a[href="http://example.com"] { pointer-events: none; } result specifications specification status
comment scalable vector graphics (svg) 2the definition of 'pointer-events' in that specification.
position - CSS: Cascading Style Sheets
85; color: #fff; font: bold 18px/21px helvetica, arial, sans-serif; margin: 0; padding: 2px 0 0 12px; position: -webkit-sticky; position: sticky; top: -1px; } dd { font: bold 20px/45px helvetica, arial, sans-serif; margin: 0; padding: 0 0 0 12px; white-space: nowrap; } dd + dd { border-top: 1px solid #ccc; } result specifications specification status
comment css level 2 (revision 1)the definition of 'position' in that specification.
<position> - CSS: Cascading Style Sheets
examples valid positions center left center top right 8.5% bottom 12vmin right -6px 10% 20% 8rem 14px invalid positions left right bottom top 10px 15px 20px 15px specifications specification status
comment css values and units module level 3the definition of '<position>' in that specification.
quotes - CSS: Cascading Style Sheets
html <div lang="fr"> <q>ceci est une citation française.</q> <div> <hr> <div lang="ru"> <q>Это русская цитата</q> <div> <hr> <div lang="de"> <q>dies ist ein deutsches zitat</q> <div> <hr> <div lang="en"> <q>this is an english quote.</q> <div> css /*q { quotes: auto; }*/ result specifications specification status
comment css generated content module level 3the definition of 'quotes' in that specification.
repeat() - CSS: Cascading Style Sheets
</div> </div> css #container { display: grid; grid-template-columns: repeat(2, 50px 1fr) 100px; grid-gap: 5px; box-sizing: border-box; height: 200px; width: 100%; background-color: #8cffa0; padding: 10px; } #container > div { background-color: #8ca0ff; padding: 5px; } result specifications specification status
comment css grid layoutthe definition of 'repeat()' in that specification.
resize - CSS: Cascading Style Sheets
</p> </div> css .resizable { resize: both; overflow: scroll; border: 1px solid black; } div { height: 300px; width: 300px; } p { height: 200px; width: 200px; } result specifications specification status
comment css logical properties and values level 1the definition of 'resize' in that specification.
right - CSS: Cascading Style Sheets
css div { outline: 1px solid #cccccc; } #parent { width: 200px; height: 200px; background-color: #ffc7e4; position: relative; } /* declare both a left and a right */ #width, #nowidth { background-color: #c2ffd7; position: absolute; left: 0; right: 0; } /* declare a width */ #width { width: 100px; top: 60px; } result specifications specification status
comment css positioned layout module level 3the definition of 'right' in that specification.
rotate - CSS: Cascading Style Sheets
{ box-sizing: border-box; } html { font-family: sans-serif; } div { width: 150px; margin: 0 auto; } p { padding: 10px 5px; border: 3px solid black; border-radius: 20px; width: 150px; font-size: 1.2rem; text-align: center; } .rotate { transition: rotate 1s; } div:hover .rotate { rotate: 1 -0.5 1 180deg; } result specifications specification status
comment css transforms level 2the definition of 'individual transforms' in that specification.
row-gap (grid-row-gap) - CSS: Cascading Style Sheets
esult grid layout html <div id="grid"> <div></div> <div></div> <div></div> </div> css #grid { grid-row-gap: 20px; } #grid { display: grid; height: 200px; grid-template-columns: 200px; grid-template-rows: repeat(3, 1fr); row-gap: 20px; } #grid > div { border: 1px solid green; background-color: lime; } result specifications specification status
comment css box alignment module level 3the definition of 'row-gap' in that specification.
ruby-align - CSS: Cascading Style Sheets
text to check</rb> <rp>(</rp><rt>short ruby</rt><rp>)</rp> </ruby> css ruby { ruby-align: space-between; } result extra space distributed between and around ruby elements html <ruby> <rb>this is a long text to check</rb> <rp>(</rp><rt>short ruby</rt><rp>)</rp> </ruby> css ruby { ruby-align: space-around; } result specifications specification status
comment css ruby layout module level 1the definition of 'ruby-align' in that specification.
ruby-position - CSS: Cascading Style Sheets
itioned over the text html <ruby> <rb>超電磁砲</rb> <rp>(</rp><rt>レールガン</rt><rp>)</rp> </ruby> css ruby { ruby-position:over; } result ruby positioned under the text html <ruby> <rb>超電磁砲</rb> <rp>(</rp><rt>レールガン</rt><rp>)</rp> </ruby> css ruby { ruby-position:under; } result specifications specification status
comment css ruby layout module level 1the definition of 'ruby-position' in that specification.
scale - CSS: Cascading Style Sheets
</div> css * { box-sizing: border-box; } html { font-family: sans-serif; } div { width: 150px; margin: 0 auto; } p { padding: 10px 5px; border: 3px solid black; border-radius: 20px; width: 150px; font-size: 1.2rem; text-align: center; } .scale { transition: scale 1s; } div:hover .scale { scale: 2 0.7; } result specifications specification status
comment css transforms level 2the definition of 'individual transforms' in that specification.
scroll-behavior - CSS: Cascading Style Sheets
auto; text-align: center; } nav { width: 339px; padding: 5px; border: 1px solid black; } scroll-container { display: block; width: 350px; height: 200px; overflow-y: scroll; scroll-behavior: smooth; } scroll-page { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 5em; } result specifications specification status
comment css object model (cssom) view modulethe definition of 'scroll-behavior' in that specification.
scroll-margin-block-end - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <length> specifications specification status
comment css scroll snap module level 1the definition of 'scroll-margin-block-end' in that specification.
scroll-margin-block-start - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <length> specifications specification status
comment css scroll snap module level 1the definition of 'scroll-margin-block-start' in that specification.
scroll-margin-block - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <length>{1,2} specifications specification status
comment css scroll snap module level 1the definition of 'scroll-margin-block' in that specification.
scroll-margin-bottom - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <length> specifications specification status
comment css scroll snap module level 1the definition of 'scroll-margin-bottom' in that specification.
scroll-margin-left - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <length> specifications specification status
comment css scroll snap module level 1the definition of 'scroll-margin-left' in that specification.
scroll-margin-right - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <length> specifications specification status
comment css scroll snap module level 1the definition of 'scroll-margin-right' in that specification.
scroll-margin-top - CSS: Cascading Style Sheets
formal definition initial value0applies toall elementsinheritednocomputed valueas specifiedanimation typeby computed value type formal syntax <length> specifications specification status
comment css scroll snap module level 1the definition of 'scroll-margin-top' in that specification.
scroll-padding-block-end - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status
comment css scroll snap module level 1the definition of 'scroll-padding-block-end' in that specification.
scroll-padding-block-start - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status
comment css scroll snap module level 1the definition of 'scroll-padding-block-start' in that specification.
scroll-padding-block - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax [ auto | <length-percentage> ]{1,2}where <length-percentage> = <length> | <percentage> specifications specification status
comment css scroll snap module level 1the definition of 'scroll-padding-block' in that specification.
scroll-padding-bottom - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status
comment css scroll snap module level 1the definition of 'scroll-padding-bottom' in that specification.
scroll-padding-inline-end - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status
comment css scroll snap module level 1the definition of 'scroll-padding-inline-end' in that specification.
scroll-padding-inline-start - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status
comment css scroll snap module level 1the definition of 'scroll-padding-inline-start' in that specification.
scroll-padding-inline - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax [ auto | <length-percentage> ]{1,2}where <length-percentage> = <length> | <percentage> specifications specification status
comment css scroll snap module level 1the definition of 'scroll-padding-inline' in that specification.
scroll-padding-left - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status
comment css scroll snap module level 1the definition of 'scroll-padding-left' in that specification.
scroll-padding-right - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status
comment css scroll snap module level 1the definition of 'scroll-padding-right' in that specification.
scroll-padding-top - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax auto | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status
comment css scroll snap module level 1the definition of 'scroll-padding-top' in that specification.
scroll-padding - CSS: Cascading Style Sheets
formal definition initial valueautoapplies toscroll containersinheritednopercentagesrelative to the scroll container's scrollportcomputed valueas specifiedanimation typeby computed value type formal syntax [ auto | <length-percentage> ]{1,4}where <length-percentage> = <length> | <percentage> specifications specification status
comment css scroll snap module level 1the definition of 'scroll-padding' in that specification.
scroll-snap-align - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax [ none | start | end | center ]{1,2} specifications specification status
comment css scroll snap module level 1the definition of 'scroll-snap-align' in that specification.
scroll-snap-stop - CSS: Cascading Style Sheets
rtl</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> result specifications specification status
comment css scroll snap module level 1the definition of 'scroll-snap-stop' in that specification.
scroll-snap-type - CSS: Cascading Style Sheets
iner > div { line-height: 256px; font-size: 128px; width: 256px; height: 100%; } /* appearance fixes */ .y.container > div:first-child { line-height: 1.3; font-size: 64px; } /* coloration */ .container > div:nth-child(even) { background-color: #87ea87; } .container > div:nth-child(odd) { background-color: #87ccea; } results specifications specification status
comment css scroll snap module level 1the definition of 'scroll-snap-type' in that specification.
scrollbar-color - CSS: Cascading Style Sheets
dandelion cucumber earthnut pea peanut soko zucchini.</div> result specifications specification status
comment css scrollbars level 1the definition of 'scrollbar-color' in that specification.
scrollbar-width - CSS: Cascading Style Sheets
dandelion cucumber earthnut pea peanut soko zucchini.</div> result specifications specification status
comment css scrollbars level 1the definition of 'scrollbar-width' in that specification.
shape-margin - CSS: Cascading Style Sheets
he inhabitant of mars, if he exists, probably knows its truth as we know it.</section> css section { max-width: 400px; } .shape { float: left; width: 150px; height: 150px; background-color: maroon; clip-path: polygon(0 0, 150px 150px, 0 150px); shape-outside: polygon(0 0, 150px 150px, 0 150px); shape-margin: 20px; } result specifications specification status
comment css shapes module level 1the definition of 'shape-margin' in that specification.
shape-outside - CSS: Cascading Style Sheets
%, 0 100%); clip-path: polygon(0 0, 100% 100%, 0 100%); } .right { -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%); shape-outside: polygon(100% 0, 100% 100%, 0 100%); float: right; -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%); clip-path: polygon(100% 0, 100% 100%, 0 100%); } p { text-align: center; } result specifications specification status
comment css shapes module level 1the definition of 'shape-outside' in that specification.
<shape> - CSS: Cascading Style Sheets
example img.clip04 { clip: rect(10px, 20px, 20px, 10px); } specifications specification status
comment css level 2 (revision 1)the definition of '<shape>' in that specification.
Specified value - CSS: Cascading Style Sheets
however, the border is not an inheriting property.</p> </div> css .fun { border: 1px dotted pink; font-family: fantasy; } p { color: green; } result specifications specification status
comment css level 2 (revision 2)the definition of 'cascaded value' in that specification.
<string> - CSS: Cascading Style Sheets
n escaped single quote.' 'this string also has \27 an escaped single quote.' "this is a string with \\ an escaped backslash." /* new line in a string */ "this string has a \aline break in it." /* string spanning two lines of code (these two strings will have identical output) */ "a really long \ awesome string" "a really long awesome string" specifications specification status
comment css values and units module level 3the definition of '<string>' in that specification.
symbols() - CSS: Cascading Style Sheets
examples html <ol> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ol> css ol { list-style: symbols(cyclic "*" "†" "‡"); } result specifications specification status
comment css counter styles level 3the definition of 'symbols()' in that specification.
tab-size - CSS: Cascading Style Sheets
html <p>no tab</p> <p>	default tab size of 8 characters wide</p> <p class="custom">	custom tab size of 3 characters wide</p> <p> 3 spaces, equivalent to the custom tab size</p> css p { white-space: pre; } .custom { tab-size: 3; -moz-tab-size: 3; } result specifications specification status
comment css text module level 3the definition of 'tab-size' in that specification.
table-layout - CSS: Cascading Style Sheets
</td></tr> <tr><td>albert</td><td>schweitzer</td></tr> <tr><td>jane</td><td>fonda</td></tr> <tr><td>william</td><td>shakespeare</td></tr> </table> css table { table-layout: fixed; width: 120px; border: 1px solid red; } td { border: 1px solid blue; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } result specifications specification status
comment css level 2 (revision 1)the definition of 'table-layout' in that specification.
text-align-last - CSS: Cascading Style Sheets
nullam est eros, suscipit sed dictum quis, accumsan a ligula.</p> css p { font-size: 1.4em; text-align: justify; text-align-last: center; } results specifications specification status
comment css text module level 3the definition of 'text-align-last' in that specification.
text-align - CSS: Cascading Style Sheets
css .example { text-align: justify; border: solid; } result notes the standard-compatible way to center a block itself without centering its inline content is setting the left and right margin to auto, e.g.: .something { margin: auto; } .something { margin: 0 auto; } .something { margin-left: auto; margin-right: auto; } specifications specification status
comment css logical properties and values level 1the definition of 'text-align' in that specification.
text-combine-upright - CSS: Cascading Style Sheets
html <p lang="zh-hant">民國<span class="num">105</span >年<span class="num">4</span >月<span class="num">29</span>日</p> css html { writing-mode: vertical-rl; font: 24px serif } .num { text-combine-upright: all } results screenshotlive sample specifications specification status
comment css writing modes level 4the definition of 'text-combine-upright' in that specification.
text-decoration-color - CSS: Cascading Style Sheets
> = <number> | <percentage><hue> = <number> | <angle> examples <p>this paragraph has <s>some erroneous text</s> inside it that i want to call attention to.</p> p { text-decoration-line: underline; text-decoration-color: cyan; } s { text-decoration-line: line-through; text-decoration-color: red; text-decoration-style: wavy; } specifications specification status
comment css text decoration module level 3the definition of 'text-decoration-color' in that specification.
text-decoration-line - CSS: Cascading Style Sheets
h | blink ] | spelling-error | grammar-error examples <p class="wavy">here's some text with wavy red underline!</p> <p class="both">this text has lines both above and below it.</p> .wavy { text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; } .both { text-decoration-line: underline overline; } specifications specification status
comment css text decoration module level 3the definition of 'text-decoration-line' in that specification.
text-decoration-skip-ink - CSS: Cascading Style Sheets
p-ink-all">この文は、 text-decoration-skip-ink: all の使用例を示しています。</p> css p { font-size: 1.5em; text-decoration: underline blue; text-decoration-skip-ink: auto; /* this is the default anyway */ } .no-skip-ink { text-decoration-skip-ink: none; } .skip-ink-all{ text-decoration-skip-ink: all; } result specifications specification status
comment css text decoration module level 4the definition of 'text-decoration-skip-ink' in that specification.
text-decoration-skip - CSS: Cascading Style Sheets
uted valueas specifiedanimation typediscrete formal syntax none | [ objects | [ spaces | [ leading-spaces | trailing-spaces ] ] | edges | box-decoration ] examples skipping edges html <p>hey, grab a cup of <em>coffee!</em></p> css p { margin: 0; font-size: 3em; text-decoration: underline; text-decoration-skip: edges; } result specifications specification status
comment css text decoration module level 4the definition of 'text-decoration-skip' in that specification.
text-decoration-style - CSS: Cascading Style Sheets
t-decoration-color: red; -webkit-text-decoration-line: underline; -webkit-text-decoration-style: wavy; -webkit-text-decoration-color: red; } css .wavy { text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; } html <p class="wavy">this text has a wavy red line beneath it.</p> results specifications specification status
comment css text decoration module level 3the definition of 'text-decoration-style' in that specification.
text-decoration-thickness - CSS: Cascading Style Sheets
text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: red; text-decoration-thickness: 1px; } .thick { text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: red; text-decoration-thickness: 5px; } .shorthand { text-decoration: underline solid red 5px; } results specifications specification status
comment css text decoration module level 4the definition of 'text-decoration-width' in that specification.
text-decoration - CSS: Cascading Style Sheets
ation on anchors since users often depend on the underline to denote hyperlinks.</p> <p class="underover">this text has lines above <em>and</em> below it.</p> <p class="thick">this text has a really thick purple underline in supporting browsers.</p> <p class="blink">this text might blink for you, depending on the browser you use.</p> specifications specification status
comment css text decoration module level 4 working draft adds text-decoration-thickness; note that this isn't yet officially part of the shorthand — this is as yet unspecified.
text-emphasis-color - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples emphasis with a color and custom character css em { text-emphasis-color: green; text-emphasis-style: "*"; } html <p>here's an example:</p> <em>this has emphasis marks!</em> result specifications specification status
comment css text decoration module level 3the definition of 'text-emphasis' in that specification.
text-emphasis-position - CSS: Cascading Style Sheets
in html, this can be done with the following pattern: em { text-emphasis: dot; /* set text-emphasis for <em> elements */ } em rt { display: none; /* hide ruby inside <em> elements */ } specifications specification status
comment css text decoration module level 3the definition of 'text-emphasis' in that specification.
text-emphasis-style - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax none | [ [ filled | open ] | [ dot | circle | double-circle | triangle | sesame ] ] | <string> examples h2 { text-emphasis-style: sesame; } specifications specification status
comment css text decoration module level 3the definition of 'text-emphasis' in that specification.
text-emphasis - CSS: Cascading Style Sheets
css h2 { text-emphasis: triangle #d55; } html <h2>this is important!</h2> result specifications specification status
comment css text decoration module level 3the definition of 'text-emphasis' in that specification.
text-indent - CSS: Cascading Style Sheets
et, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> css p { text-indent: 30%; background: plum; } result specifications specification status
comment css text module level 3the definition of 'text-indent' in that specification.
text-justify - CSS: Cascading Style Sheets
cras eu elementum dui.</p> p { font-size: 1.5em; border: 1px solid black; padding: 10px; width: 95%; margin: 10px auto; text-align: justify; } .none { text-justify: none; } .auto { text-justify: auto; } .dist { text-justify: distribute; } .word { text-justify: inter-word; } .char { text-justify: inter-character; } specifications specification status
comment css text module level 3the definition of 'text-justify' in that specification.
text-orientation - CSS: Cascading Style Sheets
ion initial valuemixedapplies toall elements, except table row groups, rows, column groups, and columnsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax mixed | upright | sideways examples html <p>lorem ipsum dolet semper quisquam.</p> css p { writing-mode: vertical-rl; text-orientation: upright; } result specifications specification status
comment css writing modes module level 3the definition of 'text-orientation' in that specification.
text-overflow - CSS: Cascading Style Sheets
1234567890 specifications specification status
comment css overflow module level 4 added the values <string> and fade and the fade() function css overflow module level 3the definition of 'text-overflow' in that specification.
text-rendering - CSS: Cascading Style Sheets
html <p class="speed">lyowat - ff fi fl ffl</p> <p class="legibility">lyowat - ff fi fl ffl</p> css p { font: 1.5em "constantia", "times new roman", "georgia", "palatino", serif } .speed { text-rendering: optimizespeed; } .legibility { text-rendering: optimizelegibility; } result specifications specification status
comment scalable vector graphics (svg) 2the definition of 'text-rendering' in that specification.
text-shadow - CSS: Cascading Style Sheets
ite-text-with-blue-shadow { text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue; color: white; font: 1.5em georgia, serif; } <p class="white-text-with-blue-shadow">sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore.</p> specifications specification status
comment css text decoration module level 3the definition of 'text-shadow' in that specification.
text-size-adjust - CSS: Cascading Style Sheets
cifiedanimation typediscrete formal syntax none | auto | <percentage> examples basic disabling usage as hinted at above, on a properly designed responsive site the text-size-adjust behavior is not needed, so developers can elect to turn it off by specifying a vlaue of none: p { -webkit-text-size-adjust: none; text-size-adjust: none; } specifications specification status
comment css mobile text size adjustment module level 1the definition of 'text-size-adjust' in that specification.
text-transform - CSS: Cascading Style Sheets
full-size-kana <p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p> <p>ァィゥェ ォヵㇰヶ ㇱㇲッㇳ ㇴㇵㇶㇷ ㇸㇹㇺャ ュョㇻㇼ ㇽㇾㇿヮ</p> </p> p:nth-of-type(2) { text-transform: full-size-kana; } specifications specification status
comment css text module level 3the definition of 'text-transform' in that specification.
text-underline-offset - CSS: Cascading Style Sheets
only the bottom one is offset.</p> p { text-decoration: underline wavy red; text-underline-offset: 1em; } .twolines { text-decoration-color: purple; text-decoration-line: underline overline; } specifications specification status
comment css text decoration module level 4the definition of 'text-underline-offset' in that specification.
top - CSS: Cascading Style Sheets
nimation typea length, percentage or calc(); formal syntax <length> | <percentage> | auto examples body { background: beige; } div { position: absolute; top: 10%; right: 40%; bottom: 20%; left: 15%; background: gold; border: 1px solid blue; } <div>the size of this content is determined by the position of its edges.</div> specifications specification status
comment css positioned layout module level 3the definition of 'top' in that specification.
touch-action - CSS: Cascading Style Sheets
html <div id="map"></div> css #map { height: 400px; width: 400px; background: blue; touch-action: none; } result specifications specification status
comment compatibility standardthe definition of 'touch-action' in that specification.
matrix() - CSS: Cascading Style Sheets
represent the following functions: matrix( scalex(), skewy(), skewx(), scaley(), translatex(), translatey() ) examples html <div>normal</div> <div class="changed">changed</div> css div { width: 80px; height: 80px; background-color: skyblue; } .changed { transform: matrix(1, 2, -1, 1, 80, 80); background-color: pink; } result specifications specification status
comment css transforms level 1the definition of 'matrix()' in that specification.
matrix3d() - CSS: Cascading Style Sheets
n by 10% */ transform: matrix3d( 1,0,0,0, 0,1,0,0, 0,0,1,0, -50,-100,0,1.1 ); } 50% { transform: matrix3d( 1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,0.9 ); } to { transform: matrix3d( 1,0,0,0, 0,1,0,0, 0,0,1,0, 50,100,0,1.1 ) } } result specifications specification status
comment css transforms level 2the definition of 'matrix3d()' in that specification.
perspective() - CSS: Cascading Style Sheets
loser { transform: perspective(4cm) rotatex(-15deg) rotatey(30deg); } .top { background-color: skyblue; transform: rotatex(90deg) translate3d(0, 0, 50px); } .left { background-color: pink; transform: rotatey(-90deg) translate3d(0, 0, 50px); } .front { background-color: limegreen; transform: translate3d(0, 0, 50px); } result specifications specification status
comment css transforms level 2the definition of 'perspective()' in that specification.
rotate() - CSS: Cascading Style Sheets
height: 100px; background-color: lightgray; } .rotate { background-color: transparent; outline: 2px dashed; transform: rotate(45deg); } .rotate-translate { background-color: pink; transform: rotate(45deg) translatex(180px); } .translate-rotate { background-color: gold; transform: translatex(180px) rotate(45deg); } result specifications specification status
comment css transforms level 1the definition of 'rotate()' in that specification.
rotate3d() - CSS: Cascading Style Sheets
ate3d(0, 1, 0, 60deg); background-color: pink; } result rotating on a custom axis html <div>normal</div> <div class="rotated">rotated</div> css body { perspective: 800px; } div { width: 80px; height: 80px; background-color: skyblue; } .rotated { transform: rotate3d(1, 2, -1, 192deg); background-color: pink; } result specifications specification status
comment css transforms level 2the definition of 'rotate3d()' in that specification.
rotateX() - CSS: Cascading Style Sheets
1000cos(a)-sin(a)0sin(a)cos(a) 10000cos(a)-sin(a)00sin(a)cos(a)00001 examples html <div>normal</div> <div class="rotated">rotated</div> css div { width: 80px; height: 80px; background-color: skyblue; } .rotated { transform: rotatex(45deg); background-color: pink; } result specifications specification status
comment css transforms level 2the definition of 'rotatex()' in that specification.
rotateY() - CSS: Cascading Style Sheets
cos(a)0sin(a)010-sin(a)0cos(a) cos(a)0sin(a)00100-sin(a)0cos(a)00001 examples html <div>normal</div> <div class="rotated">rotated</div> css div { width: 80px; height: 80px; background-color: skyblue; } .rotated { transform: rotatey(60deg); background-color: pink; } result specifications specification status
comment css transforms level 2the definition of 'rotatey()' in that specification.
rotateZ() - CSS: Cascading Style Sheets
cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)00 sin(a)cos(a)00 0010 0001 examples html <div>normal</div> <div class="rotated">rotated</div> css div { width: 80px; height: 80px; background-color: skyblue; } .rotated { transform: rotatez(45deg); background-color: pink; } result specifications specification status
comment css transforms level 2the definition of 'rotatez()' in that specification.
scale() - CSS: Cascading Style Sheets
sult scaling x and y dimensions separately, and translating the origin html <div>normal</div> <div class="scaled">scaled</div> css div { width: 80px; height: 80px; background-color: skyblue; } .scaled { transform: scale(2, 0.5); /* equal to scalex(2) scaley(0.5) */ transform-origin: left; background-color: pink; } result specifications specification status
comment css transforms level 1the definition of 'scale()' in that specification.
scale3d() - CSS: Cascading Style Sheets
: pink; } result translating the origin of the transformation html <div>normal</div> <div class="scaled">scaled</div> css div { width: 80px; height: 80px; background-color: skyblue; } .scaled { transform: perspective(500px) scale3d(2, 0.7, 0.2) translatez(100px); transform-origin: left; background-color: pink; } result specifications specification status
comment css transforms level 2the definition of 'scale3d()' in that specification.
scaleX() - CSS: Cascading Style Sheets
rdinates on ℝℙ3 s0 01 s00010001 s00010001 s000010000100001 [s 0 0 1 0 0] examples html <div>normal</div> <div class="scaled">scaled</div> css div { width: 80px; height: 80px; background-color: skyblue; } .scaled { transform: scalex(0.6); background-color: pink; } result specifications specification status
comment css transforms level 1the definition of 'scalex()' in that specification.
scaleY() - CSS: Cascading Style Sheets
oordinates on ℝℙ3 10 0s 1000s0001 1000s0001 10000s0000100001 [1 0 0 s 0 0] examples html <div>normal</div> <div class="scaled">scaled</div> css div { width: 80px; height: 80px; background-color: skyblue; } .scaled { transform: scaley(0.6); background-color: pink; } result specifications specification status
comment css transforms level 1the definition of 'scaley()' in that specification.
scaleZ() - CSS: Cascading Style Sheets
-color: skyblue; } .perspective { /* includes a perspective to create a 3d space */ transform: perspective(400px) translatez(-100px); background-color: limegreen; } .scaled-translated { /* includes a perspective to create a 3d space */ transform: perspective(400px) scalez(2) translatez(-100px); background-color: pink; } result specifications specification status
comment css transforms level 2the definition of 'scalez()' in that specification.
skew() - CSS: Cascading Style Sheets
kyblue; } .skewed { transform: skew(10deg); /* equal to skewx(10deg) */ background-color: pink; } result using two angles html <div>normal</div> <div class="skewed">skewed</div> css div { width: 80px; height: 80px; background-color: skyblue; } .skewed { transform: skew(10deg, 10deg); background-color: pink; } result specifications specification status
comment css transforms level 1the definition of 'skew()' in that specification.
skewX() - CSS: Cascading Style Sheets
1tan(a)0010001 1tan(a)0010001 1tan(a)00010000100001 [1 0 tan(a) 1 0 0] examples html <div>normal</div> <div class="skewed">skewed</div> css div { width: 80px; height: 80px; background-color: skyblue; } .skewed { transform: skewx(10deg); /* equal to skew(10deg) */ background-color: pink; } result specifications specification status
comment css transforms level 1the definition of 'skewx()' in that specification.
skewY() - CSS: Cascading Style Sheets
10tan(a)1 100tan(a)10001 100tan(a)10001 1000tan(a)10000100001 [1 tan(a) 0 1 0 0] examples html <div>normal</div> <div class="skewed">skewed</div> css div { width: 80px; height: 80px; background-color: skyblue; } .skewed { transform: skewy(40deg); background-color: pink; } result specifications specification status
comment css transforms level 1the definition of 'skewy()' in that specification.
translate() - CSS: Cascading Style Sheets
ex(10px) or translate(10px, 0) */ background-color: pink; } result combining y-axis and x-axis translation html <div>static</div> <div class="moved">moved</div> <div>static</div> css div { width: 60px; height: 60px; background-color: skyblue; } .moved { transform: translate(10px, 10px); background-color: pink; } result specifications specification status
comment css transforms level 1the definition of 'translate()' in that specification.
translate3d() - CSS: Cascading Style Sheets
0, 0px); background-color: pink; } result combining z-axis and x-axis translation html <div>static</div> <div class="moved">moved</div> <div>static</div> css div { width: 60px; height: 60px; background-color: skyblue; } .moved { transform: perspective(500px) translate3d(10px, 0, 100px); background-color: pink; } result specifications specification status
comment css transforms level 2the definition of 'translate3d()' in that specification.
translateX() - CSS: Cascading Style Sheets
[1 0 0 1 t 0] formal syntax translatex(<length-percentage>) examples html <div>static</div> <div class="moved">moved</div> <div>static</div> css div { width: 60px; height: 60px; background-color: skyblue; } .moved { transform: translatex(10px); /* equal to translate(10px) */ background-color: pink; } result specifications specification status
comment css transforms level 1the definition of 'translatex()' in that specification.
translateY() - CSS: Cascading Style Sheets
1t001 1000010t00100001 [1 0 0 1 0 t] formal syntax translatey(<length-percentage>) examples html <div>static</div> <div class="moved">moved</div> <div>static</div> css div { width: 60px; height: 60px; background-color: skyblue; } .moved { transform: translatey(10px); background-color: pink; } result specifications specification status
comment css transforms level 1the definition of 'translatey()' in that specification.
<transform-function> - CSS: Cascading Style Sheets
ryselector('#example-element'); selectelem.addeventlistener('change', () => { if(selectelem.value === 'choose a function') { return; } else { example.style.transform = `rotate3d(1, 1, 1, 30deg) ${selectelem.value}`; settimeout(function() { example.style.transform = 'rotate3d(1, 1, 1, 30deg)'; }, 2000) } }) result specifications specification status
comment css transforms level 2the definition of '<transform-function>' in that specification.
transform-origin - CSS: Cascading Style Sheets
wy(50deg); transform-origin: 100% -30%; <div class="box10"> </div> .box10 { margin: 0.5em; width: 3em; height: 3em; border: solid 1px; background-color: palegreen; transform: skewy(50deg); -webkit-transform: skewy(50deg); transform-origin: 100% -30%; -webkit-transform-origin: 100% -30%; } specifications specification status
comment css transforms level 1the definition of 'transform-origin' in that specification.
transform-style - CSS: Cascading Style Sheets
: rotatex(-90deg) translatez(50px); } javascript const cube = document.getelementbyid('example-element'); const checkbox = document.getelementbyid('preserve'); checkbox.addeventlistener('change', () => { if(checkbox.checked) { cube.style.transformstyle = 'preserve-3d'; } else { cube.style.transformstyle = 'flat'; } }) result specifications specification status
comment css transforms level 2the definition of 'transform-style' in that specification.
transition-delay - CSS: Cascading Style Sheets
n-delay:4s; transition-timing-function: ease-in-out; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); specifications specification status
comment css transitionsthe definition of 'transition-delay' in that specification.
transition-duration - CSS: Cascading Style Sheets
uration:4s; transition-timing-function: ease-in-out; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { el = document.queryselector("div.box1"); el.classname = "box"; } return el; } var intervalid = window.setinterval(updatetransition, 7000); specifications specification status
comment css transitionsthe definition of 'transition-duration' in that specification.
transition-timing-function - CSS: Cascading Style Sheets
ction: steps(5, jump-start); } .jump-end { transition-timing-function: steps(5, jump-end); } .jump-none { transition-timing-function: steps(5, jump-none); } .jump-both { transition-timing-function: steps(5, jump-both); } .step-start { transition-timing-function: step-start; } .step-end { transition-timing-function: step-end; } specifications specification status
comment css transitionsthe definition of 'transition-timing-function' in that specification.
translate - CSS: Cascading Style Sheets
x-sizing: border-box; } html { font-family: sans-serif; } div { width: 150px; margin: 0 auto; } p { padding: 10px 5px; border: 3px solid black; border-radius: 20px; width: 150px; font-size: 1.2rem; text-align: center; } .translate { transition: translate 1s; } div:hover .translate { translate: 200px 50px; } result specifications specification status
comment css transforms level 2the definition of 'individual transforms' in that specification.
unicode-bidi - CSS: Cascading Style Sheets
non-inline elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax normal | embed | isolate | bidi-override | isolate-override | plaintext examples css .bible-quote { direction: rtl; unicode-bidi: embed; } html <div class="bible-quote"> a line of text </div> <div> another line of text </div> result specifications specification status
comment css writing modes module level 3the definition of 'unicode-bidi' in that specification.
unset - CSS: Cascading Style Sheets
color: unset; } result border html <p>this text has a red border.</p> <div> <p>this text has a red border.</p> </div> <div class="bar"> <p>this text has a black border (initial default, not inherited).</p> </div> css div { border: 1px solid green; } p { border: 1px solid red; } .bar p { border-color: unset; } result specifications specification status
comment css cascading and inheritance level 4the definition of 'unset' in that specification.
url() - CSS: Cascading Style Sheets
ght: 100vh; } .background { background: yellow; background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='90' height='45'%3e%3cpath d='m10 10h60' stroke='%2300f' stroke-width='5'/%3e%3cpath d='m10 20h60' stroke='%230f0' stroke-width='5'/%3e%3cpath d='m10 30h60' stroke='red' stroke-width='5'/%3e%3c/svg%3e"); } specifications specification status
comment css values and units module level 4the definition of 'url()' in that specification.
<url> - CSS: Cascading Style Sheets
<a_css_property>: url("http://mysite.example.com/mycursor.png") <a_css_property>: url('http://mysite.example.com/mycursor.png') <a_css_property>: url(http://mysite.example.com/mycursor.png) examples .topbanner { background: url("topbanner.png") #00d no-repeat fixed; } ul { list-style: square url(http://www.example.com/redball.png); } specifications specification status
comment css values and units module level 4the definition of '<url>' in that specification.
Used value - CSS: Cascading Style Sheets
layout, so they have a different computed value and used value: (taken from css 2.1 changes: specified, computed, and actual values): background-position bottom, left, right, top height, width margin-bottom, margin-left, margin-right, margin-top min-height, min-width padding-bottom, padding-left, padding-right, padding-top text-indent specification specification status
comment css level 2 (revision 2)the definition of 'used value' in that specification.
user-select - CSS: Cascading Style Sheets
e">hey, you can't select this text!</p> <p class="all">clicking once will select all of this text.</p> css .unselectable { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .all { -moz-user-select: all; -webkit-user-select: all; -ms-user-select: all; user-select: all; } result specifications specification status
comment css basic user interface module level 4the definition of 'user-select' in that specification.
var() - CSS: Cascading Style Sheets
: var(--main-bg-color); } /* fallback */ /* in the component’s style: */ .component .header { color: var(--header-color, blue); /* header-color isn’t set, and so remains blue, the fallback value */ } .component .text { color: var(--text-color, black); } /* in the larger application’s style: */ .component { --text-color: #080; } specifications specification status
comment css custom properties for cascading variables module level 1the definition of 'var()' in that specification.
vertical-align - CSS: Cascading Style Sheets
> image with a text-bottom alignment.</div> <div>an <img class="middle" src="https://udn.realityripple.com/samples/b4/e1f0faff5b.svg" alt="link" width="32" height="32" /> image with a middle alignment.</div> css img.top { vertical-align: text-top; } img.bottom { vertical-align: text-bottom; } img.middle { vertical-align: middle; } result specifications specification status
comment css level 2 (revision 1)the definition of 'vertical-align' in that specification.
visibility - CSS: Cascading Style Sheets
<td>1.1</td> <td class="collapse">1.2</td> <td>1.3</td> </tr> <tr class="collapse"> <td>2.1</td> <td>2.2</td> <td>2.3</td> </tr> <tr> <td>3.1</td> <td>3.2</td> <td>3.3</td> </tr> </table> css .collapse { visibility: collapse; } table { border: 1px solid red; } td { border: 1px solid gray; } specifications specification status
comment css flexible box layout modulethe definition of 'visibility' in that specification.
white-space - CSS: Cascading Style Sheets
excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> result specifications specification status
comment css text module level 3the definition of 'white-space' in that specification.
widows - CSS: Cascading Style Sheets
it has a little bit more text than the first one.</p> </div> css div { background-color: #8cffa0; columns: 3; widows: 2; } p { background-color: #8ca0ff; } p:first-child { margin-top: 0; } result specifications specification status
comment css fragmentation module level 3the definition of 'widows' in that specification.
width - CSS: Cascading Style Sheets
dth: max-content; } <p class="maxgreen">the mozilla community produces a lot of great software.</p> min-content p.minblue { background: lightblue; width: -moz-min-content; /* firefox */ width: -webkit-min-content; /* chrome */ width: min-content; } <p class="minblue">the mozilla community produces a lot of great software.</p> specifications specification status
comment css box sizing module level 4the definition of 'width' in that specification.
will-change - CSS: Cascading Style Sheets
ment is hovered el.addeventlistener('mouseenter', hintbrowser); el.addeventlistener('animationend', removehint); function hintbrowser() { // the optimizable properties that are going to change // in the animation's keyframes block this.style.willchange = 'transform, opacity'; } function removehint() { this.style.willchange = 'auto'; } specifications specification status
comment css will change module level 1the definition of 'will-change' in that specification.
word-break - CSS: Cascading Style Sheets
��言葉は本当に長い言葉</p> css .narrow { padding: 10px; border: 1px solid; width: 500px; margin: 0 auto; font-size: 20px; line-height: 1.5; letter-spacing: 1px; } .normal { word-break: normal; } .breakall { word-break: break-all; } .keepall { word-break: keep-all; } .breakword { word-break: break-word; } specifications specification status
comment css text module level 3the definition of 'word-break' in that specification.
word-spacing - CSS: Cascading Style Sheets
first-letter and ::first-line.inheritedyespercentagesrefer to the width of the affected glyphcomputed valuean optimum, minimum, and maximum value, each consisting of either an absolute length, a percentage, or the keyword normalanimation typea length formal syntax normal | <length-percentage>where <length-percentage> = <length> | <percentage> specifications specification status
comment css text module level 3the definition of 'word-spacing' in that specification.
writing-mode - CSS: Cascading Style Sheets
ys-lr; -webkit-writing-mode: sideways-lr; -ms-writing-mode: sideways-lr; } .example.text5 span, .example.text5 { writing-mode: sideways-rl; -webkit-writing-mode: sideways-rl; -ms-writing-mode: sideways-rl; } result this image shows what the output should look like, in case your browser's support for writing-mode is incomplete: specifications specification status
comment css writing modes level 4the definition of 'writing-mode' in that specification.
z-index - CSS: Cascading Style Sheets
osition: absolute; z-index: 3; /* put .gold-box above .green-box and .dashed-box */ background: gold; width: 80%; left: 60px; top: 3em; } .green-box { position: absolute; z-index: 2; /* put .green-box above .dashed-box */ background: lightgreen; width: 20%; left: 65%; top: -25px; height: 7em; opacity: 0.9; } result specifications specification status
comment css level 2 (revision 1)the definition of 'z-index' in that specification.
DOM onevent handlers - Developer guides
when discussing the various methods of listening to events: event listener refers to a function or object registered via eventtarget.addeventlistener() event handler refers to a function registered via on… attributes or properties specifications specification status
comment html living standardthe definition of 'event handlers' in that specification.
disabled - HTML: Hypertext Markup Language
> <option>disabled 3.2</option> <option>disabled 3.3</option> </optgroup> </select> </label> </p> <fieldset disabled> <legend>disabled fieldset</legend> <p> <label>name: <input type="name" name="radio" value="regular"> regular </label> </p> <p> <label>number: <input type="number"></label> </p> </fieldset> specifications specification status
comment html living standardthe definition of 'disabled attribute' in that specification.
HTML attribute: readonly - HTML: Hypertext Markup Language
ldset> <legend>radio buttons</legend> <p><label> <input type="radio" name="radio" value="regular"> regular </label></p> <p><label> <input type="radio" name="radio" value="readonly" readonly> readonly </label></p> <p><label> <input type="radio" name="radio" value="disabled" disabled> disabled </label></p> </fieldset> specifications specification status
comment html living standardthe definition of 'readonly attribute' in that specification.
<applet>: The Embed Java Applet element - HTML: Hypertext Markup Language
example html <applet code="game.class" align="left" archive="game.zip" height="250" width="350"> <param name="difficulty" value="easy"> <b>sorry, you need java to play this game.</b> </applet> specifications specification status
comment html 5.2the definition of '<applet>' in that specification.
<area> - HTML: Hypertext Markup Language
ct in any user agents.) examples <map name="primary"> <area shape="circle" coords="75,75,75" href="left.html" alt="click to go left"> <area shape="circle" coords="275,75,75" href="right.html" alt="click to go right"> </map> <img usemap="#primary" src="https://udn.realityripple.com/samples/6a/7e559101b3.png" alt="350 x 150 pic"> result specifications specification status
comment referrer policythe definition of 'referrerpolicy attribute' in that specification.
<base>: The Document Base URL element - HTML: Hypertext Markup Language
for example: <meta property="og:image" content="https://example.com/thumbnail.jpg"> examples <base href="https://www.example.com/"> <base target="_blank"> <base target="_top" href="https://example.com/"> specifications specification status
comment html living standardthe definition of '<base>' in that specification.
<bdi>: The Bidirectional Isolate element - HTML: Hypertext Markup Language
e example output is properly ordered: <ul> <li><bdi class="name">اَلأَعْشَى</bdi> - 1st place</li> <li><bdi class="name">jerry cruncher</bdi> - 2nd place</li> </ul> body { border: 1px solid #3f87a6; max-width: calc(100% - 40px - 6px); padding: 20px; width: calc(100% - 40px - 6px); border-width: 1px 1px 1px 5px; } specifications specification status
comment html living standardthe definition of '<bdi>' in that specification.
<canvas>: The Graphics Canvas element - HTML: Hypertext Markup Language
mdn hit regions and accessability canvas accessibility use cases canvas element accessibility issues html5 canvas accessibility in firefox 13 – by steve faulkner best practices for interactive canvas elements specifications specification status
comment html living standardthe definition of '<canvas>' in that specification.
<data> - HTML: Hypertext Markup Language
<p>new products</p> <ul> <li><data value="398">mini ketchup</data></li> <li><data value="399">jumbo ketchup</data></li> <li><data value="400">mega jumbo ketchup</data></li> </ul> specifications specification status
comment html living standardthe definition of '<data>' in that specification.
<datalist>: The HTML Data List element - HTML: Hypertext Markup Language
<label for="mybrowser">choose a browser from this list:</label> <input list="browsers" id="mybrowser" name="mybrowser" /> <datalist id="browsers"> <option value="chrome"> <option value="firefox"> <option value="internet explorer"> <option value="opera"> <option value="safari"> <option value="microsoft edge"> </datalist> result specifications specification status
comment html living standardthe definition of '<datalist>' in that specification.
<dialog>: The Dialog element - HTML: Hypertext Markup Language
selectel.addeventlistener('change', function onselect(e) { confirmbtn.value = selectel.value; }); // "confirm" button of form triggers "close" on dialog because of [method="dialog"] favdialog.addeventlistener('close', function onclose() { outputbox.value = favdialog.returnvalue + " button clicked - " + (new date()).tostring(); }); result specifications specification status
comment html living standardthe definition of '<dialog>' in that specification.
<div>: The Content Division element - HTML: Hypertext Markup Language
html <div class="shadowbox"> <p>here's a very interesting note displayed in a lovely shadowed box.</p> </div> css .shadowbox { width: 15em; border: 1px solid #333; box-shadow: 8px 8px 5px #444; padding: 8px 12px; background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc); } result specifications specification status
comment html living standardthe definition of '<div>' in that specification.
<figure>: The Figure with Optional Caption element - HTML: Hypertext Markup Language
i will enchant thine ear, or like a fairy trip upon the green, or, like a nymph, with long dishevell'd hair, dance on the sands, and yet no footing seen: love is a spirit all compact of fire, not gross to sink, but light, and will aspire.</p> <figcaption><cite>venus and adonis</cite>, by william shakespeare</figcaption> </figure> specifications specification status
comment html living standardthe definition of '<figure>' in that specification.
<footer> - HTML: Hypertext Markup Language
webkit bugzilla: 146930 – ax: html native elements (header, footer, main, aside, nav) should work the same as aria landmarks, sometimes they don't specifications specification status
comment html living standardthe definition of '<footer>' in that specification.
<form> - HTML: Hypertext Markup Language
e current url --> <form method="post"> <label>name: <input name="submitted-name" autocomplete="name"> </label> <button>save</button> </form> <!-- form with fieldset, legend, and label --> <form method="post"> <fieldset> <legend>title</legend> <label><input type="radio" name="radio"> select me</label> </fieldset> </form> specifications specification status
comment html living standardthe definition of '<form>' in that specification.
<header> - HTML: Hypertext Markup Language
ader <article> <header> <h2>the planet earth</h2> <p>posted on wednesday, <time datetime="2017-10-04">4 october 2017</time> by jane smith</p> </header> <p>we live on a planet that's blue and green, with so many things still unseen.</p> <p><a href="https://janesmith.com/the-planet-earth/">continue reading....</a></p> </article> specifications specification status
comment html living standardthe definition of '<header>' in that specification.
<hgroup> - HTML: Hypertext Markup Language
examples <hgroup id="document-title"> <h1>html</h1> <h2>living standard — last updated 12 august 2016</h2> </hgroup> specifications specification status
comment html living standardthe definition of '<hgroup>' in that specification.
<img>: The Image Embed element - HTML: Hypertext Markup Language
checkbox link menuitem menuitemcheckbox menuitemradio option progressbar scrollbar separator slider switch tab treeitem with empty alt attribute, none or presentation with no alt attribute, no role permitted dom interface htmlimageelement specifications specification status
comment referrer policythe definition of 'referrer attribute' in that specification.
<input type="button"> - HTML: Hypertext Markup Language
e; } clearbtn.onclick = function() { ctx.fillstyle = 'rgb(0,0,0)'; ctx.fillrect(0,0,width,height); } function draw() { if(pressed) { ctx.fillstyle = colorpicker.value; ctx.beginpath(); ctx.arc(curx, cury-85, sizepicker.value, degtorad(0), degtorad(360), false); ctx.fill(); } requestanimationframe(draw); } draw(); specifications specification status
comments html living standardthe definition of '<input type="button">' in that specification.
<input type="checkbox"> - HTML: Hypertext Markup Language
or('input[value="other"]'); var othertext = document.queryselector('input[id="othervalue"]'); othertext.style.visibility = 'hidden'; othercheckbox.addeventlistener('change', () => { if(othercheckbox.checked) { othertext.style.visibility = 'visible'; othertext.value = ''; } else { othertext.style.visibility = 'hidden'; } }); specifications specification status
comment html living standardthe definition of '<input type="checkbox">' in that specification.
<input type="email"> - HTML: Hypertext Markup Language
l" placeholder="user@example.gov" list="defaultemails" size="64" maxlength="256" multiple> <datalist id="defaultemails"> <option value="jbond007@mi6.defence.gov.uk"> <option value="jbourne@unknown.net"> <option value="nfury@shield.org"> <option value="tony@starkindustries.com"> <option value="hulk@grrrrrrrr.arg"> </datalist> specifications specification status
comment html living standardthe definition of '<input type="email">' in that specification.
<input type="password"> - HTML: Hypertext Markup Language
var ssn = document.getelementbyid("ssn"); var current = document.getelementbyid("current"); ssn.oninput = function(event) { current.innerhtml = ssn.value; } result specifications specification status
comment html living standardthe definition of '<input type="password">' in that specification.
<input type="range"> - HTML: Hypertext Markup Language
cal"> css we target just the inputs with a type of range, changing the writing mode from the default to bt-lr, or bottom-to-top and left-to-right, for edge and internet explorer, and add -webkit-appearance: slider-vertical for all -webkit-based browsers: input[type="range"] { writing-mode: bt-lr; -webkit-appearance: slider-vertical; } specifications specification status
comment html living standardthe definition of '<input type="range">' in that specification.
<input type="tel"> - HTML: Hypertext Markup Language
div { margin-bottom: 10px; position: relative; } input[type="number"] { width: 100px; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; color: #8b0000; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; color: #009000; } specifications specification status
comment html living standardthe definition of '<input type="tel">' in that specification.
<input type="time"> - HTML: Hypertext Markup Language
minuteselect.appendchild(option); } } // make it so that if the hour is 18, the minutes value is set to 00 // — you can't select times past 18:00 function setminutestozero() { if(hourselect.value === '18') { minuteselect.value = '00'; } } hourselect.onchange = setminutestozero; minuteselect.onchange = setminutestozero; specifications specification status
comments html living standardthe definition of '<input type="time">' in that specification.
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
adio, radio, switch type=radio: menuitemradio type=text with no list attribute: combobox, searchbox, spinbutton type=color|date|datetime|datetime-local|email|file|hidden|month|number|password|range|reset|search|submit|tel|url|week or text with list attribute: no role permitted dom interface htmlinputelement specifications specification status
comment html living standardthe definition of '<input>' in that specification.
<ins> - HTML: Hypertext Markup Language
short note on making your mark (more accessible) | the paciello group tweaking text level styles | adrian roselli specifications specification status
comment html living standardthe definition of '<ins>' in that specification.
<keygen> - HTML: Hypertext Markup Language
ality=anytown&state=california&country=us& key=mihfmhewxdanbgkqhkig9w0baqefaanladbiakeanx0tiljromuue%2bptwbre6xfv%0awtkqbsshxk5zhcuwcwyvcniq9b82qhjdoacdd34rqfcaind46fxkqunb0mvkzqid%0aaqabfhfnb3ppbgxhsxnneuzyawvuzdanbgkqhkig9w0baqqfaanbaakv2eex2n%2fs%0ar%2f7ijnrowlszsmttiqteb%2badwhgj9u1xruroilq%2fo2cuqxifzcnzkyakwp4dubqw%0ai0%2f%2frgbvmco%3d specifications specification status
comment html5the definition of 'the <keygen> element' in that specification.
<label> - HTML: Hypertext Markup Language
implicit aria role no corresponding role permitted aria roles no role permitted dom interface htmllabelelement specifications specification status
comment html living standardthe definition of '<label>' in that specification.
<li> - HTML: Hypertext Markup Language
ordered list <ol> <li>first item</li> <li>second item</li> <li>third item</li> </ol> ordered list with a custom value <ol type="i"> <li value="3">third item</li> <li>fourth item</li> <li>fifth item</li> </ol> unordered list <ul> <li>first item</li> <li>second item</li> <li>third item</li> </ul> specifications specification status
comment html living standardthe definition of '<li>' in that specification.
<map> - HTML: Hypertext Markup Language
s="275,75,75" href="right.html"> </map> <img usemap="#primary" src="https://udn.realityripple.com/samples/6a/7e559101b3.png" alt="350 x 150 pic"> result expected live example output the live example above should appear similar to the following images (when using your keyboard tab key): for the left.html link: for the right.html link specifications specification status
comment html living standardthe definition of '<map>' in that specification.
<marquee>: The Marquee element (Obsolete) - HTML: Hypertext Markup Language
examples <marquee>this text will scroll from right to left</marquee> <marquee direction="up">this text will scroll from bottom to top</marquee> <marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid"> <marquee behavior="alternate"> this text will bounce </marquee> </marquee> specifications specification status
comment html living standardthe definition of '<marquee>' in that specification.
<menu> - HTML: Hypertext Markup Language
onclick="savefile()"> </menu> </li> <li> <button type="menu" menu="edit-menu">edit</button> <menu type="context" id="edit-menu"> <menuitem label="cut..." onclick="cutedit()"> <menuitem label="copy..." onclick="copyedit()"> <menuitem label="paste..." onclick="pasteedit()"> </menu> </li> </menu> result specifications specification status
comment html living standardthe definition of '<menu>' in that specification.
<menuitem> - HTML: Hypertext Markup Language
</menuitem> <hr> <menuitem type="radio" radiogroup="group1">radio button 1</menuitem> <menuitem type="radio" radiogroup="group1">radio button 2</menuitem> </menu> css content div { width: 300px; height: 80px; background-color: lightgreen; } result specifications specification status
comment html 5.2the definition of '<menuitem>' in that specification.
<meter>: The HTML Meter element - HTML: Hypertext Markup Language
html <p>he got a <meter low="69" high="80" max="100" value="84">b</meter> on the exam.</p> result on google chrome, the resulting meter looks like this: specifications specification status
comment html living standardthe definition of '<meter>' in that specification.
<noframes>: The Frame Fallback element - HTML: Hypertext Markup Language
<frameset cols="50%,50%"> <frame src="https://developer.mozilla.org/en/html/element/frameset" /> <frame src="https://developer.mozilla.org/en/html/element/frame" /> <noframes><p>it seems your browser does not support frames or is configured to not allow them.</p></noframes> </frameset> specifications specification status
comment html5the definition of 'noframes' in that specification.
<object> - HTML: Hypertext Markup Language
no percentages) examples embed a flash movie <!-- embed a flash movie --> <object data="movie.swf" type="application/x-shockwave-flash"></object> <!-- embed a flash movie with parameters --> <object data="movie.swf" type="application/x-shockwave-flash"> <param name="foo" value="bar"> </object> specifications specification status
comment html living standardthe definition of '<object>' in that specification.
<ol>: The Ordered List element - HTML: Hypertext Markup Language
--> <ul> <li>second item first subitem</li> <li>second item second subitem</li> <li>second item third subitem</li> </ul> </li> <!-- here's the closing </li> tag --> <li>third item</li> </ol> the above html will output: specifications specification status
comment html living standardthe definition of '<ol>' in that specification.
<optgroup> - HTML: Hypertext Markup Language
ptgroup label="group 1"> <option>option 1.1</option> </optgroup> <optgroup label="group 2"> <option>option 2.1</option> <option>option 2.2</option> </optgroup> <optgroup label="group 3" disabled> <option>option 3.1</option> <option>option 3.2</option> <option>option 3.3</option> </optgroup> </select> result specifications specification status
comment html living standardthe definition of '<optgroup>' in that specification.
<p>: The Paragraph element - HTML: Hypertext Markup Language
if extra space is desired, use css properties like margin to create the effect: p { margin-bottom: 2em; // increase white space after a paragraph } specifications specification status
comment html living standardthe definition of '<p>' in that specification.
<pre>: The Preformatted Text element - HTML: Hypertext Markup Language
</figcaption> </figure> mdn understanding wcag, guideline 1.1 explanations h86: providing text alternatives for ascii art, emoticons, and leetspeak | w3c techniques for wcag 2.0 specifications specification status
comment html living standardthe definition of '<pre>' in that specification.
<q>: The Inline Quotation element - HTML: Hypertext Markup Language
example <p>according to mozilla's website, <q cite="https://www.mozilla.org/about/history/details/">firefox 1.0 was released in 2004 and became a big success.</q></p> specifications specification status
comment html living standardthe definition of '<q>' in that specification.
<rt>: The Ruby Text element - HTML: Hypertext Markup Language
mple provides romaji transliteration for the kanji characters within the <ruby> element: <ruby> 漢 <rt>kan</rt> 字 <rt>ji</rt> </ruby> body { font-size: 22px; } the output looks like this in your browser: on a browser without ruby support, this example might look like this: 漢 kan 字 ji body { font-size: 22px; } specifications specification status
comment html living standardthe definition of '<rt>' in that specification.
<rtc>: The Ruby Text Container element - HTML: Hypertext Markup Language
examples <div class="info"> <ruby> <rbc> <rb>旧</rb><rt>jiù</rt> <rb>金</rb><rt>jīn</rt> <rb>山</rb><rt>shān</rt> </rbc> <rtc>san francisco</rtc> </ruby> </div> .info { padding-top: 10px; font-size: 36px; } specifications specification status
comment html 5.2the definition of '<rtc>' in that specification.
<ruby> - HTML: Hypertext Markup Language
examples example 1: character <ruby> 漢 <rp>(</rp><rt>kan</rt><rp>)</rp> 字 <rp>(</rp><rt>ji</rt><rp>)</rp> </ruby> example 2: word <ruby> 明日 <rp>(</rp><rt>ashita</rt><rp>)</rp> </ruby> specifications specification status
comment html living standardthe definition of '<ruby>' in that specification.
<s> - HTML: Hypertext Markup Language
short note on making your mark (more accessible) | the paciello group tweaking text level styles | adrian roselli specifications specification status
comment html living standardthe definition of 's element' in that specification.
<script>: The Script element - HTML: Hypertext Markup Language
<!-- generated by the server --> <script id="data" type="application/json">{"userid":1234,"username":"john doe","membersince":"2000-01-01t00:00:00.000z"}</script> <!-- static --> <script> const userinfo = json.parse(document.getelementbyid("data").text); console.log("user information: %o", userinfo); </script> specifications specification status
comments html living standardthe definition of '<script>' in that specification.
<select>: The HTML Select element - HTML: Hypertext Markup Language
implicit aria role combobox with no multiple attribute and no size attribute greater than 1, otherwise listbox permitted aria roles menu with no multiple attribute and no size attribute greater than 1, otherwise no role permitted dom interface htmlselectelement specifications specification status
comments html living standardthe definition of '<select>' in that specification.
<span> - HTML: Hypertext Markup Language
example example 1 html <p><span>some text</span></p> result example 2 html <li><span> <a href="portfolio.html" target="_blank">see my portfolio</a> </span></li> css li span { background: gold; } result specifications specification status
comment html living standardthe definition of '<span>' in that specification.
<strike> - HTML: Hypertext Markup Language
example <strike>: <strike>today's special: salmon</strike> sold out<br /> <s>: <s>today's special: salmon</s> sold out the result of this code is: specifications specification status
comment html5the definition of '<strike>' in that specification.
<strong>: The Strong Importance element - HTML: Hypertext Markup Language
examples basic example <p>before proceeding, <strong>make sure you put on your safety goggles</strong>.</p> the resulting output: labeling warnings <p><strong>important:</strong> before proceeding, make sure you add plenty of butter.</p> this results in: specifications specification status
comment html living standardthe definition of '<strong>' in that specification.
<sub>: The Subscript element - HTML: Hypertext Markup Language
another example: <p>almost every developer's favorite molecule is c<sub>8</sub>h<sub>10</sub>n<sub>4</sub>o<sub>2</sub>, which is commonly known as "caffeine."</p> the output: specifications specification status
comment html living standardthe definition of '<sub> and <sup>' in that specification.
<summary>: The Disclosure Summary element - HTML: Hypertext Markup Language
html in summaries this example adds some semantics to the <summary> element to indicate the label as important: <details open> <summary><strong>overview</strong></summary> <ol> <li>cash on hand: $500.00</li> <li>current invoice: $75.30</li> <li>due date: 5/6/19</li> </ol> </details> specifications specification status
comment html living standardthe definition of '<summary>' in that specification.
<sup>: The Superscript element - HTML: Hypertext Markup Language
numbers ordinal numbers, such as "fourth" in english or "quinto" in spanish may be abbreviated using numerals and language-specific text rendered in superscript: <p>the ordinal number "fifth" can be abbreviated in various languages as follows:</p> <ul> <li>english: 5<sup>th</sup></li> <li>french: 5<sup>ème</sup></li> </ul> the output: specifications specification status
comment html living standardthe definition of '<sub> and <sup>' in that specification.
<table>: The Table element - HTML: Hypertext Markup Language
mdn tables for visually impaired users tables with multi-level headers • tables • w3c wai web accessibility tutorials h43: using id and headers attributes to associate data cells with header cells in data tables | techniques for w3c wcag 2.0 specifications specification status
comment html living standardthe definition of 'table element' in that specification.
<time> - HTML: Hypertext Markup Language
929z 2011-11-18 14:54:39.929-0400 2011-11-18 14:54:39.929-04:00 a valid duration string pt4h18m3s examples simple example html <p>the concert starts at <time datetime="2018-07-07t20:00:00">20:00</time>.</p> output datetime example html <p>the concert took place on <time datetime="2001-05-15t19:00">may 15</time>.</p> output specifications specification status
comment html living standardthe definition of '<time>' in that specification.
<title>: The Document Title element - HTML: Hypertext Markup Language
example <title>2 errors - your order - blue house chinese food - foodyum: online takeout today!</title> mdn understanding wcag, guideline 2.4 explanations understanding success criterion 2.4.2 | w3c understanding wcag 2.0 specifications specification status
comment html living standardthe definition of '<title>' in that specification.
<tr>: The Table Row element - HTML: Hypertext Markup Language
nt permitted parents <table> (only if the table has no child <tbody> element, and even then only after any <caption>, <colgroup>, and <thead> elements); otherwise, the parent must be <thead>, <tbody> or <tfoot> implicit aria role row permitted aria roles any dom interface htmltablerowelement specifications specification status
comment html living standardthe definition of 'tr element' in that specification.
<ul>: The Unordered List element - HTML: Hypertext Markup Language
--> <ol> <li>second item first subitem</li> <li>second item second subitem</li> <li>second item third subitem</li> </ol> <!-- here is the closing </li> tag --> </li> <li>third item</li> </ul> the above html will output: specifications specification status
comment html living standardthe definition of '<ul>' in that specification.
<wbr> - HTML: Hypertext Markup Language
<p>http://this<wbr>.is<wbr>.a<wbr>.really<wbr>.long<wbr>.example<wbr>.com/with<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages<wbr>/deeper<wbr>/level<wbr>/pages</p> specifications specification status
comment html living standardthe definition of '<wbr>' in that specification.
contextmenu - HTML: Hypertext Markup Language
d("fontsizing").style.fontsize = "larger"; } function decfont() { document.getelementbyid("fontsizing").style.fontsize = "smaller"; } function changeimage() { var index = math.ceil(math.random() * 39 + 1); document.images[0].src = "https://developer.mozilla.org/media/img/promote/promobutton_mdn" + index + ".png"; } result specifications specification status
comment html 5.1the definition of 'contextmenu' in that specification.
is - HTML: Hypertext Markup Language
} } // define the new element customelements.define('word-count', wordcount, { extends: 'p' }); <p is="word-count"></p> specifications specification status
comment html living standardthe definition of 'is' in that specification.
itemref - HTML: Hypertext Markup Language
" itemprop="band" itemscope itemref="c"></div> <div id="c"> <p>band: <span itemprop="name">jazz band</span> </p> <p>size: <span itemprop="size">12</span> players</p> </div> structured data (in json-ld format) { "@id": "amanda", "name": "amanda", "band": { "@id": "b", "name": "jazz band", "size": 12 } } result specifications specification status
comment html microdatathe definition of 'itemref' in that specification.
title - HTML: Hypertext Markup Language
semantics, structure, and apis of html documents using the html title attribute – updated | the paciello group tooltips & toggletips - inclusive components the trials and tribulations of the title attribute - 24 accessibility specifications specification status
comment html living standardthe definition of 'title' in that specification.
translate - HTML: Hypertext Markup Language
<footer> <small>© 2020 <span translate="no">brandname</span></small> </footer> specifications specification status
comment html living standardthe definition of 'translate' in that specification.
Feature Policy - HTTP
specifications specification status
comment feature policythe definition of 'feature-policy' in that specification.
Access-Control-Allow-Credentials - HTTP
examples allow credentials: access-control-allow-credentials: true using xhr with credentials: var xhr = new xmlhttprequest(); xhr.open('get', 'http://example.com/', true); xhr.withcredentials = true; xhr.send(null); using fetch with credentials: fetch(url, { credentials: 'include' }) specifications specification status
comment fetchthe definition of 'access-control-allow-credentials' in that specification.
Access-Control-Allow-Methods - HTTP
examples access-control-allow-methods: post, get, options access-control-allow-methods: * specifications specification status
comment fetchthe definition of 'access-control-allow-methods' in that specification.
Access-Control-Allow-Origin - HTTP
access-control-allow-origin: https://developer.mozilla.org vary: origin specifications specification status
comment fetchthe definition of 'access-control-allow-origin' in that specification.
Access-Control-Expose-Headers - HTTP
comma: access-control-expose-headers: content-length, x-kuma-revision in requests without credentials, you can also use a wildcard value: access-control-expose-headers: * however, this won't wildcard the authorization header, so if you need to expose that, you will need to list it explicitly: access-control-expose-headers: *, authorization specifications specification status
comment fetchthe definition of 'access-control-expose-headers' in that specification.
Access-Control-Max-Age - HTTP
examples cache results of a preflight request for 10 minutes: access-control-max-age: 600 specifications specification status
comment fetchthe definition of 'access-control-max-age' in that specification.
Access-Control-Request-Headers - HTTP
examples access-control-request-headers: x-pingother, content-type specifications specification status
comment fetchthe definition of 'access-control-request-headers' in that specification.
Access-Control-Request-Method - HTTP
examples access-control-request-method: post specifications specification status
comment fetchthe definition of 'access-control-request-method' in that specification.
Alt-Svc - HTTP
example alt-svc: h2=":443"; ma=2592000; alt-svc: h2=":443"; ma=2592000; persist=1 alt-svc: h2="alt.example.com:443", h2=":443" alt-svc: h3-25=":443"; ma=3600, h2=":443"; ma=3600 specifications specification status
comment rfc 7838 ietf rfc initial definition.
Cache-Control - HTTP
cache-control: no-cache cache-control: no-cache, max-age=0 specifications specification status
comment rfc 8246: http immutable responses ietf rfc rfc 7234: hypertext transfer protocol (http/1.1): caching ietf rfc rfc 5861: http cache-control extensions for stale content ietf rfc initial definition ...
CSP: base-uri - HTTP
<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.
CSP: block-all-mixed-content - HTTP
for example, to disallow nonsecure http images: content-security-policy: img-src https: specifications specification status
comment mixed contentthe definition of 'block-all-mixed-content' in that specification.
CSP: child-src - HTTP
examples violation cases given this csp header: content-security-policy: child-src https://example.com/ this <iframe> and worker are blocked and won't load: <iframe src="https://not-example.com"></iframe> <script> var blockedworker = new worker("data:application/javascript,..."); </script> specifications specification status
comment content security policy level 3the definition of 'child-src' in that specification.
CSP: connect-src - HTTP
}); </script> specifications specification status
comment content security policy level 3the definition of 'connect-src' in that specification.
CSP: default-src - HTTP
frame-src 'self'; img-src 'self'; manifest-src 'self'; media-src 'self'; object-src 'self'; script-src https://example.com; style-src 'self'; worker-src 'self' specifications specification status
comment content security policy level 3the definition of 'default-src' in that specification.
CSP: font-src - HTTP
examples violation cases given this csp header: content-security-policy: font-src https://example.com/ the following font resource loading is blocked and won't load: <style> @font-face { font-family: "myfont"; src: url("https://not-example.com/font"); } body { font-family: "myfont"; } </style> specifications specification status
comment content security policy level 3the definition of 'font-src' in that specification.
CSP: form-action - HTTP
specifications specification status
comment content security policy level 3the definition of 'form-action' in that specification.
CSP: frame-ancestors - HTTP
examples content-security-policy: frame-ancestors 'none'; content-security-policy: frame-ancestors 'self' https://www.example.org; specifications specification status
comment content security policy level 3the definition of 'frame-ancestors' in that specification.
CSP: frame-src - HTTP
examples violation cases given this csp header: content-security-policy: frame-src https://example.com/ the following <iframe> is blocked and won't load: <iframe src="https://not-example.com/"></iframe> specifications specification status
comment content security policy level 3the definition of 'frame-src' in that specification.
CSP: img-src - HTTP
examples violation cases given this csp header: content-security-policy: img-src https://example.com/ the following <img> is blocked and won't load: <img src="https://not-example.com/foo.jpg" alt="example picture"> specifications specification status
comment content security policy level 3the definition of 'img-src' in that specification.
CSP: manifest-src - HTTP
examples violation cases given this csp header: content-security-policy: manifest-src https://example.com/ the following <link> is blocked and won't load: <link rel="manifest" href="https://not-example.com/manifest"> specifications specification status
comment content security policy level 3the definition of 'manifest-src' in that specification.
CSP: media-src - HTTP
tion cases given this csp header: content-security-policy: media-src https://example.com/ the following <audio>, <video> and <track> elements are blocked and won't load: <audio src="https://not-example.com/audio"></audio> <video src="https://not-example.com/video"> <track kind="subtitles" src="https://not-example.com/subtitles"> </video> specifications specification status
comment content security policy level 3the definition of 'media-src' in that specification.
CSP: navigate-to - HTTP
<meta http-equiv="content-security-policy" content="navigate-to 'none'"> <form action="javascript:alert('foo')" id="form1" method="post"> <input type="text" name="fieldname" value="fieldvalue"> <input type="submit" id="submit" value="submit"> </form> specifications specification status
comment content security policy level 3the definition of 'navigate-to' in that specification.
CSP: object-src - HTTP
iolation cases given this csp header: content-security-policy: object-src https://example.com/ the following <object>, <embed>, and <applet> elements are blocked and won't load: <embed src="https://not-example.com/flash"></embed> <object data="https://not-example.com/plugin"></object> <applet archive="https://not-example.com/java"></applet> specifications specification status
comment content security policy level 3the definition of 'object-src' in that specification.
CSP: plugin-types - HTTP
content-security-policy: plugin-types application/x-shockwave-flash will allow to load flash objects: <object data="https://example.com/flash" type="application/x-shockwave-flash"></object> allowing java applets to load an <applet> you must specify application/x-java-applet: content-security-policy: plugin-types application/x-java-applet specifications specification status
comment content security policy level 3the definition of 'plugin-types' in that specification.
CSP: prefetch-src - HTTP
a page with the following content security policy: content-security-policy: prefetch-src https://example.com/ fetches for the following code will return network errors, as the urls provided do not match prefetch-src's source list: <link rel="prefetch" src="https://example.org/"></link> <link rel="prerender" src="https://example.org/"></link> specification specification status
comment content security policy level 3the definition of 'prefetch-src' in that specification.
CSP: report-uri - HTTP
$log_file; mail($email_address, $email_subject, $message, 'content-type: text/plain;charset=utf-8'); } else if (filesize($log_file) > $log_file_size_limit) { exit(0); } file_put_contents($log_file, $json_data, file_append | lock_ex); } specifications specification status
comment content security policy level 3the definition of 'report-uri' in that specification.
CSP: sandbox - HTTP
examples content-security-policy: sandbox allow-scripts; specifications specification status
comment content security policy level 3the definition of 'sandbox' in that specification.
CSP: script-src-attr - HTTP
specifications specification status
comment content security policy level 3the definition of 'script-src-attr' in that specification.
CSP: script-src-elem - HTTP
specifications specification status
comment content security policy level 3the definition of 'script-src-elem' in that specification.
CSP: script-src - HTTP
specifications specification status
comment content security policy level 3the definition of 'script-src' in that specification.
CSP: style-src-attr - HTTP
examples todo: add examples specifications specification status
comment content security policy level 3the definition of 'style-src-attr' in that specification.
CSP: style-src-elem - HTTP
examples todo: add examples specifications specification status
comment content security policy level 3the definition of 'style-src-elem' in that specification.
CSP: style-src - HTTP
if 'unsafe-eval' isn't specified with the style-src directive, the following methods are blocked and won't have any effect: cssstylesheet.insertrule() cssgroupingrule.insertrule() cssstyledeclaration.csstext specifications specification status
comment content security policy level 3the definition of 'style-src' in that specification.
CSP: worker-src - HTTP
: content-security-policy: worker-src https://example.com/ worker, sharedworker, serviceworker are blocked and won't load: <script> var blockedworker = new worker("data:application/javascript,..."); blockedworker = new sharedworker("https://not-example.com/"); navigator.serviceworker.register('https://not-example.com/sw.js'); </script> specifications specification status
comment content security policy level 3the definition of 'worker-src' in that specification.
Content-Security-Policy - HTTP
specifications specification status
comment content security policy level 3 working draft adds manifest-src, navigate-to, report-to, strict-dynamic, worker-src.
DNT - HTTP
examples reading do not track status from javascript the user's dnt preference can also be read from javascript using the navigator.donottrack property: navigator.donottrack; // "0" or "1" specifications specification status
comment tracking preference expression (dnt)the definition of 'dnt header field for http requests' in that specification.
Device-Memory - HTTP
accept-ch: device-memory accept-ch-lifetime: 86400 then on subsequent requests the client might send device-memory header back: device-memory: 1 specifications specification status
comment device memory 1the definition of 'device-memory' in that specification.
web-share - HTTP
specifications specification status
comment feature policy editor's draft initial definition.
Link - HTTP
d between < and >: link: <https://example.com>; rel="preconnect" link: https://bad.example; rel="preconnect" specifying multiple links you can specify multiple links separated by commas, for example: link: <https://one.example.com>; rel="preconnect", <https://two.example.com>; rel="preconnect", <https://three.example.com>; rel="preconnect" specifications specification status
comments rfc 8288, section 3: link serialisation in http headers ietf rfc rfc 5988, section 5: the link header field ietf rfc initial definition ...
Origin - HTTP
examples origin: https://developer.mozilla.org specifications specification
comment rfc 6454, section 7: origin the web origin concept fetchthe definition of 'origin header' in that specification.
Set-Cookie2 - HTTP
header type response header forbidden header name no syntax set-cookie2: <cookie-name>=<cookie-value> set-cookie2: <cookie-name>=<cookie-value>;
comment=<value> set-cookie2: <cookie-name>=<cookie-value>;
commenturl=<http-url> set-cookie2: <cookie-name>=<cookie-value>; discard set-cookie2: <cookie-name>=<cookie-value>; domain=<domain-value> set-cookie2: <cookie-name>=<cookie-value>; max-age=<non-zero-digit> set-cookie2: <cookie-name>=<cookie-value>; path=<path-value> set-cookie2: <cookie-name>=<cookie-value>; port=<port-number> set-cookie2: <cookie-name>=<cookie-value>; secure set-cook...
Strict-Transport-Security - HTTP
strict-transport-security: max-age=63072000; includesubdomains; preload specifications specification status
comment http strict transport security (hsts) ietf rfc initial definition ...
Timing-Allow-Origin - HTTP
examples to allow any resource to see timing resources: timing-allow-origin: * to allow https://developer.mozilla.org to see timing resources, you can specify: timing-allow-origin: https://developer.mozilla.org specifications specification status
comment resource timing level 3the definition of 'timing-allow-origin' in that specification.
Tk - HTTP
examples a tk header for a resource that claims not to be tracking would look like: tk: n specifications specification status
comment tracking preference expression (dnt)the definition of 'tk header field' in that specification.
Upgrade-Insecure-Requests - HTTP
location: https://example.com/ vary: upgrade-insecure-requests specifications specification status
comment upgrade insecure requeststhe definition of 'upgrade-insecure-requests' in that specification.
Firefox user agent string reference - HTTP
see also firefox os user agent string (blog post w/bug 777710 reference) final user agent string for firefox 4 (blog post) recommendations on sniffing the ua string for cross-browser support window.navigator.useragent add android version to fennec ua string (bug 1169772)
comments to mozilla.dev.platform ...
X-Content-Type-Options - HTTP
ript" and the mime type is not a javascript mime type enables cross-origin read blocking (corb) protection for the mime-types: text/html text/plain text/json, application/json or any other type with a json extension: */*+json text/xml, application/xml or any other type with an xml extension: */*+xml (excluding image/svg+xml) specifications specification status
comment fetchthe definition of 'x-content-type-options definition' in that specification.
Link prefetching FAQ - HTTP
if you have any questions or
comments about link prefetching, please feel free to send them my way :-) see also...
HTTP request methods - HTTP
specifications specification title
comment rfc 7231, section 4: request methods hypertext transfer protocol (http/1.1): semantics and content specifies get, head, post, put, delete, connect, options, trace.
103 Early Hints - HTTP
syntax 103 early hints specifications specification status
comments rfc 8297: 103 early hints ietf rfc initial definition browser compatibility the compatibility table in this page is generated from structured data.
A re-introduction to JavaScript (JS tutorial) - JavaScript
this is very rarely what you want — in fact it's worth specifically labeling deliberate fallthrough with a
comment if you really meant it to aid debugging: switch (a) { case 1: // fallthrough case 2: eatit(); break; default: donothing(); } the default clause is optional.
JavaScript Guide - JavaScript
chapters this guide is divided into several chapters: introduction about this guide about javascript javascript and java ecmascript tools hello world grammar and types basic syntax &
comments declarations variable scope variable hoisting data structures and types literals control flow and error handling if...else switch try/catch/throw error objects loops and iteration for while do...while break/continue for..in for..of functions defining functions calling functions function scope closures arguments & parameters ...
Array.prototype.forEach() - JavaScript
= await sumfunction(sum, rating) }) console.log(sum) // naively expected output: 14 // actual output: 0 examples no operation for uninitialized values (sparse arrays) const arraysparse = [1,3,,7] let numcallbackruns = 0 arraysparse.foreach((element) => { console.log(element) numcallbackruns++ }) console.log("numcallbackruns: ", numcallbackruns) // 1 // 3 // 7 // numcallbackruns: 3 //
comment: as you can see the missing value between 3 and 7 didn't invoke callback function.
Intl.RelativeTimeFormat.prototype.formatToParts() - JavaScript
new intl.relativetimeformat("en", { numeric: "auto" }); // format relative time using the day unit rtf.formattoparts(-1, "day"); // > [{ type: "literal", value: "yesterday"}] rtf.formattoparts(100, "day"); // > [{ type: "literal", value: "in " }, // > { type: "integer", value: "100", unit: "day" }, // > { type: "literal", value: " days" }] specifications specification status
comment ecmascript internationalization api (ecma-402)the definition of 'relativetimeformat.formattoparts()' in that specification.
Intl.RelativeTimeFormat.prototype.resolvedOptions() - JavaScript
examples using the resolvedoptions method var de = new intl.relativetimeformat('de-de'); var usedoptions = de.resolvedoptions(); usedoptions.locale; // "de-de" usedoptions.style; // "long" usedoptions.numeric; // "always" usedoptions.numberingsystem; // "latn" specifications specification status
comment ecmascript internationalization api (ecma-402)the definition of 'relativetimeformat.resolvedoptions()' in that specification.
Intl.RelativeTimeFormat.supportedLocalesOf() - JavaScript
const locales = ['ban', 'id-u-co-pinyin', 'de-id']; const options = { localematcher: 'lookup' }; console.log(intl.relativetimeformat.supportedlocalesof(locales, options).join(', ')); // → "id-u-co-pinyin, de-id" specifications specification status
comment ecmascript internationalization api (ecma-402)the definition of 'relativetimeformat.supportedlocalesof()' in that specification.
Intl.RelativeTimeFormat - JavaScript
rtf.formattoparts(-1, "day"); // > [{ type: "literal", value: "yesterday"}] rtf.formattoparts(100, "day"); // > [{ type: "literal", value: "in " }, // > { type: "integer", value: "100", unit: "day" }, // > { type: "literal", value: " days" }] specifications specification status
comment ecmascript internationalization api (ecma-402)the definition of 'relativetimeformat' in that specification.
JSON - JavaScript
consider this example where json.parse() parses the string as json and eval executes the string as javascript: let code = '"\u2028\u2029"' json.parse(code) // evaluates to "\u2028\u2029" in all engines eval(code) // throws a syntaxerror in old engines other differences include allowing only double-quoted strings and having no provisions for undefined or
comments.
Object.prototype.constructor - JavaScript
, new number(), 1, // remains unchanged new object(), {}, new regexp(), /(?:)/, new string(), 'test' // remains unchanged ] for (let i = 0; i < types.length; i++) { types[i].constructor = type types[i] = [types[i].constructor, types[i] instanceof type, types[i].tostring()] } console.log(types.join('\n')) this example displays the following output (
comments added for reference): function type() {},false, // new array() function type() {},false, // [] function type() {},false,false // new boolean() function boolean() { [native code] },false,true // true function type() {},false,mon sep 01 2014 1...
Object.defineProperties() - JavaScript
polyfill assuming a pristine execution environment with all names and properties referring to their initial values, object.defineproperties is almost completely equivalent (note the
comment in iscallable) to the following reimplementation in javascript: function defineproperties(obj, properties) { function converttodescriptor(desc) { function hasproperty(obj, prop) { return object.prototype.hasownproperty.call(obj, prop); } function iscallable(v) { // nb: modify as necessary if other values than functions are callable.
empty - JavaScript
see the following example with an empty loop body: let arr = [1, 2, 3]; // assign all array values to 0 for (let i = 0; i < arr.length; arr[i++] = 0) /* empty statement */ ; console.log(arr); // [0, 0, 0] unintentional usage it is a good idea to
comment intentional use of the empty statement, as it is not really obvious to distinguish from a normal semicolon.
background_color - Web app manifests
examples "background_color": "red" specification specification status
comment feedback web app manifestthe definition of 'background_color' in that specification.
categories - Web app manifests
example "categories": ["books", "education", "medical"] specification specification status
comment feedback web app manifestthe definition of 'categories' in that specification.
description - Web app manifests
examples simple description in left-to-right language: "description": "awesome application that will help you achieve your dreams." description in arabic, which will be displayed right-to-left: "dir": "rtl", "lang": "ar", "description": ".تطبيق رائع سيساعدك على تحقيق أحلامك" specification specification status
comment feedback web app manifestthe definition of 'description' in that specification.
dir - Web app manifests
example "dir": "rtl", "lang": "ar", "short_name": "!أنا من التطبيق" specification specification status
comment feedback web app manifestthe definition of 'dir' in that specification.
display - Web app manifests
(none) example "display": "standalone" specification specification status
comment feedback web app manifestthe definition of 'display' in that specification.
iarc_rating_id - Web app manifests
examples "iarc_rating_id": "e84b072d-71b3-4d3e-86ae-31a8ce4e53b7" specification specification status
comment feedback web app manifestthe definition of 'iarc_rating_id' in that specification.
icons - Web app manifests
specification specification status
comment feedback web app manifestthe definition of 'icons' in that specification.
lang - Web app manifests
examples "lang": "en-us" specification specification status
comment feedback web app manifestthe definition of 'lang' in that specification.
name - Web app manifests
examples simple name in left-to-right language: "name": "awesome application" right-to-left name in arabic: "dir": "rtl", "lang": "ar", "name": "!أنا من التطبيق" specification specification status
comment feedback web app manifestthe definition of 'name' in that specification.
orientation - Web app manifests
values orientation can take one of the following values: any natural landscape landscape-primary landscape-secondary portrait portrait-primary portrait-secondary examples "orientation": "portrait-primary" specification specification status
comment feedback web app manifestthe definition of 'orientation' in that specification.
scope - Web app manifests
examples if the scope is relative, the manifest url is used as a base url: "scope": "/app/" the following scope limits navigation to the current site: "scope": "https://example.com/" finally, the following example limits navigation to a subdirectory of the current site: "scope": "https://example.com/subdirectory/" specification specification status
comment feedback web app manifestthe definition of 'scope' in that specification.
screenshots - Web app manifests
examples "screenshots" : [ { "src": "screenshot1.webp", "sizes": "1280x720", "type": "image/webp" }, { "src": "screenshot2.webp", "sizes": "1280x720", "type": "image/webp" } ] specification specification status
comment feedback web app manifestthe definition of 'screenshots' in that specification.
short_name - Web app manifests
examples simple short_name in left-to-right language: "name": "awesome application", "short_name": "awesome app" short_name in arabic, which will be displayed right-to-left: "dir": "rtl", "lang": "ar", "name": "تطبيق رائع", "short_name": "رائع" specification specification status
comment feedback web app manifestthe definition of 'short_name' in that specification.
shortcuts - Web app manifests
examples the following is a list of shortcuts a calendar app might have: "shortcuts" : [ { "name": "today's agenda", "url": "/today", "description": "list of events planned for today" }, { "name": "new event", "url": "/create/event" }, { "name": "new reminder", "url": "/create/reminder" } ] specification specification status
comment feedback web app manifestthe definition of 'shortcuts' in that specification.
start_url - Web app manifests
"start_url": "../startpoint.html" specification specification status
comment feedback web app manifestthe definition of 'start_url' in that specification.
theme_color - Web app manifests
examples "theme_color": "red" specification specification status
comment feedback web app manifestthe definition of 'theme_color' in that specification.
<maction> - MathML
: <math> <maction actiontype="toggle"> <mfrac> <mn>6</mn> <mn>8</mn> </mfrac> <mfrac> <mrow> <mn>3</mn> <mo>⋅</mo> <mn>2</mn> </mrow> <mrow> <mn>4</mn> <mo>⋅</mo> <mn>2</mn> </mrow> </mfrac> <mfrac> <mn>3</mn> <mn>4</mn> </mfrac> </maction> </math> specifications specification status
comment mathml 3.0the definition of 'maction' in that specification.
<math> - MathML
specifications specification status
comment mathml 3.0the definition of 'the top-level math element' in that specification.
<menclose> - MathML
ontents madruwb a2 + b2 arabic factorial symbol updiagonalarrow a2 + b2 diagonal arrow phasorangle a2 + b2 phasor angle examples <math> <menclose notation="circle box"> <mi> x </mi> <mo> + </mo> <mi> y </mi> </menclose> </math> specifications specification status
comment mathml 3.0the definition of 'menclose' in that specification.
<merror> - MathML
examples <math> <merror> <mrow> <mtext> division by zero: </mtext> <mfrac> <mn> 1 </mn> <mn> 0 </mn> </mfrac> </mrow> </merror> </math> specifications specification status
comment mathml 3.0the definition of 'merror' in that specification.
<mfrac> - MathML
examples sample rendering: your browser rendering: a b c d <math> <mfrac bevelled="true"> <mfrac> <mi> a </mi> <mi> b </mi> </mfrac> <mfrac> <mi> c </mi> <mi> d </mi> </mfrac> </mfrac> </math> specifications specification status
comment mathml 3.0the definition of 'mfrac' in that specification.
<mglyph> - MathML
examples <math> <mi><mglyph src="my-glyph.png" alt="my glyph"/></mi> </math> specifications specification status
comment mathml 3.0the definition of 'mglyph' in that specification.
<mi> - MathML
old-sans-serif ; example sans-serif-italic ; example sans-serif-bold-italic ; example monospace ; example initial ; مثال tailed ; مثال looped ; مثال stretched ; مثال examples <math> <mi> y </mi> <mi> sin </mi> <mi mathvariant="monospace"> x </mi> <mi mathvariant="bold"> π </mi> </math> specifications specification status
comment mathml 3.0the definition of 'mi' in that specification.
<mlabeledtr> - MathML
examples rendering: <math> <mtable> <mlabeledtr> <mtd><mn>1</mn></mtd> <!-- label --> <mtd><mi>a</mi></mtd> <mtd><mi>b</mi></mtd> </mlabeledtr> <mtr> <mtd><mi>c</mi></mtd> <mtd><mi>d</mi></mtd> <mtd><mi>e</mi></mtd> </mtr> </mtable> </math> specifications specification status
comment mathml 3.0the definition of 'mlabeledtr' in that specification.
<mmultiscripts> - MathML
owser: x c b <math> <mmultiscripts> <mi>x</mi> <!-- base expression --> <none /> <!-- postsubscript --> <mi>c</mi> <!-- postsuperscript --> <mprescripts /> <mi>b</mi> <!-- presubscript --> <none /> <!-- presuperscript --> </mmultiscripts> </math> specifications specification status
comment mathml 3.0the definition of 'mmultiscripts' in that specification.
<mn> - MathML
f ; example bold-sans-serif ; example sans-serif-italic ; example sans-serif-bold-italic ; example monospace ; example initial ; مثال tailed ; مثال looped ; مثال stretched ; مثال examples <math> <mn> 0 </mn> <mn> 1.337 </mn> <mn> twelve </mn> <mn> xvi </mn> <mn> 2e10 </mn> </math> specifications specification status
comment mathml 3.0the definition of 'mn' in that specification.
<mo> - MathML
examples <math> <mrow> <mn>5</mn> <mo>+</mo> <mn>5</mn> </mrow> <mrow> <mo> [ </mo> <!-- default form value: prefix --> <mrow> <mn> 0 </mn> <mo> ; </mo> <!-- default form value: infix --> <mn> 1 </mn> </mrow> <mo> ) </mo> <!-- default form value: postfix --> </mrow> </math> specifications specification status
comment mathml 3.0the definition of 'mo' in that specification.
<mover> - MathML
examples sample rendering: rendering in your browser: x + y + z ⏞ <math> <mover accent="true"> <mrow> <mi> x </mi> <mo> + </mo> <mi> y </mi> <mo> + </mo> <mi> z </mi> </mrow> <mo> ⏞ <!--top curly bracket--> </mo> </mover> </math> specifications specification status
comment mathml 3.0the definition of 'mover' in that specification.
<mpadded> - MathML
examples <math> <mpadded height="+150px" width="100px" lspace="2height"> <mi> x </mi> <mo> + </mo> <mi> y </mi> </mpadded> </math> specifications specification status
comment mathml 3.0the definition of 'mpadded' in that specification.
<mphantom> - MathML
examples sample rendering: rendering in your browser: x + y + z <math> <mrow> <mi> x </mi> <mo> + </mo> <mphantom> <mi> y </mi> <mo> + </mo> </mphantom> <mi> z </mi> </mrow> </math> specifications specification status
comment mathml 3.0the definition of 'mphantom' in that specification.
<mroot> - MathML
examples sample rendering: rendering in your browser: x 3 <math> <mroot> <mi>x</mi> <mn>3</mn> </mroot> </math> specifications specification status
comment mathml 3.0the definition of 'mroot' in that specification.
<mrow> - MathML
examples <math> <mrow> <mn> 1 </mn> <mo> + </mo> <mn> 1 </mn> </mrow> <mrow> <mo> ( </mo> <mrow> <mi> x </mi> <mo> , </mo> <mi> y </mi> </mrow> <mo> ) </mo> </mrow> </math> specifications specification status
comment mathml 3.0the definition of 'mrow' in that specification.
<ms> - MathML
examples <math> <ms lquote="„" rquote="“"> abc </ms> </math> specifications specification status
comment mathml 3.0the definition of 'ms' in that specification.
<mspace> - MathML
examples <math> <mspace depth="40px" height="20px" /> <mspace width="100px" /> </math> specifications specification status
comment mathml 3.0the definition of 'mspace' in that specification.
<msqrt> - MathML
examples sample rendering: rendering in your browser: x <math> <msqrt> <mi>x</mi> </msqrt> </math> specifications specification status
comment mathml 3.0the definition of 'msqrt' in that specification.
<mstyle> - MathML
retchy="true" form="prefix">∑</mo> <mrow> <mi>i</mi> <mo form="infix">=</mo> <mn>1</mn> </mrow> <mi>n</mi> </munderover> <mstyle displaystyle="true"> <mfrac> <mn>1</mn> <mi>n</mi> </mfrac> </mstyle> </mrow> </mstyle> </math> specifications specification status
comment mathml 3.0the definition of 'mstyle' in that specification.
<msub> - MathML
examples sample rendering: rendering in your browser: x 1 <math> <msub> <mi>x</mi> <mn>1</mn> </msub> </math> specifications specification status
comment mathml 3.0the definition of 'msub' in that specification.
<msubsup> - MathML
examples sample rendering: rendering in your browser: ∫ 0 1 <math displaystyle="true"> <msubsup> <mo> ∫<!--integral --> </mo> <mn> 0 </mn> <mn> 1 </mn> </msubsup> </math> specifications specification status
comment mathml 3.0the definition of 'msubsup' in that specification.
<msup> - MathML
examples sample rendering: rendering in your browser: x 2 <math> <msup> <mi>x</mi> <mn>2</mn> </msup> </math> specifications specification status
comment mathml 3.0the definition of 'msup' in that specification.
<mtable> - MathML
s="solid" align="axis 3"> <mtr> <mtd><mi>a</mi></mtd> <mtd><mi>b</mi></mtd> </mtr> <mtr> <mtd><mi>c</mi></mtd> <mtd><mi>d</mi></mtd> </mtr> <mtr> <mtd><mi>e</mi></mtd> <mtd><mi>f</mi></mtd> </mtr> </mtable> </math> specifications specification status
comment mathml 3.0the definition of 'mtable' in that specification.
<mtd> - MathML
specifications specification status
comment mathml 3.0the definition of 'mtd' in that specification.
<mtr> - MathML
specifications specification status
comment mathml 3.0the definition of 'mtr' in that specification.
<munder> - MathML
examples sample rendering: rendering in your browser: x + y + z ⏟ <math> <munder accentunder="true"> <mrow> <mi> x </mi> <mo> + </mo> <mi> y </mi> <mo> + </mo> <mi> z </mi> </mrow> <mo> ⏟ <!--bottom curly bracket--> </mo> </munder> </math> specifications specification status
comment mathml 3.0the definition of 'munder' in that specification.
<munderover> - MathML
examples sample rendering: rendering in your browser: ∫ 0 ∞ <math displaystyle="true"> <munderover > <mo> ∫ <!--integral--> </mo> <mn> 0 </mn> <mi> ∞ <!--infinity--> </mi> </munderover> </math> specifications specification status
comment mathml 3.0the definition of 'munderover' in that specification.
<semantics> - MathML
>x</ci> <cn type="integer">2</cn> </apply> <ci>y</ci> </apply> </annotation-xml> <!-- annotate an image --> <annotation encoding="image/png" src="some/path/formula.png"/> <!-- annotate tex --> <annotation encoding="application/x-tex"> x^{2} + y </annotation> </semantics> </math> specifications specification status
comment mathml 3.0the definition of 'mixing markup languages for mathematical expressions' in that specification.
MathML documentation index - MathML
36 <mtext> mathml, mathml reference, mathml:element, mathml:token elements the mathml element is used to render arbitrary text with no notational meaning, such as
comments or annotations.
Media container formats (file types) - Web media technologies
specifications specification
comment etsi 3gpp defines the 3gp container format iso/iec 14496-3 (mpeg-4 part 3 audio) defines mp4 audio including adts flac format the flac format specification iso/iec 11172-1 (mpeg-1 part 1 systems) defines the mpeg-1 container format iso/iec 13818-1 (mpeg-2 part 1 systems) defines the mpeg-2 container format iso/iec 14496-14 (...
Lazy loading - Web Performance
event handlers when browser compatibility is crucial, there are a few options: polyfill intersection observer fallback to scroll, resize or orientation change event handlers to determine if a specific element is in viewport specifications specification status
comment html living standard living standard ...
accent-height - SVG: Scalable Vector Graphics
value <number> default value value of ascent animatable no specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'accent-height' in that specification.
alphabetic - SVG: Scalable Vector Graphics
only one element is using this attribute: <font-face> usage notes value <number> default value 0 animatable no specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'alphabetic' in that specification.
amplitude - SVG: Scalable Vector Graphics
four elements are using this attribute: <fefunca>, <fefuncb>, <fefuncg>, and <fefuncr> usage notes value <number> default value 1 animatable yes specifications specification status
comment filter effects module level 1the definition of 'amplitude' in that specification.
ascent - SVG: Scalable Vector Graphics
value <number> default value difference between units-per-em and vert-origin-y animatable no specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'ascent' in that specification.
azimuth - SVG: Scalable Vector Graphics
azimuth="240" /> </fediffuselighting> </filter> <circle cx="100" cy="100" r="80" style="filter: url(#distantlight1);" /> <circle cx="100" cy="100" r="80" style="filter: url(#distantlight2); transform: translatex(240px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications specification status
comment filter effects module level 1the definition of 'azimuth' in that specification.
baseFrequency - SVG: Scalable Vector Graphics
acementfilter"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter: url(#displacementfilter)"/> </svg> specifications specification status
comment filter effects module level 1the definition of 'basefrequency' in that specification.
begin - SVG: Scalable Vector Graphics
begin-5-accesskey.svg specifications specification status
comment svg animations level 2the definition of 'begin for <discard>' in that specification.
cap-height - SVG: Scalable Vector Graphics
only one element is using this attribute: <font-face> usage notes value <number> default value none animatable no specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'cap-height' in that specification.
clip-path - SVG: Scalable Vector Graphics
legend compatibility unknown compatibility unknown specifications specification status
comment css masking module level 1the definition of 'clip-path' in that specification.
color - SVG: Scalable Vector Graphics
pends on user agent animatable yes example html, body, svg { height: 100%; } <svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <g color="green"> <rect width="50" height="50" fill="currentcolor" /> <circle r="25" cx="70" cy="70" stroke="currentcolor" fill="none" stroke-width="5" /> </g> </svg> specifications specification status
comment scalable vector graphics (svg) 2the definition of 'color' in that specification.
contentScriptType - SVG: Scalable Vector Graphics
usage notes value one of the content types specified in the media types default value application/ecmascript animatable no specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'contentscripttype' in that specification.
cx - SVG: Scalable Vector Graphics
<stop offset="100%" stop-color="white" /> </radialgradient> </defs> <rect x="1" y="1" width="8" height="8" fill="url(#mygradient000)" stroke="black" /> <rect x="13" y="1" width="8" height="8" fill="url(#mygradient050)" stroke="black" /> <rect x="25" y="1" width="8" height="8" fill="url(#mygradient100)" stroke="black" /> </svg> specifications specification status
comment scalable vector graphics (svg) 2the definition of 'cx' in that specification.
cy - SVG: Scalable Vector Graphics
<stop offset="100%" stop-color="white" /> </radialgradient> </defs> <rect x="1" y="1" width="8" height="8" fill="url(#mygradient000)" stroke="black" /> <rect x="13" y="1" width="8" height="8" fill="url(#mygradient050)" stroke="black" /> <rect x="25" y="1" width="8" height="8" fill="url(#mygradient100)" stroke="black" /> </svg> specifications specification status
comment scalable vector graphics (svg) 2the definition of 'cy' in that specification.
d - SVG: Scalable Vector Graphics
,8 8,0" /> <!-- an open shape with the last point of the path matching the first one --> <path stroke="red" d="m 15,1 l -4,8 8,0 -4,-8" /> <!-- a closed shape with the last point of the path different to the first one --> <path stroke="red" d="m 25,1 l -4,8 8,0 z" /> </svg> specification specification status
comment scalable vector graphics (svg) 2the definition of 'd' in that specification.
descent - SVG: Scalable Vector Graphics
only one element is using this attribute: <font-face> usage notes value <number> default value value of vert-origin-y animatable no specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'descent' in that specification.
diffuseConstant - SVG: Scalable Vector Graphics
iffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 1 animatable yes specifications specification status
comment filter effects module level 1the definition of 'diffuseconstant' in that specification.
direction - SVG: Scalable Vector Graphics
{ height: 100%; } <svg viewbox="0 0 600 72" xmlns="http://www.w3.org/2000/svg" direction="rtl" lang="fa"> <text x="300" y="50" text-anchor="middle" font-size="36">داستان svg 1.1 se طولا ني است.</text> </svg> usage notes value ltr | rtl default value ltr animatable yes specifications specification status
comment css writing modes module level 3the definition of 'direction' in that specification.
dominant-baseline - SVG: Scalable Vector Graphics
cx="60" cy="70" r="3" fill="red" /> <circle cx="60" cy="120" r="3" fill="red" /> <circle cx="60" cy="170" r="3" fill="red" /> <circle cx="60" cy="220" r="3" fill="red" /> <circle cx="60" cy="270" r="3" fill="red" /> <style><![cdata[ text { font: bold 30px verdana, helvetica, arial, sans-serif; } ]]></style> </svg> result specifications specification status
comment scalable vector graphics (svg) 2the definition of 'dominant-baseline' in that specification.
dx - SVG: Scalable Vector Graphics
value list of <length> default value none animatable yes specifications specification status
comment filter effects module level 1the definition of 'dx' in that specification.
dy - SVG: Scalable Vector Graphics
value list of <length> default value none animatable yes specifications specification status
comment filter effects module level 1the definition of 'dy' in that specification.
elevation - SVG: Scalable Vector Graphics
levation="45" /> </fediffuselighting> </filter> <circle cx="100" cy="100" r="80" style="filter: url(#distantlight1);" /> <circle cx="100" cy="100" r="80" style="filter: url(#distantlight2); transform: translatex(240px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications specification status
comment filter effects module level 1the definition of 'elevation' in that specification.
exponent - SVG: Scalable Vector Graphics
ll="url(#gradient)" style="filter: url(#componenttransfer2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 1 animatable yes <number> if the type attribute of the component element is set to gamma, this value specifies the exponent of the gamma function specifications specification status
comment filter effects module level 1the definition of 'exponent' in that specification.
fill-opacity - SVG: Scalable Vector Graphics
legend compatibility unknown compatibility unknown specifications specification status
comment scalable vector graphics (svg) 2the definition of 'fill-opacity' in that specification.
fill-rule - SVG: Scalable Vector Graphics
legend compatibility unknown compatibility unknown specifications specification status
comment scalable vector graphics (svg) 2the definition of 'fill-rule' in that specification.
flood-color - SVG: Scalable Vector Graphics
" y="0" width="200" height="200"/> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#flood1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#flood2); transform: translatex(220px);" /> </svg> usage notes value color initial value black animatable yes specifications specification status
comment filter effects module level 1the definition of 'flood-color' in that specification.
font-stretch - SVG: Scalable Vector Graphics
yph>, <text>, <textpath>, <tref>, and <tspan> usage notes value <font-stretch-absolute>where <font-stretch-absolute> = normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | <percentage> default value normal animatable yes specifications specification status
comment css fonts module level 4the definition of 'font-stretch' in that specification.
format - SVG: Scalable Vector Graphics
table 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 intellifont specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'format for <glyphref>' in that specification.
fr - SVG: Scalable Vector Graphics
"white" stroke-width="2"/> <circle cx="35" cy="35" r="2" fill="white" stroke="white"/> <circle cx="60" cy="60" r="2" fill="white" stroke="white"/> <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text> <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text> </svg> specifications specification status
comment scalable vector graphics (svg) 2the definition of 'fr' in that specification.
fx - SVG: Scalable Vector Graphics
ke="white" stroke-width="2"/> <circle cx="35" cy="35" r="2" fill="white" stroke="white"/> <circle cx="60" cy="60" r="2" fill="white" stroke="white"/> <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text> <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text> </svg> specifications specification status
comment scalable vector graphics (svg) 2the definition of 'fx' in that specification.
fy - SVG: Scalable Vector Graphics
ke="white" stroke-width="2"/> <circle cx="35" cy="35" r="2" fill="white" stroke="white"/> <circle cx="60" cy="60" r="2" fill="white" stroke="white"/> <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text> <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text> </svg> specifications specification status
comment scalable vector graphics (svg) 2the definition of 'fy' in that specification.
g1 - SVG: Scalable Vector Graphics
specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'g1' in that specification.
g2 - SVG: Scalable Vector Graphics
specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'g2' in that specification.
glyphRef - SVG: Scalable Vector Graphics
specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'glyphref for <glyphref>' in that specification.
horiz-adv-x - SVG: Scalable Vector Graphics
specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'horiz-adv-x for <glyph> and <missing-glyph>' in that specification.
href - SVG: Scalable Vector Graphics
value <url> default value none animatable yes specifications specification status
comment scalable vector graphics (svg) 2the definition of 'href for <a>' in that specification.
in - SVG: Scalable Vector Graphics
--> <feimage xlink:href="https://developer.mozilla.org/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%"/> <feblend in2="sourcegraphic" mode="multiply"/> </filter> </defs> <circle cx="50%" cy="40%" r="40%" fill="#c00" style="filter:url(#imagemultiply);"/> </svg> </div> result specifications specification status
comment filter effects module level 1the definition of 'in' in that specification.
in2 - SVG: Scalable Vector Graphics
value sourcegraphic | sourcealpha | backgroundimage | backgroundalpha | fillpaint | strokepaint | <filter-primitive-reference> default value sourcegraphic for first filter primitive, otherwise result of previous filter primitive animatable yes specifications specification status
comment filter effects module level 1the definition of 'in2 for <fedisplacementmap>' in that specification.
intercept - SVG: Scalable Vector Graphics
height="200" fill="url(#gradient)" style="filter: url(#componenttransfer1);" /> <rect x="0" y="0" width="200" height="200" fill="url(#gradient)" style="filter: url(#componenttransfer2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications specification status
comment filter effects module level 1the definition of 'intercept' in that specification.
k - SVG: Scalable Vector Graphics
specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'k' in that specification.
k1 - SVG: Scalable Vector Graphics
dth="200" height="200" style="filter: url(#composite1);" /> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="200" height="200" style="filter: url(#composite2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications specification status
comment filter effects module level 1the definition of 'k1' in that specification.
k2 - SVG: Scalable Vector Graphics
dth="200" height="200" style="filter: url(#composite1);" /> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="200" height="200" style="filter: url(#composite2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications specification status
comment filter effects module level 1the definition of 'k2' in that specification.
k3 - SVG: Scalable Vector Graphics
dth="200" height="200" style="filter: url(#composite1);" /> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="200" height="200" style="filter: url(#composite2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications specification status
comment filter effects module level 1the definition of 'k3' in that specification.
k4 - SVG: Scalable Vector Graphics
dth="200" height="200" style="filter: url(#composite1);" /> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="200" height="200" style="filter: url(#composite2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications specification status
comment filter effects module level 1the definition of 'k4' in that specification.
kernelUnitLength - SVG: Scalable Vector Graphics
value <number-optional-number> default value pixel in offscreen bitmap animatable yes specifications specification status
comment filter effects module level 1the definition of 'kernelunitlength for <fespecularlighting>' in that specification.
lengthAdjust - SVG: Scalable Vector Graphics
</text> </g> </svg> usage notes value spacing | spacingandglyphs default value spacing animatable yes specifications specification status
comment scalable vector graphics (svg) 2the definition of 'lengthadjust' in that specification.
lighting-color - SVG: Scalable Vector Graphics
ffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting2); transform: translatex(220px);" /> </svg> usage notes value color default value white animatable yes specifications specification status
comment filter effects module level 1the definition of 'lighting-color' in that specification.
limitingConeAngle - SVG: Scalable Vector Graphics
/> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#spotlight1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#spotlight2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0 animatable yes specifications specification status
comment filter effects module level 1the definition of 'limitingconeangle' in that specification.
mask - SVG: Scalable Vector Graphics
eable effects mostly on the following nineteen elements: <a>, <circle>, <clippath>, <ellipse>, <g>, <glyph>, <image>, <line>, <marker>, <mask>, <path>, <pattern>, <polygon>, <polyline>, <rect>, <svg>, <symbol>, <text>, <use> usage notes value see the css property mask default value none animatable yes specifications specification status
comment css masking module level 1the definition of 'mask' in that specification.
name - SVG: Scalable Vector Graphics
specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'name for <font-face-name>' in that specification.
numOctaves - SVG: Scalable Vector Graphics
<filter id="displacementfilter"> <feturbulence basefrequency="0.05" numoctaves="3" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter: url(#displacementfilter)"/> </svg> specifications specification status
comment filter effects module level 1the definition of 'numoctaves' in that specification.
onclick - SVG: Scalable Vector Graphics
>, <tspan>, <use>, <view> html, body, svg { height: 100%; margin: 0; } <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="100" onclick="alert('you have clicked the circle.')" /> </svg> usage notes value <anything> default value none animatable no specifications specification status
comment scalable vector graphics (svg) 2the definition of 'onclick' in that specification.
origin - SVG: Scalable Vector Graphics
only one element is using this attribute: <animatemotion> context notes value default default value default animatable no specifications specification status
comment svg animations level 2the definition of 'origin' in that specification.
paint-order - SVG: Scalable Vector Graphics
rif" font-size="50px" font-weight="bold"> <text x="200" y="75">stroke over</text> <text x="200" y="150" paint-order="stroke" id="stroke-under">stroke under</text> </g> </svg> the example would be rendered as follows: the stroke under effect could be achieved via the following css property: #stroke-under { paint-order: stroke; } specifications specification status
comment scalable vector graphics (svg) 2the definition of 'paint-order' in that specification.
pathLength - SVG: Scalable Vector Graphics
value <number> default value none animatable yes specification specification status
comment scalable vector graphics (svg) 2the definition of 'pathlength' in that specification.
pointer-events - SVG: Scalable Vector Graphics
legend compatibility unknown compatibility unknown specification specification status
comment scalable vector graphics (svg) 2the definition of 'pointer-events' in that specification.
points - SVG: Scalable Vector Graphics
value [ <number>+ ]# default value none animatable yes example html,body,svg { height:100% } <svg viewbox="-10 -10 120 120" xmlns="http://www.w3.org/2000/svg"> <!-- polygon is an closed shape --> <polygon stroke="black" fill="none" points="50,0 21,90 98,35 2,35 79,90" /> </svg> specifications specification status
comment scalable vector graphics (svg) 2the definition of 'points' in that specification.
pointsAtX - SVG: Scalable Vector Graphics
" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#lighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#lighting2); transform: translatex(220px);" /> </svg> usage notes default value 0 value <number> animatable yes specifications specification status
comment filter effects module level 1the definition of 'pointsatx' in that specification.
pointsAtY - SVG: Scalable Vector Graphics
" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#lighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#lighting2); transform: translatex(220px);" /> </svg> usage notes default value 0 value <number> animatable yes specifications specification status
comment filter effects module level 1the definition of 'pointsaty' in that specification.
pointsAtZ - SVG: Scalable Vector Graphics
" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#lighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#lighting2); transform: translatex(220px);" /> </svg> usage notes default value 0 value <number> animatable yes specifications specification status
comment filter effects module level 1the definition of 'pointsatz' in that specification.
r - SVG: Scalable Vector Graphics
value <length> | <percentage> default value 50% animatable yes specifications specification status
comment scalable vector graphics (svg) 2the definition of 'r' in that specification.
radius - SVG: Scalable Vector Graphics
usage notes value <number-optional-number> default value 0 animatable yes specifications specification status
comment filter effects module level 1the definition of 'radius' in that specification.
requiredFeatures - SVG: Scalable Vector Graphics
requiredfeatures="http://www.w3.org/tr/svg11/feature#extensibility" /> <text x="20" y="1152">http://www.w3.org/tr/svg11/feature#extensibility</text> </svg> css .ko { fill: #900; } .ok { fill: #060; } rect { stroke: #000; stroke-width: 2px; } text{ fill: #fff; font: 12px sans-serif; } result see also requiredfeatures.svg specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'requiredfeatures' in that specification.
rotate - SVG: Scalable Vector Graphics
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.
seed - SVG: Scalable Vector Graphics
> <filter id="displacementfilter"> <feturbulence basefrequency="0.05" seed="1000" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter: url(#displacementfilter)"/> </svg> specifications specification status
comment filter effects module level 1the definition of 'seed' in that specification.
specularConstant - SVG: Scalable Vector Graphics
ghting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#specularlighting1);" /> <rect x="0" y="0" width="200" height="200" style="filter: url(#specularlighting2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 1 animatable yes specifications specification status
comment filter effects module level 1the definition of 'specularconstant' in that specification.
specularExponent - SVG: Scalable Vector Graphics
value <number> default value 1 animatable yes specifications specification status
comment filter effects module level 1the definition of 'specularexponent for <fespecularlighting>' in that specification.
spreadMethod - SVG: Scalable Vector Graphics
stop-color="orange"/> </radialgradient> </defs> <rect fill="url(#radialpadgradient)" x="10" y="10" width="100" height="100"/> <rect fill="url(#radialreflectgradient)" x="120" y="10" width="100" height="100"/> <rect fill="url(#radialrepeatgradient)" x="230" y="10" width="100" height="100"/> </svg> result specifications specification status
comment scalable vector graphics (svg) 2the definition of 'spreadmethod for <radialgradient>' in that specification.
stroke-linecap - SVG: Scalable Vector Graphics
legend compatibility unknown compatibility unknown specification specification status
comment scalable vector graphics (svg) 2the definition of 'stroke-linecap' in that specification.
stroke-linejoin - SVG: Scalable Vector Graphics
llowing pink lines highlight the position of the path for each stroke --> <g id="p"> <path d="m1,5 l2,-3 l2,3" stroke="pink" fill="none" stroke-width="0.025" /> <circle cx="1" cy="5" r="0.05" fill="pink" /> <circle cx="3" cy="2" r="0.05" fill="pink" /> <circle cx="5" cy="5" r="0.05" fill="pink" /> </g> </svg> specifications specification status
comment scalable vector graphics (svg) 2the definition of 'stroke-linejoin' in that specification.
stroke-opacity - SVG: Scalable Vector Graphics
legend compatibility unknown compatibility unknown specification specification status
comment scalable vector graphics (svg) 2the definition of 'stroke-opacity' in that specification.
stroke-width - SVG: Scalable Vector Graphics
legend compatibility unknown compatibility unknown specification specification status
comment scalable vector graphics (svg) 2the definition of 'stroke-width' in that specification.
stroke - SVG: Scalable Vector Graphics
nt id="mygradient"> <stop offset="0%" stop-color="green" /> <stop offset="100%" stop-color="white" /> </lineargradient> </defs> <circle cx="15" cy="5" r="4" fill="none" stroke="url(#mygradient)" /> </svg> usage notes value <paint> default value none animatable yes specifications specification status
comment scalable vector graphics (svg) 2the definition of 'stroke' in that specification.
surfaceScale - SVG: Scalable Vector Graphics
value <number> default value 1 animatable yes specifications specification status
comment filter effects module level 1the definition of 'surfacescale for <fediffuselighting>' in that specification.
transform - SVG: Scalable Vector Graphics
example html,body,svg { height:100% } <svg viewbox="-5 -5 10 10" xmlns="http://www.w3.org/2000/svg"> <rect x="-3" y="-3" width="6" height="6" /> <rect x="-3" y="-3" width="6" height="6" fill="red" transform="skewy(30)" /> </svg> specification specification status
comment css transforms level 2the definition of 'transform' in that specification.
u1 - SVG: Scalable Vector Graphics
specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'u1' in that specification.
u2 - SVG: Scalable Vector Graphics
specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'u2' in that specification.
v-alphabetic - SVG: Scalable Vector Graphics
only one element is using this attribute: <font-face> usage notes value <number> default value none animatable no specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'v-alphabetic' in that specification.
vector-effect - SVG: Scalable Vector Graphics
scaled --> <path transform="translate(100,0)scale(4,1)" d="m10,20l40,100l39,200z" stroke="black" stroke-width="2px" fill="none"></path> <!-- fixed--> <path vector-effect="non-scaling-stroke" transform="translate(300,0)scale(4,1)" d="m10,20l40,100l39,200z" stroke="black" stroke-width="2px" fill="none"></path> </svg> result specifications specification status
comment scalable vector graphics (svg) 2the definition of 'vector-effect' in that specification.
version - SVG: Scalable Vector Graphics
<svg version="1.1" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <rect x="10" y="10" width="80" height="80"/> </svg> usage notes value <number> default value none animatable no specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'version' in that specification.
vert-adv-y - SVG: Scalable Vector Graphics
value <number> default value <font>ʼs vert-adv-y value animatable no <number> this value indicates the vertical advance of the glyph in vertical direction specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'vert-adv-y for <glyph> and <missing-glyph>' in that specification.
viewBox - SVG: Scalable Vector Graphics
value <number>?, <number>?, <number>?, <number> default value none animatable yes specification specification status
comment scalable vector graphics (svg) 2the definition of 'viewbox' in that specification.
visibility - SVG: Scalable Vector Graphics
rtical-align: 50%; } button { line-height: 1em; } .invisible { visibility: hidden; } javascript document.queryselector("button").addeventlistener("click", function (evt) { this.queryselector("svg > path:nth-of-type(1)").classlist.toggle("invisible"); this.queryselector("svg > path:nth-of-type(2)").classlist.toggle("invisible"); }); specifications specification status
comment css level 2 (revision 1)the definition of 'visibility' in that specification.
x1 - SVG: Scalable Vector Graphics
l="url(#g0)" /> <!-- here the gradient vector start at 80% of the left bounding limit of the shape it is applied to --> <lineargradient x1="80%" id="g1"> <stop offset="0" stop-color="black" /> <stop offset="100%" stop-color="red" /> </lineargradient> <rect x="11" y="1" width="8" height="8" fill="url(#g1)" /> </svg> specifications specification status
comment scalable vector graphics (svg) 2the definition of 'x1' in that specification.
x2 - SVG: Scalable Vector Graphics
l="url(#g0)" /> <!-- here the gradient vector start at 20% of the left bounding limit of the shape it is applied to --> <lineargradient x2="20%" id="g1"> <stop offset="0" stop-color="black" /> <stop offset="100%" stop-color="red" /> </lineargradient> <rect x="11" y="1" width="8" height="8" fill="url(#g1)" /> </svg> specifications specification status
comment scalable vector graphics (svg) 2the definition of 'x2' in that specification.
xlink:href - SVG: Scalable Vector Graphics
value <iri> default value none animatable yes specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'href for <a>' in that specification.
y1 - SVG: Scalable Vector Graphics
--> <lineargradient y1="100%" id="g1"> <stop offset="5%" stop-color="black" /> <stop offset="50%" stop-color="red" /> <stop offset="95%" stop-color="black" /> </lineargradient> <rect x="11" y="1" width="8" height="8" fill="url(#g1)" /> </svg> specifications specification status
comment scalable vector graphics (svg) 2the definition of 'y1' in that specification.
y2 - SVG: Scalable Vector Graphics
--> <lineargradient y2="100%" id="g1"> <stop offset="5%" stop-color="black" /> <stop offset="50%" stop-color="red" /> <stop offset="95%" stop-color="black" /> </lineargradient> <rect x="11" y="1" width="8" height="8" fill="url(#g1)" /> </svg> specifications specification status
comment scalable vector graphics (svg) 2the definition of 'y2' in that specification.
z - SVG: Scalable Vector Graphics
value <number> default value 1 animatable yes specifications specification status
comment filter effects module level 1the definition of 'z for <fepointlight>' in that specification.
zoomAndPan - SVG: Scalable Vector Graphics
ediffuselighting in="sourcegraphic" zoomandpan="1"> <fepointlight x="60" y="60" z="20" /> </fediffuselighting> </filter> <rect x="0" y="0" width="200" height="200" style="filter: url(#diffuselighting);" /> </svg> usage notes value disable | magnify default value magnify animatable no specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'zoomandpan' in that specification.
<a> - SVG: Scalable Vector Graphics
ntpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> specifications specification status
comment scalable vector graphics (svg) 2the definition of '<a>' in that specification.
<animate> - SVG: Scalable Vector Graphics
designing safer web animation for motion sensitivity · an a list apart article an introduction to the reduced motion media query | css-tricks responsive design for motion | webkit mdn understanding wcag, guideline 2.2 explanations understanding success criterion 2.2.2 | w3c understanding wcag 2.0 specifications specification status
comment svg animations level 2the definition of '<animate>' in that specification.
<animateColor> - SVG: Scalable Vector Graphics
example svg <svg width="120" height="120" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="60" r="50"> <animatecolor attributename="fill" attributetype="xml" from="black" to="red" dur="6s" repeatcount="indefinite"/> </circle> </svg> result specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition)the definition of '<animatecolor>' in that specification.
<circle> - SVG: Scalable Vector Graphics
description, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status
comment scalable vector graphics (svg) 2the definition of '<circle>' in that specification.
<clipPath> - SVG: Scalable Vector Graphics
y, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility usage notes categoriesnonepermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elements<text>, <use> specifications specification status
comment css masking module level 1the definition of '<clippath>' in that specification.
<defs> - SVG: Scalable Vector Graphics
ntpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> specifications specification status
comment scalable vector graphics (svg) 2the definition of '<defs>' in that specification.
<desc> - SVG: Scalable Vector Graphics
/desc> </circle> </svg> attributes this element only includes global attributes global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document element event attributes usage notes categoriesdescriptive elementpermitted contentany elements or character data specifications specification status
comment scalable vector graphics (svg) 2the definition of '<desc>' in that specification.
<discard> - SVG: Scalable Vector Graphics
usage context categoriesanimation elementpermitted contentany number of the following elements, in any order:descriptive elements<script> attributes global attributes conditional processing attributes core attributes aria attributes specific attributes begin href (but note that <discard> has never supported xlink:href) specifications specification status
comment svg animations level 2the definition of '<discard>' in that specification.
<ellipse> - SVG: Scalable Vector Graphics
description, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status
comment scalable vector graphics (svg) 2the definition of '<ellipse>' in that specification.
<feBlend> - SVG: Scalable Vector Graphics
00%" height="100%" flood-color="green" flood-opacity="1"/> <feblend in="sourcegraphic" in2="floodfill" mode="multiply"/> </filter> </defs> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%" style="filter:url(#spotlight);"/> </svg> result specifications specification status
comment filter effects module level 1the definition of '<feblend>' in that specification.
<feColorMatrix> - SVG: Scalable Vector Graphics
<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 screenshotlive sample specifications specification status
comment filter effects module level 1the definition of '<fecolormatrix>' in that specification.
<feComponentTransfer> - SVG: Scalable Vector Graphics
rl(#discrete)"></rect> <text x="0" y="220">linear function</text> <rect x="0" y="230" width="100%" height="20" style="filter:url(#linear)"></rect> <text x="0" y="270">gamma function</text> <rect x="0" y="280" width="100%" height="20" style="filter:url(#gamma)"></rect> </g> </svg> css rect { fill: url(#rainbow); } result specifications specification status
comment filter effects module level 1the definition of '<fecomponenttransfer>' in that specification.
<feConvolveMatrix> - SVG: Scalable Vector Graphics
nk="http://www.w3.org/1999/xlink"> <defs> <filter id="emboss"> <feconvolvematrix kernelmatrix="3 0 0 0 0 0 0 0 -3"/> </filter> </defs> <image xlink:href="/files/12668/mdn.svg" x="0" y="0" height="200" width="200" style="filter:url(#emboss);" /> </svg> result specifications specification status
comment filter effects module level 1the definition of '<feconvolvematrix>' in that specification.
<feDiffuseLighting> - SVG: Scalable Vector Graphics
pointsatx="390" pointsaty="80" pointsatz="0"/> </fediffuselighting> <fecomposite in="sourcegraphic" in2="light" operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/> </filter> <circle cx="390" cy="80" r="50" fill="green" filter="url(#lightme3)" /> </svg> expected rendering: live rendering: specifications specification status
comment filter effects module level 1the definition of '<fediffuselighting>' in that specification.
<feDisplacementMap> - SVG: Scalable Vector Graphics
acementfilter"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter: url(#displacementfilter)"/> </svg> specifications specification status
comment filter effects module level 1the definition of '<fedisplacementmap>' in that specification.
<feDropShadow> - SVG: Scalable Vector Graphics
es core attributes most notably: id styling attributes class, style filter primitive attributes height, in, result, x, y, width presentation attributes most notably: flood-color, flood-opacity usage notes categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <script>, <set> specifications specification status
comment filter effects module level 1the definition of '<fedropshadow>' in that specification.
<feFlood> - SVG: Scalable Vector Graphics
ample html content <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"> <defs> <filter id="floodfilter" filterunits="userspaceonuse"> <feflood x="50" y="50" width="100" height="100" flood-color="green" flood-opacity="0.5"/> </filter> </defs> <use style="filter: url(#floodfilter);"/> </svg> result specifications specification status
comment filter effects module level 1the definition of '<feflood>' in that specification.
<feGaussianBlur> - SVG: Scalable Vector Graphics
<filter id="dropshadow"> <fegaussianblur in="sourcealpha" stddeviation="3" /> <feoffset dx="2" dy="4" /> <femerge> <femergenode /> <femergenode in="sourcegraphic" /> </femerge> </filter> <circle cx="60" cy="60" r="50" fill="green" filter="url(#dropshadow)" /> </svg> result screenshotlive sample specifications specification status
comment filter effects module level 1the definition of '<fegaussianblur>' in that specification.
<feImage> - SVG: Scalable Vector Graphics
mple 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(#image);"/> </svg> result specifications specification status
comment filter effects module level 1the definition of '<feimage>' in that specification.
<feMorphology> - SVG: Scalable Vector Graphics
> </filter> <filter id="dilate"> <femorphology operator="dilate" radius="2"/> </filter> </svg> <p>normal text</p> <p id="thin">thinned text</p> <p id="thick">fattened text</p> css p { margin: 0; font-family: arial, helvetica, sans-serif; font-size: 3em; } #thin { filter: url(#erode); } #thick { filter: url(#dilate); } specifications specification status
comment filter effects module level 1the definition of '<femorphology>' in that specification.
<feOffset> - SVG: Scalable Vector Graphics
w.w3.org/2000/svg"> <defs> <filter id="offset" width="180" height="180"> <feoffset in="sourcegraphic" dx="60" dy="60" /> </filter> </defs> <rect x="0" y="0" width="100" height="100" stroke="black" fill="green"/> <rect x="0" y="0" width="100" height="100" stroke="black" fill="green" filter="url(#offset)"/> </svg> result specifications specification status
comment filter effects module level 1the definition of '<feoffset>' in that specification.
<fePointLight> - SVG: Scalable Vector Graphics
"50" y="50" z="220"/> </fespecularlighting> <fecomposite in="sourcegraphic" in2="spotlight" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/> </filter> </defs> <image xlink:href="/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%" style="filter:url(#spotlight);"/> </svg> result specifications specification status
comment filter effects module level 1the definition of '<fepointlight>' in that specification.
<feSpecularLighting> - SVG: Scalable Vector Graphics
esult="specout" specularexponent="20" lighting-color="#bbbbbb"> <fepointlight x="50" y="75" z="200"/> </fespecularlighting> <fecomposite in="sourcegraphic" in2="specout" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/> </filter> <circle cx="110" cy="110" r="100" style="filter:url(#filter)"/> </svg> result specifications specification status
comment filter effects module level 1the definition of '<fespecularlighting>' in that specification.
<feSpotLight> - SVG: Scalable Vector Graphics
" limitingconeangle="5.5" /> </fespecularlighting> <fecomposite in="sourcegraphic" in2="spotlight" operator="out" k1="0" k2="1" k3="1" k4="0"/> </filter> </defs> <image xlink:href="/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%" style="filter:url(#spotlight);"/> </svg> result specifications specification status
comment filter effects module level 1the definition of '<fespotlight>' in that specification.
<feTile> - SVG: Scalable Vector Graphics
> <filter id="tile" x="0" y="0" width="100%" height="100%"> <fetile in="sourcegraphic" x="50" y="50" width="100" height="100" /> <fetile/> </filter> </defs> <image xlink:href="/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%" style="filter:url(#tile);"/> </svg> result specifications specification status
comment filter effects module level 1the definition of '<fetile>' in that specification.
<feTurbulence> - SVG: Scalable Vector Graphics
acementfilter"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter: url(#displacementfilter)"/> </svg> specifications specification status
comment filter effects module level 1the definition of '<feturbulence>' in that specification.
<filter> - SVG: Scalable Vector Graphics
example svg <svg width="230" height="120" xmlns="http://www.w3.org/2000/svg"> <filter id="blurme"> <fegaussianblur stddeviation="5"/> </filter> <circle cx="60" cy="60" r="50" fill="green" /> <circle cx="170" cy="60" r="50" fill="green" filter="url(#blurme)" /> </svg> result screenshotlive sample specifications specification status
comment filter effects module level 1the definition of '<filter>' in that specification.
<foreignObject> - SVG: Scalable Vector Graphics
owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesnonepermitted contentany elements or character data specifications specification status
comment scalable vector graphics (svg) 2the definition of '<foreignobject>' in that specification.
<g> - SVG: Scalable Vector Graphics
ntpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> specifications specification status
comment scalable vector graphics (svg) 2the definition of '<g>' in that specification.
<glyph> - SVG: Scalable Vector Graphics
<glyph unicode="!" horiz-adv-x="80" d="m0,0h200v200h-200z"></glyph> <glyph unicode="@" d="m0,50l100,300l400,100z"></glyph> </font> </defs> <text x="100" y="100" style="font-family: 'super sans', helvetica, sans-serif; font-weight: bold; font-style: normal">text using embe@dded font!</text> </svg> result specifications specification status
comment scalable vector graphics (svg) 1.1 (second edition)the definition of '<glyph>' in that specification.
<image> - SVG: Scalable Vector Graphics
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.
<line> - SVG: Scalable Vector Graphics
description, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status
comment scalable vector graphics (svg) 2the definition of '<line>' in that specification.
<linearGradient> - SVG: Scalable Vector Graphics
ashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility xlink attributes xlink:href, xlink:title usage notes categoriesgradient elementpermitted contentany number of the following elements, in any order:descriptive elements<animate>, <animatetransform>, <set>, <stop> specifications specification status
comment scalable vector graphics (svg) 2the definition of '<lineargradient>' in that specification.
<marker> - SVG: Scalable Vector Graphics
ntpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> specifications specification status
comment svg markersthe definition of '<marker>' in that specification.
<mask> - SVG: Scalable Vector Graphics
ntpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> specifications specification status
comment css masking module level 1the definition of '<mask>' in that specification.
<metadata> - SVG: Scalable Vector Graphics
--> <g id="cablen" transform="translate(242 88)"> <title>cable n</title> <desc>10baset twisted pair cable</desc> <path d="m0,0c0,-70 20,-50 60,-50"/> </g> </svg> specifications specification status
comment scalable vector graphics (svg) 2the definition of '<metadata>' in that specification.
<mpath> - SVG: Scalable Vector Graphics
--> <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.
<path> - SVG: Scalable Vector Graphics
a-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesgraphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status
comment svg pathsthe definition of '<path>' in that specification.
<pattern> - SVG: Scalable Vector Graphics
ntpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> specifications specification status
comment scalable vector graphics (svg) 2the definition of '<pattern>' in that specification.
<polygon> - SVG: Scalable Vector Graphics
description, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status
comment scalable vector graphics (svg) 2the definition of '<polygon>' in that specification.
<polyline> - SVG: Scalable Vector Graphics
description, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status
comment scalable vector graphics (svg) 2the definition of '<polyline>' in that specification.
<radialGradient> - SVG: Scalable Vector Graphics
ashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility xlink attributes xlink:href, xlink:title usage notes categoriesgradient elementpermitted contentany number of the following elements, in any order:descriptive elements<animate>, <animatetransform>, <set>, <stop> specifications specification status
comment scalable vector graphics (svg) 2the definition of '<radialgradient>' in that specification.
<rect> - SVG: Scalable Vector Graphics
description, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesbasic shape element, graphics element, shape elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status
comment scalable vector graphics (svg) 2the definition of '<rect>' in that specification.
<script> - SVG: Scalable Vector Graphics
value type: <url> ; default value: none; animatable: no global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document element event attributes usage notes categoriesnonepermitted contentany elements or character data specifications specification status
comment scalable vector graphics (svg) 2the definition of '<script>' in that specification.
<set> - SVG: Scalable Vector Graphics
ibutes most notably: onbegin, onend, onrepeat global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document element event attributes usage notes categoriesanimation elementpermitted contentany number of the following elements, in any order:descriptive elements specifications specification status
comment svg animations level 2the definition of '<set>' in that specification.
<stop> - SVG: Scalable Vector Graphics
styling attributes class, style event attributes global event attributes, document element event attributes presentation attributes most notably: color, display, stop-color, stop-opacity, visibility usage notes categoriesgradient elementpermitted contentany number of the following elements, in any order:<animate>, <animatecolor>, <set> specifications specification status
comment scalable vector graphics (svg) 2the definition of '<stop>' in that specification.
<style> - SVG: Scalable Vector Graphics
value type: <string>; default value: none; animatable: no global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document element event attributes usage notes categoriesnonepermitted contentany elements or character data specifications specification status
comment scalable vector graphics (svg) 2the definition of '<style>' in that specification.
<svg> - SVG: Scalable Vector Graphics
ntpermitted contentany number of the following elements, in any order:animation elementsdescriptive elementsshape elementsstructural elementsgradient elements<a>, <altglyphdef>, <clippath>, <color-profile>, <cursor>, <filter>, <font>, <font-face>, <foreignobject>, <image>, <marker>, <mask>, <pattern>, <script>, <style>, <switch>, <text>, <view> specifications specification status
comment scalable vector graphics (svg) 2the definition of '<svg>' in that specification.
<switch> - SVG: Scalable Vector Graphics
<text systemlanguage="en-au">g'day!</text> <text systemlanguage="en">hello!</text> <text systemlanguage="es">hola!</text> <text systemlanguage="fr">bonjour!</text> <text systemlanguage="ja">こんにちは</text> <text systemlanguage="ru">Привет!</text> <text>☺</text> </switch> </svg> result specifications specification status
comment scalable vector graphics (svg) 2the definition of '<switch>' in that specification.
<text> - SVG: Scalable Vector Graphics
ria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriesgraphics element, text content elementpermitted contentcharacter data and any number of the following elements, in any order:animation elementsdescriptive elementstext content elements<a> specifications specification status
comment scalable vector graphics (svg) 2the definition of '<text>' in that specification.
<textPath> - SVG: Scalable Vector Graphics
t, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role xlink attributes xlink:title usage notes categoriestext content element, text content child elementpermitted contentcharacter data and any number of the following elements, in any order:descriptive elements<a>, <altglyph>, <animate>, <animatecolor>, <set>, <tref>, <tspan> specifications specification status
comment scalable vector graphics (svg) 2the definition of '<textpath>' in that specification.
<title> — the SVG accessible name element - SVG: Scalable Vector Graphics
</title> </rect> </svg> attributes this element only includes global attributes global attributes core attributes most notably: id styling attributes class, style event attributes global event attributes, document element event attributes usage notes categoriesdescriptive elementpermitted contentany elements or character data specifications specification status
comment scalable vector graphics (svg) 2the definition of '<title>' in that specification.
<tref> - SVG: Scalable Vector Graphics
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.
<tspan> - SVG: Scalable Vector Graphics
elected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role usage notes categoriestext content element, text content child elementpermitted contentcharacter data and any number of the following elements, in any order:descriptive elements<a>, <altglyph>, <animate>, <animatecolor>, <set>, <tref>, <tspan> specifications specification status
comment scalable vector graphics (svg) 2the definition of '<tspan>' in that specification.
<use> - SVG: Scalable Vector Graphics
ria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role xlink attributes xlink:href, xlink:title usage notes categoriesgraphics element, graphics referencing element, structural elementpermitted contentany number of the following elements, in any order:animation elementsdescriptive elements specifications specification status
comment scalable vector graphics (svg) 2the definition of '<use>' in that specification.
Web Components
specifications specification status
comment html living standardthe definition of '<template> element' in that specification.
xml:base - XML: Extensible Markup Language
work-arounds xml:base support in old browsers https://gist.github.com/leonderijke/c5cf7c5b2e424c0061d2 specifications specification status
comment xml base (second edition) recommendation ...
child - XPath
specifications specification status
comment xpath 3.1the definition of 'child' in that specification.
self - XPath
specifications specification status
comment xpath 3.1the definition of 'self' in that specification.